@atlaskit/editor-plugin-insert-block 3.2.0 → 3.2.2

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);

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

@@ -1,252 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @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';
-var TABLE_SELECTOR_PADDING_TOP = 8;
-var TABLE_SELECTOR_PADDING_SIDE = 10;
-var DEFAULT_TABLE_SELECTOR_ROWS = 5;
-var DEFAULT_TABLE_SELECTOR_COLS = 10;
-var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
-var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
-var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
-var initialSizeState = {
-  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
-};
-var tableSelectorPopupWrapperStyles = css({
-  borderRadius: "var(--ds-border-radius, 3px)",
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")"),
-  padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
-});
-export var TableSelectorPopup = function TableSelectorPopup(props) {
-  var _useState = useState(initialSizeState),
-    _useState2 = _slicedToArray(_useState, 2),
-    size = _useState2[0],
-    setSize = _useState2[1];
-  var tablePopupRef = useRef(null);
-  // If popup opened by keyboard enable keyboard mode
-  var isKeyboardMode = useRef(props.isOpenedByKeyboard);
-  var enableKeyboardMode = useCallback(function () {
-    if (!isKeyboardMode.current) {
-      isKeyboardMode.current = true;
-    }
-  }, [isKeyboardMode]);
-  var disableKeyboardMode = useCallback(function () {
-    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.
-  var handleMouseMove = useCallback(function (e) {
-    if (!tablePopupRef.current) {
-      return;
-    }
-    disableKeyboardMode();
-    var tablePopup = tablePopupRef.current;
-    var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
-      left = _tablePopup$getBoundi.left,
-      top = _tablePopup$getBoundi.top;
-
-    // Mouse position on popup
-    var selectedWidth = e.clientX - left;
-    var selectedHeight = e.clientY - top;
-
-    // Calculate number grid cells selected
-    var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
-    var 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
-    var 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]);
-  var decreasingSequence = function decreasingSequence(maxNumber, prevNumber) {
-    var nextNumber = prevNumber - 1;
-    if (prevNumber === 1) {
-      nextNumber = maxNumber;
-    }
-    return nextNumber;
-  };
-  var getMaxRow = function 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':
-        var moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
-        var 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':
-        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
-        var 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;
-    }
-  };
-  var handleInitialButtonFocus = useCallback(function () {
-    if (isKeyboardMode.current !== true) {
-      enableKeyboardMode();
-      setSize(initialSizeState);
-    }
-  }, [enableKeyboardMode, setSize]);
-  var handleKeyDown = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (event) {
-    if (event.key === 'ArrowDown') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        return _objectSpread(_objectSpread({}, prevSize), {}, {
-          row: prevSize.row % prevSize.maxRow + 1,
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-    if (event.key === 'ArrowRight') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
-        return _objectSpread(_objectSpread({}, 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(function (prevSize) {
-        var getRow = function getRow(prevRow, prevCol) {
-          var 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 _objectSpread(_objectSpread({}, prevSize), {}, {
-          col: decreasingSequence(prevSize.maxCol, prevSize.col),
-          row: getRow(prevSize.row, prevSize.col),
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-    if (event.key === 'ArrowUp') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        var moveToLastRow = prevSize.row === 1;
-        return _objectSpread(_objectSpread({}, prevSize), {}, {
-          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-  }, [enableKeyboardMode, setSize]);
-  useEffect(function () {
-    var 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;