@atlaskit/link-datasource 4.11.9 → 4.11.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/link-datasource
 
+## 4.11.10
+
+### Patch Changes
+
+- [#163266](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163266)
+  [`a2a46974b5d8d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2a46974b5d8d) -
+  Cleans up fg `enable_fix_datasource_jumping_columns`
+
 ## 4.11.9
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/search-container/object-schema-select/index.js

@@ -20,7 +20,7 @@ var _debouncePromise = _interopRequireDefault(require("debounce-promise"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _form = require("@atlaskit/form");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _constants = require("@atlaskit/theme/constants");
@@ -143,7 +143,8 @@ var AssetsObjectSchemaSelect = exports.AssetsObjectSchemaSelect = function Asset
           iconAfter: function iconAfter() {
             return /*#__PURE__*/React.createElement(_chevronDown.default, {
               label: "",
-              color: "currentColor"
+              color: "currentColor",
+              size: "small"
             });
           }
         }), ((_restFieldProps$value = restFieldProps.value) === null || _restFieldProps$value === void 0 ? void 0 : _restFieldProps$value.label) || formatMessage(_messages.objectSchemaSelectMessages.placeholder));

package/dist/cjs/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("./messages");
@@ -90,7 +90,8 @@ var DisplayViewDropDown = exports.DisplayViewDropDown = function DisplayViewDrop
           iconAfter: function iconAfter() {
             return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
               label: "",
-              color: "currentColor"
+              color: "currentColor",
+              size: "small"
             });
           }
         }), triggerText);

package/dist/cjs/ui/common/modal/popup-select/trigger.js

@@ -16,8 +16,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
-var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -72,7 +72,8 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       iconAfter: function iconAfter() {
         return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
           label: "",
-          color: "currentColor"
+          color: "currentColor",
+          size: "small"
         });
       },
       testId: "".concat(triggerButtonTestId, "--button")
@@ -89,7 +90,8 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       isDisabled: isDisabled,
       iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown2.default, {
         label: "",
-        color: "currentColor"
+        color: "currentColor",
+        size: "small"
       }),
       testId: "".concat(triggerButtonTestId, "--button")
     }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {

package/dist/cjs/ui/common/modal/site-selector/index.js

@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
@@ -85,7 +85,8 @@ var SiteSelector = exports.SiteSelector = function SiteSelector(props) {
         iconAfter: function iconAfter() {
           return /*#__PURE__*/React.createElement(_chevronDown.default, {
             label: "",
-            color: "currentColor"
+            color: "currentColor",
+            size: "small"
           });
         },
         testId: "".concat(testId, "__control")

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -16,7 +16,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactIntlNext = require("react-intl-next");
 var _datetimePicker = require("@atlaskit/datetime-picker");
-var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -252,7 +252,8 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref6)
       LEGACY_size: "small",
       color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
       label: formatMessage(_messages.dateRangeMessages.dateRangeError),
-      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+      size: "small"
     }), invalidDateRange), /*#__PURE__*/_react.default.createElement(SelectDateRangeButton, {
       "data-testId": "custom-date-range-update-button",
       disabled: Boolean(invalidDateRange),

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
-var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
   var triggerProps = _ref.triggerProps,
@@ -26,7 +26,8 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
       iconAfter: function iconAfter() {
         return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
           label: "",
-          color: "currentColor"
+          color: "currentColor",
+          size: "small"
         });
       }
     }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
@@ -46,7 +47,8 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_chevronDown2.default, {
       LEGACY_size: "medium",
       label: "",
-      color: "currentColor"
+      color: "currentColor",
+      size: "small"
     }))
   }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
 };

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -16,10 +16,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
 var _board = _interopRequireDefault(require("@atlaskit/icon/core/migration/board"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
-var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
@@ -176,11 +176,13 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
               spacing: "spacious",
               LEGACY_margin: "0 0 0 4px"
             }), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-              label: "down"
+              label: "down",
+              size: "small"
             }) : /*#__PURE__*/_react.default.createElement(_chevronDown2.default, {
               color: "currentColor",
               label: "down",
-              LEGACY_size: "medium"
+              LEGACY_size: "medium",
+              size: "small"
             }));
           }
         }), '');

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -22,6 +22,7 @@ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-up"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -348,7 +349,8 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
   }) : null, onIsWrappedChange ? /*#__PURE__*/React.createElement(DropdownParent, null, /*#__PURE__*/React.createElement(_dropdownMenu.default, {
     trigger: getTriggerButton,
     onOpenChange: onDropdownOpenChange,
-    placement: 'bottom'
+    placement: 'bottom',
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-linking-pla')
   }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
     elemBefore: isWrapped ? /*#__PURE__*/React.createElement(_customIcons.UnwrapTextIcon, null) : /*#__PURE__*/React.createElement(_customIcons.WrapTextIcon, null),
     testId: "".concat(id, "-column-dropdown-item-toggle-wrapping"),

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

@@ -18,11 +18,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _flag = require("@atlaskit/flag");
 var _linkingCommon = require("@atlaskit/linking-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
@@ -32,7 +30,6 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _widthDetector = require("@atlaskit/width-detector");
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _columnPicker = require("./column-picker");
@@ -223,22 +220,6 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     orderedColumns = _useState6[0],
     setOrderedColumns = _useState6[1];
-  var isJumpingColumnFixEnabled = (0, _platformFeatureFlags.fg)('enable_fix_datasource_jumping_columns');
-
-  // Table container width is used to know if sum of all column widths is bigger of container or not.
-  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
-  var _useState7 = (0, _react.useState)(),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    tableContainerWidthOld = _useState8[0],
-    setTableContainerWidthOld = _useState8[1];
-  (0, _react.useEffect)(function () {
-    var current = containerRef.current;
-    if (!isJumpingColumnFixEnabled) {
-      if (containerRef && current) {
-        setTableContainerWidthOld(current.getBoundingClientRect().width);
-      }
-    }
-  }, [containerRef, isJumpingColumnFixEnabled]);
   (0, _react.useEffect)(function () {
     if (orderedColumns.length !== columns.length) {
       setOrderedColumns(getOrderedColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
@@ -273,14 +254,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
   }, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
   var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
-  var getColumnWidthOld = (0, _react.useCallback)(function (key, type, isLastCell) {
-    if (isLastCell && shouldUseWidth && (!tableContainerWidthOld || tableContainerWidthOld > columnsWidthsSum)) {
-      return undefined;
-    } else {
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }
-  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidthOld]);
-  var tableContainerWidth = isJumpingColumnFixEnabled ? Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0) : 0;
+  var tableContainerWidth = Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0);
   var getColumnWidth = (0, _react.useCallback)(function (key, type, isLastCell) {
     if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
       return undefined;
@@ -297,10 +271,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         key: key,
         content: title,
         shouldTruncate: true,
-        width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, index === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, index === visibleSortedColumns.length - 1)
+        width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
       };
     });
-  }, [getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled, visibleSortedColumns]);
+  }, [getColumnWidth, visibleSortedColumns]);
   var loadingRow = (0, _react.useMemo)(function () {
     return {
       key: 'loading',
@@ -420,7 +394,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
               wrappedColumnKeys: wrappedColumnKeys,
               renderItem: renderItem
             }),
-            width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, cellIndex === visibleSortedColumns.length - 1)
+            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
           };
         }),
         ref: rowIndex === items.length - 1 ? function (el) {
@@ -428,7 +402,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         } : undefined
       };
     });
-  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled]);
+  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
   var rows = (0, _react.useMemo)(function () {
     if (status !== 'loading') {
       return tableRows;
@@ -503,9 +477,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     } : undefined), {}, {
       "--_11c95on": (0, _runtime.ix)("\n\t\tlinear-gradient(90deg, ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(90deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", ", rgba(0, 0, 0, 0)),\n\t\tlinear-gradient(90deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 70%),\n\t\tlinear-gradient(90deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", "),\n\t\tlinear-gradient(0deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 30%),\n\t\tlinear-gradient(0deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", "),\n\t\tlinear-gradient(0deg, ", "var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(0deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", ", rgba(0, 0, 0, 0))\n\t\t"))
     })
-  }, !isJumpingColumnFixEnabled && /*#__PURE__*/React.createElement(_widthDetector.WidthObserver, {
-    setWidth: (0, _debounce.default)(setTableContainerWidthOld, 100)
-  }), /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table, {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/index.js

@@ -8,7 +8,7 @@ import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { Field } from '@atlaskit/form';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect, PopupSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
@@ -106,7 +106,8 @@ export const AssetsObjectSchemaSelect = ({
         isSelected: isOpen,
         iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
           label: "",
-          color: "currentColor"
+          color: "currentColor",
+          size: "small"
         })
       }), ((_restFieldProps$value = restFieldProps.value) === null || _restFieldProps$value === void 0 ? void 0 : _restFieldProps$value.label) || formatMessage(objectSchemaSelectMessages.placeholder));
     }

package/dist/es2019/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { displayViewDropDownMessages } from './messages';
@@ -80,7 +80,8 @@ export const DisplayViewDropDown = ({
         ref: triggerRef,
         iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
           label: "",
-          color: "currentColor"
+          color: "currentColor",
+          size: "small"
         })
       }), triggerText),
       testId: "datasource-modal--view-drop-down"

package/dist/es2019/ui/common/modal/popup-select/trigger.js

@@ -6,8 +6,8 @@ import React, { forwardRef, useCallback } from 'react';
 import Badge from '@atlaskit/badge';
 import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
@@ -55,7 +55,8 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     isDisabled: isDisabled,
     iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: "",
-      color: "currentColor"
+      color: "currentColor",
+      size: "small"
     }),
     testId: `${triggerButtonTestId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
@@ -71,7 +72,8 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     isDisabled: isDisabled,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIconOld, {
       label: "",
-      color: "currentColor"
+      color: "currentColor",
+      size: "small"
     }),
     testId: `${triggerButtonTestId}--button`
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/ui/common/modal/site-selector/index.js

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Select, { PopupSelect } from '@atlaskit/select';
@@ -65,7 +65,8 @@ export const SiteSelector = props => {
       isSelected: isOpen,
       iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
         label: "",
-        color: "currentColor"
+        color: "currentColor",
+        size: "small"
       }),
       testId: `${testId}__control`
     }), (selectedSiteOption === null || selectedSiteOption === void 0 ? void 0 : selectedSiteOption.label) || formatMessage(siteSelectorMessages.chooseSite))

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { DatePicker } from '@atlaskit/datetime-picker';
-import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import Popup from '@atlaskit/popup';
 import { N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -218,7 +218,8 @@ export const DateRangePicker = ({
       LEGACY_size: "small",
       color: `var(--ds-icon-danger, ${R400})`,
       label: formatMessage(dateRangeMessages.dateRangeError),
-      LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`
+      LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
+      size: "small"
     }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
       "data-testId": "custom-date-range-update-button",
       disabled: Boolean(invalidDateRange),

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 export const PopupTrigger = ({
   triggerProps,
@@ -19,7 +19,8 @@ export const PopupTrigger = ({
       isSelected: isSelected,
       iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
         label: "",
-        color: "currentColor"
+        color: "currentColor",
+        size: "small"
       })
     }), labelPrefix, selectedLabel ? `: ${selectedLabel}` : '');
   }
@@ -38,7 +39,8 @@ export const PopupTrigger = ({
     }, /*#__PURE__*/React.createElement(ChevronDownIconOld, {
       LEGACY_size: "medium",
       label: "",
-      color: "currentColor"
+      color: "currentColor",
+      size: "small"
     }))
   }), labelPrefix, selectedLabel ? `: ${selectedLabel}` : '');
 };

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -5,10 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import BoardIcon from '@atlaskit/icon/core/migration/board';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
@@ -147,11 +147,13 @@ export const ColumnPicker = ({
         spacing: "spacious",
         LEGACY_margin: "0 0 0 4px"
       }), fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        label: "down"
+        label: "down",
+        size: "small"
       }) : /*#__PURE__*/React.createElement(ChevronDownIconOld, {
         color: "currentColor",
         label: "down",
-        LEGACY_size: "medium"
+        LEGACY_size: "medium",
+        size: "small"
       }))
     }), ''))
   });

package/dist/es2019/ui/issue-like-table/draggable-table-heading.js

@@ -14,6 +14,7 @@ import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
 import ChevronDown from '@atlaskit/icon/utility/migration/chevron-down';
 import ChevronUp from '@atlaskit/icon/utility/migration/chevron-up';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -323,7 +324,8 @@ export const DraggableTableHeading = ({
   }) : null, onIsWrappedChange ? /*#__PURE__*/React.createElement(DropdownParent, null, /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: getTriggerButton,
     onOpenChange: onDropdownOpenChange,
-    placement: 'bottom'
+    placement: 'bottom',
+    shouldRenderToParent: fg('should-render-to-parent-should-be-true-linking-pla')
   }, /*#__PURE__*/React.createElement(DropdownItem, {
     elemBefore: isWrapped ? /*#__PURE__*/React.createElement(UnwrapTextIcon, null) : /*#__PURE__*/React.createElement(WrapTextIcon, null),
     testId: `${id}-column-dropdown-item-toggle-wrapping`,

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

@@ -7,11 +7,9 @@ import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import debounce from 'lodash/debounce';
 import invariant from 'tiny-invariant';
 import { FlagsProvider } from '@atlaskit/flag';
 import { Skeleton } from '@atlaskit/linking-common';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -21,7 +19,6 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
-import { WidthObserver } from '@atlaskit/width-detector';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { ColumnPicker } from './column-picker';
@@ -189,21 +186,6 @@ export const IssueLikeDataTableView = ({
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
   const [orderedColumns, setOrderedColumns] = useState(() => getOrderedColumns([...columns], [...visibleColumnKeys]));
-  const isJumpingColumnFixEnabled = fg('enable_fix_datasource_jumping_columns');
-
-  // Table container width is used to know if sum of all column widths is bigger of container or not.
-  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
-  const [tableContainerWidthOld, setTableContainerWidthOld] = useState();
-  useEffect(() => {
-    const {
-      current
-    } = containerRef;
-    if (!isJumpingColumnFixEnabled) {
-      if (containerRef && current) {
-        setTableContainerWidthOld(current.getBoundingClientRect().width);
-      }
-    }
-  }, [containerRef, isJumpingColumnFixEnabled]);
   useEffect(() => {
     if (orderedColumns.length !== columns.length) {
       setOrderedColumns(getOrderedColumns([...columns], [...visibleColumnKeys]));
@@ -228,14 +210,7 @@ export const IssueLikeDataTableView = ({
     type
   }) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type)).reduce((sum, width) => width + sum, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0), [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
   const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
-  const getColumnWidthOld = useCallback((key, type, isLastCell) => {
-    if (isLastCell && shouldUseWidth && (!tableContainerWidthOld || tableContainerWidthOld > columnsWidthsSum)) {
-      return undefined;
-    } else {
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }
-  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidthOld]);
-  const tableContainerWidth = isJumpingColumnFixEnabled ? Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0) : 0;
+  const tableContainerWidth = Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0);
   const getColumnWidth = useCallback((key, type, isLastCell) => {
     if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
       return undefined;
@@ -251,8 +226,8 @@ export const IssueLikeDataTableView = ({
     key,
     content: title,
     shouldTruncate: true,
-    width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, index === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, index === visibleSortedColumns.length - 1)
-  })), [getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled, visibleSortedColumns]);
+    width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
+  })), [getColumnWidth, visibleSortedColumns]);
   const loadingRow = useMemo(() => ({
     key: 'loading',
     cells: headerColumns.map(column => ({
@@ -371,12 +346,12 @@ export const IssueLikeDataTableView = ({
             wrappedColumnKeys: wrappedColumnKeys,
             renderItem: renderItem
           }),
-          width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, cellIndex === visibleSortedColumns.length - 1)
+          width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
         };
       }),
       ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
     };
-  }), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled]);
+  }), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
   const rows = useMemo(() => {
     if (status !== 'loading') {
       return tableRows;
@@ -434,9 +409,7 @@ export const IssueLikeDataTableView = ({
     } : undefined,
     "data-testid": 'issue-like-table-container',
     className: ax(["_mrkbidpf _1o0zidpf _kqswh2mm", scrollableContainerHeight && "_1reo1wug _18m91wug _vchhusvi _bfhkchd4 _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00"])
-  }, !isJumpingColumnFixEnabled && /*#__PURE__*/React.createElement(WidthObserver, {
-    setWidth: debounce(setTableContainerWidthOld, 100)
-  }), /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table, {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/esm/ui/assets-modal/search-container/object-schema-select/index.js

@@ -17,7 +17,7 @@ import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { Field } from '@atlaskit/form';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect, PopupSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
@@ -135,7 +135,8 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref2) {
           iconAfter: function iconAfter() {
             return /*#__PURE__*/React.createElement(ChevronDownIcon, {
               label: "",
-              color: "currentColor"
+              color: "currentColor",
+              size: "small"
             });
           }
         }), ((_restFieldProps$value = restFieldProps.value) === null || _restFieldProps$value === void 0 ? void 0 : _restFieldProps$value.label) || formatMessage(objectSchemaSelectMessages.placeholder));

package/dist/esm/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { displayViewDropDownMessages } from './messages';
@@ -81,7 +81,8 @@ export var DisplayViewDropDown = function DisplayViewDropDown(_ref) {
           iconAfter: function iconAfter() {
             return /*#__PURE__*/React.createElement(ChevronDownIcon, {
               label: "",
-              color: "currentColor"
+              color: "currentColor",
+              size: "small"
             });
           }
         }), triggerText);

package/dist/esm/ui/common/modal/popup-select/trigger.js

@@ -9,8 +9,8 @@ import React, { forwardRef, useCallback } from 'react';
 import Badge from '@atlaskit/badge';
 import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
@@ -63,7 +63,8 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       iconAfter: function iconAfter() {
         return /*#__PURE__*/React.createElement(ChevronDownIcon, {
           label: "",
-          color: "currentColor"
+          color: "currentColor",
+          size: "small"
         });
       },
       testId: "".concat(triggerButtonTestId, "--button")
@@ -80,7 +81,8 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       isDisabled: isDisabled,
       iconAfter: /*#__PURE__*/React.createElement(ChevronDownIconOld, {
         label: "",
-        color: "currentColor"
+        color: "currentColor",
+        size: "small"
       }),
       testId: "".concat(triggerButtonTestId, "--button")
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {

package/dist/esm/ui/common/modal/site-selector/index.js

@@ -14,7 +14,7 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Select, { PopupSelect } from '@atlaskit/select';
@@ -76,7 +76,8 @@ export var SiteSelector = function SiteSelector(props) {
         iconAfter: function iconAfter() {
           return /*#__PURE__*/React.createElement(ChevronDownIcon, {
             label: "",
-            color: "currentColor"
+            color: "currentColor",
+            size: "small"
           });
         },
         testId: "".concat(testId, "__control")

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { DatePicker } from '@atlaskit/datetime-picker';
-import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import Popup from '@atlaskit/popup';
 import { N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -245,7 +245,8 @@ export var DateRangePicker = function DateRangePicker(_ref6) {
       LEGACY_size: "small",
       color: "var(--ds-icon-danger, ".concat(R400, ")"),
       label: formatMessage(dateRangeMessages.dateRangeError),
-      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+      size: "small"
     }), invalidDateRange), /*#__PURE__*/React.createElement(SelectDateRangeButton, {
       "data-testId": "custom-date-range-update-button",
       disabled: Boolean(invalidDateRange),

package/dist/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 export var PopupTrigger = function PopupTrigger(_ref) {
   var triggerProps = _ref.triggerProps,
@@ -19,7 +19,8 @@ export var PopupTrigger = function PopupTrigger(_ref) {
       iconAfter: function iconAfter() {
         return /*#__PURE__*/React.createElement(ChevronDownIcon, {
           label: "",
-          color: "currentColor"
+          color: "currentColor",
+          size: "small"
         });
       }
     }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
@@ -39,7 +40,8 @@ export var PopupTrigger = function PopupTrigger(_ref) {
     }, /*#__PURE__*/React.createElement(ChevronDownIconOld, {
       LEGACY_size: "medium",
       label: "",
-      color: "currentColor"
+      color: "currentColor",
+      size: "small"
     }))
   }), labelPrefix, selectedLabel ? ": ".concat(selectedLabel) : '');
 };

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

@@ -9,10 +9,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import BoardIcon from '@atlaskit/icon/core/migration/board';
-import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
@@ -167,11 +167,13 @@ export var ColumnPicker = function ColumnPicker(_ref) {
               spacing: "spacious",
               LEGACY_margin: "0 0 0 4px"
             }), fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
-              label: "down"
+              label: "down",
+              size: "small"
             }) : /*#__PURE__*/React.createElement(ChevronDownIconOld, {
               color: "currentColor",
               label: "down",
-              LEGACY_size: "medium"
+              LEGACY_size: "medium",
+              size: "small"
             }));
           }
         }), '');

package/dist/esm/ui/issue-like-table/draggable-table-heading.js

@@ -22,6 +22,7 @@ import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
 import ChevronDown from '@atlaskit/icon/utility/migration/chevron-down';
 import ChevronUp from '@atlaskit/icon/utility/migration/chevron-up';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -342,7 +343,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref3) {
   }) : null, onIsWrappedChange ? /*#__PURE__*/React.createElement(DropdownParent, null, /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: getTriggerButton,
     onOpenChange: onDropdownOpenChange,
-    placement: 'bottom'
+    placement: 'bottom',
+    shouldRenderToParent: fg('should-render-to-parent-should-be-true-linking-pla')
   }, /*#__PURE__*/React.createElement(DropdownItem, {
     elemBefore: isWrapped ? /*#__PURE__*/React.createElement(UnwrapTextIcon, null) : /*#__PURE__*/React.createElement(WrapTextIcon, null),
     testId: "".concat(id, "-column-dropdown-item-toggle-wrapping"),

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

@@ -19,11 +19,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import debounce from 'lodash/debounce';
 import invariant from 'tiny-invariant';
 import { FlagsProvider } from '@atlaskit/flag';
 import { Skeleton } from '@atlaskit/linking-common';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -33,7 +31,6 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
-import { WidthObserver } from '@atlaskit/width-detector';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { ColumnPicker } from './column-picker';
@@ -216,22 +213,6 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     _useState6 = _slicedToArray(_useState5, 2),
     orderedColumns = _useState6[0],
     setOrderedColumns = _useState6[1];
-  var isJumpingColumnFixEnabled = fg('enable_fix_datasource_jumping_columns');
-
-  // Table container width is used to know if sum of all column widths is bigger of container or not.
-  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    tableContainerWidthOld = _useState8[0],
-    setTableContainerWidthOld = _useState8[1];
-  useEffect(function () {
-    var current = containerRef.current;
-    if (!isJumpingColumnFixEnabled) {
-      if (containerRef && current) {
-        setTableContainerWidthOld(current.getBoundingClientRect().width);
-      }
-    }
-  }, [containerRef, isJumpingColumnFixEnabled]);
   useEffect(function () {
     if (orderedColumns.length !== columns.length) {
       setOrderedColumns(getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
@@ -266,14 +247,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
   }, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
   var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
-  var getColumnWidthOld = useCallback(function (key, type, isLastCell) {
-    if (isLastCell && shouldUseWidth && (!tableContainerWidthOld || tableContainerWidthOld > columnsWidthsSum)) {
-      return undefined;
-    } else {
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }
-  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidthOld]);
-  var tableContainerWidth = isJumpingColumnFixEnabled ? Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0) : 0;
+  var tableContainerWidth = Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0);
   var getColumnWidth = useCallback(function (key, type, isLastCell) {
     if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
       return undefined;
@@ -290,10 +264,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         key: key,
         content: title,
         shouldTruncate: true,
-        width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, index === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, index === visibleSortedColumns.length - 1)
+        width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
       };
     });
-  }, [getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled, visibleSortedColumns]);
+  }, [getColumnWidth, visibleSortedColumns]);
   var loadingRow = useMemo(function () {
     return {
       key: 'loading',
@@ -413,7 +387,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
               wrappedColumnKeys: wrappedColumnKeys,
               renderItem: renderItem
             }),
-            width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, cellIndex === visibleSortedColumns.length - 1)
+            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
           };
         }),
         ref: rowIndex === items.length - 1 ? function (el) {
@@ -421,7 +395,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         } : undefined
       };
     });
-  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled]);
+  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
   var rows = useMemo(function () {
     if (status !== 'loading') {
       return tableRows;
@@ -496,9 +470,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     } : undefined), {}, {
       "--_11c95on": ix("\n\t\tlinear-gradient(90deg, ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(90deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", ", rgba(0, 0, 0, 0)),\n\t\tlinear-gradient(90deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 70%),\n\t\tlinear-gradient(90deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", "),\n\t\tlinear-gradient(0deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 30%),\n\t\tlinear-gradient(0deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", "),\n\t\tlinear-gradient(0deg, ", "var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(0deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", ", rgba(0, 0, 0, 0))\n\t\t"))
     })
-  }, !isJumpingColumnFixEnabled && /*#__PURE__*/React.createElement(WidthObserver, {
-    setWidth: debounce(setTableContainerWidthOld, 100)
-  }), /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table, {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "4.11.9",
+	"version": "4.11.10",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -76,16 +76,16 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.8.0",
-		"@atlaskit/react-select": "^2.6.0",
-		"@atlaskit/select": "^20.6.0",
-		"@atlaskit/smart-card": "^38.7.0",
+		"@atlaskit/react-select": "^2.7.0",
+		"@atlaskit/select": "^20.7.0",
+		"@atlaskit/smart-card": "^38.8.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tag": "^14.0.0",
 		"@atlaskit/temp-nav-app-icons": "^0.8.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.0.0",
+		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -179,9 +179,6 @@
 		"assets_as_an_app_v2": {
 			"type": "boolean"
 		},
-		"enable_fix_datasource_jumping_columns": {
-			"type": "boolean"
-		},
 		"platform-linking-visual-refresh-v1": {
 			"type": "boolean",
 			"showOnWebsiteForTransitiveDependencies": true
@@ -200,6 +197,9 @@
 		},
 		"fix_a11y_issues_inline_edit": {
 			"type": "boolean"
+		},
+		"should-render-to-parent-should-be-true-linking-pla": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/9c893299-a527-4457-9b46-f3bc4c828766"