@atlaskit/task-decision 17.4.3 → 17.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/task-decision
 
+## 17.5.0
+
+### Minor Changes
+
+- [`2112384b533`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2112384b533) - Replaced styled components with emotion.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.4.5
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 17.4.4
+
+### Patch Changes
+
+- [`bffe28af76b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bffe28af76b) - ED-14764: Modified CSS display attribute for checkboxes in action items slightly to address the problem seen in firefox where the cursor does not move to the previous item using the up arrow key. No appearance changes to the component as a result of this modification.
+
 ## 17.4.3
 
 ### Patch Changes

package/dist/cjs/components/DecisionItem.js

@@ -2,84 +2,71 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
 var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/decision"));
 
-var _DecisionItem = require("../styled/DecisionItem");
-
 var _Item = _interopRequireDefault(require("./Item"));
 
-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); }
-
-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 _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); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var DecisionItem = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(DecisionItem, _PureComponent);
-
-  var _super = _createSuper(DecisionItem);
-
-  function DecisionItem() {
-    (0, _classCallCheck2.default)(this, DecisionItem);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(DecisionItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          appearance = _this$props.appearance,
-          children = _this$props.children,
-          contentRef = _this$props.contentRef,
-          placeholder = _this$props.placeholder,
-          showPlaceholder = _this$props.showPlaceholder,
-          dataAttributes = _this$props.dataAttributes;
-
-      var icon = /*#__PURE__*/_react.default.createElement(_DecisionItem.EditorIconWrapper, {
-        showPlaceholder: showPlaceholder
-      }, /*#__PURE__*/_react.default.createElement(_decision.default, {
-        label: "Decision",
-        size: "large"
-      }));
-
-      return /*#__PURE__*/_react.default.createElement(_Item.default, {
-        appearance: appearance,
-        contentRef: contentRef,
-        icon: icon,
-        placeholder: placeholder,
-        showPlaceholder: showPlaceholder,
-        itemType: "DECISION",
-        dataAttributes: dataAttributes
-      }, children);
-    }
-  }]);
-  return DecisionItem;
-}(_react.PureComponent);
-
-exports.default = DecisionItem;
-(0, _defineProperty2.default)(DecisionItem, "defaultProps", {
-  appearance: 'inline'
-});
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+/** @jsx jsx */
+var iconStyles = function iconStyles(showPlaceholder) {
+  return function (theme) {
+    return (0, _react.css)({
+      flex: '0 0 16px',
+      height: '16px',
+      width: '16px',
+      margin: "4px ".concat((0, _constants.gridSize)() * 1.5, "px 0 0"),
+      color: showPlaceholder ? (0, _tokens.token)('color.icon.subtle', _colors.N100) : (0, _components.themed)({
+        light: (0, _tokens.token)('color.icon.success', _colors.G400),
+        dark: (0, _tokens.token)('color.icon.success', _colors.G200)
+      })({
+        theme: theme
+      }),
+      '> span': {
+        margin: '-8px'
+      }
+    });
+  };
+};
+
+var DecisionItem = function DecisionItem(_ref) {
+  var appearance = _ref.appearance,
+      children = _ref.children,
+      contentRef = _ref.contentRef,
+      placeholder = _ref.placeholder,
+      showPlaceholder = _ref.showPlaceholder,
+      dataAttributes = _ref.dataAttributes;
+  var theme = (0, _components.useGlobalTheme)();
+  var icon = (0, _react.jsx)("span", {
+    css: iconStyles(showPlaceholder)(theme)
+  }, (0, _react.jsx)(_decision.default, {
+    label: "Decision",
+    size: "large"
+  }));
+  return (0, _react.jsx)(_Item.default, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "DECISION",
+    dataAttributes: dataAttributes,
+    theme: theme
+  }, children);
+};
+
+var _default = DecisionItem;
+exports.default = _default;

package/dist/cjs/components/DecisionList.js

@@ -21,7 +21,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ListWrapper = require("../styled/ListWrapper");
+var _react2 = require("@emotion/react");
+
+var _listStyle = _interopRequireDefault(require("./listStyle"));
 
 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); }
 
@@ -56,13 +58,14 @@ var DecisionList = /*#__PURE__*/function (_PureComponent) {
       // a new uuid generated by the editor for the cloned content.
 
 
-      return /*#__PURE__*/_react.default.createElement(_ListWrapper.DecisionListWrapper, {
+      return (0, _react2.jsx)("ol", {
+        css: _listStyle.default,
         "data-decision-list-local-id": "",
         "data-node-type": "decisionList"
       }, _react.default.Children.map(children, function (child, idx) {
         var _ref = child.props,
             localId = _ref.localId;
-        return /*#__PURE__*/_react.default.createElement("li", {
+        return (0, _react2.jsx)("li", {
           key: idx,
           "data-decision-local-id": localId || '',
           "data-decision-state": "DECIDED"

package/dist/cjs/components/Item.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,22 +21,69 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _constants = require("@atlaskit/theme/constants");
+var _react2 = require("@emotion/react");
 
-var _Item = require("../styled/Item");
+var _components = require("@atlaskit/theme/components");
 
-var _Placeholder = require("../styled/Placeholder");
+var _tokens = require("@atlaskit/tokens");
 
-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 _colors = require("@atlaskit/theme/colors");
 
-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 _constants = require("@atlaskit/theme/constants");
 
 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); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var contentStyle = (0, _react2.css)({
+  margin: 0,
+  wordWrap: 'break-word',
+  minWidth: 0,
+  flex: '1 1 auto'
+});
+var taskStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'row',
+  padding: '6px 3px',
+  position: 'relative'
+});
+
+var decisionStyles = function decisionStyles(theme) {
+  return (0, _react2.css)({
+    display: 'flex',
+    flexDirection: 'row',
+    margin: "".concat((0, _constants.gridSize)(), "px 0 0 0"),
+    padding: "".concat((0, _constants.gridSize)(), "px"),
+    paddingLeft: "".concat((0, _constants.gridSize)() * 1.5, "px"),
+    borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+    backgroundColor: (0, _components.themed)({
+      light: (0, _tokens.token)('color.background.neutral', _colors.N20A),
+      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+    })({
+      theme: theme
+    }),
+    position: 'relative',
+    '.decision-item': {
+      cursor: 'initial'
+    }
+  });
+};
+
+var placeHolderStyles = function placeHolderStyles(offset) {
+  return (0, _react2.css)({
+    margin: "0 0 0 ".concat(offset, "px"),
+    position: 'absolute',
+    color: (0, _tokens.token)('color.text.subtlest', _colors.N100),
+    pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    maxWidth: 'calc(100% - 50px)'
+  });
+};
+
 var Item = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Item, _PureComponent);
 
@@ -63,9 +108,10 @@ var Item = /*#__PURE__*/function (_PureComponent) {
       }
 
       var offset = (0, _constants.gridSize)() * (itemType === 'TASK' ? 3 : 3.5);
-      return /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, {
-        contentEditable: false,
-        offset: offset
+      return (0, _react2.jsx)("span", {
+        "data-component": "placeholder",
+        css: placeHolderStyles(offset),
+        contentEditable: false
       }, placeholder);
     }
   }, {
@@ -76,21 +122,28 @@ var Item = /*#__PURE__*/function (_PureComponent) {
           children = _this$props2.children,
           icon = _this$props2.icon,
           itemType = _this$props2.itemType,
+          checkBoxId = _this$props2.checkBoxId,
           dataAttributes = _this$props2.dataAttributes,
-          checkBoxId = _this$props2.checkBoxId;
+          theme = _this$props2.theme;
 
       if (itemType === 'TASK') {
-        return /*#__PURE__*/_react.default.createElement(_Item.TaskWrapper, {
+        return (0, _react2.jsx)("div", {
+          css: taskStyles,
           id: "".concat(checkBoxId, "-wrapper")
-        }, icon, this.renderPlaceholder(), /*#__PURE__*/_react.default.createElement(_Item.ContentWrapper, (0, _extends2.default)({}, dataAttributes, {
-          innerRef: contentRef
-        }), children));
+        }, icon, this.renderPlaceholder(), (0, _react2.jsx)("div", (0, _extends2.default)({
+          "data-component": "content",
+          css: contentStyle,
+          ref: contentRef
+        }, dataAttributes), children));
       } else if (itemType === 'DECISION') {
-        return /*#__PURE__*/_react.default.createElement(_Item.DecisionWrapper, {
+        return (0, _react2.jsx)("div", {
+          css: decisionStyles(theme),
           "data-decision-wrapper": "true"
-        }, icon, this.renderPlaceholder(), /*#__PURE__*/_react.default.createElement(_Item.ContentWrapper, (0, _extends2.default)({}, dataAttributes, {
-          innerRef: contentRef
-        }), children));
+        }, icon, this.renderPlaceholder(), (0, _react2.jsx)("div", (0, _extends2.default)({
+          "data-component": "content",
+          css: contentStyle,
+          ref: contentRef
+        }, dataAttributes), children));
       }
 
       return null;

package/dist/cjs/components/TaskItem.js

@@ -7,62 +7,85 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TaskItem = void 0;
+exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _react2 = require("@emotion/react");
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _Item = _interopRequireDefault(require("./Item"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _analytics = require("../analytics");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("@atlaskit/theme/constants");
 
-var _react = _interopRequireWildcard(require("react"));
+var _components = require("@atlaskit/theme/components");
 
-var _TaskItem = require("../styled/TaskItem");
+var _tokens = require("@atlaskit/tokens");
 
-var _Item = _interopRequireDefault(require("./Item"));
-
-var _analyticsNext = require("@atlaskit/analytics-next");
+var _colors = require("@atlaskit/theme/colors");
 
-var _analytics = require("../analytics");
+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); }
 
 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 _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); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var taskCount = 0;
 
 var getCheckBoxId = function getCheckBoxId(localId) {
   return "".concat(localId, "-").concat(taskCount++);
 };
 
-var TaskItem = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(TaskItem, _PureComponent);
-
-  var _super = _createSuper(TaskItem);
-
-  function TaskItem(props) {
-    var _this;
+var checkboxStyles = function checkboxStyles(isRenderer) {
+  return function (theme) {
+    return (0, _react2.css)(_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      width: 16px;\n      height: 16px;\n      z-index: 1;\n      cursor: pointer;\n      position: absolute;\n      outline: none;\n      margin: 0;\n      opacity: 0;\n      left: 0;\n      top: 50%;\n      transform: translateY(-50%);\n\n      + div {\n        box-sizing: border-box;\n        display: inline;\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      ", "\n\n      &:not([disabled]):hover + div::after {\n        background: ", ";\n        transition: border 0.2s ease-in-out;\n      }\n      &[disabled] + div {\n        opacity: 0.5;\n        cursor: default;\n      }\n      &:checked {\n        + div::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]):hover + div::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: (0, _tokens.token)('color.background.input', _colors.N0),
+      dark: (0, _tokens.token)('color.background.input', _colors.DN100)
+    })({
+      theme: theme
+    }), (0, _components.themed)({
+      light: (0, _tokens.token)('color.border', _colors.N90),
+      dark: (0, _tokens.token)('color.border', _colors.DN200)
+    })({
+      theme: theme
+    }), isRenderer ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n            &:focus-visible + div:after {\n              outline: 2px solid\n                ", ";\n            }\n          "])), (0, _components.themed)({
+      light: (0, _tokens.token)('color.border.focused', _colors.B300),
+      dark: (0, _tokens.token)('color.border.focused', _colors.B75)
+    })({
+      theme: theme
+    })) : '', (0, _components.themed)({
+      light: (0, _tokens.token)('color.background.input', _colors.N30),
+      dark: (0, _tokens.token)('color.background.input', _colors.B75)
+    })({
+      theme: theme
+    }));
+  };
+};
 
-    (0, _classCallCheck2.default)(this, TaskItem);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (_evt) {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          taskId = _this$props.taskId,
-          isDone = _this$props.isDone,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent;
+var TaskItem = function TaskItem(props) {
+  var appearance = props.appearance,
+      isDone = props.isDone,
+      isRenderer = props.isRenderer,
+      contentRef = props.contentRef,
+      children = props.children,
+      placeholder = props.placeholder,
+      showPlaceholder = props.showPlaceholder,
+      disabled = props.disabled,
+      dataAttributes = props.dataAttributes,
+      taskId = props.taskId,
+      onChange = props.onChange,
+      createAnalyticsEvent = props.createAnalyticsEvent;
+  var theme = (0, _components.useGlobalTheme)();
+  var checkBoxId = (0, _react.useMemo)(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = (0, _react.useMemo)(function () {
+    return function (_evt) {
       var newIsDone = !isDone;
 
       if (onChange) {
@@ -81,74 +104,44 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
           }
         })(createAnalyticsEvent);
       }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnKeyPress", function (event) {
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = (0, _react.useMemo)(function () {
+    return function (event) {
       if (event.key === 'Enter') {
-        _this.handleOnChange(event);
-      }
-    });
-    _this.checkBoxId = getCheckBoxId(props.taskId);
-    return _this;
-  }
-
-  (0, _createClass2.default)(TaskItem, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.taskId !== this.props.taskId) {
-        this.checkBoxId = getCheckBoxId(nextProps.taskId);
+        handleOnChange(event);
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      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,
-          showPlaceholder = _this$props2.showPlaceholder,
-          disabled = _this$props2.disabled,
-          dataAttributes = _this$props2.dataAttributes;
-
-      var icon = /*#__PURE__*/_react.default.createElement(_TaskItem.CheckBoxWrapper, {
-        contentEditable: false,
-        isRenderer: isRenderer
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        id: this.checkBoxId,
-        "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
-        name: this.checkBoxId,
-        type: "checkbox",
-        onChange: this.handleOnChange,
-        checked: !!isDone,
-        disabled: !!disabled,
-        suppressHydrationWarning: true,
-        onKeyPress: this.handleOnKeyPress
-      }), /*#__PURE__*/_react.default.createElement("div", null));
-
-      return /*#__PURE__*/_react.default.createElement(_Item.default, {
-        appearance: appearance,
-        contentRef: contentRef,
-        icon: icon,
-        placeholder: placeholder,
-        showPlaceholder: showPlaceholder,
-        itemType: "TASK",
-        dataAttributes: dataAttributes,
-        checkBoxId: this.checkBoxId
-      }, children);
-    }
-  }]);
-  return TaskItem;
-}(_react.PureComponent); // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
+    };
+  }, [handleOnChange]);
+  var icon = (0, _react2.jsx)("span", {
+    css: checkboxStyles(isRenderer)(theme),
+    contentEditable: false
+  }, (0, _react2.jsx)("input", {
+    id: checkBoxId,
+    "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress
+  }), (0, _react2.jsx)("div", null));
+  return (0, _react2.jsx)(_Item.default, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId,
+    theme: theme
+  }, children);
+}; // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
 // going through the high order component.
 
 
-exports.TaskItem = TaskItem;
-(0, _defineProperty2.default)(TaskItem, "defaultProps", {
-  appearance: 'inline'
-});
-
 var _default = (0, _analyticsNext.withAnalyticsEvents)()(TaskItem);
 
 exports.default = _default;

package/dist/cjs/components/TaskList.js

@@ -21,10 +21,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ListWrapper = require("../styled/ListWrapper");
+var _react2 = require("@emotion/react");
 
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 
+var _listStyle = _interopRequireDefault(require("./listStyle"));
+
 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); }
 
 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; }
@@ -62,18 +64,19 @@ var TaskList = /*#__PURE__*/function (_PureComponent) {
       // a new uuid generated by the editor for the cloned content.
 
 
-      return /*#__PURE__*/_react.default.createElement(_ListWrapper.TaskListWrapper, {
+      return (0, _react2.jsx)("div", {
+        css: _listStyle.default,
         "data-task-list-local-id": ""
       }, _react.default.Children.map(children, function (child, idx) {
         var _ref = child.props,
             localId = _ref.localId;
-        return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+        return (0, _react2.jsx)(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
           data: {
             listLocalId: listId,
             listSize: listSize,
             position: idx
           }
-        }, /*#__PURE__*/_react.default.createElement("div", {
+        }, (0, _react2.jsx)("div", {
           key: idx,
           "data-task-local-id": localId || ''
         }, child));

package/dist/cjs/components/listStyle.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@emotion/react");
+
+var listStyle = (0, _react.css)({
+  /*
+    Increasing specificity with double ampersand to ensure these rules take
+    priority over the global styles applied to 'ol' elements.
+  */
+  '&&': {
+    listStyleType: 'none',
+    paddingLeft: 0
+  }
+});
+var _default = listStyle;
+exports.default = _default;

package/dist/cjs/version.json

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