@atlaskit/task-decision 19.1.3 → 19.1.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/task-decision
 
+## 19.1.4
+
+### Patch Changes
+
+- [#139777](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139777)
+  [`cfdfe0077993d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfdfe0077993d) -
+  Fix bug where a refs were passed incorrectly, preventing task item focus from being set
+- Updated dependencies
+
 ## 19.1.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

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

package/dist/cjs/components/TaskItem.js

@@ -16,6 +16,8 @@ var _checkboxChecked = _interopRequireDefault(require("@atlaskit/icon/core/check
 var _Item = _interopRequireDefault(require("./Item"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../analytics");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _useCallbackRef = require("use-callback-ref");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -37,7 +39,7 @@ 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,
@@ -50,8 +52,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 = (0, _react.useMemo)(function () {
     return getCheckBoxId(taskId);
   }, [taskId]);
@@ -128,7 +130,98 @@ var TaskItem = function TaskItem(props) {
     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 = (0, _react.useMemo)(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = (0, _react.useMemo)(function () {
+    return function (_evt) {
+      var newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      var action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        (0, _analytics.createAndFireEventInElementsChannel)({
+          action: action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = (0, _react.useMemo)(function () {
+    return function (event) {
+      if (event.key === 'Enter') {
+        handleOnChange(event);
+      }
+    };
+  }, [handleOnChange]);
+  var localInputRef = (0, _react.useRef)(null);
+  var inputRef = (0, _useCallbackRef.useMergeRefs)(inputRefFromProps === undefined ? [localInputRef] : [inputRefFromProps, localInputRef]);
+  var icon = /*#__PURE__*/_react.default.createElement("span", {
+    contentEditable: false,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _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": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: checkBoxId,
+    "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    onClick: onClick,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
+  }), isDone ? /*#__PURE__*/_react.default.createElement(_checkboxChecked.default, {
+    label: ""
+  }) : /*#__PURE__*/_react.default.createElement(CheckboxUncheckedIcon, {
+    label: ""
+  }));
+  _react.default.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.default.createElement(_Item.default, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId
+  }, children);
+};
 
 // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
 // going through the high order component.
-var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(TaskItem);
+var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_task_item_ref_fix', (0, _analyticsNext.withAnalyticsEvents)()(TaskItemWithRefFix), (0, _analyticsNext.withAnalyticsEvents)()(TaskItemWithoutRefFix));

package/dist/es2019/components/TaskItem.js

@@ -11,6 +11,8 @@ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useMergeRefs } from 'use-callback-ref';
 const CheckboxUncheckedIcon = props => /*#__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'
@@ -24,7 +26,7 @@ const CheckboxUncheckedIcon = props => /*#__PURE__*/React.createElement(Icon, _e
 const checkboxStyles = null;
 let taskCount = 0;
 const getCheckBoxId = localId => `${localId}-${taskCount++}`;
-const TaskItem = props => {
+const TaskItemWithoutRefFix = props => {
   const {
     appearance,
     isDone,
@@ -38,9 +40,9 @@ const TaskItem = props => {
     taskId,
     onChange,
     onClick,
-    createAnalyticsEvent,
-    inputRef: inputRefFromProps
+    createAnalyticsEvent
   } = props;
+  const inputRefFromProps = props.inputRef;
   const checkBoxId = useMemo(() => getCheckBoxId(taskId), [taskId]);
   const handleOnChange = useMemo(() => {
     return _evt => {
@@ -110,8 +112,94 @@ const TaskItem = props => {
     checkBoxId: checkBoxId
   }, children);
 };
+const TaskItemWithRefFix = 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 localInputRef = useRef(null);
+  const inputRef = useMergeRefs(inputRefFromProps === undefined ? [localInputRef] : [inputRefFromProps, localInputRef]);
+  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 _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den5ugt7 _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"])
+  }, /*#__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
+  }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
+    label: ""
+  }));
+  React.useEffect(() => {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current4, _inputRef$current5;
+      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.blur();
+      setTimeout(() => {
+        var _inputRef$current6;
+        (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.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);
+export default componentWithFG('platform_editor_task_item_ref_fix', withAnalyticsEvents()(TaskItemWithRefFix), withAnalyticsEvents()(TaskItemWithoutRefFix));

package/dist/esm/components/TaskItem.js

@@ -11,6 +11,8 @@ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useMergeRefs } from 'use-callback-ref';
 var CheckboxUncheckedIcon = function CheckboxUncheckedIcon(props) {
   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\"/>",
@@ -28,7 +30,7 @@ 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,
@@ -41,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]);
@@ -119,8 +121,99 @@ var TaskItem = function TaskItem(props) {
     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,
+    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);
+export default componentWithFG('platform_editor_task_item_ref_fix', withAnalyticsEvents()(TaskItemWithRefFix), withAnalyticsEvents()(TaskItemWithoutRefFix));

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

@@ -1,4 +1,4 @@
-import React, { type RefObject } from 'react';
+import React, { type Ref } from 'react';
 import { PureComponent } from 'react';
 import { type Appearance, type ContentRef, type TaskDecisionProvider } from '../types';
 export interface Props {
@@ -19,7 +19,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     disableOnChange?: boolean;
 }
 export interface State {

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type RefObject } from 'react';
+import React, { Ref } from 'react';
 import { type Appearance, type ContentRef } from '../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -21,7 +21,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+declare const _default: React.FC<Omit<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/ResourcedTaskItem.d.ts

@@ -1,4 +1,4 @@
-import React, { type RefObject } from 'react';
+import React, { type Ref } from 'react';
 import { PureComponent } from 'react';
 import { type Appearance, type ContentRef, type TaskDecisionProvider } from '../types';
 export interface Props {
@@ -19,7 +19,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     disableOnChange?: boolean;
 }
 export interface State {

package/dist/types-ts4.5/components/TaskItem.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type RefObject } from 'react';
+import React, { Ref } from 'react';
 import { type Appearance, type ContentRef } from '../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -21,7 +21,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+declare const _default: React.FC<Omit<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "19.1.3",
+	"version": "19.1.4",
 	"description": "Tasks and decisions react components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,11 +43,13 @@
 	"dependencies": {
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/icon": "^25.3.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/platform-feature-flags-react": "^0.1.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
+		"use-callback-ref": "^1.2.3",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {