@atlaskit/task-decision 19.1.2 → 19.1.4

package/dist/es2019/index.js

@@ -1,17 +1,8 @@
-import EmotionDecisionItem from './components/DecisionItem';
-import CompiledDecisionItem from './components/compiled/DecisionItem';
-import EmotionDecisionList from './components/DecisionList';
-import CompiledDecisionList from './components/compiled/DecisionList';
+import DecisionItem from './components/DecisionItem';
+import DecisionList from './components/DecisionList';
 import ResourcedTaskItem from './components/ResourcedTaskItem';
 import TaskDecisionResource from './api/TaskDecisionResource';
-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);
+import TaskItem from './components/TaskItem';
+import TaskList from './components/TaskList';
 export { PubSubSpecialEventType } from './types';
 export { DecisionItem, DecisionList, ResourcedTaskItem, TaskDecisionResource, TaskItem, TaskList };

package/dist/esm/components/DecisionItem.js

@@ -1,25 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* 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 = function iconStyles(showPlaceholder) {
-  return css({
-    flex: '0 0 16px',
-    height: '16px',
-    width: '16px',
-    margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)",
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  });
-};
+var iconStyles = null;
+var iconStylesWithPlaceholder = null;
 var DecisionItem = function DecisionItem(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children,
@@ -27,18 +13,16 @@ var DecisionItem = function DecisionItem(_ref) {
     placeholder = _ref.placeholder,
     showPlaceholder = _ref.showPlaceholder,
     dataAttributes = _ref.dataAttributes;
-  var icon =
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("span", {
+  var icon = /*#__PURE__*/React.createElement("span", {
     contentEditable: false,
-    css: iconStyles(showPlaceholder)
-  }, jsx(DecisionIcon, {
+    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 jsx(Item, {
+  return /*#__PURE__*/React.createElement(Item, {
     appearance: appearance,
     contentRef: contentRef,
     icon: icon,

package/dist/esm/components/DecisionList.js

@@ -1,20 +1,19 @@
+/* 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; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import React from 'react';
-import { PureComponent } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { listStyles } from './styles';
+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);
@@ -35,22 +34,19 @@ var DecisionList = /*#__PURE__*/function (_PureComponent) {
       // 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 (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        jsx("ol", {
-          css: listStyles,
-          "data-decision-list-local-id": "",
-          "data-node-type": "decisionList"
-        }, React.Children.map(children, function (child, idx) {
-          var _ref = child.props,
-            localId = _ref.localId;
-          return jsx("li", {
-            key: idx,
-            "data-decision-local-id": localId || '',
-            "data-decision-state": "DECIDED"
-          }, child);
-        }))
-      );
+      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);

package/dist/esm/components/Item.js

@@ -1,3 +1,4 @@
+/* Item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,19 +6,17 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Item.compiled.css";
+import * as React from 'react';
+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; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
 import { PureComponent } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-import { contentStyles, taskStyles, decisionStyles, placeholderStyles } from './styles';
+var placeholderStyles = null;
+var placeholderTaskStyles = null;
+var decisionStyles = null;
+var contentStyles = null;
+var taskStyles = null;
 var Item = /*#__PURE__*/function (_PureComponent) {
   function Item() {
     _classCallCheck(this, Item);
@@ -35,17 +34,15 @@ var Item = /*#__PURE__*/function (_PureComponent) {
       if (!showPlaceholder || !placeholder || children) {
         return null;
       }
-
-      // TODO: Migrate away from gridSize
-      // Recommendation: Replace gridSize with 8
-      var offset = gridSize() * (itemType === 'TASK' ? 3 : 3.5);
-      return jsx("span", {
+      return /*#__PURE__*/React.createElement("span", {
         "data-testid": "task-decision-item-placeholder",
-        "data-component": "placeholder"
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        css: placeholderStyles(offset),
-        contentEditable: false
+        "data-component": "placeholder",
+        contentEditable: false,
+        className: ax(["_18s81hzh _1reo15vq _18m915vq _kqswstnw _syaz131l _lcxvglyw _1bto1l2s _o5721q9c _p12f1dza", itemType === 'TASK' && "_18s815t0"]),
+        style: {
+          "--_tptct2": ix("0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3.5)")),
+          "--_1yfnyhr": ix("0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"))
+        }
       }, placeholder);
     }
   }, {
@@ -59,29 +56,26 @@ var Item = /*#__PURE__*/function (_PureComponent) {
         checkBoxId = _this$props2.checkBoxId,
         dataAttributes = _this$props2.dataAttributes;
       if (itemType === 'TASK') {
-        return (
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          jsx("div", {
-            css: taskStyles,
-            id: "".concat(checkBoxId, "-wrapper")
-          }, icon, this.renderPlaceholder(), jsx("div", _extends({
-            "data-component": "content",
-            css: contentStyles,
-            ref: contentRef
-          }, dataAttributes), children))
-        );
+        return /*#__PURE__*/React.createElement("div", {
+          id: "".concat(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 jsx("div", {
-          "data-testid": "elements-decision-item"
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          ,
-          css: decisionStyles(),
-          "data-decision-wrapper": "true"
-        }, icon, this.renderPlaceholder(), jsx("div", _extends({
+        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",
-          css: contentStyles,
           ref: contentRef
-        }, dataAttributes), children));
+        }, dataAttributes, {
+          className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1wug _slp31hna _1ul9idpf"])
+        }), children));
       }
       return null;
     }

package/dist/esm/components/ResourcedTaskItem.js

@@ -10,10 +10,8 @@ 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 EmotionTaskItem from './TaskItem';
-import CompiledTaskItem from './compiled/TaskItem';
+import TaskItem from './TaskItem';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
-import { fg } from '@atlaskit/platform-feature-flags';
 var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
   function ResourcedTaskItem(props) {
     var _this;
@@ -161,32 +159,11 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
         isRenderer = _this$props3.isRenderer,
         isFocused = _this$props3.isFocused,
         inputRef = _this$props3.inputRef;
-      if (fg('platform_editor_css_migrate_stage_1')) {
-        return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
-          data: {
-            objectAri: objectAri
-          }
-        }, /*#__PURE__*/React.createElement(CompiledTaskItem, {
-          isDone: isDone,
-          isRenderer: isRenderer,
-          isFocused: isFocused,
-          taskId: taskId,
-          onChange: this.handleOnChange,
-          onClick: this.handleOnClick,
-          appearance: appearance,
-          contentRef: contentRef,
-          showPlaceholder: showPlaceholder,
-          placeholder: placeholder,
-          disabled: disabled,
-          dataAttributes: dataAttributes,
-          inputRef: inputRef
-        }, children));
-      }
       return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
         }
-      }, /*#__PURE__*/React.createElement(EmotionTaskItem, {
+      }, /*#__PURE__*/React.createElement(TaskItem, {
         isDone: isDone,
         isRenderer: isRenderer,
         isFocused: isFocused,

package/dist/esm/components/TaskItem.js

@@ -1,11 +1,8 @@
+/* TaskItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./TaskItem.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo, useRef } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { Icon } from '@atlaskit/icon/base-new';
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -14,22 +11,29 @@ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
-import { checkboxStyles } from './styles';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useMergeRefs } from 'use-callback-ref';
 var CheckboxUncheckedIcon = function CheckboxUncheckedIcon(props) {
-  return jsx(Icon, _extends({
+  return /*#__PURE__*/React.createElement(Icon, _extends({
     dangerouslySetGlyph: "<rect width=\"12.5\" height=\"12.5\" x=\"1.75\" y=\"1.75\" stroke=\"currentcolor\" stroke-width=\"1.5\" rx=\"1.25\"/>",
     type: 'core'
   }, props));
 };
+
+/**
+ * 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 TaskItemWithoutRefFix = function TaskItemWithoutRefFix(props) {
   var appearance = props.appearance,
     isDone = props.isDone,
     isFocused = props.isFocused,
-    isRenderer = props.isRenderer,
     contentRef = props.contentRef,
     children = props.children,
     placeholder = props.placeholder,
@@ -39,8 +43,8 @@ var TaskItem = function TaskItem(props) {
     taskId = props.taskId,
     onChange = props.onChange,
     onClick = props.onClick,
-    createAnalyticsEvent = props.createAnalyticsEvent,
-    inputRefFromProps = props.inputRef;
+    createAnalyticsEvent = props.createAnalyticsEvent;
+  var inputRefFromProps = props.inputRef;
   var checkBoxId = useMemo(function () {
     return getCheckBoxId(taskId);
   }, [taskId]);
@@ -72,12 +76,13 @@ var TaskItem = function TaskItem(props) {
   }, [handleOnChange]);
   var defaultInputRef = useRef(null);
   var inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
-  var icon =
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("span", {
-    css: checkboxStyles(isRenderer),
-    contentEditable: false
-  }, jsx("input", {
+  var 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 _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den512j9 _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 _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"]),
+    style: {
+      "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, /*#__PURE__*/React.createElement("input", {
     id: checkBoxId,
     "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
     name: checkBoxId,
@@ -89,9 +94,9 @@ var TaskItem = function TaskItem(props) {
     suppressHydrationWarning: true,
     onKeyPress: handleOnKeyPress,
     ref: inputRef
-  }), isDone ? jsx(CheckboxCheckedIcon, {
+  }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
     label: ""
-  }) : jsx(CheckboxUncheckedIcon, {
+  }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
     label: ""
   }));
   React.useEffect(function () {
@@ -105,7 +110,98 @@ var TaskItem = function TaskItem(props) {
       }, 100);
     }
   }, [isFocused, inputRef]);
-  return jsx(Item, {
+  return /*#__PURE__*/React.createElement(Item, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId
+  }, children);
+};
+var TaskItemWithRefFix = function TaskItemWithRefFix(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 = useMemo(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = useMemo(function () {
+    return function (_evt) {
+      var newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      var action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel({
+          action: action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = useMemo(function () {
+    return function (event) {
+      if (event.key === 'Enter') {
+        handleOnChange(event);
+      }
+    };
+  }, [handleOnChange]);
+  var localInputRef = useRef(null);
+  var inputRef = useMergeRefs(inputRefFromProps === undefined ? [localInputRef] : [inputRefFromProps, localInputRef]);
+  var 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 _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den512j9 _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 _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"]),
+    style: {
+      "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, /*#__PURE__*/React.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
+  }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
+    label: ""
+  }));
+  React.useEffect(function () {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current4, _inputRef$current5;
+      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.focus();
+      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.blur();
+      setTimeout(function () {
+        var _inputRef$current6;
+        (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 || _inputRef$current6.focus();
+      }, 100);
+    }
+  }, [isFocused, inputRef]);
+  return /*#__PURE__*/React.createElement(Item, {
     appearance: appearance,
     contentRef: contentRef,
     icon: icon,
@@ -120,4 +216,4 @@ var TaskItem = function TaskItem(props) {
 // 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);
+export default componentWithFG('platform_editor_task_item_ref_fix', withAnalyticsEvents()(TaskItemWithRefFix), withAnalyticsEvents()(TaskItemWithoutRefFix));

package/dist/esm/components/TaskList.js

@@ -1,20 +1,18 @@
+/* TaskList.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 "./TaskList.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; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
 import { PureComponent } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
-import { listStyles, taskListStyles } from './styles';
+var listStyles = null;
+var taskListStyles = null;
 var TaskList = /*#__PURE__*/function (_PureComponent) {
   function TaskList() {
     _classCallCheck(this, TaskList);
@@ -38,26 +36,24 @@ var TaskList = /*#__PURE__*/function (_PureComponent) {
       // 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 (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        jsx("div", {
-          css: [listStyles, taskListStyles],
-          "data-task-list-local-id": ""
-        }, React.Children.map(children, function (child, idx) {
-          var _ref = child.props,
-            localId = _ref.localId;
-          return jsx(FabricElementsAnalyticsContext, {
-            data: {
-              listLocalId: listId,
-              listSize: listSize,
-              position: idx
-            }
-          }, jsx("div", {
-            key: idx,
-            "data-task-local-id": localId || ''
-          }, child));
-        }))
-      );
+      return /*#__PURE__*/React.createElement("div", {
+        "data-task-list-local-id": "",
+        className: ax(["_2mzuglyw _19bvidpf"])
+      }, React.Children.map(children, function (child, idx) {
+        var _ref = child.props,
+          localId = _ref.localId;
+        return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+          data: {
+            listLocalId: listId,
+            listSize: listSize,
+            position: idx
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          key: idx,
+          "data-task-local-id": localId || '',
+          className: ax(["_19pk1b66"])
+        }, child));
+      }));
     }
   }]);
 }(PureComponent);

package/dist/esm/index.js

@@ -1,17 +1,8 @@
-import EmotionDecisionItem from './components/DecisionItem';
-import CompiledDecisionItem from './components/compiled/DecisionItem';
-import EmotionDecisionList from './components/DecisionList';
-import CompiledDecisionList from './components/compiled/DecisionList';
+import DecisionItem from './components/DecisionItem';
+import DecisionList from './components/DecisionList';
 import ResourcedTaskItem from './components/ResourcedTaskItem';
 import TaskDecisionResource from './api/TaskDecisionResource';
-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';
-var DecisionItem = componentWithFG('platform_editor_css_migrate_stage_1', CompiledDecisionItem, EmotionDecisionItem);
-var DecisionList = componentWithFG('platform_editor_css_migrate_stage_1', CompiledDecisionList, EmotionDecisionList);
-var TaskItem = componentWithFG('platform_editor_css_migrate_stage_1', CompiledTaskItem, EmotionTaskItem);
-var TaskList = componentWithFG('platform_editor_css_migrate_stage_1', CompiledTaskList, EmotionTaskList);
+import TaskItem from './components/TaskItem';
+import TaskList from './components/TaskList';
 export { PubSubSpecialEventType } from './types';
 export { DecisionItem, DecisionList, ResourcedTaskItem, TaskDecisionResource, TaskItem, TaskList };

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type Appearance, type ContentRef } from '../types';
 export interface Props {
     children?: any;
@@ -14,5 +10,5 @@ export interface Props {
         [key: string]: string | number;
     };
 }
-declare const DecisionItem: ({ appearance, children, contentRef, placeholder, showPlaceholder, dataAttributes, }: Props) => jsx.JSX.Element;
+declare const DecisionItem: ({ appearance, children, contentRef, placeholder, showPlaceholder, dataAttributes, }: Props) => JSX.Element;
 export default DecisionItem;

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

@@ -3,10 +3,9 @@
  * @jsx jsx
  */
 import { PureComponent, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 export interface Props {
     children?: ReactNode;
 }
 export default class DecisionList extends PureComponent<Props, {}> {
-    render(): jsx.JSX.Element | null;
+    render(): JSX.Element | null;
 }

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { PureComponent } from 'react';
-import { jsx } from '@emotion/react';
 import { type Appearance, type ContentRef, type TaskType, type DecisionType } from '../types';
 export interface Props {
     icon: JSX.Element;
@@ -21,6 +20,6 @@ export interface Props {
 export default class Item extends PureComponent<Props, {}> {
     static defaultProps: Partial<Props>;
     private renderPlaceholder;
-    renderMessageAppearance(): jsx.JSX.Element | null;
-    render(): jsx.JSX.Element | null;
+    renderMessageAppearance(): JSX.Element | null;
+    render(): JSX.Element | null;
 }