@atlaskit/task-decision 17.12.2 → 18.0.0

package/dist/cjs/index.js

@@ -4,18 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "DecisionItem", {
-  enumerable: true,
-  get: function get() {
-    return _DecisionItem.default;
-  }
-});
-Object.defineProperty(exports, "DecisionList", {
-  enumerable: true,
-  get: function get() {
-    return _DecisionList.default;
-  }
-});
+exports.DecisionList = exports.DecisionItem = void 0;
 Object.defineProperty(exports, "PubSubSpecialEventType", {
   enumerable: true,
   get: function get() {
@@ -34,22 +23,20 @@ Object.defineProperty(exports, "TaskDecisionResource", {
     return _TaskDecisionResource.default;
   }
 });
-Object.defineProperty(exports, "TaskItem", {
-  enumerable: true,
-  get: function get() {
-    return _TaskItem.default;
-  }
-});
-Object.defineProperty(exports, "TaskList", {
-  enumerable: true,
-  get: function get() {
-    return _TaskList.default;
-  }
-});
+exports.TaskList = exports.TaskItem = void 0;
 var _DecisionItem = _interopRequireDefault(require("./components/DecisionItem"));
+var _DecisionItem2 = _interopRequireDefault(require("./components/compiled/DecisionItem"));
 var _DecisionList = _interopRequireDefault(require("./components/DecisionList"));
+var _DecisionList2 = _interopRequireDefault(require("./components/compiled/DecisionList"));
 var _ResourcedTaskItem = _interopRequireDefault(require("./components/ResourcedTaskItem"));
 var _TaskDecisionResource = _interopRequireDefault(require("./api/TaskDecisionResource"));
 var _TaskItem = _interopRequireDefault(require("./components/TaskItem"));
+var _TaskItem2 = _interopRequireDefault(require("./components/compiled/TaskItem"));
 var _TaskList = _interopRequireDefault(require("./components/TaskList"));
-var _types = require("./types");
+var _TaskList2 = _interopRequireDefault(require("./components/compiled/TaskList"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _types = require("./types");
+var DecisionItem = exports.DecisionItem = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _DecisionItem2.default, _DecisionItem.default);
+var DecisionList = exports.DecisionList = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _DecisionList2.default, _DecisionList.default);
+var TaskItem = exports.TaskItem = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _TaskItem2.default, _TaskItem.default);
+var TaskList = exports.TaskList = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _TaskList2.default, _TaskList.default);

package/dist/es2019/components/ResourcedTaskItem.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import TaskItem from './TaskItem';
+import { TaskItem } from '../';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 export default class ResourcedTaskItem extends PureComponent {
   constructor(props) {

package/dist/es2019/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/es2019/components/compiled/DecisionItem.js

@@ -0,0 +1,36 @@
+/* DecisionItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./DecisionItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
+import Item from './Item';
+const iconStyles = null;
+const iconStylesWithPlaceholder = null;
+const DecisionItem = ({
+  appearance,
+  children,
+  contentRef,
+  placeholder,
+  showPlaceholder,
+  dataAttributes
+}) => {
+  const icon = /*#__PURE__*/React.createElement("span", {
+    contentEditable: false,
+    className: ax(["_16jlidpf _1o9zidpf _i0dlexct _4t3i7vkz _1bsb7vkz _19pk1b66 _2hwxutpp _otyridpf _18u0idpf _syaz1yjp _1e0c1txw _4cvr1h6o _1bah1h6o", showPlaceholder && "_syaz1oju"])
+  }, /*#__PURE__*/React.createElement(DecisionIcon, {
+    label: "Decision",
+    spacing: "spacious",
+    color: "currentColor",
+    LEGACY_size: "large"
+  }));
+  return /*#__PURE__*/React.createElement(Item, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "DECISION",
+    dataAttributes: dataAttributes
+  }, children);
+};
+export default DecisionItem;

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

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

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

@@ -0,0 +1,40 @@
+/* DecisionList.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./DecisionList.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { PureComponent } from 'react';
+/*
+	Increasing specificity with double ampersand to ensure these rules take
+	priority over the global styles applied to 'ol' elements.
+*/
+const listStyles = null;
+export default class DecisionList extends PureComponent {
+  render() {
+    const {
+      children
+    } = this.props;
+    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.createElement("ol", {
+      "data-decision-list-local-id": "",
+      "data-node-type": "decisionList",
+      className: ax(["_1braglyw _1yxxidpf"])
+    }, React.Children.map(children, (child, idx) => {
+      const {
+        localId
+      } = child.props;
+      return /*#__PURE__*/React.createElement("li", {
+        key: idx,
+        "data-decision-local-id": localId || '',
+        "data-decision-state": "DECIDED"
+      }, child);
+    }));
+  }
+}

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

@@ -0,0 +1,30 @@
+
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._14hd1wug .decision-item{cursor:auto}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u0hwpb{margin-left:calc(var(--ds-space-100, 8px)*3)}
+._18u0idpf{margin-left:0}
+._18u0tu8f{margin-left:calc(var(--ds-space-100, 8px)*3.5)}
+._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/es2019/components/compiled/Item.js

@@ -0,0 +1,70 @@
+/* Item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { PureComponent } from 'react';
+const placeholderStyles = null;
+const placeholderTaskStyles = null;
+const decisionStyles = null;
+const contentStyles = null;
+const taskStyles = null;
+export default class Item extends PureComponent {
+  renderPlaceholder() {
+    const {
+      children,
+      placeholder,
+      showPlaceholder,
+      itemType
+    } = this.props;
+    if (!showPlaceholder || !placeholder || children) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      "data-testid": "task-decision-item-placeholder",
+      "data-component": "placeholder",
+      contentEditable: false,
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0tu8f _1reo15vq _18m915vq _kqswstnw _syaz131l _lcxvglyw _1bto1l2s _o5721q9c _p12f1dza", itemType === 'TASK' && "_19pkidpf _2hwxidpf _otyridpf _18u0hwpb"])
+    }, placeholder);
+  }
+  renderMessageAppearance() {
+    const {
+      contentRef,
+      children,
+      icon,
+      itemType,
+      checkBoxId,
+      dataAttributes
+    } = this.props;
+    if (itemType === 'TASK') {
+      return /*#__PURE__*/React.createElement("div", {
+        id: `${checkBoxId}-wrapper`,
+        className: ax(["_1e0c1txw _2lx2vrvc _kqswh2mm"])
+      }, icon, this.renderPlaceholder(), /*#__PURE__*/React.createElement("div", _extends({
+        "data-component": "content",
+        ref: contentRef
+      }, dataAttributes, {
+        className: 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: ax(["_2rkosqtm _1e0c1txw _2lx2vrvc _19pku2gc _2hwxidpf _otyridpf _18u0idpf _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvutpp _bfhkm7j4 _kqswh2mm _14hd1wug"])
+      }, icon, this.renderPlaceholder(), /*#__PURE__*/React.createElement("div", _extends({
+        "data-component": "content",
+        ref: contentRef
+      }, dataAttributes, {
+        className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1wug _slp31hna _1ul9idpf"])
+      }), children));
+    }
+    return null;
+  }
+  render() {
+    return this.renderMessageAppearance();
+  }
+}
+_defineProperty(Item, "defaultProps", {
+  appearance: 'inline'
+});

package/dist/es2019/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}
+._den51ekn>input[type=checkbox]:focus+span:after{border:2px solid var(--ds-border-focused,#4c9aff)}
+._zh8l1b66>input[type=checkbox]:focus+span:after{border-radius:var(--ds-space-050,4px)}._10cr1ssb>input[type=checkbox]+span>svg{top:50%}
+._12yy10ko>input[type=checkbox]:hover+span>svg{color:var(--ds-background-input-hovered,#ebecf0)}
+._13vl73ad>input[type=checkbox][disabled]{cursor:default}
+._16jlidpf{flex-grow:0}
+._16np1fmg>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--ds-border-input,#7a869a)}
+._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}
+._1miy1fmg>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--ds-border-input,#7a869a)}
+._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}
+._1qp6unzk>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--ds-border,#deebff)}
+._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}
+._1umohh5a>input[type=checkbox]:checked:hover+span>svg{color:var(--ds-background-selected-bold-hovered,#0065ff)}
+._1wn015vq>input[type=checkbox]+span>svg path:first-of-type{visibility:hidden}
+._1wpzv2br{align-self:start}
+._1x1y15t7>input[type=checkbox]:disabled:checked+span>svg{fill:var(--ds-icon-disabled,#a5adba)}
+._1y9t1qbb>input[type=checkbox]:checked+span>svg{fill:var(--ds-icon-inverse,#fafbfc)}
+._32romag2>input[type=checkbox]+span>svg{color:var(--ds-background-input,#fafbfc)}
+._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}
+._bhku1y1w>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfe1y1w>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxg1y1w>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w01y1w>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--ds-background-disabled,#f4f5f7)}
+._c8dpunzk>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--ds-border,#deebff)}
+._cr751ooe>input[type=checkbox]:focus+span:after{transform:translate(-50%,-50%)}
+._cs4qstnw>input[type=checkbox]+span{position:absolute}
+._d2dc1y1w>input[type=checkbox]:disabled+span>svg, ._1eul1y1w>input[type=checkbox]:disabled:active+span>svg, ._1bc71y1w>input[type=checkbox]:disabled:focus+span>svg, ._16fm1y1w>input[type=checkbox]:disabled:hover+span>svg{color:var(--ds-background-disabled,#f4f5f7)}
+._dx3f1o36>input[type=checkbox]{outline-width:medium}
+._fs2cidpf>input[type=checkbox]{margin-bottom:0}
+._g5w3stnw>input[type=checkbox]:focus+span:after{position:absolute}
+._gi9h11d3>input[type=checkbox]:active+span>svg{color:var(--ds-background-input-pressed,#deebff)}
+._haf81ssb>input[type=checkbox]:focus+span:after{top:50%}
+._i0dl1tcg{flex-basis:24px}
+._k6dghh5a>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold-hovered,#0065ff)}
+._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}
+._q8ftzyvw>input[type=checkbox]:checked+span>svg{color:var(--ds-background-selected-bold,#0052cc)}
+._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}
+._tpz21qbb>input[type=checkbox]:checked:hover+span>svg{fill:var(--ds-icon-inverse,#fafbfc)}
+._ut03zyvw>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold,#0052cc)}
+._whhepxbi>input[type=checkbox]:focus+span:after{width:var(--ds-space-200,1pc)}
+._wo241dzn>input[type=checkbox]:checked:active+span>svg{fill:var(--ds-icon-inverse,#0052cc)}
+._wxkg11d3>input[type=checkbox]:checked:active+span>svg{color:var(--ds-background-input-pressed,#deebff)}
+._zfav1ssb>input[type=checkbox]+span>svg{left:50%}

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

@@ -0,0 +1,108 @@
+/* TaskItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TaskItem.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useMemo, useRef } from 'react';
+import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
+import Item from './Item';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel } from '../../analytics';
+import { B100, B300, B400, B50, N10, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
+
+/**
+ * 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
+ */
+const checkboxStyles = null;
+let taskCount = 0;
+const getCheckBoxId = localId => `${localId}-${taskCount++}`;
+const TaskItem = props => {
+  const {
+    appearance,
+    isDone,
+    isFocused,
+    contentRef,
+    children,
+    placeholder,
+    showPlaceholder,
+    disabled,
+    dataAttributes,
+    taskId,
+    onChange,
+    onClick,
+    createAnalyticsEvent,
+    inputRef: inputRefFromProps
+  } = props;
+  const checkBoxId = useMemo(() => getCheckBoxId(taskId), [taskId]);
+  const handleOnChange = useMemo(() => {
+    return _evt => {
+      const newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      const action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel({
+          action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  const handleOnKeyPress = useMemo(() => event => {
+    if (event.key === 'Enter') {
+      handleOnChange(event);
+    }
+  }, [handleOnChange]);
+  const defaultInputRef = useRef(null);
+  const inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
+  const icon = /*#__PURE__*/React.createElement("span", {
+    contentEditable: false,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1fmg _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32romag2 _1wn015vq _den51ekn _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 _12yy10ko _1miy1fmg _1umohh5a _tpz21qbb _k6dghh5a _1qduewfl _q8ftzyvw _1y9t1qbb _ut03zyvw _gi9h11d3 _1qp6unzk _wxkg11d3 _wo241dzn _c8dpunzk _d2dc1y1w _1eul1y1w _1bc71y1w _16fm1y1w _bhku1y1w _czfe1y1w _1gxg1y1w _19w01y1w _1x1y15t7"])
+  }, /*#__PURE__*/React.createElement("input", {
+    id: checkBoxId,
+    "aria-labelledby": `${checkBoxId}-wrapper`,
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    onClick: onClick,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(CheckboxIcon, {
+    label: "",
+    isFacadeDisabled: true
+  }));
+  React.useEffect(() => {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current, _inputRef$current2;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      setTimeout(() => {
+        var _inputRef$current3;
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+      }, 100);
+    }
+  }, [isFocused, inputRef]);
+  return /*#__PURE__*/React.createElement(Item, {
+    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.
+
+export default withAnalyticsEvents()(TaskItem);

package/dist/es2019/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/es2019/components/compiled/TaskList.js

@@ -0,0 +1,46 @@
+/* TaskList.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TaskList.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { PureComponent } from 'react';
+import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+const listStyles = null;
+const taskListStyles = null;
+export default class TaskList extends PureComponent {
+  render() {
+    const {
+      listId,
+      children
+    } = this.props;
+    const listSize = React.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.createElement("div", {
+      "data-task-list-local-id": "",
+      className: ax(["_2mzuglyw _19bvidpf"])
+    }, React.Children.map(children, (child, idx) => {
+      const {
+        localId
+      } = child.props;
+      return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+        data: {
+          listLocalId: listId,
+          listSize,
+          position: idx
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        key: idx,
+        "data-task-local-id": localId || '',
+        className: ax(["_19pk1b66"])
+      }, child));
+    }));
+  }
+}

package/dist/es2019/index.js

@@ -1,8 +1,17 @@
-import DecisionItem from './components/DecisionItem';
-import DecisionList from './components/DecisionList';
+import EmotionDecisionItem from './components/DecisionItem';
+import CompiledDecisionItem from './components/compiled/DecisionItem';
+import EmotionDecisionList from './components/DecisionList';
+import CompiledDecisionList from './components/compiled/DecisionList';
 import ResourcedTaskItem from './components/ResourcedTaskItem';
 import TaskDecisionResource from './api/TaskDecisionResource';
-import TaskItem from './components/TaskItem';
-import TaskList from './components/TaskList';
+import EmotionTaskItem from './components/TaskItem';
+import CompiledTaskItem from './components/compiled/TaskItem';
+import EmotionTaskList from './components/TaskList';
+import CompiledTaskList from './components/compiled/TaskList';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+const DecisionItem = componentWithFG('platform_editor_css_migrate_stage_1', CompiledDecisionItem, EmotionDecisionItem);
+const DecisionList = componentWithFG('platform_editor_css_migrate_stage_1', CompiledDecisionList, EmotionDecisionList);
+const TaskItem = componentWithFG('platform_editor_css_migrate_stage_1', CompiledTaskItem, EmotionTaskItem);
+const TaskList = componentWithFG('platform_editor_css_migrate_stage_1', CompiledTaskList, EmotionTaskList);
 export { PubSubSpecialEventType } from './types';
 export { DecisionItem, DecisionList, ResourcedTaskItem, TaskDecisionResource, TaskItem, TaskList };

package/dist/esm/components/ResourcedTaskItem.js

@@ -10,7 +10,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { PureComponent } from 'react';
-import TaskItem from './TaskItem';
+import { TaskItem } from '../';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
   function ResourcedTaskItem(props) {

package/dist/esm/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/esm/components/compiled/DecisionItem.js

@@ -0,0 +1,35 @@
+/* DecisionItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./DecisionItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
+import Item from './Item';
+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: ax(["_16jlidpf _1o9zidpf _i0dlexct _4t3i7vkz _1bsb7vkz _19pk1b66 _2hwxutpp _otyridpf _18u0idpf _syaz1yjp _1e0c1txw _4cvr1h6o _1bah1h6o", showPlaceholder && "_syaz1oju"])
+  }, /*#__PURE__*/React.createElement(DecisionIcon, {
+    label: "Decision",
+    spacing: "spacious",
+    color: "currentColor",
+    LEGACY_size: "large"
+  }));
+  return /*#__PURE__*/React.createElement(Item, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "DECISION",
+    dataAttributes: dataAttributes
+  }, children);
+};
+export default DecisionItem;

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

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

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

@@ -0,0 +1,53 @@
+/* DecisionList.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import "./DecisionList.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import React, { PureComponent } from 'react';
+/*
+	Increasing specificity with double ampersand to ensure these rules take
+	priority over the global styles applied to 'ol' elements.
+*/
+var listStyles = null;
+var DecisionList = /*#__PURE__*/function (_PureComponent) {
+  function DecisionList() {
+    _classCallCheck(this, DecisionList);
+    return _callSuper(this, DecisionList, arguments);
+  }
+  _inherits(DecisionList, _PureComponent);
+  return _createClass(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.createElement("ol", {
+        "data-decision-list-local-id": "",
+        "data-node-type": "decisionList",
+        className: ax(["_1braglyw _1yxxidpf"])
+      }, React.Children.map(children, function (child, idx) {
+        var _ref = child.props,
+          localId = _ref.localId;
+        return /*#__PURE__*/React.createElement("li", {
+          key: idx,
+          "data-decision-local-id": localId || '',
+          "data-decision-state": "DECIDED"
+        }, child);
+      }));
+    }
+  }]);
+}(PureComponent);
+export { DecisionList as default };