@atlaskit/task-decision 17.4.5 → 17.5.0

package/dist/esm/components/DecisionList.js

@@ -8,9 +8,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
-import { DecisionListWrapper } from '../styled/ListWrapper';
+import { jsx } from '@emotion/react';
+import decisionListStyles from './listStyle';
 
 var DecisionList = /*#__PURE__*/function (_PureComponent) {
   _inherits(DecisionList, _PureComponent);
@@ -38,13 +40,14 @@ var DecisionList = /*#__PURE__*/function (_PureComponent) {
       // a new uuid generated by the editor for the cloned content.
 
 
-      return /*#__PURE__*/React.createElement(DecisionListWrapper, {
+      return jsx("ol", {
+        css: decisionListStyles,
         "data-decision-list-local-id": "",
         "data-node-type": "decisionList"
       }, React.Children.map(children, function (child, idx) {
         var _ref = child.props,
             localId = _ref.localId;
-        return /*#__PURE__*/React.createElement("li", {
+        return jsx("li", {
           key: idx,
           "data-decision-local-id": localId || '',
           "data-decision-state": "DECIDED"

package/dist/esm/components/Item.js

@@ -10,11 +10,59 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
-import { gridSize } from '@atlaskit/theme/constants';
-import { ContentWrapper, TaskWrapper, DecisionWrapper } from '../styled/Item';
-import { Placeholder } from '../styled/Placeholder';
+import { css, jsx } from '@emotion/react';
+import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+import { DN50, N100, N20A } from '@atlaskit/theme/colors';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+var contentStyle = css({
+  margin: 0,
+  wordWrap: 'break-word',
+  minWidth: 0,
+  flex: '1 1 auto'
+});
+var taskStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  padding: '6px 3px',
+  position: 'relative'
+});
+
+var decisionStyles = function decisionStyles(theme) {
+  return css({
+    display: 'flex',
+    flexDirection: 'row',
+    margin: "".concat(gridSize(), "px 0 0 0"),
+    padding: "".concat(gridSize(), "px"),
+    paddingLeft: "".concat(gridSize() * 1.5, "px"),
+    borderRadius: "".concat(borderRadius(), "px"),
+    backgroundColor: themed({
+      light: token('color.background.neutral', N20A),
+      dark: token('color.background.neutral', DN50)
+    })({
+      theme: theme
+    }),
+    position: 'relative',
+    '.decision-item': {
+      cursor: 'initial'
+    }
+  });
+};
+
+var placeHolderStyles = function placeHolderStyles(offset) {
+  return css({
+    margin: "0 0 0 ".concat(offset, "px"),
+    position: 'absolute',
+    color: token('color.text.subtlest', N100),
+    pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    maxWidth: 'calc(100% - 50px)'
+  });
+};
 
 var Item = /*#__PURE__*/function (_PureComponent) {
   _inherits(Item, _PureComponent);
@@ -41,9 +89,10 @@ var Item = /*#__PURE__*/function (_PureComponent) {
       }
 
       var offset = gridSize() * (itemType === 'TASK' ? 3 : 3.5);
-      return /*#__PURE__*/React.createElement(Placeholder, {
-        contentEditable: false,
-        offset: offset
+      return jsx("span", {
+        "data-component": "placeholder",
+        css: placeHolderStyles(offset),
+        contentEditable: false
       }, placeholder);
     }
   }, {
@@ -54,21 +103,28 @@ var Item = /*#__PURE__*/function (_PureComponent) {
           children = _this$props2.children,
           icon = _this$props2.icon,
           itemType = _this$props2.itemType,
+          checkBoxId = _this$props2.checkBoxId,
           dataAttributes = _this$props2.dataAttributes,
-          checkBoxId = _this$props2.checkBoxId;
+          theme = _this$props2.theme;
 
       if (itemType === 'TASK') {
-        return /*#__PURE__*/React.createElement(TaskWrapper, {
+        return jsx("div", {
+          css: taskStyles,
           id: "".concat(checkBoxId, "-wrapper")
-        }, icon, this.renderPlaceholder(), /*#__PURE__*/React.createElement(ContentWrapper, _extends({}, dataAttributes, {
-          innerRef: contentRef
-        }), children));
+        }, icon, this.renderPlaceholder(), jsx("div", _extends({
+          "data-component": "content",
+          css: contentStyle,
+          ref: contentRef
+        }, dataAttributes), children));
       } else if (itemType === 'DECISION') {
-        return /*#__PURE__*/React.createElement(DecisionWrapper, {
+        return jsx("div", {
+          css: decisionStyles(theme),
           "data-decision-wrapper": "true"
-        }, icon, this.renderPlaceholder(), /*#__PURE__*/React.createElement(ContentWrapper, _extends({}, dataAttributes, {
-          innerRef: contentRef
-        }), children));
+        }, icon, this.renderPlaceholder(), jsx("div", _extends({
+          "data-component": "content",
+          css: contentStyle,
+          ref: contentRef
+        }, dataAttributes), children));
       }
 
       return null;

package/dist/esm/components/TaskItem.js

@@ -1,45 +1,68 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+var _templateObject, _templateObject2;
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import { PureComponent } from 'react';
-import { CheckBoxWrapper } from '../styled/TaskItem';
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
+import { gridSize } from '@atlaskit/theme/constants';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
 var taskCount = 0;
 
 var getCheckBoxId = function getCheckBoxId(localId) {
   return "".concat(localId, "-").concat(taskCount++);
 };
 
-export var TaskItem = /*#__PURE__*/function (_PureComponent) {
-  _inherits(TaskItem, _PureComponent);
-
-  var _super = _createSuper(TaskItem);
-
-  function TaskItem(props) {
-    var _this;
-
-    _classCallCheck(this, TaskItem);
-
-    _this = _super.call(this, props);
+var checkboxStyles = function checkboxStyles(isRenderer) {
+  return function (theme) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex: 0 0 16px;\n    width: 16px;\n    height: 16px;\n    position: relative;\n    align-self: start;\n    margin: 4px ", "px 0 0;\n\n    & > input[type='checkbox'] {\n      width: 16px;\n      height: 16px;\n      z-index: 1;\n      cursor: pointer;\n      position: absolute;\n      outline: none;\n      margin: 0;\n      opacity: 0;\n      left: 0;\n      top: 50%;\n      transform: translateY(-50%);\n\n      + div {\n        box-sizing: border-box;\n        display: inline;\n        width: 100%;\n        cursor: pointer;\n\n        &::after {\n          background: ", ";\n          background-size: 16px;\n          border-radius: 3px;\n          border-style: solid;\n          border-width: 1px;\n          border-color: ", ";\n          box-sizing: border-box;\n          content: '';\n          height: 16px;\n          left: 50%;\n          position: absolute;\n          transition: border-color 0.2s ease-in-out;\n          top: 8px;\n          width: 16px;\n          transform: translate(-50%, -50%);\n        }\n      }\n      ", "\n\n      &:not([disabled]):hover + div::after {\n        background: ", ";\n        transition: border 0.2s ease-in-out;\n      }\n      &[disabled] + div {\n        opacity: 0.5;\n        cursor: default;\n      }\n      &:checked {\n        + div::after {\n          background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n            no-repeat 0 0;\n          background-size: 16px;\n          border: 0;\n          border-color: transparent;\n        }\n        &:not([disabled]):hover + div::after {\n          background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n            no-repeat 0 0;\n          background-size: 16px;\n        }\n      }\n    }\n  "])), gridSize(), themed({
+      light: token('color.background.input', N0),
+      dark: token('color.background.input', DN100)
+    })({
+      theme: theme
+    }), themed({
+      light: token('color.border', N90),
+      dark: token('color.border', DN200)
+    })({
+      theme: theme
+    }), isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            &:focus-visible + div:after {\n              outline: 2px solid\n                ", ";\n            }\n          "])), themed({
+      light: token('color.border.focused', B300),
+      dark: token('color.border.focused', B75)
+    })({
+      theme: theme
+    })) : '', themed({
+      light: token('color.background.input', N30),
+      dark: token('color.background.input', B75)
+    })({
+      theme: theme
+    }));
+  };
+};
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (_evt) {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          taskId = _this$props.taskId,
-          isDone = _this$props.isDone,
-          createAnalyticsEvent = _this$props.createAnalyticsEvent;
+var TaskItem = function TaskItem(props) {
+  var appearance = props.appearance,
+      isDone = props.isDone,
+      isRenderer = props.isRenderer,
+      contentRef = props.contentRef,
+      children = props.children,
+      placeholder = props.placeholder,
+      showPlaceholder = props.showPlaceholder,
+      disabled = props.disabled,
+      dataAttributes = props.dataAttributes,
+      taskId = props.taskId,
+      onChange = props.onChange,
+      createAnalyticsEvent = props.createAnalyticsEvent;
+  var theme = useGlobalTheme();
+  var checkBoxId = useMemo(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = useMemo(function () {
+    return function (_evt) {
       var newIsDone = !isDone;
 
       if (onChange) {
@@ -58,71 +81,42 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
           }
         })(createAnalyticsEvent);
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnKeyPress", function (event) {
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = useMemo(function () {
+    return function (event) {
       if (event.key === 'Enter') {
-        _this.handleOnChange(event);
+        handleOnChange(event);
       }
-    });
-
-    _this.checkBoxId = getCheckBoxId(props.taskId);
-    return _this;
-  }
-
-  _createClass(TaskItem, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.taskId !== this.props.taskId) {
-        this.checkBoxId = getCheckBoxId(nextProps.taskId);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          appearance = _this$props2.appearance,
-          isDone = _this$props2.isDone,
-          isRenderer = _this$props2.isRenderer,
-          contentRef = _this$props2.contentRef,
-          children = _this$props2.children,
-          placeholder = _this$props2.placeholder,
-          showPlaceholder = _this$props2.showPlaceholder,
-          disabled = _this$props2.disabled,
-          dataAttributes = _this$props2.dataAttributes;
-      var icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
-        contentEditable: false,
-        isRenderer: isRenderer
-      }, /*#__PURE__*/React.createElement("input", {
-        id: this.checkBoxId,
-        "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
-        name: this.checkBoxId,
-        type: "checkbox",
-        onChange: this.handleOnChange,
-        checked: !!isDone,
-        disabled: !!disabled,
-        suppressHydrationWarning: true,
-        onKeyPress: this.handleOnKeyPress
-      }), /*#__PURE__*/React.createElement("div", null));
-      return /*#__PURE__*/React.createElement(Item, {
-        appearance: appearance,
-        contentRef: contentRef,
-        icon: icon,
-        placeholder: placeholder,
-        showPlaceholder: showPlaceholder,
-        itemType: "TASK",
-        dataAttributes: dataAttributes,
-        checkBoxId: this.checkBoxId
-      }, children);
-    }
-  }]);
-
-  return TaskItem;
-}(PureComponent); // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
+    };
+  }, [handleOnChange]);
+  var icon = jsx("span", {
+    css: checkboxStyles(isRenderer)(theme),
+    contentEditable: false
+  }, jsx("input", {
+    id: checkBoxId,
+    "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress
+  }), jsx("div", null));
+  return jsx(Item, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId,
+    theme: theme
+  }, children);
+}; // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
 // going through the high order component.
 
-_defineProperty(TaskItem, "defaultProps", {
-  appearance: 'inline'
-});
 
 export default withAnalyticsEvents()(TaskItem);

package/dist/esm/components/TaskList.js

@@ -8,10 +8,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
-import { TaskListWrapper } from '../styled/ListWrapper';
+import { jsx } from '@emotion/react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import taskListStyles from './listStyle';
 
 var TaskList = /*#__PURE__*/function (_PureComponent) {
   _inherits(TaskList, _PureComponent);
@@ -42,18 +44,19 @@ var TaskList = /*#__PURE__*/function (_PureComponent) {
       // a new uuid generated by the editor for the cloned content.
 
 
-      return /*#__PURE__*/React.createElement(TaskListWrapper, {
+      return jsx("div", {
+        css: taskListStyles,
         "data-task-list-local-id": ""
       }, React.Children.map(children, function (child, idx) {
         var _ref = child.props,
             localId = _ref.localId;
-        return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+        return jsx(FabricElementsAnalyticsContext, {
           data: {
             listLocalId: listId,
             listSize: listSize,
             position: idx
           }
-        }, /*#__PURE__*/React.createElement("div", {
+        }, jsx("div", {
           key: idx,
           "data-task-local-id": localId || ''
         }, child));

package/dist/esm/components/listStyle.js

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+var listStyle = css({
+  /*
+    Increasing specificity with double ampersand to ensure these rules take
+    priority over the global styles applied to 'ol' elements.
+  */
+  '&&': {
+    listStyleType: 'none',
+    paddingLeft: 0
+  }
+});
+export default listStyle;

package/dist/esm/version.json

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

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

@@ -1,4 +1,5 @@
-import { PureComponent } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Appearance, ContentRef } from '../types';
 export interface Props {
     children?: any;
@@ -10,7 +11,5 @@ export interface Props {
         [key: string]: string | number;
     };
 }
-export default class DecisionItem extends PureComponent<Props, {}> {
-    static defaultProps: Partial<Props>;
-    render(): JSX.Element;
-}
+declare const DecisionItem: ({ appearance, children, contentRef, placeholder, showPlaceholder, dataAttributes, }: Props) => jsx.JSX.Element;
+export default DecisionItem;

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

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

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

@@ -1,5 +1,8 @@
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { Appearance, ContentRef, TaskType, DecisionType } from '../types';
+import type { Theme } from '@atlaskit/theme/types';
 export interface Props {
     icon: JSX.Element;
     itemType: TaskType | DecisionType;
@@ -12,10 +15,11 @@ export interface Props {
         [key: string]: string | number;
     };
     checkBoxId?: string;
+    theme: Theme;
 }
 export default class Item extends PureComponent<Props, {}> {
     static defaultProps: Partial<Props>;
     private renderPlaceholder;
-    renderMessageAppearance(): JSX.Element | null;
-    render(): JSX.Element | null;
+    renderMessageAppearance(): jsx.JSX.Element | null;
+    render(): jsx.JSX.Element | null;
 }

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

@@ -1,5 +1,5 @@
+/** @jsx jsx */
 import React from 'react';
-import { PureComponent } from 'react';
 import { Appearance, ContentRef } from '../types';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -17,14 +17,5 @@ export interface Props {
         [key: string]: string | number;
     };
 }
-export declare class TaskItem extends PureComponent<Props & WithAnalyticsEventsProps, {}> {
-    static defaultProps: Partial<Props>;
-    private checkBoxId;
-    constructor(props: Props & WithAnalyticsEventsProps);
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    handleOnChange: (_evt: React.SyntheticEvent<HTMLInputElement>) => void;
-    handleOnKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps>, keyof Props>> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,8 +1,9 @@
 import { PureComponent, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface Props {
     listId?: string;
     children?: ReactNode;
 }
 export default class TaskList extends PureComponent<Props, {}> {
-    render(): JSX.Element | null;
+    render(): jsx.JSX.Element | null;
 }

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

@@ -0,0 +1,2 @@
+declare const listStyle: import("@emotion/react").SerializedStyles;
+export default listStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.4.5",
+  "version": "17.5.0",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,10 +29,11 @@
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
@@ -45,11 +46,12 @@
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-common": "^69.1.0",
+    "@atlaskit/editor-common": "^69.2.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/renderer": "^101.0.0",
+    "@atlaskit/renderer": "^101.1.0",
     "@atlaskit/util-data-test": "^17.5.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/jest": "^11.8.0",
     "@types/url-search-params": "^0.10.0",
     "date-fns": "^2.17.0",
     "enzyme": "^3.10.0",

package/dist/cjs/styled/DecisionItem.js

@@ -1,31 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EditorIconWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _components = require("@atlaskit/theme/components");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _templateObject;
-
-var EditorIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
-  return props.showPlaceholder ? (0, _tokens.token)('color.icon.subtle', _colors.N100) : (0, _components.themed)({
-    light: (0, _tokens.token)('color.icon.success', _colors.G400),
-    dark: (0, _tokens.token)('color.icon.success', _colors.G200)
-  });
-}, (0, _constants.gridSize)() * 1.5);
-
-exports.EditorIconWrapper = EditorIconWrapper;

package/dist/cjs/styled/Item.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TaskWrapper = exports.ParticipantWrapper = exports.DecisionWrapper = exports.ContentWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _components = require("@atlaskit/theme/components");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-var ContentWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  word-wrap: break-word;\n  min-width: 0;\n  flex: 1 1 auto;\n"])));
-
-exports.ContentWrapper = ContentWrapper;
-
-var TaskWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 6px 3px;\n  position: relative;\n"])));
-
-exports.TaskWrapper = TaskWrapper;
-
-var DecisionWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  margin: ", "px 0 0 0;\n  padding: ", "px;\n  padding-left: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n  position: relative;\n\n  .decision-item {\n    cursor: initial;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 1.5, (0, _constants.borderRadius)(), (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.neutral', _colors.N20A),
-  dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
-}));
-
-exports.DecisionWrapper = DecisionWrapper;
-
-var ParticipantWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: -2px 8px;\n"])));
-
-exports.ParticipantWrapper = ParticipantWrapper;

package/dist/cjs/styled/ListWrapper.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TaskListWrapper = exports.DecisionListWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2;
-
-var WrapperStyles = "\n  /*\n    Increasing specificity with double ampersand to ensure these rules take\n    priority over the global styles applied to 'ol' elements.\n  */\n  && {\n    list-style-type: none;\n    padding-left: 0;\n  }\n";
-
-var TaskListWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), WrapperStyles);
-
-exports.TaskListWrapper = TaskListWrapper;
-
-var DecisionListWrapper = _styledComponents.default.ol(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), WrapperStyles);
-
-exports.DecisionListWrapper = DecisionListWrapper;