npm - @atlaskit/dynamic-table - Versions diffs - 17.0.2 → 17.0.4 - Mend

@atlaskit/dynamic-table 17.0.2 → 17.0.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 (31) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,20 @@
 # @atlaskit/dynamic-table
+## 17.0.4
+### Patch Changes
+- Updated dependencies
+## 17.0.3
+### Patch Changes
+- [#100858](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100858)
+  [`bc47a0d12cb7a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc47a0d12cb7a) -
+  [ux] Updates visually refreshed sort button in DynamicTableStateless for an icon only column
+  header
 ## 17.0.2
 ### Patch Changes

package/dist/cjs/components/rankable/table-head-cell-old.js ADDED Viewed

@@ -0,0 +1,46 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _withDimensions = _interopRequireDefault(require("../../hoc/with-dimensions"));
+var _helpers = require("../../internal/helpers");
+var _tableHeadCellOld = _interopRequireDefault(require("../table-head-cell-old"));
+var _excluded = ["isRanking", "refHeight", "refWidth"];
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // Delete this file when cleaning up platform-component-visual-refresh FG
+var RankableTableHeadCellComponentOld = /*#__PURE__*/function (_React$Component) {
+  function RankableTableHeadCellComponentOld() {
+    (0, _classCallCheck2.default)(this, RankableTableHeadCellComponentOld);
+    return _callSuper(this, RankableTableHeadCellComponentOld, arguments);
+  }
+  (0, _inherits2.default)(RankableTableHeadCellComponentOld, _React$Component);
+  return (0, _createClass2.default)(RankableTableHeadCellComponentOld, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isRanking = _this$props.isRanking,
+        refHeight = _this$props.refHeight,
+        refWidth = _this$props.refWidth,
+        restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
+      return /*#__PURE__*/_react.default.createElement(_tableHeadCellOld.default, (0, _extends2.default)({
+        inlineStyles: inlineStyles
+      }, restProps));
+    }
+  }]);
+}(_react.default.Component);
+var RankableTableHeadCellOld = (0, _withDimensions.default)(RankableTableHeadCellComponentOld);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var _default = exports.default = RankableTableHeadCellOld;

package/dist/cjs/components/rankable/table-row.js CHANGED Viewed

@@ -14,7 +14,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pragmaticDragAndDropReactBeautifulDndMigration = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration");
 var _withDimensions = _interopRequireDefault(require("../../hoc/with-dimensions"));
 var _helpers = require("../../internal/helpers");
@@ -73,7 +72,7 @@ var RankableTableRow = exports.RankableTableRow = /*#__PURE__*/function (_React$
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
-        var _provided$dragHandleP, _provided$dragHandleP2;
+        var _provided$dragHandleP;
         return /*#__PURE__*/_react.default.createElement(_tableRow.RankableTableBodyRow, (0, _extends2.default)({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
           /**
            * `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
@@ -81,13 +80,13 @@ var RankableTableRow = exports.RankableTableRow = /*#__PURE__*/function (_React$
            * Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
            * Previously we used RBD 12 which did not provide a role to the drag handle.
            */
-          role: (0, _platformFeatureFlags.fg)('platform_design_system_dynamic_table_row_role') ? undefined : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+          role: undefined
           // It is necessary to prevent the passing of aria-labelledby
           ,
           "aria-labelledby": undefined
           // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
           ,
-          "aria-describedby": (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2['aria-describedby'],
+          "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
           ref: _this2.innerRef(provided.innerRef)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,

package/dist/cjs/components/stateless.js CHANGED Viewed

@@ -86,14 +86,14 @@ var DynamicTable = function DynamicTable(_ref) {
     action: 'sorted',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.2"
+    packageVersion: "17.0.4"
   });
   var onRankEnd = (0, _analyticsNext.usePlatformLeafEventHandler)({
     fn: providedOnRankEnd,
     action: 'ranked',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.2"
+    packageVersion: "17.0.4"
   });
   (0, _react.useEffect)(function () {
     (0, _helpers.validateSortKey)(sortKey, head);

package/dist/cjs/components/table-head-cell-old.js ADDED Viewed

@@ -0,0 +1,39 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _tableHead = require("../styled/table-head");
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"]; // Delete this file when cleaning up platform-component-visual-refresh FG
+var TableHeadCellOld = function TableHeadCellOld(_ref) {
+  var content = _ref.content,
+    inlineStyles = _ref.inlineStyles,
+    testId = _ref.testId,
+    isRanking = _ref.isRanking,
+    innerRef = _ref.innerRef,
+    isSortable = _ref.isSortable,
+    onClick = _ref.onClick,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , (0, _extends2.default)({
+    style: inlineStyles,
+    testId: testId && "".concat(testId, "--head--cell"),
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest, {
+    onClick: onClick,
+    isSortable: isSortable
+  }), isSortable ? /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-roledescription": "Sort button"
+  }, content) : content);
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var _default = exports.default = TableHeadCellOld;

package/dist/cjs/components/table-head-cell.compiled.css CHANGED Viewed

@@ -1,9 +1,16 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._bfhk18uv{background-color:initial}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._tzy4idpf{opacity:0}
 ._tzy4kb7n{opacity:1}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._1h7hkb7n:focus{opacity:1}
 ._d0altlke:hover{cursor:pointer}

package/dist/cjs/components/table-head-cell.js CHANGED Viewed

@@ -15,18 +15,19 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../internal/constants");
 var _tableHead = require("../styled/table-head");
-var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription"];
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription", "isIconOnlyHeader"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
-  buttonWrapper: "_19bvu2gc _d0altlke",
-  buttonHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
-  buttonVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv"
+  buttonWrapper: "_1e0c1txw _bfhk18uv _4cvr1h6o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0altlke",
+  sortIconHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk18uv _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1h7hkb7n",
+  sortIconVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk18uv _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
+  visibleHeaderWrapper: "_tzy4kb7n _u5f31b66"
 };
 var headCellStyles = {
   headCellContainer: "_1e0c1txw _4cvr1h6o"
@@ -48,53 +49,62 @@ var TableHeadCell = function TableHeadCell(_ref) {
     descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
     _ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
     buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
+    isIconOnlyHeader = _ref.isIconOnlyHeader,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _ref2 = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ?
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useState)(false) : [undefined, undefined],
-    _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-    isHovered = _ref3[0],
-    setIsHovered = _ref3[1];
-  var isSortButtonVisible = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? isHovered || headCellId === activeSortButtonId || sortOrder !== undefined : undefined;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
+  var isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
+  var isSortIconVisible = isHovered || isActive || isFocused;
+  var isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
+  var shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
+  var handleFocus = (0, _react.useCallback)(function () {
+    setIsFocused === null || setIsFocused === void 0 || setIsFocused(true);
+  }, [setIsFocused]);
+  var handleBlur = (0, _react.useCallback)(function () {
+    setIsFocused === null || setIsFocused === void 0 || setIsFocused(false);
+  }, [setIsFocused]);
   var handleMouseEnter = (0, _react.useCallback)(function () {
-    // Remove check for isHovered when cleaning up platform-component-visual-refresh
-    if (isHovered !== undefined && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
-      setIsHovered(true);
-    }
-  }, [isHovered, setIsHovered]);
+    setIsHovered(true);
+  }, [setIsHovered]);
   var handleMouseLeave = (0, _react.useCallback)(function () {
-    // Remove check for isHovered when cleaning up platform-component-visual-refresh
-    if (isHovered !== undefined && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
-      setIsHovered(false);
-    }
-  }, [isHovered, setIsHovered]);
-  var visuallyRefreshedButton = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    setIsHovered(false);
+  }, [setIsHovered]);
+  var visuallyRefreshedButton = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: headCellStyles.headCellContainer,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    size: "small",
-    color: "color.text.subtle",
-    weight: "bold",
-    maxLines: 1
-  }, content), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
-    xcss: styles.buttonWrapper
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur
   }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: sortOrder === _constants.ASC ? ascendingSortTooltip : descendingSortTooltip
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: onClick,
-    xcss: isSortButtonVisible ? styles.buttonVisibleWrapper : styles.buttonHiddenWrapper,
+    xcss: styles.buttonWrapper,
     "aria-roledescription": buttonAriaRoleDescription
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    xcss: isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtle",
+    weight: "bold",
+    maxLines: 1
+  }, content)), shouldRenderSortIcon && /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
   }, sortOrder === _constants.ASC ? /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
     label: "",
-    color: "var(--ds-text-subtle, #44546F)"
+    color: "var(--ds-text-subtle, #44546F)",
+    testId: testId && "".concat(testId, "--up--icon")
   }) : /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
     label: "",
-    color: "var(--ds-text-subtle, #44546F)"
-  }))))) : /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    "aria-roledescription": "Sort button"
-  }, content);
+    color: "var(--ds-text-subtle, #44546F)",
+    testId: testId && "".concat(testId, "--down--icon")
+  })))));
   return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   , (0, _extends2.default)({
@@ -103,7 +113,6 @@ var TableHeadCell = function TableHeadCell(_ref) {
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {
-    onClick: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? undefined : onClick,
     isSortable: isSortable,
     sortOrder: sortOrder
   }), isSortable ? visuallyRefreshedButton : content);

package/dist/cjs/components/table-head.js CHANGED Viewed

@@ -17,9 +17,11 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../internal/helpers");
 var _tableHead = require("../styled/table-head");
 var _tableHeadCell = _interopRequireDefault(require("./rankable/table-head-cell"));
+var _tableHeadCellOld = _interopRequireDefault(require("./rankable/table-head-cell-old"));
 var _tableHeadCell2 = _interopRequireDefault(require("./table-head-cell"));
+var _tableHeadCellOld2 = _interopRequireDefault(require("./table-head-cell-old"));
 var _excluded = ["cells"],
-  _excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isSortable", "key", "shouldTruncate", "testId", "width"];
+  _excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isIconOnlyHeader", "isSortable", "key", "shouldTruncate", "testId", "width"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var TableHead = /*#__PURE__*/function (_React$Component) {
@@ -62,6 +64,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
       if (!head) {
         return null;
       }
+      var HeadCellComponentOld = isRankable ? _tableHeadCellOld.default : _tableHeadCellOld2.default;
       var HeadCellComponent = isRankable ? _tableHeadCell.default : _tableHeadCell2.default;
       // TODO: Remove `rest` props and use only what is explicitly in the API.
@@ -79,6 +82,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           colSpan = cell.colSpan,
           content = cell.content,
           descendingSortTooltip = cell.descendingSortTooltip,
+          isIconOnlyHeader = cell.isIconOnlyHeader,
           isSortable = cell.isSortable,
           key = cell.key,
           shouldTruncate = cell.shouldTruncate,
@@ -86,22 +90,19 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           width = cell.width,
           restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded2);
         var headCellId = "head-cell-".concat(index);
-        var handleClick = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? function () {
+        var handleClick = function handleClick() {
           _this2.setState({
             activeSortButtonId: headCellId
           });
           if (isSortable) {
             onSort(cell)();
           }
-        } : function () {
-          if (isSortable) {
-            onSort(cell)();
-          }
         };
-        return /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
+        return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
           colSpan: colSpan,
           content: content,
           isFixedSize: isFixedSize,
+          isIconOnlyHeader: isIconOnlyHeader,
           isSortable: !!isSortable,
           isRanking: isRanking,
           key: key || index,
@@ -115,6 +116,18 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           ascendingSortTooltip: ascendingSortTooltip,
           descendingSortTooltip: descendingSortTooltip,
           buttonAriaRoleDescription: buttonAriaRoleDescription
+        }, restCellProps)) : /*#__PURE__*/_react.default.createElement(HeadCellComponentOld, (0, _extends2.default)({
+          colSpan: colSpan,
+          content: content,
+          isFixedSize: isFixedSize,
+          isSortable: !!isSortable,
+          isRanking: isRanking,
+          key: key || index,
+          onClick: isSortable ? onSort(cell) : undefined,
+          testId: cellTestId || testId,
+          shouldTruncate: shouldTruncate,
+          sortOrder: key === sortKey ? sortOrder : undefined,
+          width: width
         }, restCellProps));
       })));
     }

package/dist/es2019/components/rankable/table-head-cell-old.js ADDED Viewed

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Delete this file when cleaning up platform-component-visual-refresh FG
+import React from 'react';
+import withDimensions from '../../hoc/with-dimensions';
+import { inlineStylesIfRanking } from '../../internal/helpers';
+import HeadCell from '../table-head-cell-old';
+class RankableTableHeadCellComponentOld extends React.Component {
+  render() {
+    const {
+      isRanking,
+      refHeight,
+      refWidth,
+      ...restProps
+    } = this.props;
+    const inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
+    return /*#__PURE__*/React.createElement(HeadCell, _extends({
+      inlineStyles: inlineStyles
+    }, restProps));
+  }
+}
+const RankableTableHeadCellOld = withDimensions(RankableTableHeadCellComponentOld);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default RankableTableHeadCellOld;

package/dist/es2019/components/rankable/table-row.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 // Allowing existing usage of non Pragmatic drag and drop solution
 // eslint-disable-next-line @atlaskit/design-system/no-unsupported-drag-and-drop-libraries
 import { Draggable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
@@ -48,7 +48,7 @@ export class RankableTableRow extends React.Component {
       index: rowIndex,
       isDragDisabled: isRankingDisabled
     }, (provided, snapshot) => {
-      var _provided$dragHandleP, _provided$dragHandleP2;
+      var _provided$dragHandleP;
       return /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
         /**
          * `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
@@ -56,13 +56,13 @@ export class RankableTableRow extends React.Component {
          * Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
          * Previously we used RBD 12 which did not provide a role to the drag handle.
          */
-        role: fg('platform_design_system_dynamic_table_row_role') ? undefined : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+        role: undefined
         // It is necessary to prevent the passing of aria-labelledby
         ,
         "aria-labelledby": undefined
         // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
         ,
-        "aria-describedby": (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2['aria-describedby'],
+        "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
         ref: this.innerRef(provided.innerRef)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

package/dist/es2019/components/stateless.js CHANGED Viewed

@@ -60,14 +60,14 @@ const DynamicTable = ({
     action: 'sorted',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.2"
+    packageVersion: "17.0.4"
   });
   const onRankEnd = usePlatformLeafEventHandler({
     fn: providedOnRankEnd,
     action: 'ranked',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.2"
+    packageVersion: "17.0.4"
   });
   useEffect(() => {
     validateSortKey(sortKey, head);

package/dist/es2019/components/table-head-cell-old.js ADDED Viewed

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Delete this file when cleaning up platform-component-visual-refresh FG
+import React from 'react';
+import { HeadCell } from '../styled/table-head';
+const TableHeadCellOld = ({
+  content,
+  inlineStyles,
+  testId,
+  isRanking,
+  innerRef,
+  isSortable,
+  onClick,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(HeadCell
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
+    style: inlineStyles,
+    testId: testId && `${testId}--head--cell`,
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest, {
+    onClick: onClick,
+    isSortable: isSortable
+  }), isSortable ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-roledescription": "Sort button"
+  }, content) : content);
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default TableHeadCellOld;

package/dist/es2019/components/table-head-cell.compiled.css CHANGED Viewed

@@ -1,9 +1,16 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._bfhk18uv{background-color:initial}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._tzy4idpf{opacity:0}
 ._tzy4kb7n{opacity:1}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._1h7hkb7n:focus{opacity:1}
 ._d0altlke:hover{cursor:pointer}

package/dist/es2019/components/table-head-cell.js CHANGED Viewed

@@ -5,15 +5,16 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useState } from 'react';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { ASC } from '../internal/constants';
 import { HeadCell } from '../styled/table-head';
 const styles = {
-  buttonWrapper: "_19bvu2gc _d0altlke",
-  buttonHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
-  buttonVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv"
+  buttonWrapper: "_1e0c1txw _bfhk18uv _4cvr1h6o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0altlke",
+  sortIconHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk18uv _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1h7hkb7n",
+  sortIconVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk18uv _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
+  visibleHeaderWrapper: "_tzy4kb7n _u5f31b66"
 };
 const headCellStyles = {
   headCellContainer: "_1e0c1txw _4cvr1h6o"
@@ -32,51 +33,57 @@ const TableHeadCell = ({
   ascendingSortTooltip = 'Sort ascending',
   descendingSortTooltip = 'Sort descending',
   buttonAriaRoleDescription = 'Sort button',
+  isIconOnlyHeader,
   ...rest
 }) => {
-  const [isHovered, setIsHovered] = fg('platform-component-visual-refresh') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useState(false) : [undefined, undefined];
-  const isSortButtonVisible = fg('platform-component-visual-refresh') ? isHovered || headCellId === activeSortButtonId || sortOrder !== undefined : undefined;
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
+  const isSortIconVisible = isHovered || isActive || isFocused;
+  const isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
+  const shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
+  const handleFocus = useCallback(() => {
+    setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(true);
+  }, [setIsFocused]);
+  const handleBlur = useCallback(() => {
+    setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(false);
+  }, [setIsFocused]);
   const handleMouseEnter = useCallback(() => {
-    // Remove check for isHovered when cleaning up platform-component-visual-refresh
-    if (isHovered !== undefined && fg('platform-component-visual-refresh')) {
-      setIsHovered(true);
-    }
-  }, [isHovered, setIsHovered]);
+    setIsHovered(true);
+  }, [setIsHovered]);
   const handleMouseLeave = useCallback(() => {
-    // Remove check for isHovered when cleaning up platform-component-visual-refresh
-    if (isHovered !== undefined && fg('platform-component-visual-refresh')) {
-      setIsHovered(false);
-    }
-  }, [isHovered, setIsHovered]);
-  const visuallyRefreshedButton = fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(Box, {
+    setIsHovered(false);
+  }, [setIsHovered]);
+  const visuallyRefreshedButton = /*#__PURE__*/React.createElement(Box, {
     xcss: headCellStyles.headCellContainer,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle",
-    weight: "bold",
-    maxLines: 1
-  }, content), /*#__PURE__*/React.createElement(Flex, {
-    xcss: styles.buttonWrapper
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: sortOrder === ASC ? ascendingSortTooltip : descendingSortTooltip
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,
-    xcss: isSortButtonVisible ? styles.buttonVisibleWrapper : styles.buttonHiddenWrapper,
+    xcss: styles.buttonWrapper,
     "aria-roledescription": buttonAriaRoleDescription
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle",
+    weight: "bold",
+    maxLines: 1
+  }, content)), shouldRenderSortIcon && /*#__PURE__*/React.createElement(Flex, {
+    xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
   }, sortOrder === ASC ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
     label: "",
-    color: "var(--ds-text-subtle, #44546F)"
+    color: "var(--ds-text-subtle, #44546F)",
+    testId: testId && `${testId}--up--icon`
   }) : /*#__PURE__*/React.createElement(ArrowDownIcon, {
     label: "",
-    color: "var(--ds-text-subtle, #44546F)"
-  }))))) : /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-roledescription": "Sort button"
-  }, content);
+    color: "var(--ds-text-subtle, #44546F)",
+    testId: testId && `${testId}--down--icon`
+  })))));
   return /*#__PURE__*/React.createElement(HeadCell
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   , _extends({
@@ -85,7 +92,6 @@ const TableHeadCell = ({
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {
-    onClick: fg('platform-component-visual-refresh') ? undefined : onClick,
     isSortable: isSortable,
     sortOrder: sortOrder
   }), isSortable ? visuallyRefreshedButton : content);

package/dist/es2019/components/table-head.js CHANGED Viewed

@@ -4,7 +4,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { validateSortKey } from '../internal/helpers';
 import { Head } from '../styled/table-head';
 import RankableHeadCell from './rankable/table-head-cell';
+import RankableHeadCellOld from './rankable/table-head-cell-old';
 import HeadCell from './table-head-cell';
+import HeadCellOld from './table-head-cell-old';
 class TableHead extends React.Component {
   constructor(props) {
     super(props);
@@ -37,6 +39,7 @@ class TableHead extends React.Component {
     if (!head) {
       return null;
     }
+    const HeadCellComponentOld = isRankable ? RankableHeadCellOld : HeadCellOld;
     const HeadCellComponent = isRankable ? RankableHeadCell : HeadCell;
     // TODO: Remove `rest` props and use only what is explicitly in the API.
@@ -57,6 +60,7 @@ class TableHead extends React.Component {
         colSpan,
         content,
         descendingSortTooltip,
+        isIconOnlyHeader,
         isSortable,
         key,
         shouldTruncate,
@@ -67,22 +71,19 @@ class TableHead extends React.Component {
         ...restCellProps
       } = cell;
       const headCellId = `head-cell-${index}`;
-      const handleClick = fg('platform-component-visual-refresh') ? () => {
+      const handleClick = () => {
         this.setState({
           activeSortButtonId: headCellId
         });
         if (isSortable) {
           onSort(cell)();
         }
-      } : () => {
-        if (isSortable) {
-          onSort(cell)();
-        }
       };
-      return /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
+      return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
         colSpan: colSpan,
         content: content,
         isFixedSize: isFixedSize,
+        isIconOnlyHeader: isIconOnlyHeader,
         isSortable: !!isSortable,
         isRanking: isRanking,
         key: key || index,
@@ -96,6 +97,18 @@ class TableHead extends React.Component {
         ascendingSortTooltip: ascendingSortTooltip,
         descendingSortTooltip: descendingSortTooltip,
         buttonAriaRoleDescription: buttonAriaRoleDescription
+      }, restCellProps)) : /*#__PURE__*/React.createElement(HeadCellComponentOld, _extends({
+        colSpan: colSpan,
+        content: content,
+        isFixedSize: isFixedSize,
+        isSortable: !!isSortable,
+        isRanking: isRanking,
+        key: key || index,
+        onClick: isSortable ? onSort(cell) : undefined,
+        testId: cellTestId || testId,
+        shouldTruncate: shouldTruncate,
+        sortOrder: key === sortKey ? sortOrder : undefined,
+        width: width
       }, restCellProps));
     })));
   }

package/dist/esm/components/rankable/table-head-cell-old.js ADDED Viewed

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["isRanking", "refHeight", "refWidth"];
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// Delete this file when cleaning up platform-component-visual-refresh FG
+import React from 'react';
+import withDimensions from '../../hoc/with-dimensions';
+import { inlineStylesIfRanking } from '../../internal/helpers';
+import HeadCell from '../table-head-cell-old';
+var RankableTableHeadCellComponentOld = /*#__PURE__*/function (_React$Component) {
+  function RankableTableHeadCellComponentOld() {
+    _classCallCheck(this, RankableTableHeadCellComponentOld);
+    return _callSuper(this, RankableTableHeadCellComponentOld, arguments);
+  }
+  _inherits(RankableTableHeadCellComponentOld, _React$Component);
+  return _createClass(RankableTableHeadCellComponentOld, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isRanking = _this$props.isRanking,
+        refHeight = _this$props.refHeight,
+        refWidth = _this$props.refWidth,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      var inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
+      return /*#__PURE__*/React.createElement(HeadCell, _extends({
+        inlineStyles: inlineStyles
+      }, restProps));
+    }
+  }]);
+}(React.Component);
+var RankableTableHeadCellOld = withDimensions(RankableTableHeadCellComponentOld);
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default RankableTableHeadCellOld;

package/dist/esm/components/rankable/table-row.js CHANGED Viewed

@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 // Allowing existing usage of non Pragmatic drag and drop solution
 // eslint-disable-next-line @atlaskit/design-system/no-unsupported-drag-and-drop-libraries
 import { Draggable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
@@ -67,7 +67,7 @@ export var RankableTableRow = /*#__PURE__*/function (_React$Component) {
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
-        var _provided$dragHandleP, _provided$dragHandleP2;
+        var _provided$dragHandleP;
         return /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
           /**
            * `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
@@ -75,13 +75,13 @@ export var RankableTableRow = /*#__PURE__*/function (_React$Component) {
            * Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
            * Previously we used RBD 12 which did not provide a role to the drag handle.
            */
-          role: fg('platform_design_system_dynamic_table_row_role') ? undefined : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+          role: undefined
           // It is necessary to prevent the passing of aria-labelledby
           ,
           "aria-labelledby": undefined
           // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
           ,
-          "aria-describedby": (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2['aria-describedby'],
+          "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
           ref: _this2.innerRef(provided.innerRef)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,

package/dist/esm/components/stateless.js CHANGED Viewed

@@ -76,14 +76,14 @@ var DynamicTable = function DynamicTable(_ref) {
     action: 'sorted',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.2"
+    packageVersion: "17.0.4"
   });
   var onRankEnd = usePlatformLeafEventHandler({
     fn: providedOnRankEnd,
     action: 'ranked',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.2"
+    packageVersion: "17.0.4"
   });
   useEffect(function () {
     validateSortKey(sortKey, head);

package/dist/esm/components/table-head-cell-old.js ADDED Viewed

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"];
+// Delete this file when cleaning up platform-component-visual-refresh FG
+import React from 'react';
+import { HeadCell } from '../styled/table-head';
+var TableHeadCellOld = function TableHeadCellOld(_ref) {
+  var content = _ref.content,
+    inlineStyles = _ref.inlineStyles,
+    testId = _ref.testId,
+    isRanking = _ref.isRanking,
+    innerRef = _ref.innerRef,
+    isSortable = _ref.isSortable,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(HeadCell
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
+    style: inlineStyles,
+    testId: testId && "".concat(testId, "--head--cell"),
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest, {
+    onClick: onClick,
+    isSortable: isSortable
+  }), isSortable ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-roledescription": "Sort button"
+  }, content) : content);
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default TableHeadCellOld;

package/dist/esm/components/table-head-cell.compiled.css CHANGED Viewed

@@ -1,9 +1,16 @@
-._1yt41b66{padding:var(--ds-space-050,4px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._bfhk18uv{background-color:initial}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._tzy4idpf{opacity:0}
 ._tzy4kb7n{opacity:1}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._1h7hkb7n:focus{opacity:1}
 ._d0altlke:hover{cursor:pointer}

package/dist/esm/components/table-head-cell.js CHANGED Viewed

@@ -2,21 +2,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription"];
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription", "isIconOnlyHeader"];
 import "./table-head-cell.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useState } from 'react';
 import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
 import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { ASC } from '../internal/constants';
 import { HeadCell } from '../styled/table-head';
 var styles = {
-  buttonWrapper: "_19bvu2gc _d0altlke",
-  buttonHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
-  buttonVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv"
+  buttonWrapper: "_1e0c1txw _bfhk18uv _4cvr1h6o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0altlke",
+  sortIconHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk18uv _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1h7hkb7n",
+  sortIconVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk18uv _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
+  visibleHeaderWrapper: "_tzy4kb7n _u5f31b66"
 };
 var headCellStyles = {
   headCellContainer: "_1e0c1txw _4cvr1h6o"
@@ -38,53 +39,62 @@ var TableHeadCell = function TableHeadCell(_ref) {
     descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
     _ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
     buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
+    isIconOnlyHeader = _ref.isIconOnlyHeader,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _ref2 = fg('platform-component-visual-refresh') ?
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useState(false) : [undefined, undefined],
-    _ref3 = _slicedToArray(_ref2, 2),
-    isHovered = _ref3[0],
-    setIsHovered = _ref3[1];
-  var isSortButtonVisible = fg('platform-component-visual-refresh') ? isHovered || headCellId === activeSortButtonId || sortOrder !== undefined : undefined;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
+  var isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
+  var isSortIconVisible = isHovered || isActive || isFocused;
+  var isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
+  var shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
+  var handleFocus = useCallback(function () {
+    setIsFocused === null || setIsFocused === void 0 || setIsFocused(true);
+  }, [setIsFocused]);
+  var handleBlur = useCallback(function () {
+    setIsFocused === null || setIsFocused === void 0 || setIsFocused(false);
+  }, [setIsFocused]);
   var handleMouseEnter = useCallback(function () {
-    // Remove check for isHovered when cleaning up platform-component-visual-refresh
-    if (isHovered !== undefined && fg('platform-component-visual-refresh')) {
-      setIsHovered(true);
-    }
-  }, [isHovered, setIsHovered]);
+    setIsHovered(true);
+  }, [setIsHovered]);
   var handleMouseLeave = useCallback(function () {
-    // Remove check for isHovered when cleaning up platform-component-visual-refresh
-    if (isHovered !== undefined && fg('platform-component-visual-refresh')) {
-      setIsHovered(false);
-    }
-  }, [isHovered, setIsHovered]);
-  var visuallyRefreshedButton = fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(Box, {
+    setIsHovered(false);
+  }, [setIsHovered]);
+  var visuallyRefreshedButton = /*#__PURE__*/React.createElement(Box, {
     xcss: headCellStyles.headCellContainer,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle",
-    weight: "bold",
-    maxLines: 1
-  }, content), /*#__PURE__*/React.createElement(Flex, {
-    xcss: styles.buttonWrapper
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: sortOrder === ASC ? ascendingSortTooltip : descendingSortTooltip
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,
-    xcss: isSortButtonVisible ? styles.buttonVisibleWrapper : styles.buttonHiddenWrapper,
+    xcss: styles.buttonWrapper,
     "aria-roledescription": buttonAriaRoleDescription
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtle",
+    weight: "bold",
+    maxLines: 1
+  }, content)), shouldRenderSortIcon && /*#__PURE__*/React.createElement(Flex, {
+    xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
   }, sortOrder === ASC ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
     label: "",
-    color: "var(--ds-text-subtle, #44546F)"
+    color: "var(--ds-text-subtle, #44546F)",
+    testId: testId && "".concat(testId, "--up--icon")
   }) : /*#__PURE__*/React.createElement(ArrowDownIcon, {
     label: "",
-    color: "var(--ds-text-subtle, #44546F)"
-  }))))) : /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "aria-roledescription": "Sort button"
-  }, content);
+    color: "var(--ds-text-subtle, #44546F)",
+    testId: testId && "".concat(testId, "--down--icon")
+  })))));
   return /*#__PURE__*/React.createElement(HeadCell
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   , _extends({
@@ -93,7 +103,6 @@ var TableHeadCell = function TableHeadCell(_ref) {
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {
-    onClick: fg('platform-component-visual-refresh') ? undefined : onClick,
     isSortable: isSortable,
     sortOrder: sortOrder
   }), isSortable ? visuallyRefreshedButton : content);

package/dist/esm/components/table-head.js CHANGED Viewed

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 var _excluded = ["cells"],
-  _excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isSortable", "key", "shouldTruncate", "testId", "width"];
+  _excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isIconOnlyHeader", "isSortable", "key", "shouldTruncate", "testId", "width"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
@@ -14,7 +14,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { validateSortKey } from '../internal/helpers';
 import { Head } from '../styled/table-head';
 import RankableHeadCell from './rankable/table-head-cell';
+import RankableHeadCellOld from './rankable/table-head-cell-old';
 import HeadCell from './table-head-cell';
+import HeadCellOld from './table-head-cell-old';
 var TableHead = /*#__PURE__*/function (_React$Component) {
   function TableHead(props) {
     var _this;
@@ -55,6 +57,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
       if (!head) {
         return null;
       }
+      var HeadCellComponentOld = isRankable ? RankableHeadCellOld : HeadCellOld;
       var HeadCellComponent = isRankable ? RankableHeadCell : HeadCell;
       // TODO: Remove `rest` props and use only what is explicitly in the API.
@@ -72,6 +75,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           colSpan = cell.colSpan,
           content = cell.content,
           descendingSortTooltip = cell.descendingSortTooltip,
+          isIconOnlyHeader = cell.isIconOnlyHeader,
           isSortable = cell.isSortable,
           key = cell.key,
           shouldTruncate = cell.shouldTruncate,
@@ -79,22 +83,19 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           width = cell.width,
           restCellProps = _objectWithoutProperties(cell, _excluded2);
         var headCellId = "head-cell-".concat(index);
-        var handleClick = fg('platform-component-visual-refresh') ? function () {
+        var handleClick = function handleClick() {
           _this2.setState({
             activeSortButtonId: headCellId
           });
           if (isSortable) {
             onSort(cell)();
           }
-        } : function () {
-          if (isSortable) {
-            onSort(cell)();
-          }
         };
-        return /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
+        return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
           colSpan: colSpan,
           content: content,
           isFixedSize: isFixedSize,
+          isIconOnlyHeader: isIconOnlyHeader,
           isSortable: !!isSortable,
           isRanking: isRanking,
           key: key || index,
@@ -108,6 +109,18 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           ascendingSortTooltip: ascendingSortTooltip,
           descendingSortTooltip: descendingSortTooltip,
           buttonAriaRoleDescription: buttonAriaRoleDescription
+        }, restCellProps)) : /*#__PURE__*/React.createElement(HeadCellComponentOld, _extends({
+          colSpan: colSpan,
+          content: content,
+          isFixedSize: isFixedSize,
+          isSortable: !!isSortable,
+          isRanking: isRanking,
+          key: key || index,
+          onClick: isSortable ? onSort(cell) : undefined,
+          testId: cellTestId || testId,
+          shouldTruncate: shouldTruncate,
+          sortOrder: key === sortKey ? sortOrder : undefined,
+          width: width
         }, restCellProps));
       })));
     }

package/dist/types/components/rankable/table-head-cell-old.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type WithDimensionsProps } from '../../hoc/with-dimensions';
+import { type TableHeadCellProps } from '../table-head-cell-old';
+declare const RankableTableHeadCellOld: React.ComponentClass<Omit<WithDimensionsProps & TableHeadCellProps, "innerRef" | "refWidth" | "refHeight">, import("../../hoc/with-dimensions").State>;
+export default RankableTableHeadCellOld;

package/dist/types/components/table-head-cell-old.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import React, { type FC, type Ref } from 'react';
+import { type SortOrderType } from '../types';
+export interface TableHeadCellProps {
+    colSpan?: number;
+    sortKey?: string;
+    isSortable?: boolean;
+    sortOrder?: SortOrderType;
+    isFixedSize?: boolean;
+    innerRef?: Ref<HTMLTableCellElement>;
+    inlineStyles?: {};
+    content?: React.ReactNode;
+    onClick?: () => void;
+    shouldTruncate?: boolean;
+    testId?: string;
+    width?: number;
+    isRanking?: boolean;
+}
+declare const TableHeadCellOld: FC<TableHeadCellProps>;
+export default TableHeadCellOld;

package/dist/types/components/table-head-cell.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export interface TableHeadCellProps {
     ascendingSortTooltip?: string;
     descendingSortTooltip?: string;
     buttonAriaRoleDescription?: string;
+    isIconOnlyHeader?: boolean;
 }
 declare const TableHeadCell: FC<TableHeadCellProps>;
 export default TableHeadCell;

package/dist/types/types.d.ts CHANGED Viewed

@@ -148,6 +148,8 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
      *  - `{testId}--table` - Table.
      *  - `{testId}--head` - Table header.
      *  - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+     *  - `{testId}--head--up--icon` - Table header cell sort button arrow up icon.
+     *  - `{testId}--head--down--icon` - Table header cell sort button arrow down icon.
      *  - `{testId}--row--{index - content of the first cell}` - Table row.
      *  - `{testId}--body` - Table body.
      *  - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
@@ -353,6 +355,11 @@ export interface HeadCellType extends RowCellType {
      * Defaults to "Sort button".
      */
     buttonAriaRoleDescription?: string;
+    /**
+     * Whether the sortable column header is only an icon.
+     * If true, the sort button on hover or when active will be shown instead of the icon.
+     */
+    isIconOnlyHeader?: boolean;
 }
 export interface RankEndLocation {
     index: number;

package/dist/types-ts4.5/components/rankable/table-head-cell-old.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type WithDimensionsProps } from '../../hoc/with-dimensions';
+import { type TableHeadCellProps } from '../table-head-cell-old';
+declare const RankableTableHeadCellOld: React.ComponentClass<Omit<WithDimensionsProps & TableHeadCellProps, "innerRef" | "refWidth" | "refHeight">, import("../../hoc/with-dimensions").State>;
+export default RankableTableHeadCellOld;

package/dist/types-ts4.5/components/table-head-cell-old.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import React, { type FC, type Ref } from 'react';
+import { type SortOrderType } from '../types';
+export interface TableHeadCellProps {
+    colSpan?: number;
+    sortKey?: string;
+    isSortable?: boolean;
+    sortOrder?: SortOrderType;
+    isFixedSize?: boolean;
+    innerRef?: Ref<HTMLTableCellElement>;
+    inlineStyles?: {};
+    content?: React.ReactNode;
+    onClick?: () => void;
+    shouldTruncate?: boolean;
+    testId?: string;
+    width?: number;
+    isRanking?: boolean;
+}
+declare const TableHeadCellOld: FC<TableHeadCellProps>;
+export default TableHeadCellOld;

package/dist/types-ts4.5/components/table-head-cell.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export interface TableHeadCellProps {
     ascendingSortTooltip?: string;
     descendingSortTooltip?: string;
     buttonAriaRoleDescription?: string;
+    isIconOnlyHeader?: boolean;
 }
 declare const TableHeadCell: FC<TableHeadCellProps>;
 export default TableHeadCell;

package/dist/types-ts4.5/types.d.ts CHANGED Viewed

@@ -148,6 +148,8 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
      *  - `{testId}--table` - Table.
      *  - `{testId}--head` - Table header.
      *  - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+     *  - `{testId}--head--up--icon` - Table header cell sort button arrow up icon.
+     *  - `{testId}--head--down--icon` - Table header cell sort button arrow down icon.
      *  - `{testId}--row--{index - content of the first cell}` - Table row.
      *  - `{testId}--body` - Table body.
      *  - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
@@ -353,6 +355,11 @@ export interface HeadCellType extends RowCellType {
      * Defaults to "Sort button".
      */
     buttonAriaRoleDescription?: string;
+    /**
+     * Whether the sortable column header is only an icon.
+     * If true, the sort button on hover or when active will be shown instead of the icon.
+     */
+    isIconOnlyHeader?: boolean;
 }
 export interface RankEndLocation {
     index: number;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "17.0.2",
+	"version": "17.0.4",
 	"description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,9 +44,9 @@
 		"@atlaskit/pagination": "^15.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.3.0",
-		"@atlaskit/spinner": "^16.3.0",
+		"@atlaskit/spinner": "^17.0.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-beautiful-dnd": "^12.2.0"
@@ -89,9 +89,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_design_system_dynamic_table_row_role": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean"
 		}