@atlaskit/task-decision 17.2.2 → 17.3.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/task-decision
 
+## 17.3.1
+
+### Patch Changes
+
+- [`57f3b255fb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/57f3b255fb2) - [ux] AK-608: Action items are keyboard accessible
+
+## 17.3.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - AK-735 Update decision icon color
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.2.4
+
+### Patch Changes
+
+- [`35611ad44a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35611ad44a5) - AK-601 Changed checkbox colors to meet minimum contrast requirements
+- [`544dc89eb9e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/544dc89eb9e) - import more contrast color for text in decisions list
+
+## 17.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.2.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAndFireEventInElementsChannel = exports.fabricElementsChannel = void 0;
+exports.fabricElementsChannel = exports.createAndFireEventInElementsChannel = void 0;
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 

package/dist/cjs/api/TaskDecisionResource.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ItemStateManager = exports.RecentUpdates = exports.ACTION_DECISION_FPS_EVENTS = exports.DECISION_STATE_CHANGED_FPS_EVENT = exports.DECISION_ARCHIVED_FPS_EVENT = exports.DECISION_DELETED_FPS_EVENT = exports.DECISION_EDITED_FPS_EVENT = exports.DECISION_CREATED_FPS_EVENT = exports.ACTION_STATE_CHANGED_FPS_EVENT = exports.ACTION_ARCHIVED_FPS_EVENT = exports.ACTION_DELETED_FPS_EVENT = exports.ACTION_EDITED_FPS_EVENT = exports.ACTION_CREATED_FPS_EVENT = void 0;
+exports.default = exports.RecentUpdates = exports.ItemStateManager = exports.DECISION_STATE_CHANGED_FPS_EVENT = exports.DECISION_EDITED_FPS_EVENT = exports.DECISION_DELETED_FPS_EVENT = exports.DECISION_CREATED_FPS_EVENT = exports.DECISION_ARCHIVED_FPS_EVENT = exports.ACTION_STATE_CHANGED_FPS_EVENT = exports.ACTION_EDITED_FPS_EVENT = exports.ACTION_DELETED_FPS_EVENT = exports.ACTION_DECISION_FPS_EVENTS = exports.ACTION_CREATED_FPS_EVENT = exports.ACTION_ARCHIVED_FPS_EVENT = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,9 +23,9 @@ var _types = require("../types");
 
 var _typeHelpers = require("../type-helpers");
 
-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 ACTION_CREATED_FPS_EVENT = 'avi:task-decision-service:created:action';
 exports.ACTION_CREATED_FPS_EVENT = ACTION_CREATED_FPS_EVENT;

package/dist/cjs/api/TaskDecisionUtils.js

@@ -5,22 +5,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findIndex = exports.convertServiceTaskStateToBaseItem = exports.convertServiceTaskToTask = void 0;
+exports.findIndex = exports.convertServiceTaskToTask = exports.convertServiceTaskStateToBaseItem = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-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; }
+var _excluded = ["creationDate", "lastUpdateDate", "creatorId", "lastUpdaterId"],
+    _excluded2 = ["lastUpdateDate"];
 
-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 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 = 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 convertServiceTaskToTask = function convertServiceTaskToTask(serviceTask) {
   var creationDate = serviceTask.creationDate,
       lastUpdateDate = serviceTask.lastUpdateDate,
       creatorId = serviceTask.creatorId,
       lastUpdaterId = serviceTask.lastUpdaterId,
-      other = (0, _objectWithoutProperties2.default)(serviceTask, ["creationDate", "lastUpdateDate", "creatorId", "lastUpdaterId"]);
+      other = (0, _objectWithoutProperties2.default)(serviceTask, _excluded);
   return _objectSpread({
     creationDate: creationDate && new Date(creationDate) || undefined,
     lastUpdateDate: new Date(lastUpdateDate),
@@ -33,7 +36,7 @@ exports.convertServiceTaskToTask = convertServiceTaskToTask;
 
 var convertServiceTaskStateToBaseItem = function convertServiceTaskStateToBaseItem(serviceTaskInfo) {
   var lastUpdateDate = serviceTaskInfo.lastUpdateDate,
-      other = (0, _objectWithoutProperties2.default)(serviceTaskInfo, ["lastUpdateDate"]);
+      other = (0, _objectWithoutProperties2.default)(serviceTaskInfo, _excluded2);
   return _objectSpread({
     type: 'TASK',
     lastUpdateDate: new Date(lastUpdateDate)

package/dist/cjs/components/ResourcedTaskItem.js

@@ -33,9 +33,9 @@ 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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -186,13 +186,15 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
           placeholder = _this$props3.placeholder,
           taskId = _this$props3.taskId,
           disabled = _this$props3.disabled,
-          dataAttributes = _this$props3.dataAttributes;
+          dataAttributes = _this$props3.dataAttributes,
+          isRenderer = _this$props3.isRenderer;
       return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
         }
       }, /*#__PURE__*/_react.default.createElement(_TaskItem.default, {
         isDone: isDone,
+        isRenderer: isRenderer,
         taskId: taskId,
         onChange: this.handleOnChange,
         appearance: appearance,

package/dist/cjs/components/TaskItem.js

@@ -82,6 +82,11 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         })(createAnalyticsEvent);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnKeyPress", function (event) {
+      if (event.key === 'Enter') {
+        _this.handleOnChange(event);
+      }
+    });
     _this.checkBoxId = getCheckBoxId(props.taskId);
     return _this;
   }
@@ -99,6 +104,7 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           appearance = _this$props2.appearance,
           isDone = _this$props2.isDone,
+          isRenderer = _this$props2.isRenderer,
           contentRef = _this$props2.contentRef,
           children = _this$props2.children,
           placeholder = _this$props2.placeholder,
@@ -107,7 +113,8 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
           dataAttributes = _this$props2.dataAttributes;
 
       var icon = /*#__PURE__*/_react.default.createElement(_TaskItem.CheckBoxWrapper, {
-        contentEditable: false
+        contentEditable: false,
+        isRenderer: isRenderer
       }, /*#__PURE__*/_react.default.createElement("input", {
         id: this.checkBoxId,
         "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
@@ -116,7 +123,8 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         onChange: this.handleOnChange,
         checked: !!isDone,
         disabled: !!disabled,
-        suppressHydrationWarning: true
+        suppressHydrationWarning: true,
+        onKeyPress: this.handleOnKeyPress
       }), /*#__PURE__*/_react.default.createElement("label", {
         htmlFor: this.checkBoxId,
         suppressHydrationWarning: true

package/dist/cjs/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "DecisionList", {
     return _DecisionList.default;
   }
 });
+Object.defineProperty(exports, "PubSubSpecialEventType", {
+  enumerable: true,
+  get: function get() {
+    return _types.PubSubSpecialEventType;
+  }
+});
 Object.defineProperty(exports, "ResourcedTaskItem", {
   enumerable: true,
   get: function get() {
@@ -41,12 +47,6 @@ Object.defineProperty(exports, "TaskList", {
     return _TaskList.default;
   }
 });
-Object.defineProperty(exports, "PubSubSpecialEventType", {
-  enumerable: true,
-  get: function get() {
-    return _types.PubSubSpecialEventType;
-  }
-});
 
 var _DecisionItem = _interopRequireDefault(require("./components/DecisionItem"));
 

package/dist/cjs/styled/DecisionItem.js

@@ -21,7 +21,7 @@ var _templateObject;
 
 var EditorIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
   return props.showPlaceholder ? _colors.N100 : (0, _components.themed)({
-    light: _colors.G300,
+    light: _colors.G400,
     dark: _colors.G200
   });
 }, (0, _constants.gridSize)() * 1.5);

package/dist/cjs/styled/Item.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ParticipantWrapper = exports.DecisionWrapper = exports.TaskWrapper = exports.ContentWrapper = void 0;
+exports.TaskWrapper = exports.ParticipantWrapper = exports.DecisionWrapper = exports.ContentWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/styled/ListWrapper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DecisionListWrapper = exports.TaskListWrapper = void 0;
+exports.TaskListWrapper = exports.DecisionListWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/styled/Placeholder.js

@@ -15,8 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var Placeholder = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "\n  position: absolute;\n  color: ", ";\n  pointer-events: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: calc(100% - 50px);\n"])), function (props) {
+var Placeholder = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  position: absolute;\n  color: ", ";\n  pointer-events: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: calc(100% - 50px);\n"])), function (props) {
   return "0 0 0 ".concat(props.offset, "px;");
-}, _colors.N80);
+}, _colors.N100);
 
 exports.Placeholder = Placeholder;

package/dist/cjs/styled/TaskItem.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.CheckBoxWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _components = require("@atlaskit/theme/components");
 
@@ -17,15 +19,24 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _templateObject;
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + label {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:not([disabled]) + label:hover::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + label {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + label::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n        border-radius: 0; /* FS-1392 */\n      }\n      &:not([disabled]) + label:hover::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
+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; }
+
+var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + label {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + label:after {\n      ", "\n    }\n    &:not([disabled]) + label:hover::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + label {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + label::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]) + label:hover::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
   light: _colors.N0,
-  dark: _colors.DN80
-}), (0, _components.themed)({
-  light: _colors.N50,
-  dark: _colors.DN90
+  dark: _colors.DN100
 }), (0, _components.themed)({
+  light: _colors.N90,
+  dark: _colors.DN200
+}), function (props) {
+  return props.isRenderer ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              outline: 2px solid ", ";\n            "])), (0, _components.themed)({
+    light: _colors.B300,
+    dark: _colors.B75
+  })) : '';
+}, (0, _components.themed)({
   light: _colors.N30,
   dark: _colors.B75
 }));

package/dist/cjs/type-helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleTaskState = exports.objectKeyToString = exports.toObjectKey = exports.isTask = exports.isDecision = void 0;
+exports.toggleTaskState = exports.toObjectKey = exports.objectKeyToString = exports.isTask = exports.isDecision = void 0;
 
 var isDecision = function isDecision(item) {
   return !!(item && item.type === 'DECISION');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.2.2",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/es2019/components/ResourcedTaskItem.js

@@ -137,7 +137,8 @@ export default class ResourcedTaskItem extends PureComponent {
       placeholder,
       taskId,
       disabled,
-      dataAttributes
+      dataAttributes,
+      isRenderer
     } = this.props;
     return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
@@ -145,6 +146,7 @@ export default class ResourcedTaskItem extends PureComponent {
       }
     }, /*#__PURE__*/React.createElement(TaskItem, {
       isDone: isDone,
+      isRenderer: isRenderer,
       taskId: taskId,
       onChange: this.handleOnChange,
       appearance: appearance,

package/dist/es2019/components/TaskItem.js

@@ -40,6 +40,12 @@ export class TaskItem extends PureComponent {
       }
     });
 
+    _defineProperty(this, "handleOnKeyPress", event => {
+      if (event.key === 'Enter') {
+        this.handleOnChange(event);
+      }
+    });
+
     this.checkBoxId = getCheckBoxId(props.taskId);
   }
 
@@ -53,6 +59,7 @@ export class TaskItem extends PureComponent {
     const {
       appearance,
       isDone,
+      isRenderer,
       contentRef,
       children,
       placeholder,
@@ -61,7 +68,8 @@ export class TaskItem extends PureComponent {
       dataAttributes
     } = this.props;
     const icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
-      contentEditable: false
+      contentEditable: false,
+      isRenderer: isRenderer
     }, /*#__PURE__*/React.createElement("input", {
       id: this.checkBoxId,
       "aria-labelledby": `${this.checkBoxId}-wrapper`,
@@ -70,7 +78,8 @@ export class TaskItem extends PureComponent {
       onChange: this.handleOnChange,
       checked: !!isDone,
       disabled: !!disabled,
-      suppressHydrationWarning: true
+      suppressHydrationWarning: true,
+      onKeyPress: this.handleOnKeyPress
     }), /*#__PURE__*/React.createElement("label", {
       htmlFor: this.checkBoxId,
       suppressHydrationWarning: true

package/dist/es2019/styled/DecisionItem.js

@@ -3,13 +3,13 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N100, G300, G200 } from '@atlaskit/theme/colors';
+import { N100, G400, G200 } from '@atlaskit/theme/colors';
 export const EditorIconWrapper = styled.span`
   flex: 0 0 16px;
   height: 16px;
   width: 16px;
   color: ${props => props.showPlaceholder ? N100 : themed({
-  light: G300,
+  light: G400,
   dark: G200
 })};
   margin: 4px ${gridSize() * 1.5}px 0 0;

package/dist/es2019/styled/Placeholder.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
-import { N80 } from '@atlaskit/theme/colors';
+import { N100 } from '@atlaskit/theme/colors';
 export const Placeholder = styled.span`
-  margin: ${props => `0 0 0 ${props.offset}px;`}
+  margin: ${props => `0 0 0 ${props.offset}px;`};
   position: absolute;
-  color: ${N80};
+  color: ${N100};
   pointer-events: none;
   text-overflow: ellipsis;
   overflow: hidden;

package/dist/es2019/styled/TaskItem.js

@@ -1,9 +1,9 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
+import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N0, DN80, N50, DN90, N30, B75 } from '@atlaskit/theme/colors';
+import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
 export const CheckBoxWrapper = styled.span`
   flex: 0 0 16px;
   width: 16px;
@@ -31,15 +31,15 @@ export const CheckBoxWrapper = styled.span`
       &::after {
         background: ${themed({
   light: N0,
-  dark: DN80
+  dark: DN100
 })}
         background-size: 16px;
         border-radius: 3px;
         border-style: solid;
         border-width: 1px;
         border-color: ${themed({
-  light: N50,
-  dark: DN90
+  light: N90,
+  dark: DN200
 })}
         box-sizing: border-box;
         content: '';
@@ -52,6 +52,14 @@ export const CheckBoxWrapper = styled.span`
         transform: translate(-50%, -50%);
       }
     }
+    &:focus-visible + label:after {
+      ${props => props.isRenderer ? css`
+              outline: 2px solid ${themed({
+  light: B300,
+  dark: B75
+})};
+            ` : ''}
+    }
     &:not([disabled]) + label:hover::after {
       background: ${themed({
   light: N30,
@@ -70,7 +78,6 @@ export const CheckBoxWrapper = styled.span`
         background-size: 16px;
         border: 0;
         border-color: transparent;
-        border-radius: 0; /* FS-1392 */
       }
       &:not([disabled]) + label:hover::after {
         background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.2.2",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/esm/api/TaskDecisionResource.js

@@ -2,9 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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; }
 
 import uuid from 'uuid';
 import { utils } from '@atlaskit/util-service-support';

package/dist/esm/api/TaskDecisionUtils.js

@@ -1,16 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["creationDate", "lastUpdateDate", "creatorId", "lastUpdaterId"],
+    _excluded2 = ["lastUpdateDate"];
 
-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; }
 
 export var convertServiceTaskToTask = function convertServiceTaskToTask(serviceTask) {
   var creationDate = serviceTask.creationDate,
       lastUpdateDate = serviceTask.lastUpdateDate,
       creatorId = serviceTask.creatorId,
       lastUpdaterId = serviceTask.lastUpdaterId,
-      other = _objectWithoutProperties(serviceTask, ["creationDate", "lastUpdateDate", "creatorId", "lastUpdaterId"]);
+      other = _objectWithoutProperties(serviceTask, _excluded);
 
   return _objectSpread({
     creationDate: creationDate && new Date(creationDate) || undefined,
@@ -21,7 +23,7 @@ export var convertServiceTaskToTask = function convertServiceTaskToTask(serviceT
 };
 export var convertServiceTaskStateToBaseItem = function convertServiceTaskStateToBaseItem(serviceTaskInfo) {
   var lastUpdateDate = serviceTaskInfo.lastUpdateDate,
-      other = _objectWithoutProperties(serviceTaskInfo, ["lastUpdateDate"]);
+      other = _objectWithoutProperties(serviceTaskInfo, _excluded2);
 
   return _objectSpread({
     type: 'TASK',

package/dist/esm/components/ResourcedTaskItem.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -169,13 +169,15 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
           placeholder = _this$props3.placeholder,
           taskId = _this$props3.taskId,
           disabled = _this$props3.disabled,
-          dataAttributes = _this$props3.dataAttributes;
+          dataAttributes = _this$props3.dataAttributes,
+          isRenderer = _this$props3.isRenderer;
       return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
         }
       }, /*#__PURE__*/React.createElement(TaskItem, {
         isDone: isDone,
+        isRenderer: isRenderer,
         taskId: taskId,
         onChange: this.handleOnChange,
         appearance: appearance,

package/dist/esm/components/TaskItem.js

@@ -60,6 +60,12 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleOnKeyPress", function (event) {
+      if (event.key === 'Enter') {
+        _this.handleOnChange(event);
+      }
+    });
+
     _this.checkBoxId = getCheckBoxId(props.taskId);
     return _this;
   }
@@ -77,6 +83,7 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           appearance = _this$props2.appearance,
           isDone = _this$props2.isDone,
+          isRenderer = _this$props2.isRenderer,
           contentRef = _this$props2.contentRef,
           children = _this$props2.children,
           placeholder = _this$props2.placeholder,
@@ -84,7 +91,8 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
           disabled = _this$props2.disabled,
           dataAttributes = _this$props2.dataAttributes;
       var icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
-        contentEditable: false
+        contentEditable: false,
+        isRenderer: isRenderer
       }, /*#__PURE__*/React.createElement("input", {
         id: this.checkBoxId,
         "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
@@ -93,7 +101,8 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
         onChange: this.handleOnChange,
         checked: !!isDone,
         disabled: !!disabled,
-        suppressHydrationWarning: true
+        suppressHydrationWarning: true,
+        onKeyPress: this.handleOnKeyPress
       }), /*#__PURE__*/React.createElement("label", {
         htmlFor: this.checkBoxId,
         suppressHydrationWarning: true

package/dist/esm/styled/DecisionItem.js

@@ -7,10 +7,10 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N100, G300, G200 } from '@atlaskit/theme/colors';
+import { N100, G400, G200 } from '@atlaskit/theme/colors';
 export var EditorIconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
   return props.showPlaceholder ? N100 : themed({
-    light: G300,
+    light: G400,
     dark: G200
   });
 }, gridSize() * 1.5);

package/dist/esm/styled/Placeholder.js

@@ -5,7 +5,7 @@ var _templateObject;
 import styled from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
-import { N80 } from '@atlaskit/theme/colors';
-export var Placeholder = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", "\n  position: absolute;\n  color: ", ";\n  pointer-events: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: calc(100% - 50px);\n"])), function (props) {
+import { N100 } from '@atlaskit/theme/colors';
+export var Placeholder = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", ";\n  position: absolute;\n  color: ", ";\n  pointer-events: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: calc(100% - 50px);\n"])), function (props) {
   return "0 0 0 ".concat(props.offset, "px;");
-}, N80);
+}, N100);

package/dist/esm/styled/TaskItem.js

@@ -1,20 +1,25 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import styled from 'styled-components'; // @ts-ignore: unused variable
+import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N0, DN80, N50, DN90, N30, B75 } from '@atlaskit/theme/colors';
-export var CheckBoxWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + label {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:not([disabled]) + label:hover::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + label {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + label::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n        border-radius: 0; /* FS-1392 */\n      }\n      &:not([disabled]) + label:hover::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), gridSize(), themed({
+import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
+export var CheckBoxWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + label {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + label:after {\n      ", "\n    }\n    &:not([disabled]) + label:hover::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + label {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + label::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]) + label:hover::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), gridSize(), themed({
   light: N0,
-  dark: DN80
-}), themed({
-  light: N50,
-  dark: DN90
+  dark: DN100
 }), themed({
+  light: N90,
+  dark: DN200
+}), function (props) {
+  return props.isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              outline: 2px solid ", ";\n            "])), themed({
+    light: B300,
+    dark: B75
+  })) : '';
+}, themed({
   light: N30,
   dark: B75
 }));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.2.2",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/types/components/ResourcedTaskItem.d.ts

@@ -3,6 +3,7 @@ import { Appearance, ContentRef, TaskDecisionProvider } from '../types';
 export interface Props {
     taskId: string;
     isDone?: boolean;
+    isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;
     children?: any;

package/dist/types/components/TaskItem.d.ts

@@ -5,6 +5,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
     taskId: string;
     isDone?: boolean;
+    isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;
     children?: any;
@@ -22,7 +23,8 @@ export declare class TaskItem extends PureComponent<Props & WithAnalyticsEventsP
     constructor(props: Props & WithAnalyticsEventsProps);
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     handleOnChange: (_evt: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleOnKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/styled/TaskItem.d.ts

@@ -1,2 +1,6 @@
-import { HTMLAttributes, ComponentClass } from 'react';
-export declare const CheckBoxWrapper: ComponentClass<HTMLAttributes<{}>>;
+import { HTMLAttributes, ClassAttributes } from 'react';
+export declare const CheckBoxWrapper: import("styled-components").StyledComponentClass<ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
+    isRenderer: boolean | undefined;
+}, any, ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
+    isRenderer: boolean | undefined;
+}>;

package/dist/types/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ServiceConfig } from '@atlaskit/util-service-support';
 export declare type DecisionState = 'DECIDED';
 export declare type DecisionStatus = 'CREATED';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.2.2",
+  "version": "17.3.1",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,11 +26,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-namespaced-context": "^6.3.0",
+    "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/icon": "^21.8.0",
-    "@atlaskit/theme": "^11.5.0",
-    "@atlaskit/util-service-support": "^6.0.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "uuid": "^3.1.0"
   },
@@ -41,13 +41,13 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.0.0",
-    "@atlaskit/avatar": "^20.4.0",
+    "@atlaskit/analytics-listeners": "^8.2.0",
+    "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-common": "^60.0.0",
+    "@atlaskit/editor-common": "^64.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/renderer": "^81.0.0",
-    "@atlaskit/util-data-test": "^15.0.0",
+    "@atlaskit/renderer": "^86.0.0",
+    "@atlaskit/util-data-test": "^17.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@types/url-search-params": "^0.10.0",
     "date-fns": "^2.17.0",