@atlaskit/link-datasource 2.10.0 → 2.10.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/link-datasource
 
+## 2.10.1
+
+### Patch Changes
+
+- [#128613](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128613)
+  [`43d20bcbd9423`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/43d20bcbd9423) -
+  [ux] Add text edit component behind FF
+- Updated dependencies
+
 ## 2.10.0
 
 ### Minor Changes

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEditTypeSupported = exports.editType = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _text = _interopRequireDefault(require("./text"));
+var _excluded = ["value"];
+var editType = exports.editType = function editType(item) {
+  var _item$values$, _item$values;
+  switch (item.type) {
+    case 'string':
+      var stringValue = (_item$values$ = (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[0]) !== null && _item$values$ !== void 0 ? _item$values$ : '';
+      return {
+        defaultValue: stringValue,
+        editView: function editView(_ref) {
+          var value = _ref.value,
+            fieldProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+          return /*#__PURE__*/_react.default.createElement(_text.default, (0, _extends2.default)({}, fieldProps, {
+            value: value
+          }));
+        }
+      };
+    default:
+      return {
+        defaultValue: '',
+        editView: function editView() {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+      };
+  }
+};
+var isEditTypeSupported = exports.isEditTypeSupported = function isEditTypeSupported(type) {
+  switch (type) {
+    case 'string':
+      return true;
+    default:
+      return false;
+  }
+};

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var TextEditType = function TextEditType(props) {
+  return /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, props, {
+    autoFocus: true,
+    isCompact: true,
+    testId: "inline-edit-text"
+  }));
+};
+var _default = exports.default = TextEditType;

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

@@ -11,8 +11,10 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _state = require("../../../state");
+var _editType = require("../edit-type");
 var _renderType = require("../render-type");
 var _truncateTextTag = require("../truncate-text-tag");
+var _inlineEdit = require("./inline-edit");
 var truncateTextStyles = (0, _primitives.xcss)({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -87,6 +89,9 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
 
+  // Check if field is editable
+  var isEditable = (0, _editType.isEditTypeSupported)(columnType);
+
   // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
   var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
   var values = Array.isArray(value) ? value : [value];
@@ -94,16 +99,20 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     type: columnType,
     values: values
   };
-  return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
+  var readView = /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
     columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     wrappedColumnKeys: wrappedColumnKeys
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    testId: 'inline-edit-read-view',
-    paddingInline: 'space.100',
-    paddingBlock: 'space.050',
+    testId: "inline-edit-read-view",
+    paddingInline: isEditable ? 'space.075' : 'space.100',
+    paddingBlock: "space.050",
     xcss: truncateTextStyles
   }, renderItem(datasourceTypeWithValues)));
+  return isEditable ? /*#__PURE__*/_react.default.createElement(_inlineEdit.InlineEdit, {
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    readView: readView
+  }) : readView;
 };
 var TableCellContent = exports.TableCellContent = function TableCellContent(_ref4) {
   var columnKey = _ref4.columnKey,

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEdit = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _inlineEdit = _interopRequireDefault(require("@atlaskit/inline-edit"));
+var _primitives = require("@atlaskit/primitives");
+var _editType = require("../edit-type");
+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 && Object.prototype.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 containerStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.negative.100'
+});
+var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
+  var datasourceTypeWithValues = _ref.datasourceTypeWithValues,
+    _readView = _ref.readView;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: containerStyles
+  }, /*#__PURE__*/_react.default.createElement(_inlineEdit.default, (0, _extends2.default)({}, (0, _editType.editType)(datasourceTypeWithValues), {
+    hideActionButtons: true,
+    readView: function readView() {
+      return _readView;
+    },
+    readViewFitContainerWidth: true,
+    isEditing: isEditing,
+    onEdit: function onEdit() {
+      return setIsEditing(true);
+    },
+    onCancel: function onCancel() {
+      return setIsEditing(false);
+    },
+    onConfirm: function onConfirm(value) {
+      setIsEditing(false);
+      // Save value back to the store
+    }
+  })));
+};

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TextEditType from './text';
+export const editType = item => {
+  var _item$values$, _item$values;
+  switch (item.type) {
+    case 'string':
+      const stringValue = (_item$values$ = (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[0]) !== null && _item$values$ !== void 0 ? _item$values$ : '';
+      return {
+        defaultValue: stringValue,
+        editView: ({
+          value,
+          ...fieldProps
+        }) => /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
+          value: value
+        }))
+      };
+    default:
+      return {
+        defaultValue: '',
+        editView: () => /*#__PURE__*/React.createElement(React.Fragment, null)
+      };
+  }
+};
+export const isEditTypeSupported = type => {
+  switch (type) {
+    case 'string':
+      return true;
+    default:
+      return false;
+  }
+};

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

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Textfield from '@atlaskit/textfield';
+const TextEditType = props => /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
+  autoFocus: true,
+  isCompact: true,
+  testId: "inline-edit-text"
+}));
+export default TextEditType;

package/dist/es2019/ui/issue-like-table/table-cell-content/index.js

@@ -4,8 +4,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { useDatasourceItem } from '../../../state';
+import { isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
+import { InlineEdit } from './inline-edit';
 const truncateTextStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -79,6 +81,9 @@ const InlineEditableCell = ({
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 
+  // Check if field is editable
+  const isEditable = isEditTypeSupported(columnType);
+
   // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
   const value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
   const values = Array.isArray(value) ? value : [value];
@@ -86,16 +91,20 @@ const InlineEditableCell = ({
     type: columnType,
     values
   };
-  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+  const readView = /*#__PURE__*/React.createElement(TooltipWrapper, {
     columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     wrappedColumnKeys: wrappedColumnKeys
   }, /*#__PURE__*/React.createElement(Box, {
-    testId: 'inline-edit-read-view',
-    paddingInline: 'space.100',
-    paddingBlock: 'space.050',
+    testId: "inline-edit-read-view",
+    paddingInline: isEditable ? 'space.075' : 'space.100',
+    paddingBlock: "space.050",
     xcss: truncateTextStyles
   }, renderItem(datasourceTypeWithValues)));
+  return isEditable ? /*#__PURE__*/React.createElement(InlineEdit, {
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    readView: readView
+  }) : readView;
 };
 export const TableCellContent = ({
   columnKey,

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import AKInlineEdit from '@atlaskit/inline-edit';
+import { Box, xcss } from '@atlaskit/primitives';
+import { editType } from '../edit-type';
+const containerStyles = xcss({
+  marginBlockStart: 'space.negative.100'
+});
+export const InlineEdit = ({
+  datasourceTypeWithValues,
+  readView
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: containerStyles
+  }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {
+    hideActionButtons: true,
+    readView: () => readView,
+    readViewFitContainerWidth: true,
+    isEditing: isEditing,
+    onEdit: () => setIsEditing(true),
+    onCancel: () => setIsEditing(false),
+    onConfirm: value => {
+      setIsEditing(false);
+      // Save value back to the store
+    }
+  })));
+};

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

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value"];
+import React from 'react';
+import TextEditType from './text';
+export var editType = function editType(item) {
+  var _item$values$, _item$values;
+  switch (item.type) {
+    case 'string':
+      var stringValue = (_item$values$ = (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[0]) !== null && _item$values$ !== void 0 ? _item$values$ : '';
+      return {
+        defaultValue: stringValue,
+        editView: function editView(_ref) {
+          var value = _ref.value,
+            fieldProps = _objectWithoutProperties(_ref, _excluded);
+          return /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
+            value: value
+          }));
+        }
+      };
+    default:
+      return {
+        defaultValue: '',
+        editView: function editView() {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+      };
+  }
+};
+export var isEditTypeSupported = function isEditTypeSupported(type) {
+  switch (type) {
+    case 'string':
+      return true;
+    default:
+      return false;
+  }
+};

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

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Textfield from '@atlaskit/textfield';
+var TextEditType = function TextEditType(props) {
+  return /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
+    autoFocus: true,
+    isCompact: true,
+    testId: "inline-edit-text"
+  }));
+};
+export default TextEditType;

package/dist/esm/ui/issue-like-table/table-cell-content/index.js

@@ -4,8 +4,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { useDatasourceItem } from '../../../state';
+import { isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
+import { InlineEdit } from './inline-edit';
 var truncateTextStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -80,6 +82,9 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 
+  // Check if field is editable
+  var isEditable = isEditTypeSupported(columnType);
+
   // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
   var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
   var values = Array.isArray(value) ? value : [value];
@@ -87,16 +92,20 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     type: columnType,
     values: values
   };
-  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+  var readView = /*#__PURE__*/React.createElement(TooltipWrapper, {
     columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     wrappedColumnKeys: wrappedColumnKeys
   }, /*#__PURE__*/React.createElement(Box, {
-    testId: 'inline-edit-read-view',
-    paddingInline: 'space.100',
-    paddingBlock: 'space.050',
+    testId: "inline-edit-read-view",
+    paddingInline: isEditable ? 'space.075' : 'space.100',
+    paddingBlock: "space.050",
     xcss: truncateTextStyles
   }, renderItem(datasourceTypeWithValues)));
+  return isEditable ? /*#__PURE__*/React.createElement(InlineEdit, {
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    readView: readView
+  }) : readView;
 };
 export var TableCellContent = function TableCellContent(_ref4) {
   var columnKey = _ref4.columnKey,

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

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import AKInlineEdit from '@atlaskit/inline-edit';
+import { Box, xcss } from '@atlaskit/primitives';
+import { editType } from '../edit-type';
+var containerStyles = xcss({
+  marginBlockStart: 'space.negative.100'
+});
+export var InlineEdit = function InlineEdit(_ref) {
+  var datasourceTypeWithValues = _ref.datasourceTypeWithValues,
+    _readView = _ref.readView;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: containerStyles
+  }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {
+    hideActionButtons: true,
+    readView: function readView() {
+      return _readView;
+    },
+    readViewFitContainerWidth: true,
+    isEditing: isEditing,
+    onEdit: function onEdit() {
+      return setIsEditing(true);
+    },
+    onCancel: function onCancel() {
+      return setIsEditing(false);
+    },
+    onConfirm: function onConfirm(value) {
+      setIsEditing(false);
+      // Save value back to the store
+    }
+  })));
+};

package/dist/types/ui/issue-like-table/edit-type/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type InlineEdit from '@atlaskit/inline-edit';
+import type { DatasourceType } from '@atlaskit/linking-types';
+import { type DatasourceTypeWithOnlyValues } from '../types';
+export declare const editType: (item: DatasourceTypeWithOnlyValues) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
+export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;

package/dist/types/ui/issue-like-table/edit-type/text/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import Textfield from '@atlaskit/textfield';
+interface TextEditTypeProps extends React.ComponentProps<typeof Textfield> {
+}
+declare const TextEditType: (props: TextEditTypeProps) => JSX.Element;
+export default TextEditType;

package/dist/types/ui/issue-like-table/table-cell-content/inline-edit.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DatasourceTypeWithOnlyValues } from '../types';
+interface InlineEditProps {
+    datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
+    readView: React.ReactNode;
+}
+export declare const InlineEdit: ({ datasourceTypeWithValues, readView }: InlineEditProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/issue-like-table/edit-type/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type InlineEdit from '@atlaskit/inline-edit';
+import type { DatasourceType } from '@atlaskit/linking-types';
+import { type DatasourceTypeWithOnlyValues } from '../types';
+export declare const editType: (item: DatasourceTypeWithOnlyValues) => Pick<React.ComponentProps<typeof InlineEdit>, 'defaultValue' | 'editView'>;
+export declare const isEditTypeSupported: (type: DatasourceType['type']) => boolean;

package/dist/types-ts4.5/ui/issue-like-table/edit-type/text/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import Textfield from '@atlaskit/textfield';
+interface TextEditTypeProps extends React.ComponentProps<typeof Textfield> {
+}
+declare const TextEditType: (props: TextEditTypeProps) => JSX.Element;
+export default TextEditType;

package/dist/types-ts4.5/ui/issue-like-table/table-cell-content/inline-edit.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DatasourceTypeWithOnlyValues } from '../types';
+interface InlineEditProps {
+    datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
+    readView: React.ReactNode;
+}
+export declare const InlineEdit: ({ datasourceTypeWithValues, readView }: InlineEditProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.10.0",
+	"version": "2.10.1",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,9 +50,10 @@
 		"@atlaskit/icon": "^22.11.0",
 		"@atlaskit/icon-object": "^6.4.0",
 		"@atlaskit/image": "^1.3.0",
+		"@atlaskit/inline-edit": "^13.5.0",
 		"@atlaskit/intl-messages-provider": "^1.0.0",
 		"@atlaskit/jql-ast": "^3.3.0",
-		"@atlaskit/jql-editor": "^4.4.0",
+		"@atlaskit/jql-editor": "^4.5.0",
 		"@atlaskit/jql-editor-autocomplete-rest": "^2.0.0",
 		"@atlaskit/link-client-extension": "^2.0.0",
 		"@atlaskit/linking-common": "^5.9.0",
@@ -63,11 +64,11 @@
 		"@atlaskit/outbound-auth-flow-client": "^3.4.5",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.21.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^11.1.0",
+		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/select": "^17.12.0",
 		"@atlaskit/smart-card": "^27.13.0",
 		"@atlaskit/smart-user-picker": "6.10.1",