@atlaskit/editor-common/dist/esm/ui/TableSelector/table-selector.js

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

/**
 * @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';
import { Stack } from '@atlaskit/primitives/compiled';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { toolbarInsertBlockMessages as messages } from '../../messages';
import { OutsideClickTargetRefContext } from '../../ui-react';
export var TABLE_SELECTOR_BUTTON_GAP = 2;
export var TABLE_SELECTOR_BUTTON_SIZE = 17;
var MULTIPLICATION_SYMBOL = '×';
var selectedButtonStyles = css({
  backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-background-accent-blue-subtle, #669DF1)")
});
var buttonStyles = css({
  height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
  width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
  backgroundColor: "var(--ds-background-input, #FFFFFF)",
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
  borderRadius: "var(--ds-radius-small, 3px)",
  cursor: 'pointer',
  display: 'block',
  '&:focus': {
    outline: 'none',
    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-focused, #4688EC)"),
    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, #4688EC)")
  }
});
var selectionSizeTextStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: '14px',
  display: 'flex',
  justifyContent: 'center',
  marginTop: "var(--ds-space-075, 6px)",
  padding: "var(--ds-space-075, 6px)"
});
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 = useRef(null);
  useEffect(function () {
    if (btnRef.current) {
      if (isFocused) {
        btnRef.current.focus({
          preventScroll: editorExperiment('platform_editor_controls', 'variant1') ? true : undefined
        });
      } else {
        btnRef.current.blur();
      }
    }
  }, [isFocused, btnRef]);
  var handleFocus = col === 1 && row === 1 ? function () {
    return handleInitialButtonFocus();
  } : undefined;
  return 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 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: "var(--ds-space-025, 2px)"
  });
};
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 = useMemo(function () {
    return createArray(maxCols, maxRows);
  }, [maxCols, maxRows]);
  var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
  return jsx(Stack, {
    ref: setOutsideClickTargetRef
  }, jsx("div", {
    "aria-label": "".concat(formatMessage(messages.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 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.tableSizeSelectorButton, {
        numberOfColumns: col,
        numberOfRows: row
      })),
      onKeyDown: onKeyDown,
      isFocused: isCurrentFocused,
      handleInitialButtonFocus: handleInitialButtonFocus
    });
  })), jsx("span", {
    css: selectionSizeTextStyles,
    "aria-hidden": true
  }, "".concat(selectedCol, " ").concat(MULTIPLICATION_SYMBOL, " ").concat(selectedRow)));
};
var _default_1 = injectIntl(TableSelectorPopup);
export default _default_1;