@atlaskit/link-datasource 5.5.0 → 5.6.0

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -1,8 +1,11 @@
 /* datasourceTableView.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./datasourceTableView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -26,6 +29,7 @@ import { ProviderAuthRequired } from '../common/error-state/provider-auth-requir
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
+import { getDatasourceColumnSortGetter } from './datasource-column-sort';
 var containerStyles = null;
 var DefaultScrollableContainerHeight = 590;
 var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
@@ -40,9 +44,35 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onWrappedColumnChange = _ref.onWrappedColumnChange,
     _ref$scrollableContai = _ref.scrollableContainerHeight,
     scrollableContainerHeight = _ref$scrollableContai === void 0 ? DefaultScrollableContainerHeight : _ref$scrollableContai;
+  // Local copy lets us apply in-session sort mutations without mutating external parameters.
+  var _useState = useState(parameters),
+    _useState2 = _slicedToArray(_useState, 2),
+    sessionParameters = _useState2[0],
+    setSessionParameters = _useState2[1];
+  // Tracks the external parameters that the current session/sort state was derived from.
+  var sessionBaseParametersRef = useRef(parameters);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sortState = _useState4[0],
+    setSortState = _useState4[1];
+  var columnSortGetter = getDatasourceColumnSortGetter(datasourceId);
+  // Sorting is only owned by this view when parent callbacks are absent (read-only rendering mode).
+  var isReadOnlyDatasourceTable = !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
+  // Keep sort UI hidden unless datasource + ownership + feature gate all allow it.
+  var shouldEnableColumnSort = !!columnSortGetter && isReadOnlyDatasourceTable && fg('platform_lp_jira_sllv_renderer_column_sorting');
+  useDeepEffect(function () {
+    // External parameter updates should always reset local sort/session state back to source-of-truth.
+    sessionBaseParametersRef.current = parameters;
+    setSessionParameters(parameters);
+    setSortState(undefined);
+  }, [parameters]);
+  var isSessionBasedOnCurrentParameters = isEqual(sessionBaseParametersRef.current, parameters);
+  // Use session parameters only when they are known to be based on the current external parameters.
+  // This avoids a one-render stale read during the deep-effect update cycle above.
+  var activeParameters = isSessionBasedOnCurrentParameters && fg('platform_lp_jira_sllv_renderer_column_sorting') ? sessionParameters : parameters;
   var _useDatasourceTableSt = useDatasourceTableState({
       datasourceId: datasourceId,
-      parameters: parameters,
+      parameters: activeParameters,
       fieldKeys: visibleColumnKeys
     }),
     reset = _useDatasourceTableSt.reset,
@@ -98,7 +128,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       reset();
     }
     isInitialRender.current = false;
-  }, [reset, parameters]);
+  }, [reset, activeParameters]);
   useEffect(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
@@ -144,6 +174,19 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
     forcedReset();
   }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  var onColumnSort = useCallback(function (columnKey) {
+    // Build next params/sort atomically so UI state and query state stay in sync.
+    var result = columnSortGetter === null || columnSortGetter === void 0 ? void 0 : columnSortGetter({
+      parameters: sessionParameters,
+      columnKey: columnKey,
+      currentSort: sortState
+    });
+    if (!result) {
+      return;
+    }
+    setSortState(result.sort);
+    setSessionParameters(result.parameters);
+  }, [columnSortGetter, sessionParameters, sortState]);
   var handleErrorRefresh = useCallback(function () {
     reset({
       shouldForceRequest: true
@@ -175,7 +218,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     loaderFn: fetchMessagesForLocale
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_2rko1kw7", "datasource-table"])
-  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
+  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, _extends({
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -187,12 +230,16 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     visibleColumnKeys: hasStaleVisibleColumnKeys ? defaultVisibleColumnKeys : visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
+    onColumnResize: onColumnResize
+  }, shouldEnableColumnSort && fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
+    onColumnSort: onColumnSort,
+    sortState: sortState
+  } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
-  }) : /*#__PURE__*/React.createElement(EmptyState, {
+  })) : /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), /*#__PURE__*/React.createElement(TableFooter, {

package/dist/esm/ui/issue-like-table/index.compiled.css

@@ -14,6 +14,7 @@
 .pm-table-wrapper>table thead ._1rmlidpf:last-of-type{border:0}
 .pm-table-wrapper>table thead ._1u3bidpf{border:0}
 .pm-table-wrapper>table thead ._ex0g13hi:last-of-type{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--ds-elevation-surface-current,#fff) 10%)}
+._1wtnze3t button{padding-block:var(--ds-space-0,0)}
 .ProseMirror .pm-table-wrapper>table tbody ._15lria51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 .ProseMirror .pm-table-wrapper>table tbody ._1ho1idpf:last-of-type{border-right:0}
 .ProseMirror .pm-table-wrapper>table tbody ._1xqpia51{border-right:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
@@ -66,6 +67,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 .ProseMirror .pm-table-wrapper>table thead ._zjk41if8:last-of-type{position:sticky}
 ._11681tcg [data-testid=datasource-header-content--container]{line-height:24px}
 ._11j11b66 [data-testid=datasource-header-content--container]{padding-right:var(--ds-space-050,4px)}
+._11lvze3t button{padding-left:var(--ds-space-0,0)}
 ._124in7od [data-testid=inline-card-icon-and-title]{white-space:unset}
 ._12pn15vq [data-testid=datasource-header-content--container]{overflow-x:hidden}
 ._12ruusvi:last-of-type{box-sizing:border-box}
@@ -108,7 +110,9 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._btyzidpf{border-spacing:0}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._ficf1e5h button{text-align:left}
 ._iscccj1k [data-testid=datasource-header-content--container]{display:-webkit-box}
+._jq8g1wug button{height:auto}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqsw1if8{position:sticky}
 ._kqswh2mm{position:relative}
@@ -130,6 +134,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._vchh1ntv{box-sizing:content-box}
 ._vchhusvi{box-sizing:border-box}
 ._vwz41tcg{line-height:24px}
+._yhjm1b66 button{padding-right:var(--ds-space-050,4px)}
 ._yq5hus1c{border-collapse:separate}
 .pm-table-wrapper>table tbody ._18a21kw7{vertical-align:inherit}
 .pm-table-wrapper>table tbody ._1h12ze3t{padding-right:var(--ds-space-0,0)}

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

@@ -8,7 +8,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["as", "style"],
   _excluded2 = ["as", "style"],
   _excluded3 = ["as", "style"],
-  _excluded4 = ["as", "style"];
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
 import "./index.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
@@ -19,9 +20,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import invariant from 'tiny-invariant';
+import Button from '@atlaskit/button/new';
 import { FlagsProvider } from '@atlaskit/flag';
+import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
+import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
 import { Skeleton } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -33,9 +39,11 @@ import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExp
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useIsInPDFRender } from '../../hooks/useIsInPDFRender';
 import { ColumnPicker } from './column-picker';
+import { GlyphPlaceholder } from './custom-icons';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
+import { issueLikeTableMessages } from './messages';
 import { renderType } from './render-type';
 import { TableCellContent } from './table-cell-content';
 import { useIsOnScreen } from './useIsOnScreen';
@@ -127,6 +135,22 @@ var tableStyles = null;
 var noDefaultBorderStyles = null;
 var headerStyles = null;
 var headingHoverEffectStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Matches DraggableTableHeading button normalization.
+var SortableHeaderParent = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjm1b66", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  SortableHeaderParent.displayName = 'SortableHeaderParent';
+}
 function extractIndex(data) {
   var index = data.index;
   invariant(typeof index === 'number');
@@ -173,26 +197,30 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
   var _containerRef$current;
-  var testId = _ref5.testId,
-    onNextPage = _ref5.onNextPage,
-    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
-    items = _ref5.items,
-    itemIds = _ref5.itemIds,
-    columns = _ref5.columns,
-    _ref5$renderItem = _ref5.renderItem,
-    renderItem = _ref5$renderItem === void 0 ? renderType : _ref5$renderItem,
-    visibleColumnKeys = _ref5.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref5.columnCustomSizes,
-    onColumnResize = _ref5.onColumnResize,
-    wrappedColumnKeys = _ref5.wrappedColumnKeys,
-    onWrappedColumnChange = _ref5.onWrappedColumnChange,
-    status = _ref5.status,
-    hasNextPage = _ref5.hasNextPage,
-    scrollableContainerHeight = _ref5.scrollableContainerHeight,
-    extensionKey = _ref5.extensionKey;
+  var testId = _ref6.testId,
+    onNextPage = _ref6.onNextPage,
+    onLoadDatasourceDetails = _ref6.onLoadDatasourceDetails,
+    items = _ref6.items,
+    itemIds = _ref6.itemIds,
+    columns = _ref6.columns,
+    _ref6$renderItem = _ref6.renderItem,
+    renderItem = _ref6$renderItem === void 0 ? renderType : _ref6$renderItem,
+    visibleColumnKeys = _ref6.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref6.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref6.columnCustomSizes,
+    onColumnResize = _ref6.onColumnResize,
+    onColumnSort = _ref6.onColumnSort,
+    wrappedColumnKeys = _ref6.wrappedColumnKeys,
+    onWrappedColumnChange = _ref6.onWrappedColumnChange,
+    sortState = _ref6.sortState,
+    status = _ref6.status,
+    hasNextPage = _ref6.hasNextPage,
+    scrollableContainerHeight = _ref6.scrollableContainerHeight,
+    extensionKey = _ref6.extensionKey;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -229,8 +257,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   }, [experienceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref6) {
-        var key = _ref6.key;
+      return orderedColumns.find(function (_ref7) {
+        var key = _ref7.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -240,9 +268,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
   var columnsWidthsSum = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref7) {
-      var key = _ref7.key,
-        type = _ref7.type;
+    return visibleSortedColumns.map(function (_ref8) {
+      var key = _ref8.key,
+        type = _ref8.type;
       return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
     }).reduce(function (sum, width) {
       return width + sum;
@@ -258,10 +286,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }
   }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
   var headerColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref8, index) {
-      var key = _ref8.key,
-        title = _ref8.title,
-        type = _ref8.type;
+    return visibleSortedColumns.map(function (_ref9, index) {
+      var key = _ref9.key,
+        title = _ref9.title,
+        type = _ref9.type;
       return {
         key: key,
         content: title,
@@ -316,9 +344,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       return;
     }
     return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref9) {
-        var location = _ref9.location,
-          source = _ref9.source;
+      onDragStart: function onDragStart(_ref0) {
+        var location = _ref0.location,
+          source = _ref0.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
@@ -334,9 +362,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           });
         }
       },
-      onDrag: function onDrag(_ref0) {
-        var location = _ref0.location,
-          source = _ref0.source;
+      onDrag: function onDrag(_ref1) {
+        var location = _ref1.location,
+          source = _ref1.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current3;
           autoScroller.updateInput({
@@ -346,9 +374,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           });
         }
       },
-      onDrop: function onDrop(_ref1) {
-        var source = _ref1.source,
-          location = _ref1.location;
+      onDrop: function onDrop(_ref10) {
+        var source = _ref10.source,
+          location = _ref10.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -383,10 +411,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     return itemIds.map(function (id, rowIndex) {
       return {
         key: id,
-        cells: visibleSortedColumns.map(function (_ref10, cellIndex) {
-          var key = _ref10.key,
-            type = _ref10.type,
-            title = _ref10.title;
+        cells: visibleSortedColumns.map(function (_ref11, cellIndex) {
+          var key = _ref11.key,
+            type = _ref11.type,
+            title = _ref11.title;
           return {
             key: key,
             columnKey: key,
@@ -466,6 +494,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }, _callee, null, [[2, 4]]);
   })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var isEditable = onVisibleColumnKeysChange && hasData;
+  // Sorting is enabled only when the table owns the header interaction (read-only mode).
+  // Editable tables reserve header interactions for drag/resize/wrap controls.
+  var shouldEnableColumnSort = !!onColumnSort && !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
   var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
   var view = /*#__PURE__*/React.createElement("div", {
@@ -495,10 +526,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     className: ax(["_n7zlidpf", "_bfhkchd4 _kqsw1if8 _154iidpf _1pbyzo7u", !!onVisibleColumnKeysChange ? 'has-column-picker' : ''])
   }, /*#__PURE__*/React.createElement("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref12, cellIndex) {
-    var key = _ref12.key,
-      content = _ref12.content,
-      width = _ref12.width;
+  }, headerColumns.map(function (_ref13, cellIndex) {
+    var key = _ref13.key,
+      content = _ref13.content,
+      width = _ref13.width;
     var heading = /*#__PURE__*/React.createElement(Tooltip, {
       content: content,
       tag: "span",
@@ -509,17 +540,42 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       className: ax(["_11c8wadc _k48p1wq8"])
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (isHeadingOutsideButton) {
+    if (shouldEnableColumnSort) {
+      var sortedDirection = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key ? sortState.direction : undefined;
+      // Use directional icon only for the active sort column; keep width stable otherwise.
+      var SortIcon = sortedDirection ? sortedDirection === 'ASC' ? SortAscendingIcon : SortDescendingIcon : GlyphPlaceholder;
+      var sortLabel = typeof content === 'string' ? content : key;
+      var sortButtonAriaLabel = sortedDirection === 'ASC' ? formatMessage(issueLikeTableMessages.sortByColumnDescendingAction, {
+        column: sortLabel
+      }) : formatMessage(issueLikeTableMessages.sortByColumnAscendingAction, {
+        column: sortLabel
+      });
+      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(Button, {
+        appearance: "subtle",
+        spacing: "compact",
+        shouldFitContainer: true,
+        testId: "".concat(key, "-column-sort-button"),
+        "aria-label": sortButtonAriaLabel,
+        iconAfter: function iconAfter(iconProps) {
+          return /*#__PURE__*/React.createElement(SortIcon, _extends({}, iconProps, {
+            size: "small"
+          }));
+        },
+        onClick: function onClick() {
+          return onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort(key);
+        }
+      }, heading));
+    } else if (isHeadingOutsideButton) {
       heading = /*#__PURE__*/React.createElement("div", {
         className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu418qm _irr3l4ek"])
       }, heading);
     }
     if (isEditable) {
       var _containerRef$current4;
-      var previewRows = tableRows.map(function (_ref13) {
-        var cells = _ref13.cells;
-        var cell = cells.find(function (_ref14) {
-          var cellKey = _ref14.key;
+      var previewRows = tableRows.map(function (_ref14) {
+        var cells = _ref14.cells;
+        var cell = cells.find(function (_ref15) {
+          var cellKey = _ref15.key;
           return cellKey === key;
         });
         if (cell) {
@@ -543,16 +599,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
-      return /*#__PURE__*/React.createElement(TableHeading, {
+      return /*#__PURE__*/React.createElement(TableHeading, _extends({
         key: key,
         "data-testid": "".concat(key, "-column-heading")
+      }, fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
+        'aria-sort': (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'ASC' ? 'ascending' : (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'DESC' ? 'descending' : undefined
+      } : {}, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
         style: getWidthCss({
           shouldUseWidth: shouldUseWidth,
           width: width
         })
-      }, heading);
+      }), heading);
     }
   }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(ColumnPicker, {
     columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
@@ -562,18 +620,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
   })))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && "".concat(testId, "--body"),
     className: ax(["_n7zlidpf"])
-  }, rows.map(function (_ref15) {
-    var key = _ref15.key,
-      cells = _ref15.cells,
-      ref = _ref15.ref;
+  }, rows.map(function (_ref16) {
+    var key = _ref16.key,
+      cells = _ref16.cells,
+      ref = _ref16.ref;
     return /*#__PURE__*/React.createElement("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref16, cellIndex) {
-      var cellKey = _ref16.key,
-        content = _ref16.content,
-        width = _ref16.width;
+    }, cells.map(function (_ref17, cellIndex) {
+      var cellKey = _ref17.key,
+        content = _ref17.content,
+        width = _ref17.width;
       var isLastCell = cellIndex === cells.length - 1;
       var loadingRowStyle = getWidthCss({
         shouldUseWidth: shouldUseWidth,

package/dist/esm/ui/issue-like-table/messages.js

@@ -40,6 +40,16 @@ export var issueLikeTableMessages = defineMessages({
     description: 'Table header Dropdown item for making whole column to not wrap text',
     defaultMessage: 'Unwrap text'
   },
+  sortByColumnAscendingAction: {
+    id: 'linkDataSource.issue-line-table.sort-by-column-ascending-action',
+    description: 'Accessible label for sorting a table column in ascending order',
+    defaultMessage: 'Sort by {column} ascending.'
+  },
+  sortByColumnDescendingAction: {
+    id: 'linkDataSource.issue-line-table.sort-by-column-descending-action',
+    description: 'Accessible label for sorting a table column in descending order',
+    defaultMessage: 'Sort by {column} descending.'
+  },
   fetchActionErrorGenericDescriptionGalaxia: {
     id: 'linkDataSource.issue-line-table.fetch-action-error-generic-description-galaxia',
     description: 'Generic error message description shown when fetching inline edit dropdown field fails',

package/dist/types/i18n/cs.d.ts

@@ -4,5 +4,155 @@
  * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-import translations from '@atlaskit/afm-i18n-platform-linking-platform-link-datasource/i18n/cs';
-export default translations;
+declare const _default: {
+    '1M7iXg': string;
+    'linkDataSource.accessInstructions': string;
+    'linkDataSource.accessRequired': string;
+    'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText': string;
+    'linkDataSource.assets.configModal.aqlSearchInput.placeholder': string;
+    'linkDataSource.assets.configModal.objectSchemaSelect.label': string;
+    'linkDataSource.assets.configModal.objectSchemaSelect.placeholder': string;
+    'linkDataSource.assets.configModal.objectSchemaSelect.schemaRequired': string;
+    'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.learnMoreLink': string;
+    'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.learnMoreLinkOld': string;
+    'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchDescription': string;
+    'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchTitle': string;
+    'linkDataSource.assets.configmodal.insertIssuesButtonText': string;
+    'linkDataSource.assets.configmodal.insertObjectsTitle': string;
+    'linkDataSource.assets.configmodal.updateObjectsButtonText': string;
+    'linkDataSource.basic-filter.assignee.label': string;
+    'linkDataSource.basic-filter.assignee.searchPlaceholder': string;
+    'linkDataSource.basic-filter.dropdown.select.assignee.unassigned': string;
+    'linkDataSource.basic-filter.dropdown.select.placeholder': string;
+    'linkDataSource.basic-filter.error-description': string;
+    'linkDataSource.basic-filter.errorMessage': string;
+    'linkDataSource.basic-filter.errorMessageOld': string;
+    'linkDataSource.basic-filter.footer.pagination-details': string;
+    'linkDataSource.basic-filter.loading-message': string;
+    'linkDataSource.basic-filter.no-options-description': string;
+    'linkDataSource.basic-filter.no-options-message': string;
+    'linkDataSource.basic-filter.no-options-message-old': string;
+    'linkDataSource.basic-filter.project.label': string;
+    'linkDataSource.basic-filter.project.label-galaxia': string;
+    'linkDataSource.basic-filter.project.searchPlaceholder': string;
+    'linkDataSource.basic-filter.project.searchPlaceholder-galaxia': string;
+    'linkDataSource.basic-filter.showMoreButton': string;
+    'linkDataSource.basic-filter.status.label': string;
+    'linkDataSource.basic-filter.status.searchPlaceholder': string;
+    'linkDataSource.basic-filter.type.label': string;
+    'linkDataSource.basic-filter.type.labelOld': string;
+    'linkDataSource.basic-filter.type.searchPlaceholder': string;
+    'linkDataSource.checkConnection': string;
+    'linkDataSource.clol-basic-filter.editedOrCreatedBy.label': string;
+    'linkDataSource.column-picker.no-all-items-shown-message.line-1': string;
+    'linkDataSource.column-picker.no-all-items-shown-message.line-2': string;
+    'linkDataSource.column-picker.search': string;
+    'linkDataSource.column-picker.tooltip': string;
+    'linkDataSource.configmodal.basicTextSearchPlaceholder': string;
+    'linkDataSource.configmodal.basicTextSearchPlaceholder-issue-term-refresh': string;
+    'linkDataSource.configmodal.cancelButtonText': string;
+    'linkDataSource.confluence-search.checkConnectionWithSource': string;
+    'linkDataSource.confluence-search.checkConnectionWithSource-galaxia': string;
+    'linkDataSource.confluence-search.configmodal.cancelButtonText': string;
+    'linkDataSource.confluence-search.configmodal.date.range.after.label': string;
+    'linkDataSource.confluence-search.configmodal.date.range.any.time': string;
+    'linkDataSource.confluence-search.configmodal.date.range.before.label': string;
+    'linkDataSource.confluence-search.configmodal.date.range.custom': string;
+    'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.after.end': string;
+    'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.after.today': string;
+    'linkDataSource.confluence-search.configmodal.date.range.custom.invalid.to.after.today': string;
+    'linkDataSource.confluence-search.configmodal.date.range.error': string;
+    'linkDataSource.confluence-search.configmodal.date.range.from': string;
+    'linkDataSource.confluence-search.configmodal.date.range.input.placeholder': string;
+    'linkDataSource.confluence-search.configmodal.date.range.last.month': string;
+    'linkDataSource.confluence-search.configmodal.date.range.last.week': string;
+    'linkDataSource.confluence-search.configmodal.date.range.last.year': string;
+    'linkDataSource.confluence-search.configmodal.date.range.title': string;
+    'linkDataSource.confluence-search.configmodal.date.range.to': string;
+    'linkDataSource.confluence-search.configmodal.date.range.to.Label': string;
+    'linkDataSource.confluence-search.configmodal.date.range.today': string;
+    'linkDataSource.confluence-search.configmodal.date.range.update.button': string;
+    'linkDataSource.confluence-search.configmodal.date.range.yesterday': string;
+    'linkDataSource.confluence-search.configmodal.insertConfluenceTitle': string;
+    'linkDataSource.confluence-search.configmodal.insertConfluenceTitleManySites': string;
+    'linkDataSource.confluence-search.configmodal.insertResultsButtonText': string;
+    'linkDataSource.confluence-search.configmodal.placeholder.issues': string;
+    'linkDataSource.confluence-search.configmodal.searchLabel': string;
+    'linkDataSource.confluence-search.no.confluence.sites.access.description': string;
+    'linkDataSource.confluence-search.no.confluence.sites.access.title': string;
+    'linkDataSource.datasource.table.authConnectButtonText': string;
+    'linkDataSource.datasource.table.authScreenDescriptionText': string;
+    'linkDataSource.datasource.table.authScreenDescriptionText-appify': string;
+    'linkDataSource.datasource.table.authScreenHeaderText': string;
+    'linkDataSource.datasource.table.learnMoreAboutSmartLinks': string;
+    'linkDataSource.issue-line-table.error-403-description': string;
+    'linkDataSource.issue-line-table.error-403-title': string;
+    'linkDataSource.issue-line-table.error-generic-description': string;
+    'linkDataSource.issue-line-table.error-generic-title': string;
+    'linkDataSource.issue-line-table.fetch-action-error-generic-description': string;
+    'linkDataSource.issue-line-table.fetch-action-error-generic-description-galaxia': string;
+    'linkDataSource.issue-line-table.fetch-action-error-generic-title': string;
+    'linkDataSource.issue-line-table.unwrap-text': string;
+    'linkDataSource.issue-line-table.wrap-text': string;
+    'linkDataSource.issueLikeTable.renderType.dateRange.fullRange': string;
+    'linkDataSource.issueLikeTable.renderType.dateRange.quarterRange': string;
+    'linkDataSource.issueLikeTable.renderType.dateRange.quarterRangeOverYears': string;
+    'linkDataSource.accessRequiredWithSite': string;
+    'linkDataSource.jira-issues.checkConnection.confluence': string;
+    'linkDataSource.jira-issues.checkConnection.jira': string;
+    'linkDataSource.checkConnectionWithSource': string;
+    'linkDataSource.jira-issues.checkConnectionWithSource.visual-refresh-sllv': string;
+    'linkDataSource.jira-issues.checkConnectionWithSource.visual-refresh-sllv-galaxia': string;
+    'linkDataSource.jira-issues.configmodal.basicModeSwitchDisabledTooltipText': string;
+    'linkDataSource.jira-issues.configmodal.basicModeText': string;
+    'linkDataSource.jira-issues.configmodal.basicTextSearchPlaceholder-issue-term-refresh': string;
+    'linkDataSource.site-selector.configmodal.chooseSite': string;
+    'linkDataSource.jira-issues.configmodal.insertIssuesButtonText': string;
+    'linkDataSource.jira-issues.configmodal.insertIssuesButtonText-issue-term-sllv': string;
+    'linkDataSource.jira-issues.configmodal.insertIssuesTitle': string;
+    'linkDataSource.jira-issues.configmodal.insertIssuesTitle-issue-term-refresh': string;
+    'linkDataSource.jira-issues.configmodal.insertIssuesTitleManySites': string;
+    'linkDataSource.jira-issues.configmodal.insertIssuesTitleManySites-issue-term-refresh': string;
+    'linkDataSource.jira-issues.configmodal.placeholder.issues-issue-term-refresh': string;
+    'linkDataSource.jira-issues.configmodal.viewModeInlineLinkDescription': string;
+    'linkDataSource.jira-issues.configmodal.viewModeInlineLinkDescriptionOld': string;
+    'linkDataSource.jira-issues.configmodal.viewModeInlineLinkLabel': string;
+    'linkDataSource.jira-issues.configmodal.viewModeListDescription': string;
+    'linkDataSource.jira-issues.configmodal.viewModeListDescriptionOld': string;
+    'linkDataSource.jira-issues.configmodal.viewModeListLabel': string;
+    'linkDataSource.jira-issues.learnMoreLink': string;
+    'linkDataSource.no.jira.sites.access.description': string;
+    'linkDataSource.no.jira.sites.access.title': string;
+    'linkDataSource.noResultsFound': string;
+    'linkDataSource.jira-issues.noResultsFound.description': string;
+    'linkDataSource.refresh': string;
+    'linkDataSource.jira-issues.searchDescription-basic': string;
+    'linkDataSource.jira-issues.searchDescription-jql': string;
+    'linkDataSource.jira-issues.searchJiraTitle': string;
+    'linkDataSource.unableToLoadResults': string;
+    'linkDataSource.modal-initial-state.beta': string;
+    'linkDataSource.modal-initial-state.confluenceSearchTitle': string;
+    'linkDataSource.modal-initial-state.jiraSearchTitle': string;
+    'linkDataSource.modal-initial-state.learnMoreLinkOld': string;
+    'linkDataSource.modal-initial-state.searchDescription-basic-issue-term-refresh': string;
+    'linkDataSource.modal-initial-state.searchDescription-basic.Sllv': string;
+    'linkDataSource.modal-initial-state.searchDescription-confluence': string;
+    'linkDataSource.modal-initial-state.searchDescription-jql-issue-term-refresh': string;
+    'linkDataSource.modal-initial-state.searchTitle-issue-term-refresh': string;
+    'linkDataSource.render-type.boolean.false': string;
+    'linkDataSource.render-type.boolean.true': string;
+    'linkDataSource.render-type.user.default.display.name': string;
+    'linkDataSource.search.configmodal.issueCountText': string;
+    'linkDataSource.search.configmodal.issueCountText-issue-term-refresh': string;
+    'linkDataSource.search.configmodal.itemCountText': string;
+    'linkDataSource.search.configmodal.resultCountText': string;
+    'linkDataSource.table-footer.date_formatter.under_one_minute': string;
+    'linkDataSource.table-footer.date_formatter.under_over_minute': string;
+    'linkDataSource.table-footer.item': string;
+    'linkDataSource.table-footer.loading': string;
+    'linkDataSource.table-footer.power-by-jsm': string;
+    'linkDataSource.table-footer.powered-by-assets': string;
+    'linkDataSource.table-footer.refresh': string;
+    'linkDataSource.unableToLoadItems': string;
+};
+export default _default;