@atlaskit/task-decision 17.12.2 → 19.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/task-decision
 
+## 19.0.0
+
+### Major Changes
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.0.0
+
+### Major Changes
+
+- [#115200](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115200)
+  [`f9fada9b2d802`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f9fada9b2d802) -
+  migrate emotion styles to compiled css
+
 ## 17.12.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -26,6 +26,9 @@
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-post-office/tsconfig.json"
 		},

package/constants/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/constants.js",
   "module": "../dist/esm/constants.js",
   "module:es2019": "../dist/es2019/constants.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/constants.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/components/ResourcedTaskItem.js

@@ -13,7 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _TaskItem = _interopRequireDefault(require("./TaskItem"));
+var _ = require("../");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -172,7 +172,7 @@ var ResourcedTaskItem = exports.default = /*#__PURE__*/function (_PureComponent)
         data: {
           objectAri: objectAri
         }
-      }, /*#__PURE__*/_react.default.createElement(_TaskItem.default, {
+      }, /*#__PURE__*/_react.default.createElement(_.TaskItem, {
         isDone: isDone,
         isRenderer: isRenderer,
         isFocused: isFocused,

package/dist/cjs/components/compiled/DecisionItem.compiled.css

@@ -0,0 +1,14 @@
+._16jlidpf{flex-grow:0}
+._18u0idpf{margin-left:0}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bah1h6o{justify-content:center}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
+._i0dlexct{flex-basis:16px}
+._otyridpf{margin-bottom:0}
+._syaz1oju{color:var(--ds-icon-subtle,#626f86)}
+._syaz1yjp{color:var(--ds-icon-success,#22a06b)}

package/dist/cjs/components/compiled/DecisionItem.js

@@ -0,0 +1,45 @@
+/* DecisionItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./DecisionItem.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
+var _Item = _interopRequireDefault(require("./Item"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var iconStyles = null;
+var iconStylesWithPlaceholder = null;
+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 icon = /*#__PURE__*/React.createElement("span", {
+    contentEditable: false,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dlexct _4t3i7vkz _1bsb7vkz _19pk1b66 _2hwxutpp _otyridpf _18u0idpf _syaz1yjp _1e0c1txw _4cvr1h6o _1bah1h6o", showPlaceholder && "_syaz1oju"])
+  }, /*#__PURE__*/React.createElement(_decisionEditorDecision.default, {
+    label: "Decision",
+    spacing: "spacious",
+    color: "currentColor",
+    LEGACY_size: "large"
+  }));
+  return /*#__PURE__*/React.createElement(_Item.default, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "DECISION",
+    dataAttributes: dataAttributes
+  }, children);
+};
+var _default = exports.default = DecisionItem;

package/dist/cjs/components/compiled/DecisionList.compiled.css

@@ -0,0 +1,2 @@
+._1braglyw._1braglyw{list-style-type:none}
+._1yxxidpf._1yxxidpf{padding-left:0}

package/dist/cjs/components/compiled/DecisionList.js

@@ -0,0 +1,62 @@
+/* DecisionList.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./DecisionList.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/*
+	Increasing specificity with double ampersand to ensure these rules take
+	priority over the global styles applied to 'ol' elements.
+*/
+var listStyles = null;
+var DecisionList = exports.default = /*#__PURE__*/function (_PureComponent) {
+  function DecisionList() {
+    (0, _classCallCheck2.default)(this, DecisionList);
+    return _callSuper(this, DecisionList, arguments);
+  }
+  (0, _inherits2.default)(DecisionList, _PureComponent);
+  return (0, _createClass2.default)(DecisionList, [{
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      if (!children) {
+        return null;
+      }
+
+      // Data attributes are required for copy and paste from rendered content
+      // to the editor to preserve the decision.
+      // This allows the editor to differentiate between numbered and ordered lists,
+      // and action items, which all share the common `<li>` element.
+      // The value of `data-decision-local-id` should be discarded upon paste, with a
+      // a new uuid generated by the editor for the cloned content.
+      return /*#__PURE__*/_react.default.createElement("ol", {
+        "data-decision-list-local-id": "",
+        "data-node-type": "decisionList",
+        className: (0, _runtime.ax)(["_1braglyw _1yxxidpf"])
+      }, _react.default.Children.map(children, function (child, idx) {
+        var _ref = child.props,
+          localId = _ref.localId;
+        return /*#__PURE__*/_react.default.createElement("li", {
+          key: idx,
+          "data-decision-local-id": localId || '',
+          "data-decision-state": "DECIDED"
+        }, child);
+      }));
+    }
+  }]);
+}(_react.PureComponent);

package/dist/cjs/components/compiled/Item.compiled.css

@@ -0,0 +1,30 @@
+
+._18s815t0{margin:var(--_1yfnyhr)}
+._18s81hzh{margin:var(--_tptct2)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._14hd1wug .decision-item{cursor:auto}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._19pkidpf{margin-top:0}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._2hwxidpf{margin-right:0}
+._2lx2vrvc{flex-direction:row}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._o5721q9c{white-space:nowrap}
+._otyridpf{margin-bottom:0}
+._p12f1dza{max-width:calc(100% - 50px)}
+._slp31hna{word-wrap:break-word}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/cjs/components/compiled/Item.js

@@ -0,0 +1,101 @@
+/* Item.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./Item.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var placeholderStyles = null;
+var placeholderTaskStyles = null;
+var decisionStyles = null;
+var contentStyles = null;
+var taskStyles = null;
+var Item = exports.default = /*#__PURE__*/function (_PureComponent) {
+  function Item() {
+    (0, _classCallCheck2.default)(this, Item);
+    return _callSuper(this, Item, arguments);
+  }
+  (0, _inherits2.default)(Item, _PureComponent);
+  return (0, _createClass2.default)(Item, [{
+    key: "renderPlaceholder",
+    value: function renderPlaceholder() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        placeholder = _this$props.placeholder,
+        showPlaceholder = _this$props.showPlaceholder,
+        itemType = _this$props.itemType;
+      if (!showPlaceholder || !placeholder || children) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("span", {
+        "data-testid": "task-decision-item-placeholder",
+        "data-component": "placeholder",
+        contentEditable: false,
+        className: (0, _runtime.ax)(["_18s81hzh _1reo15vq _18m915vq _kqswstnw _syaz131l _lcxvglyw _1bto1l2s _o5721q9c _p12f1dza", itemType === 'TASK' && "_18s815t0"]),
+        style: {
+          "--_tptct2": (0, _runtime.ix)("0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3.5)")),
+          "--_1yfnyhr": (0, _runtime.ix)("0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"))
+        }
+      }, placeholder);
+    }
+  }, {
+    key: "renderMessageAppearance",
+    value: function renderMessageAppearance() {
+      var _this$props2 = this.props,
+        contentRef = _this$props2.contentRef,
+        children = _this$props2.children,
+        icon = _this$props2.icon,
+        itemType = _this$props2.itemType,
+        checkBoxId = _this$props2.checkBoxId,
+        dataAttributes = _this$props2.dataAttributes;
+      if (itemType === 'TASK') {
+        return /*#__PURE__*/React.createElement("div", {
+          id: "".concat(checkBoxId, "-wrapper"),
+          className: (0, _runtime.ax)(["_1e0c1txw _2lx2vrvc _kqswh2mm"])
+        }, icon, this.renderPlaceholder(), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+          "data-component": "content",
+          ref: contentRef
+        }, dataAttributes, {
+          className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1wug _slp31hna _1ul9idpf"])
+        }), children));
+      } else if (itemType === 'DECISION') {
+        return /*#__PURE__*/React.createElement("div", {
+          "data-testid": "elements-decision-item",
+          "data-decision-wrapper": "true",
+          className: (0, _runtime.ax)(["_2rkosqtm _1e0c1txw _2lx2vrvc _19pku2gc _2hwxidpf _otyridpf _18u0idpf _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvutpp _bfhkm7j4 _kqswh2mm _14hd1wug"])
+        }, icon, this.renderPlaceholder(), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+          "data-component": "content",
+          ref: contentRef
+        }, dataAttributes, {
+          className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1wug _slp31hna _1ul9idpf"])
+        }), children));
+      }
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.renderMessageAppearance();
+    }
+  }]);
+}(_react.PureComponent);
+(0, _defineProperty2.default)(Item, "defaultProps", {
+  appearance: 'inline'
+});

package/dist/cjs/components/compiled/TaskItem.compiled.css

@@ -0,0 +1,73 @@
+
+._18a711so>input[type=checkbox]+span>svg rect:first-of-type{transition:stroke .2s ease-in-out}
+._1abj1mn3>input[type=checkbox]+span>svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
+._den51ifg>input[type=checkbox]:focus+span:after{border:var(--_18khk6)}
+._zh8l1b66>input[type=checkbox]:focus+span:after{border-radius:var(--ds-space-050,4px)}._10cr1ssb>input[type=checkbox]+span>svg{top:50%}
+._12yy12ci>input[type=checkbox]:hover+span>svg{color:var(--_1z08gfx)}
+._13vl73ad>input[type=checkbox][disabled]{cursor:default}
+._16jlidpf{flex-grow:0}
+._16npddza>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--_vnm8xo)}
+._1746glyw>input[type=checkbox]{outline-style:none}
+._18tob3bt>input[type=checkbox]:focus+span:after{content:""}
+._19l51ooe>input[type=checkbox]+span{transform:translate(-50%,-50%)}
+._1awt1ule>input[type=checkbox]:focus+span:after{display:block}
+._1bsb1tcg{width:24px}
+._1davidpf>input[type=checkbox]{opacity:0}
+._1efjn7od>input[type=checkbox]+span>svg{max-height:unset}
+._1h5xidpf>input[type=checkbox]{margin-top:0}
+._1l0615vq>input[type=checkbox]+span>svg{overflow-y:hidden}
+._1mh7kb7n>input[type=checkbox]{z-index:1}
+._1miyddza>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--_vnm8xo)}
+._1mwj1ssb>input[type=checkbox]+span{left:50%}
+._1nuz1tcg>input[type=checkbox]+span{height:24px}
+._1o9zidpf{flex-shrink:0}
+._1q8r7vkz>input[type=checkbox]{width:1pc}
+._1qduewfl>input[type=checkbox]:checked+span>svg path:first-of-type{visibility:visible}
+._1qp6e69j>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--_rczcge)}
+._1rvv1ooe>input[type=checkbox]{transform:translate(-50%,-50%)}
+._1smcidpf>input[type=checkbox]{margin-left:0}
+._1snx1r31>input[type=checkbox]{outline-color:currentColor}
+._1stbpxbi>input[type=checkbox]:focus+span:after{height:var(--ds-space-200,1pc)}
+._1t711tcg>input[type=checkbox]+span{width:24px}
+._1u2istnw>input[type=checkbox]+span>svg{position:absolute}
+._1umo1ehr>input[type=checkbox]:checked:hover+span>svg{color:var(--_14y1fod)}
+._1wn015vq>input[type=checkbox]+span>svg path:first-of-type{visibility:hidden}
+._1wpzv2br{align-self:start}
+._1x1ysnw8>input[type=checkbox]:disabled:checked+span>svg{fill:var(--_1xmcmw9)}
+._1y9teh7q>input[type=checkbox]:checked+span>svg{fill:var(--_jf353p)}
+._32ro1kd8>input[type=checkbox]+span>svg{color:var(--_4mkb4g)}
+._4k421ssb>input[type=checkbox]{left:50%}
+._4t3i1tcg{height:24px}
+._8bo8stnw>input[type=checkbox]{position:absolute}
+._9j2j1ssb>input[type=checkbox]+span{top:50%}
+._9l2s7vkz>input[type=checkbox]{height:1pc}
+._a27kkb7n>input[type=checkbox]+span>svg rect:first-of-type{stroke-width:1}
+._bhku1ouc>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfe1ouc>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxg1ouc>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w01ouc>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--_r5pknd)}
+._c8dpe69j>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--_rczcge)}
+._cr751ooe>input[type=checkbox]:focus+span:after{transform:translate(-50%,-50%)}
+._cs4qstnw>input[type=checkbox]+span{position:absolute}
+._d2dc1ouc>input[type=checkbox]:disabled+span>svg, ._1eul1ouc>input[type=checkbox]:disabled:active+span>svg, ._1bc71ouc>input[type=checkbox]:disabled:focus+span>svg, ._16fm1ouc>input[type=checkbox]:disabled:hover+span>svg{color:var(--_r5pknd)}
+._dx3f1o36>input[type=checkbox]{outline-width:medium}
+._fs2cidpf>input[type=checkbox]{margin-bottom:0}
+._g5w3stnw>input[type=checkbox]:focus+span:after{position:absolute}
+._gi9h1kc0>input[type=checkbox]:active+span>svg{color:var(--_1cd0fcx)}
+._haf81ssb>input[type=checkbox]:focus+span:after{top:50%}
+._i0dl1tcg{flex-basis:24px}
+._k6dg1ehr>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--_14y1fod)}
+._kqswh2mm{position:relative}
+._l9o0n7od>input[type=checkbox]+span>svg{max-width:unset}
+._m7eu1ooe>input[type=checkbox]+span>svg{transform:translate(-50%,-50%)}
+._oezm15vq>input[type=checkbox]+span>svg{overflow-x:hidden}
+._psnc1ssb>input[type=checkbox]{top:50%}
+._q3p7usvi>input[type=checkbox]+span>svg{box-sizing:border-box}
+._q8ft1j4g>input[type=checkbox]:checked+span>svg{color:var(--_1gcp7nr)}
+._qhqx1nu9>input[type=checkbox]+span>svg{display:inline}
+._ra781ssb>input[type=checkbox]:focus+span:after{left:50%}
+._s3uktlke>input[type=checkbox]{cursor:pointer}
+._sqizidpf>input[type=checkbox]{margin-right:0}
+._tpz2eh7q>input[type=checkbox]:checked:hover+span>svg{fill:var(--_jf353p)}
+._ut031j4g>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--_1gcp7nr)}
+._whhepxbi>input[type=checkbox]:focus+span:after{width:var(--ds-space-200,1pc)}
+._wo24xz7c>input[type=checkbox]:checked:active+span>svg{fill:var(--_uq1ko9)}
+._wxkg1kc0>input[type=checkbox]:checked:active+span>svg{color:var(--_1cd0fcx)}
+._zfav1ssb>input[type=checkbox]+span>svg{left:50%}

package/dist/cjs/components/compiled/TaskItem.js

@@ -0,0 +1,134 @@
+/* TaskItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./TaskItem.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../analytics");
+var _colors = require("@atlaskit/theme/colors");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * References packages/design-system/checkbox/src/checkbox.tsx
+ * To be used until mobile editor does not require legacy themed() API anymore,
+ * which will allow migration to use @atlaskit/checkbox instead
+ */
+var checkboxStyles = null;
+var taskCount = 0;
+var getCheckBoxId = function getCheckBoxId(localId) {
+  return "".concat(localId, "-").concat(taskCount++);
+};
+var TaskItem = function TaskItem(props) {
+  var appearance = props.appearance,
+    isDone = props.isDone,
+    isFocused = props.isFocused,
+    contentRef = props.contentRef,
+    children = props.children,
+    placeholder = props.placeholder,
+    showPlaceholder = props.showPlaceholder,
+    disabled = props.disabled,
+    dataAttributes = props.dataAttributes,
+    taskId = props.taskId,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    inputRefFromProps = props.inputRef;
+  var checkBoxId = (0, _react.useMemo)(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = (0, _react.useMemo)(function () {
+    return function (_evt) {
+      var newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      var action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        (0, _analytics.createAndFireEventInElementsChannel)({
+          action: action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = (0, _react.useMemo)(function () {
+    return function (event) {
+      if (event.key === 'Enter') {
+        handleOnChange(event);
+      }
+    };
+  }, [handleOnChange]);
+  var defaultInputRef = (0, _react.useRef)(null);
+  var inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
+  var icon = /*#__PURE__*/_react.default.createElement("span", {
+    contentEditable: false,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16npddza _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1kd8 _1wn015vq _den51ifg _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy12ci _1miyddza _1umo1ehr _tpz2eh7q _k6dg1ehr _1qduewfl _q8ft1j4g _1y9teh7q _ut031j4g _gi9h1kc0 _1qp6e69j _wxkg1kc0 _wo24xz7c _c8dpe69j _d2dc1ouc _1eul1ouc _1bc71ouc _16fm1ouc _bhku1ouc _czfe1ouc _1gxg1ouc _19w01ouc _1x1ysnw8"]),
+    style: {
+      "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
+      "--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
+      "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
+      "--_14y1fod": (0, _runtime.ix)("var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")),
+      "--_jf353p": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N10, ")")),
+      "--_1gcp7nr": (0, _runtime.ix)("var(--ds-background-selected-bold, ".concat(_colors.B400, ")")),
+      "--_1cd0fcx": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.B50, ")")),
+      "--_rczcge": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.B50, ")")),
+      "--_uq1ko9": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.B400, ")")),
+      "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
+      "--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")")),
+      "--_18khk6": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: checkBoxId,
+    "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    onClick: onClick,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
+  }), /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+    label: "",
+    isFacadeDisabled: true
+  }));
+  _react.default.useEffect(function () {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current, _inputRef$current2;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+      setTimeout(function () {
+        var _inputRef$current3;
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+      }, 100);
+    }
+  }, [isFocused, inputRef]);
+  return /*#__PURE__*/_react.default.createElement(_Item.default, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId
+  }, 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.
+var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(TaskItem);

package/dist/cjs/components/compiled/TaskList.compiled.css

@@ -0,0 +1,3 @@
+._19bvidpf{padding-left:0}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._2mzuglyw{list-style-type:none}

package/dist/cjs/components/compiled/TaskList.js

@@ -0,0 +1,68 @@
+/* TaskList.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./TaskList.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var listStyles = null;
+var taskListStyles = null;
+var TaskList = exports.default = /*#__PURE__*/function (_PureComponent) {
+  function TaskList() {
+    (0, _classCallCheck2.default)(this, TaskList);
+    return _callSuper(this, TaskList, arguments);
+  }
+  (0, _inherits2.default)(TaskList, _PureComponent);
+  return (0, _createClass2.default)(TaskList, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        listId = _this$props.listId,
+        children = _this$props.children;
+      var listSize = _react.default.Children.count(children);
+      if (!children) {
+        return null;
+      }
+
+      // Data attributes are required for copy and paste from rendered content
+      // to the editor to preserve the task.
+      // This allows the editor to differentiate between numbered and ordered lists,
+      // and action items, which all share the common `<li>` element.
+      // The value of `data-task-local-id` should be discarded upon paste, with a
+      // a new uuid generated by the editor for the cloned content.
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "data-task-list-local-id": "",
+        className: (0, _runtime.ax)(["_2mzuglyw _19bvidpf"])
+      }, _react.default.Children.map(children, function (child, idx) {
+        var _ref = child.props,
+          localId = _ref.localId;
+        return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+          data: {
+            listLocalId: listId,
+            listSize: listSize,
+            position: idx
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          key: idx,
+          "data-task-local-id": localId || '',
+          className: (0, _runtime.ax)(["_19pk1b66"])
+        }, child));
+      }));
+    }
+  }]);
+}(_react.PureComponent);