@atlaskit/editor-plugin-insert-block 3.1.7 → 3.2.1

package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -1,158 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_GAP = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
-var _uiReact = require("@atlaskit/editor-common/ui-react");
-var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var TABLE_SELECTOR_BUTTON_GAP = exports.TABLE_SELECTOR_BUTTON_GAP = 2;
-var TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_SIZE = 17;
-var selectedButtonStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
-  border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
-});
-var buttonStyles = (0, _react2.css)({
-  height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
-  width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
-  border: "1px solid ".concat("var(--ds-border, #091e4224)"),
-  backgroundColor: "var(--ds-background-input, #ffffff)",
-  borderRadius: '3px',
-  cursor: 'pointer',
-  display: 'block',
-  '&:focus': {
-    outline: 'none',
-    border: "1px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
-    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
-  }
-});
-var selectionSizeTextStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '14px',
-  display: 'flex',
-  justifyContent: 'center',
-  marginTop: "var(--ds-space-075, 5px)",
-  padding: "var(--ds-space-075, 10px)"
-});
-var TableSelectorButton = function TableSelectorButton(_ref) {
-  var row = _ref.row,
-    col = _ref.col,
-    isActive = _ref.isActive,
-    _onClick = _ref.onClick,
-    label = _ref.label,
-    onKeyDown = _ref.onKeyDown,
-    isFocused = _ref.isFocused,
-    handleInitialButtonFocus = _ref.handleInitialButtonFocus;
-  var btnRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (btnRef.current) {
-      if (isFocused) {
-        btnRef.current.focus();
-      } else {
-        btnRef.current.blur();
-      }
-    }
-  }, [isFocused, btnRef]);
-  var handleFocus = col === 1 && row === 1 ? function () {
-    return handleInitialButtonFocus();
-  } : undefined;
-  return (0, _react2.jsx)("button", {
-    type: "button",
-    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
-    onClick: function onClick() {
-      return _onClick(row, col);
-    },
-    "aria-label": label,
-    onKeyDown: onKeyDown,
-    ref: btnRef,
-    onFocus: handleFocus
-  });
-};
-var createArray = function createArray(maxCols, maxRows) {
-  var arr = [];
-  for (var i = 1; i < maxRows + 1; i++) {
-    for (var j = 1; j < maxCols + 1; j++) {
-      arr.push({
-        col: j,
-        row: i
-      });
-    }
-  }
-  return arr;
-};
-var gridWrapperStyles = function gridWrapperStyles(_ref2) {
-  var maxCols = _ref2.maxCols,
-    maxRows = _ref2.maxRows;
-  return (0, _react2.css)({
-    display: 'grid',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    gridTemplateRows: "repeat(".concat(maxRows, ", 1fr)"),
-    gap: "".concat("var(--ds-space-025, ".concat("".concat(TABLE_SELECTOR_BUTTON_GAP, "px"), ")"))
-  });
-};
-var TableSelectorPopup = function TableSelectorPopup(_ref3) {
-  var maxCols = _ref3.maxCols,
-    maxRows = _ref3.maxRows,
-    onSelection = _ref3.onSelection,
-    selectedCol = _ref3.selectedCol,
-    selectedRow = _ref3.selectedRow,
-    onKeyDown = _ref3.onKeyDown,
-    isFocused = _ref3.isFocused,
-    handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
-    formatMessage = _ref3.intl.formatMessage;
-  var buttons = (0, _react.useMemo)(function () {
-    return createArray(maxCols, maxRows);
-  }, [maxCols, maxRows]);
-  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
-  return (0, _react2.jsx)(_primitives.Stack, {
-    ref: setOutsideClickTargetRef
-  }, (0, _react2.jsx)("div", {
-    "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    gridWrapperStyles({
-      maxCols: maxCols,
-      maxRows: maxRows
-    })
-  }, buttons.map(function (_ref4, index) {
-    var col = _ref4.col,
-      row = _ref4.row;
-    var isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
-    var isActive = selectedCol >= col && selectedRow >= row ? true : false;
-    return (0, _react2.jsx)(TableSelectorButton
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/no-array-index-key
-    , {
-      key: index,
-      isActive: isActive,
-      col: col,
-      row: row,
-      onClick: onSelection,
-      label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton, {
-        numberOfColumns: col,
-        numberOfRows: row
-      })),
-      onKeyDown: onKeyDown,
-      isFocused: isCurrentFocused,
-      handleInitialButtonFocus: handleInitialButtonFocus
-    });
-  })), (0, _react2.jsx)("span", {
-    css: selectionSizeTextStyles,
-    "aria-hidden": true
-  }, "".concat(selectedCol, " x ").concat(selectedRow)));
-};
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableSelectorPopup);

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -1,250 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { bind } from 'bind-event-listener';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import { N0, N30A, N60A } from '@atlaskit/theme/colors';
-import tableSelectorPopup, { TABLE_SELECTOR_BUTTON_GAP, TABLE_SELECTOR_BUTTON_SIZE } from './table-selector-popup';
-const TABLE_SELECTOR_PADDING_TOP = 8;
-const TABLE_SELECTOR_PADDING_SIDE = 10;
-const DEFAULT_TABLE_SELECTOR_ROWS = 5;
-const DEFAULT_TABLE_SELECTOR_COLS = 10;
-const DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
-const DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
-const TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
-const initialSizeState = {
-  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
-};
-const tableSelectorPopupWrapperStyles = css({
-  borderRadius: "var(--ds-border-radius, 3px)",
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`,
-  padding: `${`var(--ds-space-100, ${`${TABLE_SELECTOR_PADDING_TOP}px`})`} ${TABLE_SELECTOR_PADDING_SIDE}px`
-});
-export const TableSelectorPopup = props => {
-  const [size, setSize] = useState(initialSizeState);
-  const tablePopupRef = useRef(null);
-  // If popup opened by keyboard enable keyboard mode
-  const isKeyboardMode = useRef(props.isOpenedByKeyboard);
-  const enableKeyboardMode = useCallback(() => {
-    if (!isKeyboardMode.current) {
-      isKeyboardMode.current = true;
-    }
-  }, [isKeyboardMode]);
-  const disableKeyboardMode = useCallback(() => {
-    if (isKeyboardMode.current) {
-      isKeyboardMode.current = false;
-    }
-  }, [isKeyboardMode]);
-
-  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
-  const handleMouseMove = useCallback(e => {
-    if (!tablePopupRef.current) {
-      return;
-    }
-    disableKeyboardMode();
-    const tablePopup = tablePopupRef.current;
-    const {
-      left,
-      top
-    } = tablePopup.getBoundingClientRect();
-
-    // Mouse position on popup
-    const selectedWidth = e.clientX - left;
-    const selectedHeight = e.clientY - top;
-
-    // Calculate number grid cells selected
-    let selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
-    let selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
-    // Keep the selected rows and columns within the defined bounds
-    let gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
-    if (selectedGridCols < 1) {
-      selectedGridCols = 1;
-    }
-    if (selectedGridCols > size.maxCol) {
-      selectedGridCols = size.maxCol;
-    }
-    if (selectedGridRows < 1) {
-      selectedGridRows = 1;
-    }
-
-    // Expand grid when row selection is greater than the default grid size
-    if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS && selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
-      gridRows = selectedGridRows + 1;
-    }
-    if (selectedGridRows >= DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
-      selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-      gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-    }
-    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
-      setSize({
-        col: selectedGridCols,
-        row: selectedGridRows,
-        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-        maxRow: gridRows
-      });
-    }
-  }, [disableKeyboardMode, size, setSize]);
-  const decreasingSequence = (maxNumber, prevNumber) => {
-    let nextNumber = prevNumber - 1;
-    if (prevNumber === 1) {
-      nextNumber = maxNumber;
-    }
-    return nextNumber;
-  };
-  const getMaxRow = (prevSize, eventKey) => {
-    switch (eventKey) {
-      case 'ArrowDown':
-        // Expand the grid size when last row selected
-        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
-          return prevSize.maxRow + 1;
-        }
-        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
-          return DEFAULT_TABLE_SELECTOR_ROWS;
-        }
-        return prevSize.maxRow;
-      case 'ArrowLeft':
-        const moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
-        const moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
-        // Expand the popup to max size when selected row wraps around to last row
-        if (moveToLastRow) {
-          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-        }
-        // Decrease the popup when decreased row selection
-        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
-          return prevSize.row;
-        }
-        return prevSize.maxRow;
-      case 'ArrowUp':
-        if (prevSize.row === 1) {
-          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-          // Decrease the popup size when decreased row selection
-        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
-          return prevSize.row;
-        }
-        return prevSize.maxRow;
-      case 'ArrowRight':
-        const moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
-        const increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
-
-        // Decrease popup size for wrap around to selection 1 x 1
-        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.col === DEFAULT_TABLE_SELECTOR_COLS) {
-          return DEFAULT_TABLE_SELECTOR_ROWS;
-          // Decrease the popup size when decreased row selection
-        } else if (increaseMaxRow) {
-          return prevSize.maxRow + 1;
-        }
-        return prevSize.maxRow;
-      default:
-        return prevSize.maxRow;
-    }
-  };
-  const handleInitialButtonFocus = useCallback(() => {
-    if (isKeyboardMode.current !== true) {
-      enableKeyboardMode();
-      setSize(initialSizeState);
-    }
-  }, [enableKeyboardMode, setSize]);
-  const handleKeyDown = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  event => {
-    if (event.key === 'ArrowDown') {
-      enableKeyboardMode();
-      setSize(prevSize => {
-        return {
-          ...prevSize,
-          row: prevSize.row % prevSize.maxRow + 1,
-          maxRow: getMaxRow(prevSize, event.key)
-        };
-      });
-    }
-    if (event.key === 'ArrowRight') {
-      enableKeyboardMode();
-      setSize(prevSize => {
-        const moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
-        return {
-          ...prevSize,
-          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
-          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
-          maxRow: getMaxRow(prevSize, event.key)
-        };
-      });
-    }
-    if (event.key === 'ArrowLeft') {
-      enableKeyboardMode();
-      setSize(prevSize => {
-        const getRow = (prevRow, prevCol) => {
-          const row = prevRow;
-          // Move to previous row for wrap around
-          if (prevSize.col === 1 && prevSize.row > 1) {
-            return prevRow - 1;
-            // Increase the selection to max size when selected row and column wraps around
-          } else if (prevRow === 1 && prevCol === 1) {
-            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-          }
-          return row;
-        };
-        return {
-          ...prevSize,
-          col: decreasingSequence(prevSize.maxCol, prevSize.col),
-          row: getRow(prevSize.row, prevSize.col),
-          maxRow: getMaxRow(prevSize, event.key)
-        };
-      });
-    }
-    if (event.key === 'ArrowUp') {
-      enableKeyboardMode();
-      setSize(prevSize => {
-        const moveToLastRow = prevSize.row === 1;
-        return {
-          ...prevSize,
-          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
-          maxRow: getMaxRow(prevSize, event.key)
-        };
-      });
-    }
-  }, [enableKeyboardMode, setSize]);
-  useEffect(() => {
-    const unbind = bind(window, {
-      type: 'mousemove',
-      listener: handleMouseMove
-    });
-    return unbind;
-  }, [handleMouseMove]);
-  return jsx(Popup, {
-    target: props.target,
-    offset: [0, 3],
-    mountTo: props.popupsMountPoint,
-    boundariesElement: props.popupsBoundariesElement,
-    scrollableElement: props.popupsScrollableElement,
-    focusTrap: true,
-    onUnmount: props.onUnmount,
-    zIndex: akEditorMenuZIndex
-  }, jsx("div", {
-    css: tableSelectorPopupWrapperStyles,
-    ref: tablePopupRef
-  }, jsx(TableSelectorWithListeners, {
-    handleClickOutside: props.handleClickOutside,
-    handleEscapeKeydown: props.handleEscapeKeydown,
-    maxCols: size.maxCol,
-    maxRows: size.maxRow,
-    onSelection: props.onSelection,
-    selectedCol: size.col,
-    selectedRow: size.row,
-    onKeyDown: handleKeyDown,
-    isFocused: isKeyboardMode.current,
-    handleInitialButtonFocus: handleInitialButtonFocus
-  })));
-};
-export default TableSelectorPopup;

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -1,150 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useContext, useEffect, useMemo, useRef } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { OutsideClickTargetRefContext } from '@atlaskit/editor-common/ui-react';
-import { Stack } from '@atlaskit/primitives';
-import { B100 } from '@atlaskit/theme/colors';
-export const TABLE_SELECTOR_BUTTON_GAP = 2;
-export const TABLE_SELECTOR_BUTTON_SIZE = 17;
-const selectedButtonStyles = css({
-  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
-  border: `1px solid ${"var(--ds-background-accent-blue-subtle, #579DFF)"}`
-});
-const buttonStyles = css({
-  height: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
-  width: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
-  border: `1px solid ${"var(--ds-border, #091e4224)"}`,
-  backgroundColor: "var(--ds-background-input, #ffffff)",
-  borderRadius: '3px',
-  cursor: 'pointer',
-  display: 'block',
-  '&:focus': {
-    outline: 'none',
-    border: `1px solid ${`var(--ds-border-focused, ${B100})`}`,
-    boxShadow: `0 0 0 0.5px ${`var(--ds-border-focused, ${B100})`}`
-  }
-});
-const selectionSizeTextStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '14px',
-  display: 'flex',
-  justifyContent: 'center',
-  marginTop: "var(--ds-space-075, 5px)",
-  padding: "var(--ds-space-075, 10px)"
-});
-const TableSelectorButton = ({
-  row,
-  col,
-  isActive,
-  onClick,
-  label,
-  onKeyDown,
-  isFocused,
-  handleInitialButtonFocus
-}) => {
-  const btnRef = useRef(null);
-  useEffect(() => {
-    if (btnRef.current) {
-      if (isFocused) {
-        btnRef.current.focus();
-      } else {
-        btnRef.current.blur();
-      }
-    }
-  }, [isFocused, btnRef]);
-  const handleFocus = col === 1 && row === 1 ? () => handleInitialButtonFocus() : undefined;
-  return jsx("button", {
-    type: "button",
-    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
-    onClick: () => onClick(row, col),
-    "aria-label": label,
-    onKeyDown: onKeyDown,
-    ref: btnRef,
-    onFocus: handleFocus
-  });
-};
-const createArray = (maxCols, maxRows) => {
-  const arr = [];
-  for (let i = 1; i < maxRows + 1; i++) {
-    for (let j = 1; j < maxCols + 1; j++) {
-      arr.push({
-        col: j,
-        row: i
-      });
-    }
-  }
-  return arr;
-};
-const gridWrapperStyles = ({
-  maxCols,
-  maxRows
-}) => css({
-  display: 'grid',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  gridTemplateColumns: `repeat(${maxCols}, 1fr)`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  gridTemplateRows: `repeat(${maxRows}, 1fr)`,
-  gap: `${`var(--ds-space-025, ${`${TABLE_SELECTOR_BUTTON_GAP}px`})`}`
-});
-const TableSelectorPopup = ({
-  maxCols,
-  maxRows,
-  onSelection,
-  selectedCol,
-  selectedRow,
-  onKeyDown,
-  isFocused,
-  handleInitialButtonFocus,
-  intl: {
-    formatMessage
-  }
-}) => {
-  const buttons = useMemo(() => {
-    return createArray(maxCols, maxRows);
-  }, [maxCols, maxRows]);
-  const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
-  return jsx(Stack, {
-    ref: setOutsideClickTargetRef
-  }, jsx("div", {
-    "aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    gridWrapperStyles({
-      maxCols: maxCols,
-      maxRows: maxRows
-    })
-  }, buttons.map(({
-    col,
-    row
-  }, index) => {
-    const isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
-    const isActive = selectedCol >= col && selectedRow >= row ? true : false;
-    return jsx(TableSelectorButton
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/no-array-index-key
-    , {
-      key: index,
-      isActive: isActive,
-      col: col,
-      row: row,
-      onClick: onSelection,
-      label: `${formatMessage(messages.tableSizeSelectorButton, {
-        numberOfColumns: col,
-        numberOfRows: row
-      })}`,
-      onKeyDown: onKeyDown,
-      isFocused: isCurrentFocused,
-      handleInitialButtonFocus: handleInitialButtonFocus
-    });
-  })), jsx("span", {
-    css: selectionSizeTextStyles,
-    "aria-hidden": true
-  }, `${selectedCol} x ${selectedRow}`));
-};
-export default injectIntl(TableSelectorPopup);