@atlaskit/editor-common/dist/esm/styles/shared/table.js

A package that contains common classes and components for editor and renderer

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, overflowShadow } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getBrowserInfo } from '../../utils/browser';
import { CodeBlockSharedCssClassName } from './code-block';
import { tableCellBackgroundStyleOverride } from './tableCell';
export var tableMarginTop = 24;
export var tableMarginBottom = 16;
export var tableMarginTopWithControl = 14;
export var tableMarginSides = 8;
export var tableCellMinWidth = 48;
export var tableNewColumnMinWidth = 140;
export var tableCellBorderWidth = 1;
export var tableCellPadding = 8;
export var tableResizeHandleWidth = 6;
export var tablePadding = 8;
export var tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
export var TableSharedCssClassName = {
  TABLE_CONTAINER: "".concat(tablePrefixSelector, "-container"),
  TABLE_NODE_WRAPPER: "".concat(tablePrefixSelector, "-wrapper"),
  TABLE_NODE_WRAPPER_NO_OVERFLOW: "".concat(tablePrefixSelector, "-wrapper-no-overflow"),
  TABLE_SCROLL_INLINE_SHADOW: "".concat(tablePrefixSelector, "-scroll-inline-shadow"),
  TABLE_RIGHT_BORDER: "".concat(tablePrefixSelector, "-right-border"),
  TABLE_LEFT_BORDER: "".concat(tablePrefixSelector, "-left-border"),
  TABLE_LEFT_SHADOW: "".concat(tablePrefixSelector, "-with-left-shadow"),
  TABLE_RIGHT_SHADOW: "".concat(tablePrefixSelector, "-with-right-shadow"),
  TABLE_STICKY_SHADOW: "".concat(tablePrefixSelector, "-sticky-shadow"),
  TABLE_STICKY_WRAPPER: "".concat(tablePrefixSelector, "-sticky-wrapper"),
  TABLE_STICKY_SCROLLBAR_CONTAINER: "".concat(tablePrefixSelector, "-sticky-scrollbar-container"),
  TABLE_STICKY_SENTINEL_TOP: "".concat(tablePrefixSelector, "-sticky-sentinel-top"),
  TABLE_STICKY_SENTINEL_BOTTOM: "".concat(tablePrefixSelector, "-sticky-sentinel-bottom"),
  TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: "".concat(tablePrefixSelector, "-sticky-scrollbar-sentinel-top"),
  TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: "".concat(tablePrefixSelector, "-sticky-scrollbar-sentinel-bottom"),
  TABLE_SHADOW_SENTINEL_LEFT: "".concat(tablePrefixSelector, "-shadow-sentinel-left"),
  TABLE_SHADOW_SENTINEL_RIGHT: "".concat(tablePrefixSelector, "-shadow-sentinel-right"),
  // eslint-disable-next-line @atlaskit/editor/no-re-export
  TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector,
  // eslint-disable-next-line @atlaskit/editor/no-re-export
  TABLE_CELL_WRAPPER: tableCellSelector,
  // eslint-disable-next-line @atlaskit/editor/no-re-export
  TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector,
  TABLE_ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-row-controls-wrapper"),
  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(tablePrefixSelector, "-column-controls-decoration"),
  TABLE_RESIZER_CONTAINER: "".concat(tablePrefixSelector, "-resizer-container"),
  TABLE_VIEW_CONTENT_WRAP: 'tableView-content-wrap'
};

/* first block node has 0 top margin */
var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
  return fg('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
  css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t> :first-child:not(style),\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
};
var tableSharedStyle = function tableSharedStyle() {
  var browser = getBrowserInfo();
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t", "\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin: 0 auto ", ";\n\t\t\tbox-sizing: border-box;\n\n\t\t\t/**\n\t\t\t * Fix block top alignment inside table cells.\n\t\t\t */\n\t\t\t.decisionItemView-content-wrap:first-of-type > div {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t", "\n\t\t}\n\t\t.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t\tclear: both;\n\t\t}\n\n\t\t.", " {\n\t\t\twill-change: width, margin-left;\n\t\t}\n\n\t\t.", " table {\n\t\t\twill-change: width;\n\t\t}\n\t\t.", " > table {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\n\t\t.", " > table,\n\t\t.", " > table {\n\t\t\tmargin: ", " ", " 0 0;\n\t\t}\n\n\t\t/* support panel nested in table */\n\t\t", "\n\n\t\t/* avoid applying styles to nested tables (possible via extensions) */\n\t.", " > table,\n\t.", " > table,\n\t.", " > table {\n\t\t\tborder-collapse: collapse;\n\t\t\t", "\n\t\t\ttable-layout: fixed;\n\t\t\tfont-size: 1em;\n\t\t\twidth: 100%;\n\t\t\t", "\n\n\t\t\t&[data-autosize='true'] {\n\t\t\t\ttable-layout: auto;\n\t\t\t}\n\n\t\t\t& {\n\t\t\t\t* {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\thr {\n\t\t\t\t\tbox-sizing: content-box;\n\t\t\t\t}\n\n\t\t\t\ttbody {\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t}\n\t\t\t\tth td {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > th,\n\t\t\t\t> tbody > tr > td {\n\t\t\t\t\tmin-width: ", "px;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tvertical-align: top;\n\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\tborder-right-width: 0;\n\t\t\t\t\tborder-bottom-width: 0;\n\n\t\t\t\t\tpadding: ", ";\n\t\t\t\t\t/* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n\t\t\t\t\t", "\n\n\t\t\t\t\t", "\n\n\t\t\t\tth p:not(:first-of-type),\n\t\t\t\ttd p:not(:first-of-type) {\n\t\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Ensures nested tables are compatible with parent table background color - uses specificity to ensure tables nested by extensions are not affected */\n\t\t\t\t> tbody > tr > td {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t\tth {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\ttext-align: left;\n\n\t\t\t\t\t/* only apply this styling to codeblocks in default background headercells */\n\t\t\t\t\t/* TODO this needs to be overhauled as it relies on unsafe selectors */\n\t\t\t\t\t", " {\n\t\t\t\t\t\t.", ":not(.danger) {\n\t\t\t\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t\t\t\t:not(.", ") {\n\t\t\t\t\t\t\t\tbox-shadow: 0px 0px 0px 1px ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\tbackground-image: ", ";\n\n\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t/* this is only relevant to the element taken care of by renderer */\n\t\t\t\t\t\t\t> [data-ds--code--code-block] {\n\t\t\t\t\t\t\t\tbackground-image: ", "!important;\n\n\t\t\t\t\t\t\t\tbackground-color: ", "!important;\n\n\t\t\t\t\t\t\t\t/* selector lives inside @atlaskit/code */\n\t\t\t\t\t\t\t\t--ds--code--line-number-bg-color: ", ";\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Fake side borders are not needed when the rounded overlay owns the outer border. */\n\t\t\t\t.".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t\t") : ".".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 1px;\n\t\t\t\theight: calc(100% - ", "var(--ds-space-300, 24px)", ");\n\t\t\t\tbackground: ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: ", "var(--ds-space-300, 24px)", ";\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, " {\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true'] {\n\t\t\t\tleft: ").concat(akEditorTableNumberColumnWidth - 1, "px;\n\t\t\t}"), TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", fg('platform_editor_bordered_panel_nested_in_table') ? ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " .ak-editor-panel {\n\t\t\tborder: ", "var(--ds-border-width, 1px)", " solid ", "var(--ds-border, #0B120E24)", ";\n\t\t}") : '', TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Keep a transparent border so the collapsed border model reserves the same 1px slot\n\t\t\t   on the table edge; the ::after overlay draws the visible rounded border instead. */\n\t\t\tborder: ".concat(tableCellBorderWidth, "px solid transparent;") : "border: ".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\tborder-left-color: transparent;\n\t\t\tborder-right-color: transparent;"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "position: relative;\n\n\t\t\t/* Table-width outer-border owner for overflow-safe rounded corners. */\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: 0;\n\t\t\t\tborder: ".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\t\tborder-radius: ", "var(--ds-radius-medium, 6px)", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: 1;\n\t\t\t}") : '', "var(--ds-background-neutral-subtle, #00000000)", tableCellMinWidth, "var(--ds-font-weight-regular, 400)", "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-space-100, 8px)", browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', firstNodeWithNotMarginTop(), "var(--ds-space-150, 12px)", "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Let the wrapper overlay own the outer table perimeter.\n\t\t\t\t   data-reaches-* attributes are set by the TableCell node view. */\n\t\t\t\t> tbody > tr > th[data-reaches-top],\n\t\t\t\t> tbody > tr > td[data-reaches-top] {\n\t\t\t\t\tborder-top-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > th[data-reaches-left],\n\t\t\t\t> tbody > tr > td[data-reaches-left] {\n\t\t\t\t\tborder-left-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > td[data-reaches-left]::after {\n\t\t\t\t\tborder-left-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > td[data-reaches-bottom]::after,\n\t\t\t\t> tbody > tr > th[data-reaches-bottom]::after {\n\t\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\t}" : '', "var(--ds-background-accent-gray-subtlest, #F0F1F2)", expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? '&:not(.danger)' : '&:not([style]):not(.danger)', CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, #FFFFFF)", akEditorSelectedNodeClassName, "var(--ds-border, #0B120E24)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
    leftCoverWidth: "var(--ds-space-300, 24px)"
  }), "var(--ds-background-neutral, #0515240F)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, #0515240F)", overflowShadow({
    leftCoverWidth: "var(--ds-space-300, 24px)"
  }), "var(--ds-background-neutral, #0515240F)", "var(--ds-background-neutral, #0515240F)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* When the number column is enabled, the left visual edge belongs to the number column.\n\t\t   Remove the left border-radius and left border from the table's ::after overlay\n\t\t   so it doesn't double-up or round where the number column already provides that edge. */\n\t\t.".concat(TableSharedCssClassName.TABLE_CONTAINER, "[data-number-column='true'] {\n\t\t\t> .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table::after,\n\t\t\t> .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table::after {\n\t\t\t\tborder-top-left-radius: 0;\n\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}") : '');
};
export var calcTableWidth = function calcTableWidth(layout, containerWidth) {
  var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
  switch (layout) {
    case 'full-width':
      return containerWidth ? Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
    case 'wide':
      if (containerWidth) {
        return Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth);
      }
      return akEditorWideLayoutWidth;
    default:
      return 'inherit';
  }
};
export { tableSharedStyle };