@atlaskit/editor-plugin-insert-block/dist/esm/ui/registered-insert-menu/RegisteredInsertMenuList.js

Insert block plugin for @atlaskit/editor-core

/* RegisteredInsertMenuList.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./RegisteredInsertMenuList.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
import { List } from 'react-virtualized/dist/commonjs/List';
import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
import { getQuickInsertMenuRows } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
// eslint-disable-next-line @atlaskit/platform/no-barrel-entry-imports

import { Box } from '@atlaskit/primitives/compiled/box';
import { RegisteredInsertMenuItem, RegisteredInsertMenuPreviewContext } from './RegisteredInsertMenuItem';
var ESTIMATED_ROW_HEIGHT = 44;
// 44px item + 1px separator.
var MENU_FOOTER_HEIGHT = 45;
var MENU_SEARCH_HEIGHT = 64;
var LIST_WIDTH = 350;
var listAriaProps = {
  // @ts-expect-error react-virtualized forwards null to omit its grid-only default; its types exclude null.
  'aria-readonly': null
};
var styles = {
  content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
  scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
  footer: "_1o9zidpf",
  footerWithDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf",
  externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc"
};
var RegisteredInsertMenuItemRow = function RegisteredInsertMenuItemRow(_ref) {
  var editorView = _ref.editorView,
    id = _ref.id,
    isOffline = _ref.isOffline,
    isSelected = _ref.isSelected,
    itemIndex = _ref.itemIndex,
    menuOpenId = _ref.menuOpenId,
    onClose = _ref.onClose,
    onItemFocus = _ref.onItemFocus,
    onItemBlur = _ref.onItemBlur,
    onItemHover = _ref.onItemHover,
    onItemLeave = _ref.onItemLeave,
    registration = _ref.registration,
    surfaceContext = _ref.surfaceContext;
  useLayoutEffect(function () {
    return function () {
      return onItemLeave(registration.key);
    };
  }, [onItemLeave, registration.key]);
  var onBlur = useCallback(function (event) {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      onItemBlur(registration.key);
    }
  }, [onItemBlur, registration.key]);
  return /*#__PURE__*/React.createElement("div", {
    onBlur: onBlur,
    onFocus: function onFocus() {
      return onItemFocus(itemIndex, registration.key);
    },
    onMouseLeave: function onMouseLeave() {
      return onItemLeave(registration.key);
    },
    onMouseMove: function onMouseMove() {
      return onItemHover(itemIndex, registration.key);
    }
  }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
    editorView: editorView,
    id: id,
    isOffline: isOffline,
    isSelected: isSelected,
    menuOpenId: menuOpenId,
    onClose: onClose,
    registration: registration,
    surfaceContext: surfaceContext
  }));
};
export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref2) {
  var _model$root$component, _model$root;
  var editorView = _ref2.editorView,
    emptyStateHandler = _ref2.emptyStateHandler,
    isOffline = _ref2.isOffline,
    listId = _ref2.listId,
    listLabel = _ref2.listLabel,
    maxHeight = _ref2.maxHeight,
    menuOpenId = _ref2.menuOpenId,
    model = _ref2.model,
    onClose = _ref2.onClose,
    onItemFocus = _ref2.onItemFocus,
    onItemBlur = _ref2.onItemBlur,
    query = _ref2.query,
    onItemHover = _ref2.onItemHover,
    onItemLeave = _ref2.onItemLeave,
    onItemVisibilityChange = _ref2.onItemVisibilityChange,
    onRenderedItemsChange = _ref2.onRenderedItemsChange,
    selectedItemIndex = _ref2.selectedItemIndex,
    surfaceContext = _ref2.surfaceContext,
    activePreviewItemKey = _ref2.activePreviewItemKey;
  var Root = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : React.Fragment;
  var listRef = useRef(null);
  var setListRef = useCallback(function (list) {
    listRef.current = list;
  }, []);
  var rows = useMemo(function () {
    return getQuickInsertMenuRows(model);
  }, [model]);
  var cache = useMemo(function () {
    return new CellMeasurerCache({
      defaultHeight: ESTIMATED_ROW_HEIGHT,
      fixedWidth: true
    });
  }, []);
  var itemIndexByRowIndex = useMemo(function () {
    var indexes = new Map();
    var itemIndex = 0;
    rows.forEach(function (registration, rowIndex) {
      if (registration.type === 'menu-item') {
        indexes.set(rowIndex, itemIndex++);
      }
    });
    return indexes;
  }, [rows]);
  var selectedRowIndex = useMemo(function () {
    var _iterator = _createForOfIteratorHelper(itemIndexByRowIndex),
      _step;
    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var _step$value = _slicedToArray(_step.value, 2),
          rowIndex = _step$value[0],
          itemIndex = _step$value[1];
        if (itemIndex === selectedItemIndex) {
          return rowIndex;
        }
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }
    return -1;
  }, [itemIndexByRowIndex, selectedItemIndex]);
  var rowKeySignature = useMemo(function () {
    return rows.map(function (_ref3) {
      var key = _ref3.key,
        type = _ref3.type;
      return "".concat(type, ":").concat(key);
    }).join('\0');
  }, [rows]);
  var _useMenuListHeight = useMenuListHeight(cache, rows.length, rowKeySignature),
    measuredHeight = _useMenuListHeight.height,
    updateHeight = _useMenuListHeight.updateHeight;
  useLayoutEffect(function () {
    var _listRef$current, _listRef$current2;
    cache.clearAll();
    (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.recomputeRowHeights();
    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToPosition(0);
  }, [cache, rowKeySignature]);
  var onRowsRendered = useCallback(function (_ref4) {
    var _indexes$, _indexes;
    var overscanStartIndex = _ref4.overscanStartIndex,
      overscanStopIndex = _ref4.overscanStopIndex,
      startIndex = _ref4.startIndex,
      stopIndex = _ref4.stopIndex;
    if (activePreviewItemKey) {
      var previewRowIndex = rows.findIndex(function (_ref5) {
        var key = _ref5.key;
        return key === activePreviewItemKey;
      });
      if (previewRowIndex < startIndex || previewRowIndex > stopIndex) {
        onItemVisibilityChange(activePreviewItemKey, false);
      }
    }
    updateHeight();
    var indexes = _toConsumableArray(itemIndexByRowIndex).filter(function (_ref6) {
      var _ref7 = _slicedToArray(_ref6, 1),
        rowIndex = _ref7[0];
      return rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex;
    }).map(function (_ref8) {
      var _ref9 = _slicedToArray(_ref8, 2),
        itemIndex = _ref9[1];
      return itemIndex;
    });
    onRenderedItemsChange({
      startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
      stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
    });
  }, [activePreviewItemKey, itemIndexByRowIndex, onItemVisibilityChange, onRenderedItemsChange, rows, updateHeight]);
  var onScrollableContentScroll = useCallback(function (event) {
    if (event.target === event.currentTarget && activePreviewItemKey) {
      onItemVisibilityChange(activePreviewItemKey, false);
    }
  }, [activePreviewItemKey, onItemVisibilityChange]);
  var renderRow = useCallback(function (_ref0) {
    var _registration$compone;
    var index = _ref0.index,
      key = _ref0.key,
      parent = _ref0.parent,
      style = _ref0.style;
    var registration = rows[index];
    if (!registration) {
      return null;
    }
    var itemIndex = itemIndexByRowIndex.get(index);
    var rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/React.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment, null, null)) : /*#__PURE__*/React.createElement(RegisteredInsertMenuItemRow, {
      editorView: editorView,
      id: "".concat(listId, "-").concat(itemIndex),
      isOffline: isOffline,
      isSelected: itemIndex === selectedItemIndex,
      itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
      menuOpenId: menuOpenId,
      onClose: onClose,
      onItemFocus: onItemFocus,
      onItemBlur: onItemBlur,
      onItemHover: onItemHover,
      onItemLeave: onItemLeave,
      registration: registration,
      surfaceContext: surfaceContext
    });
    return /*#__PURE__*/React.createElement(CellMeasurer, {
      key: key,
      cache: cache,
      parent: parent,
      columnIndex: 0,
      rowIndex: index
    }, function (_ref1) {
      var registerChild = _ref1.registerChild;
      return /*#__PURE__*/React.createElement("div", {
        ref: function ref(element) {
          return registerChild === null || registerChild === void 0 ? void 0 : registerChild(element !== null && element !== void 0 ? element : undefined);
        }
        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
        ,
        style: style
      }, /*#__PURE__*/React.createElement(Box, {
        paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
      }, rowContent));
    });
  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemFocus, onItemBlur, onItemHover, onItemLeave, rows, selectedItemIndex, surfaceContext]);
  var footerItemIndex = itemIndexByRowIndex.size;
  var footerItemId = "".concat(listId, "-").concat(footerItemIndex);
  var hasExternalControls = model.fallbackItems !== undefined && emptyStateHandler !== undefined;
  var hasNoSearchResults = query !== '' && rows.length === 0;
  var externalControls = hasExternalControls && emptyStateHandler ? emptyStateHandler({
    mode: 'inline',
    searchTerm: query,
    showNoResultsMessage: false
  }) : null;
  var showFooterDivider = !hasNoSearchResults || Boolean(externalControls);
  var listMaxHeight = Math.max(0, maxHeight - MENU_SEARCH_HEIGHT - (model.footer ? MENU_FOOTER_HEIGHT : 0));
  var contentStyle = {
    maxHeight: Math.max(0, maxHeight - MENU_SEARCH_HEIGHT)
  };
  var onFooterItemHover = useCallback(function () {
    return onItemHover(footerItemIndex);
  }, [footerItemIndex, onItemHover]);
  var onFooterItemFocus = useCallback(function () {
    return onItemFocus(footerItemIndex);
  }, [footerItemIndex, onItemFocus]);
  var footer = model.footer ? /*#__PURE__*/React.createElement(Box, {
    testId: "registered-insert-menu-footer",
    xcss: showFooterDivider ? styles.footerWithDivider : styles.footer,
    onFocus: onFooterItemFocus,
    onMouseMove: onFooterItemHover
  }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
    editorView: editorView,
    id: footerItemId,
    isOffline: isOffline,
    isSelected: footerItemIndex === selectedItemIndex,
    menuOpenId: menuOpenId,
    onClose: onClose,
    registration: model.footer,
    surfaceContext: surfaceContext
  })) : null;
  if (!model.root) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(RegisteredInsertMenuPreviewContext.Provider, {
    value: activePreviewItemKey
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.content,
    style: contentStyle
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.scrollable,
    onScroll: onScrollableContentScroll
  }, /*#__PURE__*/React.createElement(Box, {
    "aria-label": listLabel,
    "aria-owns": model.footer ? footerItemId : undefined,
    id: listId,
    role: "listbox"
  }, rows.length > 0 && /*#__PURE__*/React.createElement(List
  // eslint-disable-next-line react/jsx-props-no-spreading -- Omits the library's grid-only ARIA default without declaring it on the group role.
  , _extends({}, listAriaProps, {
    tabIndex: null,
    containerRole: "presentation",
    height: Math.min(measuredHeight, listMaxHeight),
    overscanRowCount: 3,
    onRowsRendered: onRowsRendered,
    ref: setListRef,
    role: "group",
    rowCount: rows.length,
    rowHeight: cache.rowHeight,
    rowRenderer: renderRow,
    scrollToAlignment: "auto",
    scrollToIndex: selectedRowIndex,
    width: LIST_WIDTH
  }))), hasNoSearchResults && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
    mode: "inline",
    spacing: "compact"
  }), externalControls && /*#__PURE__*/React.createElement(Box, {
    testId: "registered-insert-menu-external-controls",
    xcss: styles.externalControls
  }, externalControls)), footer)));
};