@atlaskit/task-decision 17.3.0 → 17.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/ResourcedTaskItem.js +3 -1
  3. package/dist/cjs/components/TaskItem.js +10 -2
  4. package/dist/cjs/styled/TaskItem.js +15 -4
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/components/ResourcedTaskItem.js +3 -1
  7. package/dist/es2019/components/TaskItem.js +11 -2
  8. package/dist/es2019/styled/TaskItem.js +10 -3
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/components/ResourcedTaskItem.js +3 -1
  11. package/dist/esm/components/TaskItem.js +11 -2
  12. package/dist/esm/styled/TaskItem.js +10 -5
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/components/ResourcedTaskItem.d.ts +1 -0
  15. package/dist/types/components/TaskItem.d.ts +3 -1
  16. package/dist/types/styled/TaskItem.d.ts +6 -2
  17. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/task-decision
2
2
 
3
+ ## 17.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`57f3b255fb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/57f3b255fb2) - [ux] AK-608: Action items are keyboard accessible
8
+
3
9
  ## 17.3.0
4
10
 
5
11
  ### Minor Changes
package/dist/cjs/components/ResourcedTaskItem.js CHANGED
@@ -186,13 +186,15 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
186
186
  placeholder = _this$props3.placeholder,
187
187
  taskId = _this$props3.taskId,
188
188
  disabled = _this$props3.disabled,
189
- dataAttributes = _this$props3.dataAttributes;
189
+ dataAttributes = _this$props3.dataAttributes,
190
+ isRenderer = _this$props3.isRenderer;
190
191
  return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
191
192
  data: {
192
193
  objectAri: objectAri
193
194
  }
194
195
  }, /*#__PURE__*/_react.default.createElement(_TaskItem.default, {
195
196
  isDone: isDone,
197
+ isRenderer: isRenderer,
196
198
  taskId: taskId,
197
199
  onChange: this.handleOnChange,
198
200
  appearance: appearance,
package/dist/cjs/components/TaskItem.js CHANGED
@@ -82,6 +82,11 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
82
82
  })(createAnalyticsEvent);
83
83
  }
84
84
  });
85
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnKeyPress", function (event) {
86
+ if (event.key === 'Enter') {
87
+ _this.handleOnChange(event);
88
+ }
89
+ });
85
90
  _this.checkBoxId = getCheckBoxId(props.taskId);
86
91
  return _this;
87
92
  }
@@ -99,6 +104,7 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
99
104
  var _this$props2 = this.props,
100
105
  appearance = _this$props2.appearance,
101
106
  isDone = _this$props2.isDone,
107
+ isRenderer = _this$props2.isRenderer,
102
108
  contentRef = _this$props2.contentRef,
103
109
  children = _this$props2.children,
104
110
  placeholder = _this$props2.placeholder,
@@ -107,7 +113,8 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
107
113
  dataAttributes = _this$props2.dataAttributes;
108
114
 
109
115
  var icon = /*#__PURE__*/_react.default.createElement(_TaskItem.CheckBoxWrapper, {
110
- contentEditable: false
116
+ contentEditable: false,
117
+ isRenderer: isRenderer
111
118
  }, /*#__PURE__*/_react.default.createElement("input", {
112
119
  id: this.checkBoxId,
113
120
  "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
@@ -116,7 +123,8 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
116
123
  onChange: this.handleOnChange,
117
124
  checked: !!isDone,
118
125
  disabled: !!disabled,
119
- suppressHydrationWarning: true
126
+ suppressHydrationWarning: true,
127
+ onKeyPress: this.handleOnKeyPress
120
128
  }), /*#__PURE__*/_react.default.createElement("label", {
121
129
  htmlFor: this.checkBoxId,
122
130
  suppressHydrationWarning: true
package/dist/cjs/styled/TaskItem.js CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
@@ -9,7 +11,7 @@ exports.CheckBoxWrapper = void 0;
9
11
 
10
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
13
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
14
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
15
 
14
16
  var _components = require("@atlaskit/theme/components");
15
17
 
@@ -17,15 +19,24 @@ var _constants = require("@atlaskit/theme/constants");
17
19
 
18
20
  var _colors = require("@atlaskit/theme/colors");
19
21
 
20
- var _templateObject;
22
+ var _templateObject, _templateObject2;
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
25
 
22
- var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n position: relative;\n align-self: start;\n margin: 4px ", "px 0 0;\n\n & > input[type='checkbox'] {\n position: absolute;\n outline: none;\n margin: 0;\n opacity: 0;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n\n + label {\n box-sizing: border-box;\n display: block;\n position: relative;\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 &:not([disabled]) + label:hover::after {\n background: ", "\n transition: border 0.2s ease-in-out;\n }\n &[disabled] + label {\n opacity: 0.5;\n cursor: default;\n }\n &:checked {\n + label::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 border-radius: 0; /* FS-1392 */\n }\n &:not([disabled]) + label:hover::after {\n background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n no-repeat 0 0;\n background-size: 16px;\n }\n }\n }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n position: relative;\n align-self: start;\n margin: 4px ", "px 0 0;\n\n & > input[type='checkbox'] {\n position: absolute;\n outline: none;\n margin: 0;\n opacity: 0;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n\n + label {\n box-sizing: border-box;\n display: block;\n position: relative;\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 &:focus-visible + label:after {\n ", "\n }\n &:not([disabled]) + label:hover::after {\n background: ", "\n transition: border 0.2s ease-in-out;\n }\n &[disabled] + label {\n opacity: 0.5;\n cursor: default;\n }\n &:checked {\n + label::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]) + label:hover::after {\n background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n no-repeat 0 0;\n background-size: 16px;\n }\n }\n }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
23
29
  light: _colors.N0,
24
30
  dark: _colors.DN100
25
31
  }), (0, _components.themed)({
26
32
  light: _colors.N90,
27
33
  dark: _colors.DN200
28
- }), (0, _components.themed)({
34
+ }), function (props) {
35
+ return props.isRenderer ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n outline: 2px solid ", ";\n "])), (0, _components.themed)({
36
+ light: _colors.B300,
37
+ dark: _colors.B75
38
+ })) : '';
39
+ }, (0, _components.themed)({
29
40
  light: _colors.N30,
30
41
  dark: _colors.B75
31
42
  }));
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.3.0",
3
+ "version": "17.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/ResourcedTaskItem.js CHANGED
@@ -137,7 +137,8 @@ export default class ResourcedTaskItem extends PureComponent {
137
137
  placeholder,
138
138
  taskId,
139
139
  disabled,
140
- dataAttributes
140
+ dataAttributes,
141
+ isRenderer
141
142
  } = this.props;
142
143
  return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
143
144
  data: {
@@ -145,6 +146,7 @@ export default class ResourcedTaskItem extends PureComponent {
145
146
  }
146
147
  }, /*#__PURE__*/React.createElement(TaskItem, {
147
148
  isDone: isDone,
149
+ isRenderer: isRenderer,
148
150
  taskId: taskId,
149
151
  onChange: this.handleOnChange,
150
152
  appearance: appearance,
package/dist/es2019/components/TaskItem.js CHANGED
@@ -40,6 +40,12 @@ export class TaskItem extends PureComponent {
40
40
  }
41
41
  });
42
42
 
43
+ _defineProperty(this, "handleOnKeyPress", event => {
44
+ if (event.key === 'Enter') {
45
+ this.handleOnChange(event);
46
+ }
47
+ });
48
+
43
49
  this.checkBoxId = getCheckBoxId(props.taskId);
44
50
  }
45
51
 
@@ -53,6 +59,7 @@ export class TaskItem extends PureComponent {
53
59
  const {
54
60
  appearance,
55
61
  isDone,
62
+ isRenderer,
56
63
  contentRef,
57
64
  children,
58
65
  placeholder,
@@ -61,7 +68,8 @@ export class TaskItem extends PureComponent {
61
68
  dataAttributes
62
69
  } = this.props;
63
70
  const icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
64
- contentEditable: false
71
+ contentEditable: false,
72
+ isRenderer: isRenderer
65
73
  }, /*#__PURE__*/React.createElement("input", {
66
74
  id: this.checkBoxId,
67
75
  "aria-labelledby": `${this.checkBoxId}-wrapper`,
@@ -70,7 +78,8 @@ export class TaskItem extends PureComponent {
70
78
  onChange: this.handleOnChange,
71
79
  checked: !!isDone,
72
80
  disabled: !!disabled,
73
- suppressHydrationWarning: true
81
+ suppressHydrationWarning: true,
82
+ onKeyPress: this.handleOnKeyPress
74
83
  }), /*#__PURE__*/React.createElement("label", {
75
84
  htmlFor: this.checkBoxId,
76
85
  suppressHydrationWarning: true
package/dist/es2019/styled/TaskItem.js CHANGED
@@ -1,9 +1,9 @@
1
- import styled from 'styled-components'; // @ts-ignore: unused variable
1
+ import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
2
2
  // prettier-ignore
3
3
 
4
4
  import { themed } from '@atlaskit/theme/components';
5
5
  import { gridSize } from '@atlaskit/theme/constants';
6
- import { N0, DN100, DN200, N30, N90, B75 } from '@atlaskit/theme/colors';
6
+ import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
7
7
  export const CheckBoxWrapper = styled.span`
8
8
  flex: 0 0 16px;
9
9
  width: 16px;
@@ -52,6 +52,14 @@ export const CheckBoxWrapper = styled.span`
52
52
  transform: translate(-50%, -50%);
53
53
  }
54
54
  }
55
+ &:focus-visible + label:after {
56
+ ${props => props.isRenderer ? css`
57
+ outline: 2px solid ${themed({
58
+ light: B300,
59
+ dark: B75
60
+ })};
61
+ ` : ''}
62
+ }
55
63
  &:not([disabled]) + label:hover::after {
56
64
  background: ${themed({
57
65
  light: N30,
@@ -70,7 +78,6 @@ export const CheckBoxWrapper = styled.span`
70
78
  background-size: 16px;
71
79
  border: 0;
72
80
  border-color: transparent;
73
- border-radius: 0; /* FS-1392 */
74
81
  }
75
82
  &:not([disabled]) + label:hover::after {
76
83
  background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.3.0",
3
+ "version": "17.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/ResourcedTaskItem.js CHANGED
@@ -169,13 +169,15 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
169
169
  placeholder = _this$props3.placeholder,
170
170
  taskId = _this$props3.taskId,
171
171
  disabled = _this$props3.disabled,
172
- dataAttributes = _this$props3.dataAttributes;
172
+ dataAttributes = _this$props3.dataAttributes,
173
+ isRenderer = _this$props3.isRenderer;
173
174
  return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
174
175
  data: {
175
176
  objectAri: objectAri
176
177
  }
177
178
  }, /*#__PURE__*/React.createElement(TaskItem, {
178
179
  isDone: isDone,
180
+ isRenderer: isRenderer,
179
181
  taskId: taskId,
180
182
  onChange: this.handleOnChange,
181
183
  appearance: appearance,
package/dist/esm/components/TaskItem.js CHANGED
@@ -60,6 +60,12 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
60
60
  }
61
61
  });
62
62
 
63
+ _defineProperty(_assertThisInitialized(_this), "handleOnKeyPress", function (event) {
64
+ if (event.key === 'Enter') {
65
+ _this.handleOnChange(event);
66
+ }
67
+ });
68
+
63
69
  _this.checkBoxId = getCheckBoxId(props.taskId);
64
70
  return _this;
65
71
  }
@@ -77,6 +83,7 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
77
83
  var _this$props2 = this.props,
78
84
  appearance = _this$props2.appearance,
79
85
  isDone = _this$props2.isDone,
86
+ isRenderer = _this$props2.isRenderer,
80
87
  contentRef = _this$props2.contentRef,
81
88
  children = _this$props2.children,
82
89
  placeholder = _this$props2.placeholder,
@@ -84,7 +91,8 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
84
91
  disabled = _this$props2.disabled,
85
92
  dataAttributes = _this$props2.dataAttributes;
86
93
  var icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
87
- contentEditable: false
94
+ contentEditable: false,
95
+ isRenderer: isRenderer
88
96
  }, /*#__PURE__*/React.createElement("input", {
89
97
  id: this.checkBoxId,
90
98
  "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
@@ -93,7 +101,8 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
93
101
  onChange: this.handleOnChange,
94
102
  checked: !!isDone,
95
103
  disabled: !!disabled,
96
- suppressHydrationWarning: true
104
+ suppressHydrationWarning: true,
105
+ onKeyPress: this.handleOnKeyPress
97
106
  }), /*#__PURE__*/React.createElement("label", {
98
107
  htmlFor: this.checkBoxId,
99
108
  suppressHydrationWarning: true
package/dist/esm/styled/TaskItem.js CHANGED
@@ -1,20 +1,25 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
2
 
3
- var _templateObject;
3
+ var _templateObject, _templateObject2;
4
4
 
5
- import styled from 'styled-components'; // @ts-ignore: unused variable
5
+ import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
6
6
  // prettier-ignore
7
7
 
8
8
  import { themed } from '@atlaskit/theme/components';
9
9
  import { gridSize } from '@atlaskit/theme/constants';
10
- import { N0, DN100, DN200, N30, N90, B75 } from '@atlaskit/theme/colors';
11
- export var CheckBoxWrapper = styled.span(_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 position: absolute;\n outline: none;\n margin: 0;\n opacity: 0;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n\n + label {\n box-sizing: border-box;\n display: block;\n position: relative;\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 &:not([disabled]) + label:hover::after {\n background: ", "\n transition: border 0.2s ease-in-out;\n }\n &[disabled] + label {\n opacity: 0.5;\n cursor: default;\n }\n &:checked {\n + label::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 border-radius: 0; /* FS-1392 */\n }\n &:not([disabled]) + label:hover::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({
10
+ import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
11
+ export var CheckBoxWrapper = styled.span(_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 position: absolute;\n outline: none;\n margin: 0;\n opacity: 0;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n\n + label {\n box-sizing: border-box;\n display: block;\n position: relative;\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 &:focus-visible + label:after {\n ", "\n }\n &:not([disabled]) + label:hover::after {\n background: ", "\n transition: border 0.2s ease-in-out;\n }\n &[disabled] + label {\n opacity: 0.5;\n cursor: default;\n }\n &:checked {\n + label::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]) + label:hover::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({
12
12
  light: N0,
13
13
  dark: DN100
14
14
  }), themed({
15
15
  light: N90,
16
16
  dark: DN200
17
- }), themed({
17
+ }), function (props) {
18
+ return props.isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n outline: 2px solid ", ";\n "])), themed({
19
+ light: B300,
20
+ dark: B75
21
+ })) : '';
22
+ }, themed({
18
23
  light: N30,
19
24
  dark: B75
20
25
  }));
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.3.0",
3
+ "version": "17.3.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/ResourcedTaskItem.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Appearance, ContentRef, TaskDecisionProvider } from '../types';
3
3
  export interface Props {
4
4
  taskId: string;
5
5
  isDone?: boolean;
6
+ isRenderer?: boolean;
6
7
  onChange?: (taskId: string, isChecked: boolean) => void;
7
8
  contentRef?: ContentRef;
8
9
  children?: any;
package/dist/types/components/TaskItem.d.ts CHANGED
@@ -5,6 +5,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
5
5
  export interface Props {
6
6
  taskId: string;
7
7
  isDone?: boolean;
8
+ isRenderer?: boolean;
8
9
  onChange?: (taskId: string, isChecked: boolean) => void;
9
10
  contentRef?: ContentRef;
10
11
  children?: any;
@@ -22,7 +23,8 @@ export declare class TaskItem extends PureComponent<Props & WithAnalyticsEventsP
22
23
  constructor(props: Props & WithAnalyticsEventsProps);
23
24
  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
24
25
  handleOnChange: (_evt: React.SyntheticEvent<HTMLInputElement>) => void;
26
+ handleOnKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
25
27
  render(): JSX.Element;
26
28
  }
27
- declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
29
+ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
28
30
  export default _default;
package/dist/types/styled/TaskItem.d.ts CHANGED
@@ -1,2 +1,6 @@
1
- import { HTMLAttributes, ComponentClass } from 'react';
2
- export declare const CheckBoxWrapper: ComponentClass<HTMLAttributes<{}>>;
1
+ import { HTMLAttributes, ClassAttributes } from 'react';
2
+ export declare const CheckBoxWrapper: import("styled-components").StyledComponentClass<ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
3
+ isRenderer: boolean | undefined;
4
+ }, any, ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
5
+ isRenderer: boolean | undefined;
6
+ }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.3.0",
3
+ "version": "17.3.1",
4
4
  "description": "Tasks and decisions react components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
26
26
  "access": "public"
27
27
  },
28
28
  "dependencies": {
29
- "@atlaskit/analytics-namespaced-context": "^6.3.0",
29
+ "@atlaskit/analytics-namespaced-context": "^6.4.0",
30
30
  "@atlaskit/analytics-next": "^8.2.0",
31
31
  "@atlaskit/icon": "^21.10.0",
32
32
  "@atlaskit/theme": "^12.1.0",
@@ -41,12 +41,12 @@
41
41
  "url-search-params": "^0.10.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@atlaskit/analytics-listeners": "^8.0.0",
44
+ "@atlaskit/analytics-listeners": "^8.2.0",
45
45
  "@atlaskit/avatar": "^20.5.0",
46
46
  "@atlaskit/docs": "*",
47
- "@atlaskit/editor-common": "^63.0.0",
47
+ "@atlaskit/editor-common": "^64.0.0",
48
48
  "@atlaskit/elements-test-helpers": "^0.7.0",
49
- "@atlaskit/renderer": "^85.0.0",
49
+ "@atlaskit/renderer": "^86.0.0",
50
50
  "@atlaskit/util-data-test": "^17.2.0",
51
51
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
52
52
  "@types/url-search-params": "^0.10.0",