@atlaskit/link-datasource 3.12.0 → 3.13.0

package/dist/cjs/ui/issue-like-table/edit-type/user/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useDebounce = require("use-debounce");
+var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _ufoExperiences = require("../../../../analytics/ufoExperiences");
+var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
+var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
+var _constants = require("../../../common/modal/popup-select/constants");
+var _user = require("../../render-type/user");
+var _inlineEdit = require("../../table-cell-content/inline-edit");
+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; }
+var UserEditType = function UserEditType(props) {
+  var _currentValue$values;
+  var currentValue = props.currentValue,
+    executeFetch = props.executeFetch;
+  var _useState = (0, _react.useState)({
+      query: ''
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fetchInputs = _useState2[0],
+    setFetchInputs = _useState2[1];
+  var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (query) {
+      return setFetchInputs({
+        query: query
+      });
+    }, _constants.SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
+    handleUserInputDebounced = _useDebouncedCallback2[0];
+  var _useLoadOptions = (0, _useLoadOptions2.useLoadOptions)({
+      executeFetch: executeFetch,
+      fetchInputs: fetchInputs
+    }),
+    options = _useLoadOptions.options,
+    isLoading = _useLoadOptions.isLoading,
+    hasFailed = _useLoadOptions.hasFailed;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
+  (0, _react.useEffect)(function () {
+    if (!experienceId) {
+      return;
+    }
+    if (hasFailed) {
+      (0, _ufoExperiences.failUfoExperience)({
+        name: _inlineEdit.InlineEditUFOExperience
+      }, experienceId);
+    } else if (!isLoading) {
+      (0, _ufoExperiences.succeedUfoExperience)({
+        name: _inlineEdit.InlineEditUFOExperience
+      }, experienceId);
+    }
+  }, [experienceId, isLoading, hasFailed]);
+  return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
+    autoFocus: true,
+    defaultMenuIsOpen: true,
+    blurInputOnSelect: true,
+    options: options,
+    isLoading: isLoading,
+    testId: "inline-edit-user",
+    filterOption: function filterOption() {
+      return true;
+    } // necessary, otherwise by default all options will be filtered out on user input
+    ,
+    onInputChange: handleUserInputDebounced,
+    defaultValue: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    getOptionValue: function getOptionValue(option) {
+      return option.atlassianUserId;
+    },
+    formatOptionLabel: function formatOptionLabel(option) {
+      return /*#__PURE__*/_react.default.createElement(_avatar.AvatarItem, {
+        avatar: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          appearance: "circle",
+          size: 'small',
+          src: option.avatarSource,
+          testId: "".concat(_user.USER_TYPE_TEST_ID, "--avatar--").concat(option.atlassianUserId)
+        }),
+        primaryText: option.displayName
+      });
+    },
+    onChange: function onChange(e) {
+      return props.setEditValues({
+        type: 'user',
+        values: e ? [e] : []
+      });
+    }
+  }));
+};
+var _default = exports.default = UserEditType;

package/dist/cjs/ui/issue-like-table/index.js

@@ -719,35 +719,37 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         shouldUseWidth: shouldUseWidth,
         width: width
       });
-
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
-        return (0, _react2.jsx)(_styled2.InlineEditableTableCell, {
-          key: cellKey,
-          "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-          colSpan: isEditable && isLastCell ? 2 : undefined
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          ,
-          style: loadingRowStyle,
-          css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-        }, content);
-      } else {
-        // extra padding is required around skeleton loader to avoid vertical jumps when data loads
-        if (key !== null && key !== void 0 && key.includes('loading')) {
-          loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
-            paddingBlock: "var(--ds-space-100, 8px)"
-          });
+      if ((0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state')) {
+        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+        if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
+          return (0, _react2.jsx)(_styled2.InlineEditableTableCell, {
+            key: cellKey,
+            "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+            colSpan: isEditable && isLastCell ? 2 : undefined
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+            ,
+            style: loadingRowStyle,
+            css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+          }, content);
         }
-        return (0, _react2.jsx)(_styled2.TableCell, {
-          key: cellKey,
-          "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-          colSpan: isEditable && isLastCell ? 2 : undefined
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          ,
-          style: loadingRowStyle,
-          css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-        }, content);
       }
+
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+          paddingBlock: "var(--ds-space-100, 8px)"
+        });
+      }
+      return (0, _react2.jsx)(_styled2.TableCell, {
+        key: cellKey,
+        "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+        colSpan: isEditable && isLastCell ? 2 : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: loadingRowStyle,
+        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+      }, content);
     }));
   }))));
   return (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? (0, _react2.jsx)(_flag.FlagsProvider, null, view) : view;

package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -29,14 +29,16 @@ var editContainerStyles = (0, _primitives.xcss)({
   marginBlockStart: 'space.negative.100'
 });
 var getBackendUpdateValue = function getBackendUpdateValue(typedNewValue) {
-  var _typedNewValue$values, _typedNewValue$values2;
+  var _typedNewValue$values, _typedNewValue$values2, _typedNewValue$values3;
   switch (typedNewValue.type) {
     case 'string':
       return typedNewValue.values[0] || '';
     case 'status':
       return ((_typedNewValue$values = typedNewValue.values[0]) === null || _typedNewValue$values === void 0 ? void 0 : _typedNewValue$values.transitionId) || '';
+    case 'user':
+      return ((_typedNewValue$values2 = typedNewValue.values[0]) === null || _typedNewValue$values2 === void 0 ? void 0 : _typedNewValue$values2.atlassianUserId) || '';
     case 'icon':
-      return ((_typedNewValue$values2 = typedNewValue.values[0]) === null || _typedNewValue$values2 === void 0 ? void 0 : _typedNewValue$values2.id) || '';
+      return ((_typedNewValue$values3 = typedNewValue.values[0]) === null || _typedNewValue$values3 === void 0 ? void 0 : _typedNewValue$values3.id) || '';
   }
   throw new Error("Datasource 2 way sync Backend update value not implemented for type ".concat(typedNewValue.type));
 };
@@ -47,6 +49,7 @@ var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue)
         data: newValue.values[0] || ''
       }));
     case 'status':
+    case 'user':
     case 'icon':
       return newValue.values[0] ? _objectSpread(_objectSpread({}, existingItem), {}, (0, _defineProperty2.default)({}, columnKey, {
         data: newValue.values[0]

package/dist/es2019/hooks/useLoadOptions.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { ActionOperationStatus } from '@atlaskit/linking-types';
+import { useDatasourceTableFlag } from './useDatasourceTableFlag';
+const loadOptions = async (fetchInputs = {}, executeFetch) => {
+  if (!executeFetch) {
+    return [];
+  }
+  const result = await executeFetch(fetchInputs);
+  const {
+    operationStatus,
+    entities
+  } = result;
+  if (operationStatus === ActionOperationStatus.FAILURE) {
+    throw new Error('Failed to fetch status options');
+  }
+  return entities !== null && entities !== void 0 ? entities : [];
+};
+export const useLoadOptions = ({
+  fetchInputs,
+  executeFetch
+}) => {
+  const [{
+    options,
+    isLoading,
+    hasFailed
+  }, setOptions] = useState({
+    isLoading: true,
+    options: [],
+    hasFailed: false
+  });
+  const {
+    showErrorFlag
+  } = useDatasourceTableFlag({
+    isFetchAction: true
+  });
+  useEffect(() => {
+    let isMounted = true;
+    loadOptions(fetchInputs, executeFetch).then(options => {
+      if (isMounted) {
+        setOptions({
+          isLoading: false,
+          options,
+          hasFailed: false
+        });
+      }
+    }).catch(err => {
+      showErrorFlag();
+      setOptions({
+        isLoading: false,
+        options: [],
+        hasFailed: true
+      });
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchInputs, executeFetch, showErrorFlag]);
+  return {
+    options,
+    isLoading,
+    hasFailed
+  };
+};

package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
-import { ActionOperationStatus } from '@atlaskit/linking-types';
+import React, { useEffect } from 'react';
+
 // FilterOptionOption is used in the filterOption function which is part of the public API, but the type itself is not exported
 // eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
 
 import Select from '@atlaskit/select';
 import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
-import { useDatasourceTableFlag } from '../../../../hooks/useDatasourceTableFlag';
+import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { SharedIconComponent } from '../../shared-components/icon';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
 /**
@@ -23,7 +23,9 @@ const IconEditType = props => {
     options,
     isLoading,
     hasFailed
-  } = usePriorityOptions(currentValue, executeFetch);
+  } = useLoadOptions({
+    executeFetch
+  });
   const experienceId = useDatasourceExperienceId();
   useEffect(() => {
     if (!experienceId) {
@@ -39,16 +41,17 @@ const IconEditType = props => {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-    testId: "inline-edit-priority",
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
     autoFocus: true,
-    defaultMenuIsOpen: true,
     blurInputOnSelect: true,
-    getOptionValue: option => option.text || '',
+    defaultMenuIsOpen: true,
     options: options,
+    menuPlacement: "auto",
     isLoading: isLoading,
-    defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
     filterOption: filterOption,
+    testId: "inline-edit-priority",
+    defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    getOptionValue: option => option.text || '',
     formatOptionLabel: ({
       source,
       label,
@@ -63,71 +66,7 @@ const IconEditType = props => {
       type: 'icon',
       values: e ? [e] : []
     })
-  })));
+  }));
 };
 const filterOption = (option, inputValue) => option.label.toLowerCase().includes(inputValue.toLowerCase());
-const usePriorityOptions = (currentValue, executeFetch) => {
-  const [{
-    options,
-    isLoading,
-    hasFailed
-  }, setOptions] = useState({
-    isLoading: true,
-    options: [],
-    hasFailed: false
-  });
-  const {
-    showErrorFlag
-  } = useDatasourceTableFlag({
-    isFetchAction: true
-  });
-  useEffect(() => {
-    let isMounted = true;
-    loadOptions(currentValue, executeFetch).then(options => {
-      if (isMounted) {
-        setOptions({
-          isLoading: false,
-          options,
-          hasFailed: false
-        });
-      }
-    }).catch(err => {
-      showErrorFlag();
-      setOptions({
-        isLoading: false,
-        options: [],
-        hasFailed: true
-      });
-    });
-    return () => {
-      isMounted = false;
-    };
-  }, [currentValue, executeFetch, showErrorFlag]);
-  return {
-    options,
-    isLoading,
-    hasFailed
-  };
-};
-
-/**
- * Load options for the select
- */
-const loadOptions = async (_currentValue, executeFetch) => {
-  if (!executeFetch) {
-    return [];
-  }
-  const {
-    operationStatus,
-    entities
-  } = await executeFetch({});
-  if (operationStatus === ActionOperationStatus.FAILURE) {
-    throw new Error('Failed to fetch icon options');
-  }
-  if (operationStatus === ActionOperationStatus.SUCCESS && entities) {
-    // Map entities here if the backend type is different from the type required by the select
-    return entities;
-  }
-  return [];
-};
 export default IconEditType;

package/dist/es2019/ui/issue-like-table/edit-type/index.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import IconEditType from './icon';
 import StatusEditType from './status';
-import TextEditType, { toTextValue } from './text';
+import TextEditType from './text';
+import UserEditType from './user';
 
 // This is used in editor-card-plugin to identify if any type of inline edit is active.
 const ACTIVE_INLINE_EDIT_ID = 'sllv-active-inline-edit';
@@ -13,10 +14,11 @@ export const editType = ({
   setEditValues,
   executeFetch
 }) => {
+  var _toValueType, _value$atlassianUserI;
   switch (defaultValue.type) {
     case 'string':
       return {
-        defaultValue: toTextValue(defaultValue),
+        defaultValue: (_toValueType = toValueType(defaultValue)) !== null && _toValueType !== void 0 ? _toValueType : '',
         editView: ({
           ...fieldProps
         }) => /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
@@ -27,7 +29,7 @@ export const editType = ({
       };
     case 'icon':
       return {
-        defaultValue: toTextValue(defaultValue),
+        defaultValue: toValueType(defaultValue),
         editView: ({
           value,
           ...fieldProps
@@ -40,7 +42,7 @@ export const editType = ({
       };
     case 'status':
       return {
-        defaultValue: toTextValue(defaultValue),
+        defaultValue: toValueType(defaultValue),
         editView: ({
           ...fieldProps
         }) => /*#__PURE__*/React.createElement(StatusEditType, _extends({}, fieldProps, {
@@ -50,6 +52,19 @@ export const editType = ({
           executeFetch: executeFetch
         }))
       };
+    case 'user':
+      const value = toValueType(defaultValue);
+      return {
+        defaultValue: (_value$atlassianUserI = value === null || value === void 0 ? void 0 : value.atlassianUserId) !== null && _value$atlassianUserI !== void 0 ? _value$atlassianUserI : '',
+        editView: ({
+          ...fieldProps
+        }) => /*#__PURE__*/React.createElement(UserEditType, _extends({}, fieldProps, {
+          currentValue: currentValue,
+          setEditValues: setEditValues,
+          id: ACTIVE_INLINE_EDIT_ID,
+          executeFetch: executeFetch
+        }))
+      };
   }
   return {
     defaultValue: '',
@@ -57,10 +72,14 @@ export const editType = ({
   };
 };
 export const isEditTypeSupported = type => {
-  const supportedEditType = ['string', ...(fg('platform-datasources-enable-two-way-sync-statuses') ? ['status'] : []), ...(fg('platform-datasources-enable-two-way-sync-priority') ? ['icon'] : [])];
+  const supportedEditType = ['string', ...(fg('platform-datasources-enable-two-way-sync-statuses') ? ['status'] : []), ...(fg('platform-datasources-enable-two-way-sync-priority') ? ['icon'] : []), ...(fg('platform-datasources-enable-two-way-sync-assignee') ? ['user'] : [])];
   return supportedEditType.includes(type);
 };
 export const isEditTypeSelectable = type => {
   const selectEditTypes = ['status', 'icon', 'user'];
   return selectEditTypes.includes(type);
+};
+export const toValueType = typeWithValues => {
+  var _typeWithValues$value;
+  return (_typeWithValues$value = typeWithValues.values) === null || _typeWithValues$value === void 0 ? void 0 : _typeWithValues$value[0];
 };

package/dist/es2019/ui/issue-like-table/edit-type/status/index.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
-import { ActionOperationStatus } from '@atlaskit/linking-types';
+import React, { useEffect } from 'react';
 import Lozenge from '@atlaskit/lozenge';
 import Select from '@atlaskit/select';
 import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
-import { useDatasourceTableFlag } from '../../../../hooks/useDatasourceTableFlag';
+import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
 const StatusEditType = props => {
   var _currentValue$values;
@@ -17,7 +16,7 @@ const StatusEditType = props => {
     options,
     isLoading,
     hasFailed
-  } = useStatusOptions({
+  } = useLoadOptions({
     executeFetch
   });
   const experienceId = useDatasourceExperienceId();
@@ -36,16 +35,16 @@ const StatusEditType = props => {
     }
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-    testId: "inline-edit-status",
     autoFocus: true,
+    options: options,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
-    getOptionValue: option => option.text,
-    options: options,
+    menuPlacement: "auto",
     isLoading: isLoading,
-    defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
     filterOption: filterOption,
-    menuPlacement: "auto",
+    testId: "inline-edit-status",
+    getOptionValue: option => option.text,
+    defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
     formatOptionLabel: option => /*#__PURE__*/React.createElement(Lozenge, _extends({
       testId: `inline-edit-status-option-${option.text}`
     }, option.style), option.text),
@@ -56,71 +55,4 @@ const StatusEditType = props => {
   }));
 };
 const filterOption = (option, inputValue) => option.data.text.toLowerCase().includes(inputValue.toLowerCase());
-const useStatusOptions = ({
-  fetchInputs,
-  executeFetch
-}) => {
-  const [{
-    options,
-    isLoading,
-    hasFailed
-  }, setOptions] = useState({
-    isLoading: true,
-    options: [],
-    hasFailed: false
-  });
-  const {
-    showErrorFlag
-  } = useDatasourceTableFlag({
-    isFetchAction: true
-  });
-  useEffect(() => {
-    let isMounted = true;
-    loadOptions(fetchInputs, executeFetch).then(options => {
-      if (isMounted) {
-        setOptions({
-          isLoading: false,
-          options,
-          hasFailed: false
-        });
-      }
-    }).catch(err => {
-      showErrorFlag();
-      setOptions({
-        isLoading: false,
-        options: [],
-        hasFailed: true
-      });
-    });
-    return () => {
-      isMounted = false;
-    };
-  }, [fetchInputs, executeFetch, showErrorFlag]);
-  return {
-    options,
-    isLoading,
-    hasFailed
-  };
-};
-const loadOptions = async (fetchInputs = {}, executeFetch) => {
-  if (executeFetch) {
-    const result = await executeFetch(fetchInputs);
-    const {
-      operationStatus,
-      entities
-    } = result;
-    if (operationStatus === ActionOperationStatus.FAILURE) {
-      throw new Error('Failed to fetch status options');
-    }
-    if (entities) {
-      return entities.map(entity => ({
-        id: entity.id,
-        text: entity.text,
-        style: entity.style,
-        transitionId: entity.transitionId
-      }));
-    }
-  }
-  return [];
-};
 export default StatusEditType;

package/dist/es2019/ui/issue-like-table/edit-type/text/index.js

@@ -4,12 +4,12 @@ import { Layering } from '@atlaskit/layering';
 import Textfield from '@atlaskit/textfield';
 import { succeedUfoExperience } from '../../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
-export const toTextValue = typeWithValues => {
-  var _ref, _typeWithValues$value;
-  return (_ref = (_typeWithValues$value = typeWithValues.values) === null || _typeWithValues$value === void 0 ? void 0 : _typeWithValues$value[0]) !== null && _ref !== void 0 ? _ref : '';
-};
 const TextEditType = props => {
+  var _currentValue$values$, _currentValue$values;
   const experienceId = useDatasourceExperienceId();
+  const {
+    currentValue
+  } = props;
   useEffect(() => {
     if (experienceId) {
       succeedUfoExperience({
@@ -27,7 +27,7 @@ const TextEditType = props => {
       // We need 8px left padding to match read only version, but there is already 1px of border
       padding: `${"var(--ds-space-100, 8px)"} calc(${"var(--ds-space-100, 8px)"} - 1px)`
     },
-    value: toTextValue(props.currentValue),
+    value: (_currentValue$values$ = currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0]) !== null && _currentValue$values$ !== void 0 ? _currentValue$values$ : '',
     onChange: e => props.setEditValues({
       type: 'string',
       values: [e.currentTarget.value]

package/dist/es2019/ui/issue-like-table/edit-type/user/index.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import Avatar, { AvatarItem } from '@atlaskit/avatar';
+import Select from '@atlaskit/select';
+import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/ufoExperiences';
+import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
+import { useLoadOptions } from '../../../../hooks/useLoadOptions';
+import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants';
+import { USER_TYPE_TEST_ID } from '../../render-type/user';
+import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+const UserEditType = props => {
+  var _currentValue$values;
+  const {
+    currentValue,
+    executeFetch
+  } = props;
+  const [fetchInputs, setFetchInputs] = useState({
+    query: ''
+  });
+  const [handleUserInputDebounced] = useDebouncedCallback(query => setFetchInputs({
+    query
+  }), SEARCH_DEBOUNCE_MS);
+  const {
+    options,
+    isLoading,
+    hasFailed
+  } = useLoadOptions({
+    executeFetch,
+    fetchInputs
+  });
+  const experienceId = useDatasourceExperienceId();
+  useEffect(() => {
+    if (!experienceId) {
+      return;
+    }
+    if (hasFailed) {
+      failUfoExperience({
+        name: InlineEditUFOExperience
+      }, experienceId);
+    } else if (!isLoading) {
+      succeedUfoExperience({
+        name: InlineEditUFOExperience
+      }, experienceId);
+    }
+  }, [experienceId, isLoading, hasFailed]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    autoFocus: true,
+    defaultMenuIsOpen: true,
+    blurInputOnSelect: true,
+    options: options,
+    isLoading: isLoading,
+    testId: "inline-edit-user",
+    filterOption: () => true // necessary, otherwise by default all options will be filtered out on user input
+    ,
+    onInputChange: handleUserInputDebounced,
+    defaultValue: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    getOptionValue: option => option.atlassianUserId,
+    formatOptionLabel: option => /*#__PURE__*/React.createElement(AvatarItem, {
+      avatar: /*#__PURE__*/React.createElement(Avatar, {
+        appearance: "circle",
+        size: 'small',
+        src: option.avatarSource,
+        testId: `${USER_TYPE_TEST_ID}--avatar--${option.atlassianUserId}`
+      }),
+      primaryText: option.displayName
+    }),
+    onChange: e => props.setEditValues({
+      type: 'user',
+      values: e ? [e] : []
+    })
+  }));
+};
+export default UserEditType;