@atlaskit/link-datasource 2.3.1 → 2.3.3

package/dist/cjs/ui/table-footer/index.js

@@ -22,6 +22,7 @@ var _poweredByJsmAssets = require("./powered-by-jsm-assets");
 var _syncInfo = require("./sync-info");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var FooterWrapper = _styled.default.div({
   padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-200, 16px)"),
   boxSizing: 'border-box',
@@ -31,21 +32,29 @@ var FooterWrapper = _styled.default.div({
   background: "var(--ds-background-input, ".concat(_colors.N0, ")"),
   borderTop: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"))
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var TopBorderWrapper = _styled.default.div({
   display: 'flex',
   boxSizing: 'border-box',
   justifyContent: 'space-between',
   padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-0, 0px)")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var ItemCounterWrapper = _styled.default.div({
   display: 'flex',
   alignSelf: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SyncWrapper = _styled.default.div({
   display: 'flex',
   alignItems: 'center',
   color: "var(--ds-text-accent-gray, ".concat(_colors.N90, ")")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SyncTextWrapper = _styled.default.div({
   marginRight: "var(--ds-space-075, 6px)",
   fontSize: '12px'

package/dist/es2019/ui/assets-modal/search-container/styled.js

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const FormRowContainer = styled.div(props => ({
   alignItems: 'center',
   display: 'flex',
@@ -6,6 +7,8 @@ export const FormRowContainer = styled.div(props => ({
   flexGrow: 1,
   width: '100%'
 }));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const FormContainer = styled.form({
   display: 'grid',
   rowGap: "var(--ds-space-200, 16px)",
@@ -13,10 +16,13 @@ export const FormContainer = styled.form({
 });
 
 // Override the top margin of fields
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const FieldContainer = styled.div({
   flex: 1,
   marginTop: "var(--ds-space-negative-100, -8px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const SchemaSelectContainer = styled.div({
   width: '100%',
   maxWidth: '386px'

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

@@ -12,6 +12,8 @@ const triggerButtonLabelStyles = xcss({
 const badgeStyles = xcss({
   marginLeft: 'space.050'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const LoadingStateAnimationWrapper = styled.div({
   position: 'relative',
   animation: 'flickerAnimation 2s infinite',

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

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const PopupComponentContainer = styled.div({
   boxSizing: 'border-box',
   display: 'block',
@@ -13,6 +14,8 @@ export const PopupComponentContainer = styled.div({
   },
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const CustomDropdown = styled.div({
   width: '340px',
   background: `var(--ds-background-input, ${N0})`,
@@ -20,6 +23,8 @@ export const CustomDropdown = styled.div({
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
   zIndex: layers.modal()
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const CustomDropdownItem = styled.div(props => ({
   height: '36px',
   width: '100%',
@@ -36,16 +41,22 @@ export const CustomDropdownItem = styled.div(props => ({
     cursor: 'default'
   }
 }));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const CustomDateWrapper = styled.div({
   padding: "var(--ds-space-150, 12px)",
   boxSizing: 'border-box'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const DatePickersWrapper = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const SelectDateRangeButton = styled.button({
   background: `var(--ds-background-accent-gray-subtler, ${N20})`,
   border: 'none',
@@ -59,6 +70,8 @@ export const SelectDateRangeButton = styled.button({
     cursor: 'pointer'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const DateRangeErrorMessage = styled.div({
   display: 'flex',
   lineHeight: 1.3333,

package/dist/es2019/ui/issue-like-table/drag-column-preview.js

@@ -12,6 +12,7 @@ const firstLastChildOverride = `
     padding-right: ${"var(--ds-space-100, 8px)"};
   }
 `;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TablePreviewHeading = styled(TableHeading)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -19,6 +20,8 @@ const TablePreviewHeading = styled(TableHeading)({
   background: "var(--ds-background-disabled, #091E4224)",
   maxWidth: maxWidth
 }, firstLastChildOverride);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TablePreviewCell = styled.td({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

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

@@ -22,6 +22,7 @@ import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
 import { issueLikeTableMessages } from './messages';
 import { TableHeading } from './styled';
 import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const DropdownParent = styled.div({
   display: 'flex',
   alignItems: 'center',
@@ -100,6 +101,11 @@ export const DraggableTableHeading = ({
   const [isDraggingAnyColumn, setIsDraggingAnyColumn] = useState(false);
   const [closestEdge, setClosestEdge] = useState(null);
   const dropTargetRef = useRef(null);
+  /**
+   * When width is not set (or callback is not set) we assume not resizing is needed.
+   * In our case width won't be set for last cell when table container is bigger than sum of all columns
+   */
+  const resizeIsEnabled = !!onWidthChange && !!width;
   useEffect(() => {
     const cell = mainHeaderCellRef.current;
     invariant(cell);
@@ -209,7 +215,7 @@ export const DraggableTableHeading = ({
 
   // Handling column resizing
   useEffect(() => {
-    if (!onWidthChange) {
+    if (!resizeIsEnabled) {
       return;
     }
     const resizeHandle = columnResizeHandleRef.current;
@@ -269,10 +275,12 @@ export const DraggableTableHeading = ({
         }
       }
     });
-  }, [id, index, onWidthChange, state, tableId, width]);
+  }, [id, index, onWidthChange, resizeIsEnabled, state, tableId, width]);
   const [buttonHovered, setButtonHovered] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const isWideEnoughToHaveChevron = width > 76;
+  // Width is not set when it is a last cell in a wide table.
+  // We make assumption thus that there is enough width for chevron.
+  const isWideEnoughToHaveChevron = !width || width > 76;
   const shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
   const triggerIcon = useMemo(() => shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
   const getTriggerButton = useCallback(({
@@ -300,11 +308,11 @@ export const DraggableTableHeading = ({
     style: {
       cursor: 'grab',
       ...getWidthCss({
-        shouldUseWidth: !!onWidthChange,
+        shouldUseWidth: resizeIsEnabled,
         width
       })
     }
-  }, onWidthChange ? jsx("div", {
+  }, resizeIsEnabled ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {

package/dist/es2019/ui/issue-like-table/empty-state/type.js

@@ -6,6 +6,7 @@ import Epic16Icon from '@atlaskit/icon-object/glyph/epic/16';
 import Issue16Icon from '@atlaskit/icon-object/glyph/issue/16';
 import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
 import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const IconWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
+import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import invariant from 'tiny-invariant';
 import { Skeleton } from '@atlaskit/linking-common';
@@ -14,6 +15,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 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 { stickyTableHeadersIndex } from '../../common/zindex';
 import { ColumnPicker } from './column-picker';
@@ -36,31 +38,36 @@ const truncateTextStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+const columnPickerWidth = 80;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const ColumnPickerHeader = styled.th({
-  [`${withTablePluginHeaderPrefix()}`]: {
-    boxSizing: 'content-box',
+  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
+    boxSizing: 'border-box',
     border: 0,
-    width: '56px',
+    width: `${columnPickerWidth}px`,
     zIndex: 10,
     position: 'sticky',
     right: `calc(-1 * ${tableSidePadding})`,
     backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+    /* It is required to have solid (not half-transparent) color because of this gradient business below */
     borderBottom: `2px solid ${`var(--ds-border, ${N40})`}`,
-    paddingRight: "var(--ds-space-100, 4px)",
+    paddingRight: tableSidePadding,
     background: `linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ${"var(--ds-elevation-surface-current, #FFF)"} 10% )`,
+    /* Keeps dropdown button in the middle */
     verticalAlign: 'middle',
+    /* In case when TH itself is bigger we want to keep picker at the right side */
     textAlign: 'right'
-  },
-  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
-    paddingRight: tableSidePadding
   }
 });
 const truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TableCell = styled.td({
   [`${withTablePluginBodyPrefix()}`]: {
+    /* First section here is to override things editor table plugin css defines */
     font: fieldTextFontSize,
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
     border: 0,
@@ -87,7 +94,8 @@ const TableCell = styled.td({
 const tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0
+  borderBottomRightRadius: 0,
+  position: 'relative'
 });
 
 /**
@@ -220,7 +228,10 @@ const tableStyles = css({
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
-  borderSpacing: 0
+  borderSpacing: 0,
+  // There is a strange table:first-of-type rule that sets margin-top to 0 coming from container,
+  // but because our table is now not the first child (there is an empty div to measure width) we need to set it manually.
+  margin: 0
 });
 
 // By default tbody and thead have border-bottom: 2px ...
@@ -317,6 +328,18 @@ export const IssueLikeDataTableView = ({
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
   const [orderedColumns, setOrderedColumns] = useState(() => getOrderedColumns([...columns], [...visibleColumnKeys]));
+
+  // 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 [tableContainerWidth, setTableContainerWidth] = useState();
+  useEffect(() => {
+    const {
+      current
+    } = containerRef;
+    if (containerRef && current) {
+      setTableContainerWidth(current.getBoundingClientRect().width);
+    }
+  }, [containerRef]);
   useEffect(() => {
     if (!hasFullSchema) {
       setOrderedColumns(getOrderedColumns([...columns], [...visibleColumnKeys]));
@@ -338,16 +361,27 @@ export const IssueLikeDataTableView = ({
   // or some other combination.
 
   const identityColumnKey = 'id';
-  const getColumnWidth = useCallback((key, type) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type), [columnCustomSizes]);
+  const columnsWidthsSum = useMemo(() => visibleSortedColumns.map(({
+    key,
+    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 getColumnWidth = useCallback((key, type, isLastCell) => {
+    if (isLastCell && shouldUseWidth && (!tableContainerWidth || tableContainerWidth > columnsWidthsSum)) {
+      return undefined;
+    } else {
+      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
+    }
+  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
   const headerColumns = useMemo(() => visibleSortedColumns.map(({
     key,
     title,
     type
-  }) => ({
+  }, index) => ({
     key,
     content: title,
     shouldTruncate: true,
-    width: getColumnWidth(key, type)
+    width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
   })), [getColumnWidth, visibleSortedColumns]);
   const loadingRow = useMemo(() => ({
     key: 'loading',
@@ -450,7 +484,7 @@ export const IssueLikeDataTableView = ({
     cells: visibleSortedColumns.map(({
       key,
       type
-    }) => {
+    }, cellIndex) => {
       var _newRowData$key;
       // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
       const value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
@@ -471,7 +505,7 @@ export const IssueLikeDataTableView = ({
       return {
         key,
         content: contentComponent,
-        width: getColumnWidth(key, type)
+        width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
       };
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
@@ -517,7 +551,6 @@ export const IssueLikeDataTableView = ({
       setHasFullSchema(false);
     }
   }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
   const isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
@@ -529,8 +562,11 @@ export const IssueLikeDataTableView = ({
     css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
     style: scrollableContainerHeight ? {
       maxHeight: `${scrollableContainerHeight}px`
-    } : undefined
-  }, jsx(Table, {
+    } : undefined,
+    "data-testid": 'issue-like-table-container'
+  }, jsx(WidthObserver, {
+    setWidth: debounce(setTableContainerWidth, 100)
+  }), jsx(Table, {
     css: tableStyles,
     "data-testid": testId,
     style: shouldUseWidth ? {

package/dist/es2019/ui/issue-like-table/render-type/date-time/index.js

@@ -13,6 +13,8 @@ const timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const DateTimeWrapper = styled.span({
   fontSize: fieldTextFontSize
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import Image from '@atlaskit/image';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const IconWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',

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

@@ -4,8 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
 const rootStyles = css({
-  position: 'relative',
-  display: 'block'
+  position: 'relative'
 });
 const smartLinkNodeToUrl = node => {
   var _node$attrs$url;
@@ -45,7 +44,7 @@ const RichTextType = ({
 }) => {
   const adfPlainText = useMemo(() => parseRichText(value), [value]);
   if (adfPlainText) {
-    return jsx("div", {
+    return jsx("span", {
       css: rootStyles,
       "data-testid": "richtext-plaintext"
     }, adfPlainText);

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

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { fieldTextFontSize } from '../../styled';
 export const TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TextWrapper = styled.span({
   fontSize: fieldTextFontSize
 });

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

@@ -20,6 +20,8 @@ const avatarWrapperStyles = xcss({
 const widthObserverWrapperStyles = xcss({
   position: 'relative'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const AvatarGroupWrapperStyles = styled.div({
   ul: {
     paddingLeft: '0px !important'

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

@@ -3,6 +3,8 @@ import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 export const ScrollableContainerHeight = 590;
 export const fieldTextFontSize = `var(--ds-font-body, ${fontFallback.body.medium})`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const Table = styled.table({
   width: '100%'
 });
@@ -22,15 +24,25 @@ export const withTablePluginPrefix = (tableSection, mainRule = '&') => `
 `;
 export const withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
 export const withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const TableHeading = styled.th({
   [`${withTablePluginHeaderPrefix()}`]: {
     border: 0,
     position: 'relative',
+    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */
     boxSizing: 'border-box',
     lineHeight: lineHeight,
     padding: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
     borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
     borderBottom: `2px solid ${`var(--ds-border, ${N40})`}`,
+    /*
+      lineHeight * 2 -> Max height of two lined header
+      verticalPadding * 2 -> padding for this component itself
+      verticalPadding * 2 -> padding inside span (--container)
+      2px -> Bottom border
+      Last two terms are needed because of border-box box sizing.
+    */
     height: `calc(${lineHeight} * 2 + ${verticalPadding} * 4 + 2px)`,
     verticalAlign: 'bottom',
     backgroundColor: "var(--ds-elevation-surface-current, #FFF)"
@@ -46,6 +58,9 @@ export const TableHeading = styled.th({
   },
   "& [data-testid='datasource-header-content--container']": {
     width: '100%',
+    /* With Button now being a parent for this component it adds its lineHeight value and spoils
+      `height` calculation above. */
+    lineHeight: lineHeight,
     padding: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
     display: '-webkit-box',
     WebkitLineClamp: 2,

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

@@ -8,15 +8,24 @@ export const COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 3;
  * or rather default width that should be treated as a maximum width. When table inserted initially
  * and no user custom width defined we set this value to `false`. As soon as user changes any of the
  * column widths we treat all width as custom hardcoded widths.
- * @param width
+ * @param width Sometimes set to undefined for last column to make it occupy remainder of the table width
  */
 export const getWidthCss = ({
   shouldUseWidth,
   width
-}) => shouldUseWidth ? {
-  width
-} : {
-  maxWidth: width
+}) => {
+  if (!width) {
+    return {};
+  }
+  if (shouldUseWidth) {
+    return {
+      width
+    };
+  } else {
+    return {
+      maxWidth: width
+    };
+  }
 };
 
 /**

package/dist/es2019/ui/table-footer/index.js

@@ -13,6 +13,7 @@ import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import { footerMessages } from './messages';
 import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const FooterWrapper = styled.div({
   padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-200, 16px)"}`,
   boxSizing: 'border-box',
@@ -22,21 +23,29 @@ const FooterWrapper = styled.div({
   background: `var(--ds-background-input, ${N0})`,
   borderTop: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TopBorderWrapper = styled.div({
   display: 'flex',
   boxSizing: 'border-box',
   justifyContent: 'space-between',
   padding: `${"var(--ds-space-250, 20px)"} ${"var(--ds-space-0, 0px)"}`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const ItemCounterWrapper = styled.div({
   display: 'flex',
   alignSelf: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const SyncWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',
   color: `var(--ds-text-accent-gray, ${N90})`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const SyncTextWrapper = styled.div({
   marginRight: "var(--ds-space-075, 6px)",
   fontSize: '12px'

package/dist/esm/ui/assets-modal/search-container/styled.js

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var FormRowContainer = styled.div(function (props) {
   return {
     alignItems: 'center',
@@ -8,6 +9,8 @@ export var FormRowContainer = styled.div(function (props) {
     width: '100%'
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var FormContainer = styled.form({
   display: 'grid',
   rowGap: "var(--ds-space-200, 16px)",
@@ -15,10 +18,13 @@ export var FormContainer = styled.form({
 });
 
 // Override the top margin of fields
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var FieldContainer = styled.div({
   flex: 1,
   marginTop: "var(--ds-space-negative-100, -8px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var SchemaSelectContainer = styled.div({
   width: '100%',
   maxWidth: '386px'

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

@@ -13,6 +13,8 @@ var triggerButtonLabelStyles = xcss({
 var badgeStyles = xcss({
   marginLeft: 'space.050'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var LoadingStateAnimationWrapper = styled.div({
   position: 'relative',
   animation: 'flickerAnimation 2s infinite',

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

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var PopupComponentContainer = styled.div({
   boxSizing: 'border-box',
   display: 'block',
@@ -13,6 +14,8 @@ export var PopupComponentContainer = styled.div({
   },
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var CustomDropdown = styled.div({
   width: '340px',
   background: "var(--ds-background-input, ".concat(N0, ")"),
@@ -20,6 +23,8 @@ export var CustomDropdown = styled.div({
   boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
   zIndex: layers.modal()
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var CustomDropdownItem = styled.div(function (props) {
   return {
     height: '36px',
@@ -38,16 +43,22 @@ export var CustomDropdownItem = styled.div(function (props) {
     }
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var CustomDateWrapper = styled.div({
   padding: "var(--ds-space-150, 12px)",
   boxSizing: 'border-box'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var DatePickersWrapper = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var SelectDateRangeButton = styled.button({
   background: "var(--ds-background-accent-gray-subtler, ".concat(N20, ")"),
   border: 'none',
@@ -61,6 +72,8 @@ export var SelectDateRangeButton = styled.button({
     cursor: 'pointer'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var DateRangeErrorMessage = styled.div({
   display: 'flex',
   lineHeight: 1.3333,