@atlaskit/editor-plugin-table/dist/es2019/ui/SizeSelector/index.js

Table plugin for the @atlaskit/editor

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
import { jsx } from '@emotion/react';
import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
import { pluginKey } from '../../pm-plugins/table-size-selector';
const DEFAULT_TABLE_SELECTOR_COLS = 3;
const DEFAULT_TABLE_SELECTOR_ROWS = 3;
export const SizeSelector = ({
  api,
  target,
  popupsMountPoint,
  popupsBoundariesElement,
  popupsScrollableElement
}) => {
  const closeSelectorPopup = useCallback(() => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      tr.setMeta(pluginKey, {
        isSelectorOpen: false
      });
      return tr;
    });
  }, [api]);
  const onSelection = useCallback((rowsCount, colsCount) => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      api === null || api === void 0 ? void 0 : api.table.commands.insertTableWithSize(rowsCount, colsCount)({
        tr
      });
      tr.setMeta(pluginKey, {
        isSelectorOpen: false
      });
      return tr;
    });
  }, [api]);
  const onUnmount = () => {
    api === null || api === void 0 ? void 0 : api.core.actions.focus();
  };
  return jsx(TableSelectorPopup, {
    defaultSize: {
      row: DEFAULT_TABLE_SELECTOR_ROWS,
      col: DEFAULT_TABLE_SELECTOR_COLS
    },
    target: target,
    onUnmount: onUnmount,
    onSelection: onSelection,
    popupsMountPoint: popupsMountPoint,
    popupsScrollableElement: popupsScrollableElement,
    popupsBoundariesElement: popupsBoundariesElement,
    isOpenedByKeyboard: true,
    handleClickOutside: closeSelectorPopup,
    handleEscapeKeydown: closeSelectorPopup
  });
};