@atlaskit/dynamic-table 18.2.18 → 18.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/dynamic-table
 
+## 18.3.0
+
+### Minor Changes
+
+- [`dfb254c12bb7b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dfb254c12bb7b) -
+  [ux] Updates dynamic-table styles to reflect our new visual design language. These changes were
+  previously behind a feature flag and are now fully rolled out.
+
 ## 18.2.18
 
 ### Patch Changes

package/dist/cjs/components/body.js

@@ -16,6 +16,7 @@ var _withSortedPageRows = _interopRequireDefault(require("../hoc/with-sorted-pag
 var _tableRow = _interopRequireDefault(require("./table-row"));
 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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var BodyComponent = /*#__PURE__*/function (_React$Component) {
   function BodyComponent() {
     (0, _classCallCheck2.default)(this, BodyComponent);

package/dist/cjs/components/error-boundary.js

@@ -13,6 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = _interopRequireDefault(require("react"));
 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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   function ErrorBoundary(props) {
     var _this;

package/dist/cjs/components/loading-container-advanced.js

@@ -18,6 +18,7 @@ var _constants = require("../internal/constants");
 var _loadingContainerAdvanced = require("../styled/loading-container-advanced");
 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; })(); } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var LoadingContainerAdvanced = exports.default = /*#__PURE__*/function (_React$Component) {
   function LoadingContainerAdvanced() {
     var _this;

package/dist/cjs/components/loading-container.js

@@ -17,6 +17,7 @@ var _constants = require("../internal/constants");
 var _loadingContainer = require("../styled/loading-container");
 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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var LoadingContainer = exports.default = /*#__PURE__*/function (_React$Component) {
   function LoadingContainer() {
     (0, _classCallCheck2.default)(this, LoadingContainer);

package/dist/cjs/components/managed-pagination.js

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _pagination = _interopRequireDefault(require("@atlaskit/pagination"));
 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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var ManagedPagination = exports.default = /*#__PURE__*/function (_React$Component) {
   function ManagedPagination() {
     var _this;

package/dist/cjs/components/rankable/body.js

@@ -38,6 +38,8 @@ var computeRankDestination = function computeRankDestination(result, pageRows) {
   }
   return undefined;
 };
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var RankableBody = exports.RankableBody = /*#__PURE__*/function (_React$Component) {
   function RankableBody() {
     var _this;

package/dist/cjs/components/rankable/table-cell.js

@@ -19,6 +19,7 @@ var _tableCell = require("../../styled/rankable/table-cell");
 var _excluded = ["content", "testId"];
 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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var RankableTableCell = exports.RankableTableCell = /*#__PURE__*/function (_React$Component) {
   function RankableTableCell() {
     (0, _classCallCheck2.default)(this, RankableTableCell);

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

@@ -19,6 +19,7 @@ var _tableHeadCell = _interopRequireDefault(require("../table-head-cell"));
 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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var RankableTableHeadCellComponent = /*#__PURE__*/function (_React$Component) {
   function RankableTableHeadCellComponent() {
     (0, _classCallCheck2.default)(this, RankableTableHeadCellComponent);

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

@@ -24,6 +24,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; })(); } // Allowing existing usage of non Pragmatic drag and drop solution
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var RankableTableRow = /*#__PURE__*/function (_React$Component) {
   function RankableTableRow() {
     var _this;

package/dist/cjs/components/stateful.js

@@ -43,6 +43,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * }
  * ```
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var DynamicTable = exports.default = /*#__PURE__*/function (_React$Component) {
   function DynamicTable() {
     var _this;

package/dist/cjs/components/stateless.js

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

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

@@ -13,17 +13,15 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
-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", "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; })(); }
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var TableHead = /*#__PURE__*/function (_React$Component) {
   function TableHead(props) {
     var _this;
@@ -64,7 +62,6 @@ 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.
@@ -98,7 +95,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
             onSort(cell)();
           }
         };
-        return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
           colSpan: colSpan,
           content: content,
           isFixedSize: isFixedSize,
@@ -116,18 +113,6 @@ 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/cjs/hoc/with-sorted-page-rows.js

@@ -93,6 +93,7 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
 };
 // get one page of data in table, sorting all rows previously
 function withSortedPageRows(WrappedComponent) {
+  // eslint-disable-next-line @repo/internal/react/no-class-components
   var WithSortedPageRows = /*#__PURE__*/function (_React$Component) {
     function WithSortedPageRows() {
       var _this;

package/dist/cjs/styled/dynamic-table.compiled.css

@@ -1,5 +1,5 @@
 ._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._179r1tpy{border-block-end:var(--_mwqor1)}
+._179r187z{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}
 ._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}

package/dist/cjs/styled/dynamic-table.js

@@ -12,14 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["isFixedSize", "hasDataRow", "children", "testId", "isLoading"];
 /* eslint-disable @repo/internal/react/require-jsdoc */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fixedSizeTableStyles = null;
 var tableStyles = null;
 var bodyBorder = null;
@@ -32,22 +28,20 @@ var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("table", (0, _extends2.default)({
     inert: isLoading ? '' : undefined,
-    ref: ref
-  }, rest, {
-    "data-testid": testId && "".concat(testId, "--table"),
-    className: (0, _runtime.ax)(["_1bsb1osq _yq5hus1c _btyzidpf _ect41gqc", isFixedSize && "_1kqm1n9t", hasDataRow && "_179r1tpy"]),
-    style: _objectSpread(_objectSpread({}, {
+    style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      '--local-dynamic-table-hover-bg': "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N10, ")"),
+      '--local-dynamic-table-hover-bg': "var(--ds-background-neutral-subtle-hovered, #091E420F)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      '--local-dynamic-table-highlighted-bg': "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+      '--local-dynamic-table-highlighted-bg': "var(--ds-background-selected, #E9F2FF)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      '--local-dynamic-table-hover-highlighted-bg': "var(--ds-background-selected-hovered, ".concat(_colors.B75, ")"),
+      '--local-dynamic-table-hover-highlighted-bg': "var(--ds-background-selected-hovered, #CCE0FF)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      '--local-dynamic-table-row-focus-outline': "var(--ds-border-focused, ".concat(_colors.B100, ")")
-    }), {}, {
-      "--_mwqor1": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")))
-    })
+      '--local-dynamic-table-row-focus-outline': "var(--ds-border-focused, #388BFF)"
+    },
+    ref: ref
+  }, rest, {
+    "data-testid": testId && "".concat(testId, "--table"),
+    className: (0, _runtime.ax)(["_1bsb1osq _yq5hus1c _btyzidpf _ect41gqc", isFixedSize && "_1kqm1n9t", hasDataRow && "_179r187z"])
   }), children);
 });
 var captionStyles = null;

package/dist/cjs/styled/rankable/table-row.compiled.css

@@ -1,7 +1,7 @@
 
-._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12y3ssc3{outline-width:var(--ds-border-width,2px)}
-._16qs1dt4{box-shadow:var(--_qzf6oc)}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12y3e4h9{outline-width:var(--ds-border-width,1px)}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._1e0c1ule{display:block}
-._bfhk1rd0{background-color:var(--_14yez9t)}
-._mizu1tqa:focus-visible{outline-color:var(--_9ksfq)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
 ._ra3xnqa1:focus-visible{outline-style:solid}

package/dist/cjs/styled/rankable/table-row.js

@@ -13,7 +13,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _colors = require("@atlaskit/theme/colors");
 var _tableRow = require("../table-row");
 var _excluded = ["isRanking", "isRankingItem", "testId"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -31,11 +30,6 @@ var RankableTableBodyRow = exports.RankableTableBodyRow = /*#__PURE__*/(0, _reac
     ref: ref,
     testId: testId
   }, props, {
-    className: (0, _runtime.ax)([isRanking && "_1e0c1ule", isRankingItem && "_2rkolb4i _bfhk1rd0 _16qs1dt4", "_12y3ssc3 _mizu1tqa _ra3xnqa1"]),
-    style: {
-      "--_14yez9t": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N20, ")")),
-      "--_qzf6oc": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")),
-      "--_9ksfq": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B100, ")"))
-    }
+    className: (0, _runtime.ax)([isRanking && "_1e0c1ule", isRankingItem && "_2rkolb4i _bfhk1bhr _16qs1cd0", "_12y3e4h9 _mizu1p6i _ra3xnqa1"])
   }));
 });

package/dist/cjs/styled/table-head.compiled.css

@@ -1,67 +1,24 @@
-
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._173zglyw>button{background:none}
-._pw6dglyw>button{border:none}
-._1j091l7b>button:before{border-width:3px}
-._1wfn1j28>button:before{border-color:transparent}
-._1xgk1j28>button:after{border-color:transparent}
-._997wnqa1>button:before{border-style:solid}
-._sklb1l7b>button:after{border-width:3px}
-._y9yonqa1>button:after{border-style:solid}
 ._h7alglyw{border-inline:none}
 ._izbqglyw{border-block:none}
-._179r1tpy{border-block-end:var(--_mwqor1)}
+._179r187z{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}
 ._179rglyw{border-block-end:none}
-._191wglyw{border-inline-start:none}
-._c77k1f6e>button:before{border-block-end:var(--_1rdacuj)}
-._c77k2wk4>button:before{border-block-end:var(--_1qca9zt)}
-._f4731f6e>button:after{border-block-start:var(--_1rdacuj)}
-._f4732wk4>button:after{border-block-start:var(--_1qca9zt)}
 ._mqm2glyw{border-block-start:none}
-._t51zglyw{border-inline-end:none}._10pp1kw7>button{font-weight:inherit}
-._14gsx0bf>button:after{inset-inline-end:var(--ds-space-negative-100,-8px)}
 ._18m915vq{overflow-y:hidden}
-._19w61ule>button:after{display:block}
-._1ay31kw7>button{cursor:inherit}
 ._1bsb8a2a{width:var(--local-dynamic-table-width)}
 ._1bto1l2s{text-overflow:ellipsis}
-._1d4oidpf>button:before{height:0}
 ._1e0c1ule{display:block}
-._1fpyidpf>button:after{inset-block-end:0}
-._1hvvidpf>button:after{width:0}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1reo15vq{overflow-x:hidden}
 ._1s37ze3t:first-of-type{padding-inline-start:var(--ds-space-0,0)}
-._1w611ule>button:before{display:block}
-._1yw3ze3t>button{padding-block-end:var(--ds-space-0,0)}
-._4b5mb3bt>button:after{content:""}
-._58ej1kw7>button{color:inherit}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
-._8607ze3t>button{padding-inline-end:var(--ds-space-0,0)}
-._a04fh2mm>button{position:relative}
 ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
-._cigmx0bf>button:before{inset-inline-end:var(--ds-space-negative-100,-8px)}
-._hn3bb3bt>button:before{content:""}
 ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
 ._kqswh2mm{position:relative}
-._mdbq1kw7>button{font-size:inherit}
-._n2fdze3t>button{padding-block-start:var(--ds-space-0,0)}
-._n56nidpf>button:before{width:0}
-._no7mstnw>button:after{position:absolute}
 ._o5721q9c{white-space:nowrap}
-._qh32stnw>button:before{position:absolute}
-._qzvtu2gc>button:before{inset-block-end:var(--ds-space-100,8px)}
-._s7n4jp4b{vertical-align:top}
 ._s7n4nkob{vertical-align:middle}
 ._syaz12fi{color:var(--_17ckjys)}
-._szhwze3t>button{padding-inline-start:var(--ds-space-0,0)}
 ._uupyze3t:last-child{padding-inline-end:var(--ds-space-0,0)}
-._vchhusvi{box-sizing:border-box}
-._wyc4idpf>button:after{height:0}
-._xv14glyw>button{-webkit-appearance:none;appearance:none}
 ._y3gn1e5h{text-align:left}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
-._1ygb1x42:focus-visible{outline:var(--_z3oznn)}
-._d0altlke:hover{cursor:pointer}
-._irr3bfnf:hover{background-color:var(--_6j4ewu)}
-@media (forced-colors:active){._142s94yt>button:before{border-block-end:3px solid Highlight}._17x894yt>button:after{border-block-start:3px solid Highlight}._1g2wwc43>button:after{border-color:Canvas}._ze9fwc43>button:before{border-color:Canvas}._1lcgnqa1>button:after{border-style:solid}._at5qnqa1>button:before{border-style:solid}._o4d71l7b>button:after{border-width:3px}._npl51l7b>button:before{border-width:3px}._1rp11onz>button:before{border-block-end-color:CanvasText}._1iornqa1>button:before{border-block-end-style:solid}._oi051l7b>button:before{border-block-end-width:3px}._1ehx1onz>button:after{border-block-start-color:CanvasText}._19t8nqa1>button:after{border-block-start-style:solid}._1bog1l7b>button:after{border-block-start-width:3px}}
+._1ygbi3bv:focus-visible{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#388bff)}

package/dist/cjs/styled/table-head.js

@@ -14,8 +14,6 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../internal/constants");
 var _constants2 = require("./constants");
 var _excluded = ["isRanking", "testId"],
@@ -43,11 +41,6 @@ var Head = exports.Head = function Head(_ref) {
   }));
 };
 var headCellBaseStyles = null;
-var headCellBaseStylesOld = null;
-var onClickStyles = null;
-var baseStyles = null;
-var ascendingStyles = null;
-var descendingStyles = null;
 var HeadCell = exports.HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var width = _ref2.width,
     children = _ref2.children,
@@ -61,7 +54,7 @@ var HeadCell = exports.HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && (0, _constants2.getTruncationStyleVars)({
     width: width
-  })), {}, (0, _defineProperty2.default)({}, CSS_VAR_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(_colors.N300, ")")));
+  })), {}, (0, _defineProperty2.default)({}, CSS_VAR_TEXT_COLOR, "var(--ds-text-subtlest, #626F86)"));
   var isASC = sortOrder === _constants.ASC;
   var isDESC = sortOrder === _constants.DESC;
   var getFormattedSortOrder = function getFormattedSortOrder() {
@@ -75,24 +68,18 @@ var HeadCell = exports.HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (
   // If there is no content in the cell, it should be rendered as an empty `td`, not a `th`.
   // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
   var Component = children ? 'th' : 'td';
-  var isVisuallyRefreshed = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh');
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
     "aria-sort": getFormattedSortOrder()
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
 
-    onClick: !isVisuallyRefreshed ? onClick : undefined,
+    onClick: undefined,
     ref: ref,
     "data-testid": testId
   }, rest, {
-    className: (0, _runtime.ax)(["_izbqglyw _h7alglyw _85i51b66 _1q511b66 _y4tiu2gc _bozgu2gc _y3gn1e5h _1s37ze3t _uupyze3t", isVisuallyRefreshed ? "_11c8dcr7 _179r1tpy _mqm2glyw _kqswh2mm _syaz12fi _k48pmoej _y3gn1e5h _s7n4nkob _1ygb1x42" : "_11c8dcr7 _179r1tpy _mqm2glyw _t51zglyw _191wglyw _vchhusvi _kqswh2mm _syaz12fi _k48pmoej _y3gn1e5h _s7n4jp4b _1ygb1x42", !isVisuallyRefreshed && onClick && "_irr3bfnf _d0altlke", "_1bsb8a2a", isFixedSize && shouldTruncate && "_1bto1l2s _o5721q9c", isFixedSize && "_1reo15vq _18m915vq", !isVisuallyRefreshed && isSortable && "_173zglyw _pw6dglyw _1xgk1j28 _1wfn1j28 _y9yonqa1 _997wnqa1 _sklb1l7b _1j091l7b _19w61ule _1w611ule _1hvvidpf _n56nidpf _wyc4idpf _1d4oidpf _no7mstnw _qh32stnw _4b5mb3bt _hn3bb3bt _14gsx0bf _cigmx0bf _c77k1f6e _qzvtu2gc _f4731f6e _1fpyidpf _a04fh2mm _xv14glyw _58ej1kw7 _1ay31kw7 _mdbq1kw7 _10pp1kw7 _1yw3ze3t _n2fdze3t _8607ze3t _szhwze3t _1g2wwc43 _ze9fwc43 _1lcgnqa1 _at5qnqa1 _o4d71l7b _npl51l7b _1rp11onz _1iornqa1 _oi051l7b _1ehx1onz _19t8nqa1 _1bog1l7b", !isVisuallyRefreshed && isASC && "_c77k2wk4 _142s94yt", !isVisuallyRefreshed && isDESC && "_f4732wk4 _17x894yt"]),
+    className: (0, _runtime.ax)(["_izbqglyw _h7alglyw _85i51b66 _1q511b66 _y4tiu2gc _bozgu2gc _y3gn1e5h _1s37ze3t _uupyze3t", "_11c8dcr7 _179r187z _mqm2glyw _kqswh2mm _syaz12fi _k48pmoej _y3gn1e5h _s7n4nkob _1ygbi3bv", "_1bsb8a2a", isFixedSize && shouldTruncate && "_1bto1l2s _o5721q9c", isFixedSize && "_1reo15vq _18m915vq"]),
     style: _objectSpread(_objectSpread({}, mergedStyles), {}, {
-      "--_mwqor1": (0, _runtime.ix)("var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")"))),
-      "--_17ckjys": (0, _runtime.ix)("var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")")),
-      "--_z3oznn": (0, _runtime.ix)("solid ".concat("var(--ds-border-width-focused, 2px)", " ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))),
-      "--_6j4ewu": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")),
-      "--_1rdacuj": (0, _runtime.ix)("3px solid ".concat("var(--ds-icon-disabled, ".concat(_colors.N40, ")"))),
-      "--_1qca9zt": (0, _runtime.ix)("3px solid ".concat("var(--ds-icon-subtle, ".concat(_colors.N300, ")")))
+      "--_17ckjys": (0, _runtime.ix)("var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"))
     })
   }), children);
 });

package/dist/es2019/components/body.js

@@ -4,6 +4,7 @@ import withSortedPageRows
 // @ts-ignore -- Required for the below export of Body
 from '../hoc/with-sorted-page-rows';
 import TableRow from './table-row';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 class BodyComponent extends React.Component {
   render() {
     const {

package/dist/es2019/components/error-boundary.js

@@ -1,4 +1,5 @@
 import React from 'react';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);

package/dist/es2019/components/loading-container-advanced.js

@@ -4,6 +4,7 @@ import React from 'react';
 import Spinner from '@atlaskit/spinner';
 import { LARGE, LOADING_CONTENTS_OPACITY } from '../internal/constants';
 import { Container, SpinnerBackdrop, SpinnerContainer } from '../styled/loading-container-advanced';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export default class LoadingContainerAdvanced extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/loading-container.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Spinner from '@atlaskit/spinner';
 import { LARGE, LOADING_CONTENTS_OPACITY } from '../internal/constants';
 import { Container, ContentsContainer, SpinnerContainer } from '../styled/loading-container';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export default class LoadingContainer extends React.Component {
   render() {
     const {

package/dist/es2019/components/managed-pagination.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import Pagination from '@atlaskit/pagination';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export default class ManagedPagination extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/rankable/body.js

@@ -32,6 +32,8 @@ const computeRankDestination = (result, pageRows) => {
   }
   return undefined;
 };
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export class RankableBody extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/rankable/table-cell.js

@@ -5,6 +5,7 @@ import withDimensions
 from '../../hoc/with-dimensions';
 import { inlineStylesIfRanking } from '../../internal/helpers';
 import { RankableTableBodyCell } from '../../styled/rankable/table-cell';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export class RankableTableCell extends React.Component {
   render() {
     const {

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

@@ -5,6 +5,8 @@ import withDimensions
 from '../../hoc/with-dimensions';
 import { inlineStylesIfRanking } from '../../internal/helpers';
 import HeadCell from '../table-head-cell';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
 class RankableTableHeadCellComponent extends React.Component {
   render() {
     const {

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

@@ -10,6 +10,7 @@ from '../../hoc/with-dimensions';
 import { inlineStylesIfRanking } from '../../internal/helpers';
 import { RankableTableBodyRow } from '../../styled/rankable/table-row';
 import TableCell from './table-cell';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 class RankableTableRow extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/stateful.js

@@ -29,6 +29,7 @@ import DynamicTableStateless from './stateless';
  * }
  * ```
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export default class DynamicTable extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/stateless.js

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

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

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-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';
+// eslint-disable-next-line @repo/internal/react/no-class-components
 class TableHead extends React.Component {
   constructor(props) {
     super(props);
@@ -39,7 +37,6 @@ 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.
@@ -79,7 +76,7 @@ class TableHead extends React.Component {
           onSort(cell)();
         }
       };
-      return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
+      return /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
         colSpan: colSpan,
         content: content,
         isFixedSize: isFixedSize,
@@ -97,18 +94,6 @@ 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/es2019/hoc/with-sorted-page-rows.js

@@ -74,6 +74,7 @@ const getSortedRows = (head, rows, sortKey, sortOrder) => {
 };
 // get one page of data in table, sorting all rows previously
 export default function withSortedPageRows(WrappedComponent) {
+  // eslint-disable-next-line @repo/internal/react/no-class-components
   class WithSortedPageRows extends React.Component {
     constructor(...args) {
       super(...args);

package/dist/es2019/styled/dynamic-table.compiled.css

@@ -1,5 +1,5 @@
 ._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._179r1md5{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#dfe1e6)}
+._179r187z{border-block-end:var(--ds-border-width-selected,2px) solid var(--ds-border,#091e4224)}
 ._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}