@atlaskit/task-decision 17.4.5 → 17.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/task-decision
 
+## 17.5.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 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

package/constants/package.json

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

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;