@atlaskit/link-datasource 2.9.3 → 2.9.4

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 (15) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/issue-like-table/index.js +87 -70
  3. package/dist/cjs/ui/issue-like-table/styled.js +22 -3
  4. package/dist/cjs/ui/issue-like-table/table-cell-content/index.js +98 -23
  5. package/dist/es2019/ui/issue-like-table/index.js +27 -11
  6. package/dist/es2019/ui/issue-like-table/styled.js +28 -0
  7. package/dist/es2019/ui/issue-like-table/table-cell-content/index.js +96 -18
  8. package/dist/esm/ui/issue-like-table/index.js +88 -71
  9. package/dist/esm/ui/issue-like-table/styled.js +21 -2
  10. package/dist/esm/ui/issue-like-table/table-cell-content/index.js +98 -23
  11. package/dist/types/ui/issue-like-table/styled.d.ts +4 -0
  12. package/dist/types/ui/issue-like-table/table-cell-content/index.d.ts +3 -2
  13. package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts +4 -0
  14. package/dist/types-ts4.5/ui/issue-like-table/table-cell-content/index.d.ts +3 -2
  15. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 2.9.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#126601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126601)
8
+ [`d9862e969b400`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9862e969b400) -
9
+ [ux] Adds new InlineEditableCell and InlineEditableTableCell for IssueLikeTable behind feature
10
+ gate platform-datasources-enable-two-way-sync
11
+
3
12
  ## 2.9.3
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/issue-like-table/index.js CHANGED
@@ -460,69 +460,72 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
460
460
  }));
461
461
  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
462
462
  var tableRows = (0, _react.useMemo)(function () {
463
- return (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
464
- return {
465
- key: id,
466
- cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
467
- var key = _ref12.key,
468
- type = _ref12.type;
469
- return {
470
- key: key,
471
- columnKey: key,
472
- content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
473
- id: id,
463
+ return (
464
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
465
+ (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
466
+ return {
467
+ key: id,
468
+ cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
469
+ var key = _ref12.key,
470
+ type = _ref12.type;
471
+ return {
472
+ key: key,
474
473
  columnKey: key,
475
- columnType: type,
476
- wrappedColumnKeys: wrappedColumnKeys,
477
- renderItem: renderItem
478
- }),
479
- width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
480
- };
481
- }),
482
- ref: rowIndex === items.length - 1 ? function (el) {
483
- return setLastRowElement(el);
484
- } : undefined
485
- };
486
- }) : items.map(function (newRowData, rowIndex) {
487
- return {
488
- key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
489
- cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
490
- var _newRowData$key;
491
- var key = _ref13.key,
492
- type = _ref13.type;
493
- // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
494
- var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
495
- var values = Array.isArray(value) ? value : [value];
496
- var renderedValues = renderItem({
497
- type: type,
498
- values: values
499
- });
500
- var stringifiedContent = values.map(function (value) {
501
- return (0, _renderType.stringifyType)({
474
+ content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
475
+ id: id,
476
+ columnKey: key,
477
+ columnType: type,
478
+ wrappedColumnKeys: wrappedColumnKeys,
479
+ renderItem: renderItem
480
+ }),
481
+ width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
482
+ };
483
+ }),
484
+ ref: rowIndex === items.length - 1 ? function (el) {
485
+ return setLastRowElement(el);
486
+ } : undefined
487
+ };
488
+ }) : items.map(function (newRowData, rowIndex) {
489
+ return {
490
+ key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
491
+ cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
492
+ var _newRowData$key;
493
+ var key = _ref13.key,
494
+ type = _ref13.type;
495
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
496
+ var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
497
+ var values = Array.isArray(value) ? value : [value];
498
+ var renderedValues = renderItem({
502
499
  type: type,
503
- value: value
504
- }, intl.formatMessage, intl.formatDate);
505
- }).filter(function (value) {
506
- return value !== '';
507
- }).join(', ');
508
- var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
509
- // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
510
- , {
511
- tag: _truncateTextTag.TruncateTextTag,
512
- content: stringifiedContent,
513
- testId: "issues-table-cell-tooltip"
514
- }, renderedValues) : renderedValues;
515
- return {
516
- key: key,
517
- content: contentComponent,
518
- width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
519
- };
520
- }),
521
- ref: rowIndex === items.length - 1 ? function (el) {
522
- return setLastRowElement(el);
523
- } : undefined
524
- };
525
- });
500
+ values: values
501
+ });
502
+ var stringifiedContent = values.map(function (value) {
503
+ return (0, _renderType.stringifyType)({
504
+ type: type,
505
+ value: value
506
+ }, intl.formatMessage, intl.formatDate);
507
+ }).filter(function (value) {
508
+ return value !== '';
509
+ }).join(', ');
510
+ var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
511
+ // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
512
+ , {
513
+ tag: _truncateTextTag.TruncateTextTag,
514
+ content: stringifiedContent,
515
+ testId: "issues-table-cell-tooltip"
516
+ }, renderedValues) : renderedValues;
517
+ return {
518
+ key: key,
519
+ content: contentComponent,
520
+ width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
521
+ };
522
+ }),
523
+ ref: rowIndex === items.length - 1 ? function (el) {
524
+ return setLastRowElement(el);
525
+ } : undefined
526
+ };
527
+ })
528
+ );
526
529
  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, intl.formatMessage, intl.formatDate]);
527
530
  var rows = (0, _react.useMemo)(function () {
528
531
  if (status !== 'loading') {
@@ -703,15 +706,29 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
703
706
  paddingBlock: "var(--ds-space-100, 8px)"
704
707
  });
705
708
  }
706
- return (0, _react2.jsx)(_styled2.TableCell, {
707
- key: cellKey,
708
- "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
709
- colSpan: isEditable && isLastCell ? 2 : undefined
710
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
711
- ,
712
- style: loadingRowStyle,
713
- css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
714
- }, content);
709
+
710
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
711
+ if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
712
+ return (0, _react2.jsx)(_styled2.InlineEditableTableCell, {
713
+ key: cellKey,
714
+ "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
715
+ colSpan: isEditable && isLastCell ? 2 : undefined
716
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
717
+ ,
718
+ style: loadingRowStyle,
719
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
720
+ }, content);
721
+ } else {
722
+ return (0, _react2.jsx)(_styled2.TableCell, {
723
+ key: cellKey,
724
+ "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
725
+ colSpan: isEditable && isLastCell ? 2 : undefined
726
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
727
+ ,
728
+ style: loadingRowStyle,
729
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
730
+ }, content);
731
+ }
715
732
  }));
716
733
  }))));
717
734
  };
package/dist/cjs/ui/issue-like-table/styled.js CHANGED
@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = void 0;
7
+ exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = exports.InlineEditableTableCell = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
10
  var _colors = require("@atlaskit/theme/colors");
11
11
  var _typography = require("@atlaskit/theme/typography");
12
- var _styled$th, _styled$td; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
+ var _styled$th, _styled$td, _styled$td2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
13
  var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
14
14
  var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
15
15
 
@@ -93,4 +93,23 @@ var TableCell = exports.TableCell = _styled.default.td((_styled$td = {}, (0, _de
93
93
  paddingRight: "var(--ds-space-100, 8px)"
94
94
  }), (0, _defineProperty2.default)(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
95
95
  whiteSpace: 'unset'
96
- }), _styled$td));
96
+ }), _styled$td));
97
+
98
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- To migrate as part of go/ui-styling-standard
99
+ var InlineEditableTableCell = exports.InlineEditableTableCell = _styled.default.td((_styled$td2 = {}, (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix()), {
100
+ /* First section here is to override things editor table plugin css defines */
101
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
102
+ font: fieldTextFontSize,
103
+ padding: "var(--ds-space-0, 0)".concat(" ", "var(--ds-space-0, 0)"),
104
+ border: 0,
105
+ minWidth: 'auto',
106
+ verticalAlign: 'inherit',
107
+ boxSizing: 'border-box',
108
+ borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
109
+ borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
110
+ overflow: 'hidden'
111
+ }), (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
112
+ borderRight: 0
113
+ }), (0, _defineProperty2.default)(_styled$td2, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
114
+ whiteSpace: 'unset'
115
+ }), _styled$td2));
package/dist/cjs/ui/issue-like-table/table-cell-content/index.js CHANGED
@@ -7,35 +7,28 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.TableCellContent = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
+ var _primitives = require("@atlaskit/primitives");
10
12
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
11
13
  var _state = require("../../../state");
12
14
  var _renderType = require("../render-type");
13
15
  var _truncateTextTag = require("../truncate-text-tag");
14
- var TableCellContent = exports.TableCellContent = function TableCellContent(_ref) {
15
- var _rowData$columnKey;
16
+ var truncateTextStyles = (0, _primitives.xcss)({
17
+ textOverflow: 'ellipsis',
18
+ overflow: 'hidden',
19
+ width: '100%'
20
+ });
21
+ var TooltipWrapper = function TooltipWrapper(_ref) {
16
22
  var columnKey = _ref.columnKey,
17
- columnType = _ref.columnType,
18
- id = _ref.id,
19
- renderItem = _ref.renderItem,
20
- wrappedColumnKeys = _ref.wrappedColumnKeys;
23
+ _ref$datasourceTypeWi = _ref.datasourceTypeWithValues,
24
+ type = _ref$datasourceTypeWi.type,
25
+ values = _ref$datasourceTypeWi.values,
26
+ wrappedColumnKeys = _ref.wrappedColumnKeys,
27
+ children = _ref.children;
21
28
  var intl = (0, _reactIntlNext.useIntl)();
22
- var rowData = (0, _state.useDatasourceItem)({
23
- id: id
24
- });
25
- if (!rowData || !columnKey || !rowData[columnKey]) {
26
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
27
- }
28
-
29
- // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
30
- var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
31
- var values = Array.isArray(value) ? value : [value];
32
- var renderedValues = renderItem({
33
- type: columnType,
34
- values: values
35
- });
36
29
  var stringifiedContent = values.map(function (value) {
37
30
  return (0, _renderType.stringifyType)({
38
- type: columnType,
31
+ type: type,
39
32
  value: value
40
33
  }, intl.formatMessage, intl.formatDate);
41
34
  }).filter(function (value) {
@@ -48,7 +41,89 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
48
41
  tag: _truncateTextTag.TruncateTextTag,
49
42
  content: stringifiedContent,
50
43
  testId: "issues-table-cell-tooltip"
51
- }, renderedValues);
44
+ }, children);
45
+ }
46
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
47
+ };
48
+ var ReadOnlyCell = function ReadOnlyCell(_ref2) {
49
+ var _rowData$columnKey;
50
+ var id = _ref2.id,
51
+ columnType = _ref2.columnType,
52
+ _ref2$wrappedColumnKe = _ref2.wrappedColumnKeys,
53
+ wrappedColumnKeys = _ref2$wrappedColumnKe === void 0 ? [] : _ref2$wrappedColumnKe,
54
+ renderItem = _ref2.renderItem,
55
+ columnKey = _ref2.columnKey;
56
+ var rowData = (0, _state.useDatasourceItem)({
57
+ id: id
58
+ });
59
+ if (!rowData || !columnKey || !rowData[columnKey]) {
60
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
61
+ }
62
+
63
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
64
+ var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
65
+ var values = Array.isArray(value) ? value : [value];
66
+ var datasourceTypeWithValues = {
67
+ type: columnType,
68
+ values: values
69
+ };
70
+ return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
71
+ columnKey: columnKey,
72
+ datasourceTypeWithValues: datasourceTypeWithValues,
73
+ wrappedColumnKeys: wrappedColumnKeys
74
+ }, renderItem(datasourceTypeWithValues));
75
+ };
76
+ var InlineEditableCell = function InlineEditableCell(_ref3) {
77
+ var _rowData$columnKey2;
78
+ var id = _ref3.id,
79
+ columnKey = _ref3.columnKey,
80
+ columnType = _ref3.columnType,
81
+ renderItem = _ref3.renderItem,
82
+ wrappedColumnKeys = _ref3.wrappedColumnKeys;
83
+ var rowData = (0, _state.useDatasourceItem)({
84
+ id: id
85
+ });
86
+ if (!rowData || !columnKey || !rowData[columnKey]) {
87
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
52
88
  }
53
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderedValues);
89
+
90
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
91
+ var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
92
+ var values = Array.isArray(value) ? value : [value];
93
+ var datasourceTypeWithValues = {
94
+ type: columnType,
95
+ values: values
96
+ };
97
+ return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
98
+ columnKey: columnKey,
99
+ datasourceTypeWithValues: datasourceTypeWithValues,
100
+ wrappedColumnKeys: wrappedColumnKeys
101
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
102
+ testId: 'inline-edit-read-view',
103
+ paddingInline: 'space.100',
104
+ paddingBlock: 'space.050',
105
+ xcss: truncateTextStyles
106
+ }, renderItem(datasourceTypeWithValues)));
107
+ };
108
+ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref4) {
109
+ var columnKey = _ref4.columnKey,
110
+ columnType = _ref4.columnType,
111
+ id = _ref4.id,
112
+ renderItem = _ref4.renderItem,
113
+ wrappedColumnKeys = _ref4.wrappedColumnKeys;
114
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
115
+ var renderedContent = (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? /*#__PURE__*/_react.default.createElement(InlineEditableCell, {
116
+ id: id,
117
+ columnKey: columnKey,
118
+ columnType: columnType,
119
+ renderItem: renderItem,
120
+ wrappedColumnKeys: wrappedColumnKeys
121
+ }) : /*#__PURE__*/_react.default.createElement(ReadOnlyCell, {
122
+ id: id,
123
+ columnKey: columnKey,
124
+ columnType: columnType,
125
+ wrappedColumnKeys: wrappedColumnKeys,
126
+ renderItem: renderItem
127
+ });
128
+ return renderedContent;
54
129
  };
package/dist/es2019/ui/issue-like-table/index.js CHANGED
@@ -30,7 +30,7 @@ import { DragColumnPreview } from './drag-column-preview';
30
30
  import { DraggableTableHeading } from './draggable-table-heading';
31
31
  import TableEmptyState from './empty-state';
32
32
  import { renderType, stringifyType } from './render-type';
33
- import { Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
33
+ import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
34
34
  import { TableCellContent } from './table-cell-content';
35
35
  import { TruncateTextTag } from './truncate-text-tag';
36
36
  import { useIsOnScreen } from './useIsOnScreen';
@@ -457,7 +457,9 @@ export const IssueLikeDataTableView = ({
457
457
  }
458
458
  }));
459
459
  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
460
- const tableRows = useMemo(() => fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
460
+ const tableRows = useMemo(() =>
461
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
462
+ fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
461
463
  return {
462
464
  key: id,
463
465
  cells: visibleSortedColumns.map(({
@@ -678,15 +680,29 @@ export const IssueLikeDataTableView = ({
678
680
  paddingBlock: "var(--ds-space-100, 8px)"
679
681
  };
680
682
  }
681
- return jsx(TableCell, {
682
- key: cellKey,
683
- "data-testid": testId && `${testId}--cell-${cellIndex}`,
684
- colSpan: isEditable && isLastCell ? 2 : undefined
685
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
686
- ,
687
- style: loadingRowStyle,
688
- css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
689
- }, content);
683
+
684
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
685
+ if (fg('platform-datasources-enable-two-way-sync')) {
686
+ return jsx(InlineEditableTableCell, {
687
+ key: cellKey,
688
+ "data-testid": testId && `${testId}--cell-${cellIndex}`,
689
+ colSpan: isEditable && isLastCell ? 2 : undefined
690
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
691
+ ,
692
+ style: loadingRowStyle,
693
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
694
+ }, content);
695
+ } else {
696
+ return jsx(TableCell, {
697
+ key: cellKey,
698
+ "data-testid": testId && `${testId}--cell-${cellIndex}`,
699
+ colSpan: isEditable && isLastCell ? 2 : undefined
700
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
701
+ ,
702
+ style: loadingRowStyle,
703
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
704
+ }, content);
705
+ }
690
706
  }))))));
691
707
  };
692
708
  export const EmptyState = TableEmptyState;
package/dist/es2019/ui/issue-like-table/styled.js CHANGED
@@ -108,4 +108,32 @@ export const TableCell = styled.td({
108
108
  ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
109
109
  whiteSpace: 'unset'
110
110
  }
111
+ });
112
+
113
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- To migrate as part of go/ui-styling-standard
114
+ export const InlineEditableTableCell = styled.td({
115
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
116
+ [`${withTablePluginBodyPrefix()}`]: {
117
+ /* First section here is to override things editor table plugin css defines */
118
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
119
+ font: fieldTextFontSize,
120
+ padding: `${"var(--ds-space-0, 0)"} ${"var(--ds-space-0, 0)"}`,
121
+ border: 0,
122
+ minWidth: 'auto',
123
+ verticalAlign: 'inherit',
124
+ boxSizing: 'border-box',
125
+ borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
126
+ borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
127
+ overflow: 'hidden'
128
+ },
129
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
130
+ [`${withTablePluginBodyPrefix('&:last-child')}`]: {
131
+ borderRight: 0
132
+ },
133
+ // Inline smart links are pretty opinionated about word-wrapping.
134
+ // We want it to be controlled by user, so we make it overflow and truncate by default.
135
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
136
+ ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
137
+ whiteSpace: 'unset'
138
+ }
111
139
  });
package/dist/es2019/ui/issue-like-table/table-cell-content/index.js CHANGED
@@ -1,18 +1,49 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { Box, xcss } from '@atlaskit/primitives';
3
5
  import Tooltip from '@atlaskit/tooltip';
4
6
  import { useDatasourceItem } from '../../../state';
5
7
  import { stringifyType } from '../render-type';
6
8
  import { TruncateTextTag } from '../truncate-text-tag';
7
- export const TableCellContent = ({
9
+ const truncateTextStyles = xcss({
10
+ textOverflow: 'ellipsis',
11
+ overflow: 'hidden',
12
+ width: '100%'
13
+ });
14
+ const TooltipWrapper = ({
8
15
  columnKey,
9
- columnType,
16
+ datasourceTypeWithValues: {
17
+ type,
18
+ values
19
+ },
20
+ wrappedColumnKeys,
21
+ children
22
+ }) => {
23
+ const intl = useIntl();
24
+ const stringifiedContent = values.map(value => stringifyType({
25
+ type,
26
+ value
27
+ }, intl.formatMessage, intl.formatDate)).filter(value => value !== '').join(', ');
28
+ if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
29
+ return /*#__PURE__*/React.createElement(Tooltip
30
+ // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
31
+ , {
32
+ tag: TruncateTextTag,
33
+ content: stringifiedContent,
34
+ testId: "issues-table-cell-tooltip"
35
+ }, children);
36
+ }
37
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children);
38
+ };
39
+ const ReadOnlyCell = ({
10
40
  id,
41
+ columnType,
42
+ wrappedColumnKeys = [],
11
43
  renderItem,
12
- wrappedColumnKeys
44
+ columnKey
13
45
  }) => {
14
46
  var _rowData$columnKey;
15
- const intl = useIntl();
16
47
  const rowData = useDatasourceItem({
17
48
  id
18
49
  });
@@ -23,22 +54,69 @@ export const TableCellContent = ({
23
54
  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
24
55
  const value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
25
56
  const values = Array.isArray(value) ? value : [value];
26
- const renderedValues = renderItem({
57
+ const datasourceTypeWithValues = {
27
58
  type: columnType,
28
59
  values
60
+ };
61
+ return /*#__PURE__*/React.createElement(TooltipWrapper, {
62
+ columnKey: columnKey,
63
+ datasourceTypeWithValues: datasourceTypeWithValues,
64
+ wrappedColumnKeys: wrappedColumnKeys
65
+ }, renderItem(datasourceTypeWithValues));
66
+ };
67
+ const InlineEditableCell = ({
68
+ id,
69
+ columnKey,
70
+ columnType,
71
+ renderItem,
72
+ wrappedColumnKeys
73
+ }) => {
74
+ var _rowData$columnKey2;
75
+ const rowData = useDatasourceItem({
76
+ id
29
77
  });
30
- const stringifiedContent = values.map(value => stringifyType({
31
- type: columnType,
32
- value
33
- }, intl.formatMessage, intl.formatDate)).filter(value => value !== '').join(', ');
34
- if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
35
- return /*#__PURE__*/React.createElement(Tooltip
36
- // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
37
- , {
38
- tag: TruncateTextTag,
39
- content: stringifiedContent,
40
- testId: "issues-table-cell-tooltip"
41
- }, renderedValues);
78
+ if (!rowData || !columnKey || !rowData[columnKey]) {
79
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
42
80
  }
43
- return /*#__PURE__*/React.createElement(React.Fragment, null, renderedValues);
81
+
82
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
83
+ const value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
84
+ const values = Array.isArray(value) ? value : [value];
85
+ const datasourceTypeWithValues = {
86
+ type: columnType,
87
+ values
88
+ };
89
+ return /*#__PURE__*/React.createElement(TooltipWrapper, {
90
+ columnKey: columnKey,
91
+ datasourceTypeWithValues: datasourceTypeWithValues,
92
+ wrappedColumnKeys: wrappedColumnKeys
93
+ }, /*#__PURE__*/React.createElement(Box, {
94
+ testId: 'inline-edit-read-view',
95
+ paddingInline: 'space.100',
96
+ paddingBlock: 'space.050',
97
+ xcss: truncateTextStyles
98
+ }, renderItem(datasourceTypeWithValues)));
99
+ };
100
+ export const TableCellContent = ({
101
+ columnKey,
102
+ columnType,
103
+ id,
104
+ renderItem,
105
+ wrappedColumnKeys
106
+ }) => {
107
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
108
+ const renderedContent = fg('platform-datasources-enable-two-way-sync') ? /*#__PURE__*/React.createElement(InlineEditableCell, {
109
+ id: id,
110
+ columnKey: columnKey,
111
+ columnType: columnType,
112
+ renderItem: renderItem,
113
+ wrappedColumnKeys: wrappedColumnKeys
114
+ }) : /*#__PURE__*/React.createElement(ReadOnlyCell, {
115
+ id: id,
116
+ columnKey: columnKey,
117
+ columnType: columnType,
118
+ wrappedColumnKeys: wrappedColumnKeys,
119
+ renderItem: renderItem
120
+ });
121
+ return renderedContent;
44
122
  };
package/dist/esm/ui/issue-like-table/index.js CHANGED
@@ -37,7 +37,7 @@ import { DragColumnPreview } from './drag-column-preview';
37
37
  import { DraggableTableHeading } from './draggable-table-heading';
38
38
  import TableEmptyState from './empty-state';
39
39
  import { renderType, stringifyType } from './render-type';
40
- import { Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
40
+ import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
41
41
  import { TableCellContent } from './table-cell-content';
42
42
  import { TruncateTextTag } from './truncate-text-tag';
43
43
  import { useIsOnScreen } from './useIsOnScreen';
@@ -456,69 +456,72 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
456
456
  }));
457
457
  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
458
458
  var tableRows = useMemo(function () {
459
- return fg('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
460
- return {
461
- key: id,
462
- cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
463
- var key = _ref12.key,
464
- type = _ref12.type;
465
- return {
466
- key: key,
467
- columnKey: key,
468
- content: jsx(TableCellContent, {
469
- id: id,
459
+ return (
460
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
461
+ fg('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
462
+ return {
463
+ key: id,
464
+ cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
465
+ var key = _ref12.key,
466
+ type = _ref12.type;
467
+ return {
468
+ key: key,
470
469
  columnKey: key,
471
- columnType: type,
472
- wrappedColumnKeys: wrappedColumnKeys,
473
- renderItem: renderItem
474
- }),
475
- width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
476
- };
477
- }),
478
- ref: rowIndex === items.length - 1 ? function (el) {
479
- return setLastRowElement(el);
480
- } : undefined
481
- };
482
- }) : items.map(function (newRowData, rowIndex) {
483
- return {
484
- key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
485
- cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
486
- var _newRowData$key;
487
- var key = _ref13.key,
488
- type = _ref13.type;
489
- // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
490
- var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
491
- var values = Array.isArray(value) ? value : [value];
492
- var renderedValues = renderItem({
493
- type: type,
494
- values: values
495
- });
496
- var stringifiedContent = values.map(function (value) {
497
- return stringifyType({
470
+ content: jsx(TableCellContent, {
471
+ id: id,
472
+ columnKey: key,
473
+ columnType: type,
474
+ wrappedColumnKeys: wrappedColumnKeys,
475
+ renderItem: renderItem
476
+ }),
477
+ width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
478
+ };
479
+ }),
480
+ ref: rowIndex === items.length - 1 ? function (el) {
481
+ return setLastRowElement(el);
482
+ } : undefined
483
+ };
484
+ }) : items.map(function (newRowData, rowIndex) {
485
+ return {
486
+ key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
487
+ cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
488
+ var _newRowData$key;
489
+ var key = _ref13.key,
490
+ type = _ref13.type;
491
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
492
+ var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
493
+ var values = Array.isArray(value) ? value : [value];
494
+ var renderedValues = renderItem({
498
495
  type: type,
499
- value: value
500
- }, intl.formatMessage, intl.formatDate);
501
- }).filter(function (value) {
502
- return value !== '';
503
- }).join(', ');
504
- var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? jsx(Tooltip
505
- // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
506
- , {
507
- tag: TruncateTextTag,
508
- content: stringifiedContent,
509
- testId: "issues-table-cell-tooltip"
510
- }, renderedValues) : renderedValues;
511
- return {
512
- key: key,
513
- content: contentComponent,
514
- width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
515
- };
516
- }),
517
- ref: rowIndex === items.length - 1 ? function (el) {
518
- return setLastRowElement(el);
519
- } : undefined
520
- };
521
- });
496
+ values: values
497
+ });
498
+ var stringifiedContent = values.map(function (value) {
499
+ return stringifyType({
500
+ type: type,
501
+ value: value
502
+ }, intl.formatMessage, intl.formatDate);
503
+ }).filter(function (value) {
504
+ return value !== '';
505
+ }).join(', ');
506
+ var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? jsx(Tooltip
507
+ // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
508
+ , {
509
+ tag: TruncateTextTag,
510
+ content: stringifiedContent,
511
+ testId: "issues-table-cell-tooltip"
512
+ }, renderedValues) : renderedValues;
513
+ return {
514
+ key: key,
515
+ content: contentComponent,
516
+ width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
517
+ };
518
+ }),
519
+ ref: rowIndex === items.length - 1 ? function (el) {
520
+ return setLastRowElement(el);
521
+ } : undefined
522
+ };
523
+ })
524
+ );
522
525
  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, intl.formatMessage, intl.formatDate]);
523
526
  var rows = useMemo(function () {
524
527
  if (status !== 'loading') {
@@ -699,15 +702,29 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
699
702
  paddingBlock: "var(--ds-space-100, 8px)"
700
703
  });
701
704
  }
702
- return jsx(TableCell, {
703
- key: cellKey,
704
- "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
705
- colSpan: isEditable && isLastCell ? 2 : undefined
706
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
707
- ,
708
- style: loadingRowStyle,
709
- css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
710
- }, content);
705
+
706
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
707
+ if (fg('platform-datasources-enable-two-way-sync')) {
708
+ return jsx(InlineEditableTableCell, {
709
+ key: cellKey,
710
+ "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
711
+ colSpan: isEditable && isLastCell ? 2 : undefined
712
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
713
+ ,
714
+ style: loadingRowStyle,
715
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
716
+ }, content);
717
+ } else {
718
+ return jsx(TableCell, {
719
+ key: cellKey,
720
+ "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
721
+ colSpan: isEditable && isLastCell ? 2 : undefined
722
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
723
+ ,
724
+ style: loadingRowStyle,
725
+ css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
726
+ }, content);
727
+ }
711
728
  }));
712
729
  }))));
713
730
  };
package/dist/esm/ui/issue-like-table/styled.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- var _styled$th, _styled$td;
2
+ var _styled$th, _styled$td, _styled$td2;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import styled from '@emotion/styled';
5
5
  import { N40 } from '@atlaskit/theme/colors';
@@ -87,4 +87,23 @@ export var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "
87
87
  paddingRight: "var(--ds-space-100, 8px)"
88
88
  }), _defineProperty(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
89
89
  whiteSpace: 'unset'
90
- }), _styled$td));
90
+ }), _styled$td));
91
+
92
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- To migrate as part of go/ui-styling-standard
93
+ export var InlineEditableTableCell = styled.td((_styled$td2 = {}, _defineProperty(_styled$td2, "".concat(withTablePluginBodyPrefix()), {
94
+ /* First section here is to override things editor table plugin css defines */
95
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
96
+ font: fieldTextFontSize,
97
+ padding: "var(--ds-space-0, 0)".concat(" ", "var(--ds-space-0, 0)"),
98
+ border: 0,
99
+ minWidth: 'auto',
100
+ verticalAlign: 'inherit',
101
+ boxSizing: 'border-box',
102
+ borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
103
+ borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
104
+ overflow: 'hidden'
105
+ }), _defineProperty(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
106
+ borderRight: 0
107
+ }), _defineProperty(_styled$td2, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
108
+ whiteSpace: 'unset'
109
+ }), _styled$td2));
package/dist/esm/ui/issue-like-table/table-cell-content/index.js CHANGED
@@ -1,34 +1,27 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { Box, xcss } from '@atlaskit/primitives';
3
5
  import Tooltip from '@atlaskit/tooltip';
4
6
  import { useDatasourceItem } from '../../../state';
5
7
  import { stringifyType } from '../render-type';
6
8
  import { TruncateTextTag } from '../truncate-text-tag';
7
- export var TableCellContent = function TableCellContent(_ref) {
8
- var _rowData$columnKey;
9
+ var truncateTextStyles = xcss({
10
+ textOverflow: 'ellipsis',
11
+ overflow: 'hidden',
12
+ width: '100%'
13
+ });
14
+ var TooltipWrapper = function TooltipWrapper(_ref) {
9
15
  var columnKey = _ref.columnKey,
10
- columnType = _ref.columnType,
11
- id = _ref.id,
12
- renderItem = _ref.renderItem,
13
- wrappedColumnKeys = _ref.wrappedColumnKeys;
16
+ _ref$datasourceTypeWi = _ref.datasourceTypeWithValues,
17
+ type = _ref$datasourceTypeWi.type,
18
+ values = _ref$datasourceTypeWi.values,
19
+ wrappedColumnKeys = _ref.wrappedColumnKeys,
20
+ children = _ref.children;
14
21
  var intl = useIntl();
15
- var rowData = useDatasourceItem({
16
- id: id
17
- });
18
- if (!rowData || !columnKey || !rowData[columnKey]) {
19
- return /*#__PURE__*/React.createElement(React.Fragment, null);
20
- }
21
-
22
- // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
23
- var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
24
- var values = Array.isArray(value) ? value : [value];
25
- var renderedValues = renderItem({
26
- type: columnType,
27
- values: values
28
- });
29
22
  var stringifiedContent = values.map(function (value) {
30
23
  return stringifyType({
31
- type: columnType,
24
+ type: type,
32
25
  value: value
33
26
  }, intl.formatMessage, intl.formatDate);
34
27
  }).filter(function (value) {
@@ -41,7 +34,89 @@ export var TableCellContent = function TableCellContent(_ref) {
41
34
  tag: TruncateTextTag,
42
35
  content: stringifiedContent,
43
36
  testId: "issues-table-cell-tooltip"
44
- }, renderedValues);
37
+ }, children);
45
38
  }
46
- return /*#__PURE__*/React.createElement(React.Fragment, null, renderedValues);
39
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children);
40
+ };
41
+ var ReadOnlyCell = function ReadOnlyCell(_ref2) {
42
+ var _rowData$columnKey;
43
+ var id = _ref2.id,
44
+ columnType = _ref2.columnType,
45
+ _ref2$wrappedColumnKe = _ref2.wrappedColumnKeys,
46
+ wrappedColumnKeys = _ref2$wrappedColumnKe === void 0 ? [] : _ref2$wrappedColumnKe,
47
+ renderItem = _ref2.renderItem,
48
+ columnKey = _ref2.columnKey;
49
+ var rowData = useDatasourceItem({
50
+ id: id
51
+ });
52
+ if (!rowData || !columnKey || !rowData[columnKey]) {
53
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
54
+ }
55
+
56
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
57
+ var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
58
+ var values = Array.isArray(value) ? value : [value];
59
+ var datasourceTypeWithValues = {
60
+ type: columnType,
61
+ values: values
62
+ };
63
+ return /*#__PURE__*/React.createElement(TooltipWrapper, {
64
+ columnKey: columnKey,
65
+ datasourceTypeWithValues: datasourceTypeWithValues,
66
+ wrappedColumnKeys: wrappedColumnKeys
67
+ }, renderItem(datasourceTypeWithValues));
68
+ };
69
+ var InlineEditableCell = function InlineEditableCell(_ref3) {
70
+ var _rowData$columnKey2;
71
+ var id = _ref3.id,
72
+ columnKey = _ref3.columnKey,
73
+ columnType = _ref3.columnType,
74
+ renderItem = _ref3.renderItem,
75
+ wrappedColumnKeys = _ref3.wrappedColumnKeys;
76
+ var rowData = useDatasourceItem({
77
+ id: id
78
+ });
79
+ if (!rowData || !columnKey || !rowData[columnKey]) {
80
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
81
+ }
82
+
83
+ // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
84
+ var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
85
+ var values = Array.isArray(value) ? value : [value];
86
+ var datasourceTypeWithValues = {
87
+ type: columnType,
88
+ values: values
89
+ };
90
+ return /*#__PURE__*/React.createElement(TooltipWrapper, {
91
+ columnKey: columnKey,
92
+ datasourceTypeWithValues: datasourceTypeWithValues,
93
+ wrappedColumnKeys: wrappedColumnKeys
94
+ }, /*#__PURE__*/React.createElement(Box, {
95
+ testId: 'inline-edit-read-view',
96
+ paddingInline: 'space.100',
97
+ paddingBlock: 'space.050',
98
+ xcss: truncateTextStyles
99
+ }, renderItem(datasourceTypeWithValues)));
100
+ };
101
+ export var TableCellContent = function TableCellContent(_ref4) {
102
+ var columnKey = _ref4.columnKey,
103
+ columnType = _ref4.columnType,
104
+ id = _ref4.id,
105
+ renderItem = _ref4.renderItem,
106
+ wrappedColumnKeys = _ref4.wrappedColumnKeys;
107
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
108
+ var renderedContent = fg('platform-datasources-enable-two-way-sync') ? /*#__PURE__*/React.createElement(InlineEditableCell, {
109
+ id: id,
110
+ columnKey: columnKey,
111
+ columnType: columnType,
112
+ renderItem: renderItem,
113
+ wrappedColumnKeys: wrappedColumnKeys
114
+ }) : /*#__PURE__*/React.createElement(ReadOnlyCell, {
115
+ id: id,
116
+ columnKey: columnKey,
117
+ columnType: columnType,
118
+ wrappedColumnKeys: wrappedColumnKeys,
119
+ renderItem: renderItem
120
+ });
121
+ return renderedContent;
47
122
  };
package/dist/types/ui/issue-like-table/styled.d.ts CHANGED
@@ -22,3 +22,7 @@ export declare const TableCell: import("@emotion/styled").StyledComponent<{
22
22
  theme?: import("@emotion/react").Theme | undefined;
23
23
  as?: import("react").ElementType<any> | undefined;
24
24
  }, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
25
+ export declare const InlineEditableTableCell: import("@emotion/styled").StyledComponent<{
26
+ theme?: import("@emotion/react").Theme | undefined;
27
+ as?: import("react").ElementType<any> | undefined;
28
+ }, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
package/dist/types/ui/issue-like-table/table-cell-content/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /// <reference types="react" />
2
+ import { type DatasourceType } from '@atlaskit/linking-types';
2
3
  import { type TableViewPropsRenderType } from '../types';
3
4
  interface TableCellContentProps {
4
5
  id: string;
5
- columnKey: string | null;
6
- columnType: string;
6
+ columnKey: string;
7
+ columnType: DatasourceType['type'];
7
8
  /** Used to retrieve cell content from the store */
8
9
  renderItem: TableViewPropsRenderType;
9
10
  wrappedColumnKeys: string[] | undefined;
package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts CHANGED
@@ -22,3 +22,7 @@ export declare const TableCell: import("@emotion/styled").StyledComponent<{
22
22
  theme?: import("@emotion/react").Theme | undefined;
23
23
  as?: import("react").ElementType<any> | undefined;
24
24
  }, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
25
+ export declare const InlineEditableTableCell: import("@emotion/styled").StyledComponent<{
26
+ theme?: import("@emotion/react").Theme | undefined;
27
+ as?: import("react").ElementType<any> | undefined;
28
+ }, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
package/dist/types-ts4.5/ui/issue-like-table/table-cell-content/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /// <reference types="react" />
2
+ import { type DatasourceType } from '@atlaskit/linking-types';
2
3
  import { type TableViewPropsRenderType } from '../types';
3
4
  interface TableCellContentProps {
4
5
  id: string;
5
- columnKey: string | null;
6
- columnType: string;
6
+ columnKey: string;
7
+ columnType: DatasourceType['type'];
7
8
  /** Used to retrieve cell content from the store */
8
9
  renderItem: TableViewPropsRenderType;
9
10
  wrappedColumnKeys: string[] | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "2.9.3",
3
+ "version": "2.9.4",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -182,6 +182,9 @@
182
182
  },
183
183
  "platform-datasources-use-refactored-config-modal": {
184
184
  "type": "boolean"
185
+ },
186
+ "platform-datasources-enable-two-way-sync": {
187
+ "type": "boolean"
185
188
  }
186
189
  }
187
190
  }