@atlaskit/editor-plugin-insert-block 4.3.3 → 4.3.4

package/dist/esm/ui/toolbar-components/hooks/useInsertButtonState.js

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { createItems } from '../../ToolbarInsertBlock/create-items';
+export var useInsertButtonState = function useInsertButtonState(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    horizontalRuleEnabled = _ref.horizontalRuleEnabled,
+    insertMenuItems = _ref.insertMenuItems,
+    nativeStatusSupported = _ref.nativeStatusSupported,
+    numberOfButtons = _ref.numberOfButtons,
+    tableSelectorSupported = _ref.tableSelectorSupported,
+    expandEnabled = _ref.expandEnabled,
+    showElementBrowserLink = _ref.showElementBrowserLink;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
+  var imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
+  var mentionsSupported = !!useSharedPluginStateSelector(api, 'mention.mentionProvider');
+  var canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
+  var dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
+  var placeholderTextEnabled = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
+  var mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
+  var canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
+  var activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
+  var connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  var emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  var availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
+
+  // Computed values
+  var mediaUploadsEnabled = mediaAllowsUploads;
+  var mediaSupported = mediaAllowsUploads !== undefined;
+  var isEditorOffline = connectivityMode === 'offline';
+  var imageUploadSupported = !!(api !== null && api !== void 0 && api.imageUpload);
+  var mentionsDisabled = !canInsertMention;
+  var linkSupported = canInsertLink !== undefined;
+  var linkDisabled = !canInsertLink || !!activeLinkMark;
+  var emojiDisabled = !emojiProvider;
+  var actionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem);
+  var decisionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.decisionItem);
+  var layoutSectionEnabled = !!(api !== null && api !== void 0 && api.layout);
+  var _ref2 = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
+      isTypeAheadAllowed: isTypeAheadAllowed,
+      tableSupported: !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table),
+      tableSelectorSupported: tableSelectorSupported,
+      mediaUploadsEnabled: mediaUploadsEnabled,
+      mediaSupported: mediaSupported,
+      isEditorOffline: isEditorOffline,
+      imageUploadSupported: imageUploadSupported,
+      imageUploadEnabled: imageUploadEnabled,
+      mentionsSupported: mentionsSupported,
+      mentionsDisabled: mentionsDisabled,
+      actionSupported: actionSupported,
+      decisionSupported: decisionSupported,
+      linkSupported: linkSupported,
+      linkDisabled: linkDisabled,
+      emojiDisabled: emojiDisabled,
+      hasEmojiPlugin: !!(api !== null && api !== void 0 && api.emoji),
+      hasMentionsPlugin: !!(api !== null && api !== void 0 && api.mention),
+      hasMediaPlugin: !!(api !== null && api !== void 0 && api.media),
+      nativeStatusSupported: nativeStatusSupported,
+      dateEnabled: dateEnabled,
+      placeholderTextEnabled: placeholderTextEnabled,
+      horizontalRuleEnabled: horizontalRuleEnabled,
+      layoutSectionEnabled: layoutSectionEnabled,
+      expandEnabled: expandEnabled,
+      showElementBrowserLink: showElementBrowserLink,
+      emojiProvider: emojiProvider,
+      availableWrapperBlockTypes: availableWrapperBlockTypes,
+      insertMenuItems: insertMenuItems,
+      schema: editorView === null || editorView === void 0 ? void 0 : editorView.state.schema,
+      numberOfButtons: numberOfButtons || 0,
+      formatMessage: formatMessage
+    }) : [, []],
+    _ref3 = _slicedToArray(_ref2, 2),
+    dropdownItems = _ref3[1];
+  return {
+    dropdownItems: dropdownItems,
+    emojiProvider: emojiProvider,
+    isTypeAheadAllowed: isTypeAheadAllowed
+  };
+};

package/dist/esm/ui/toolbar-components/hooks/usePopupManager.js

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useCallback } from 'react';
+import { isDetachedElement } from '../utils/utils';
+export var usePopupManager = function usePopupManager() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpenedByKeyboard = _useState4[0],
+    setIsOpenedByKeyboard = _useState4[1];
+  var toggle = useCallback(function (inputMethod) {
+    var _config$analytics, _config$analytics$onT;
+    var newState = !isOpen;
+    setIsOpen(newState);
+    if (newState) {
+      var _config$onOpen;
+      (_config$onOpen = config.onOpen) === null || _config$onOpen === void 0 || _config$onOpen.call(config, inputMethod);
+    } else {
+      var _config$onClose;
+      (_config$onClose = config.onClose) === null || _config$onClose === void 0 || _config$onClose.call(config);
+    }
+    (_config$analytics = config.analytics) === null || _config$analytics === void 0 || (_config$analytics$onT = _config$analytics.onToggle) === null || _config$analytics$onT === void 0 || _config$analytics$onT.call(_config$analytics, newState, inputMethod);
+  }, [isOpen, config]);
+  var close = useCallback(function () {
+    var _config$onClose2, _config$analytics2, _config$analytics2$on;
+    setIsOpen(false);
+    (_config$onClose2 = config.onClose) === null || _config$onClose2 === void 0 || _config$onClose2.call(config);
+    (_config$analytics2 = config.analytics) === null || _config$analytics2 === void 0 || (_config$analytics2$on = _config$analytics2.onToggle) === null || _config$analytics2$on === void 0 || _config$analytics2$on.call(_config$analytics2, false);
+  }, [config]);
+  var handleEscapeKeydown = useCallback(function () {
+    var _config$focusTarget;
+    close();
+    (_config$focusTarget = config.focusTarget) === null || _config$focusTarget === void 0 || (_config$focusTarget = _config$focusTarget.current) === null || _config$focusTarget === void 0 || _config$focusTarget.focus();
+  }, [close, config.focusTarget]);
+  var handleClickOutside = useCallback(function (e) {
+    if (e.target instanceof HTMLElement && !isDetachedElement(e.target)) {
+      close();
+    }
+  }, [close]);
+  var handleKeyboardOpen = useCallback(function (event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      setIsOpenedByKeyboard(true);
+      event.preventDefault();
+    }
+  }, []);
+  return {
+    isOpen: isOpen,
+    isOpenedByKeyboard: isOpenedByKeyboard,
+    toggle: toggle,
+    close: close,
+    handleEscapeKeydown: handleEscapeKeydown,
+    handleClickOutside: handleClickOutside,
+    handleKeyboardOpen: handleKeyboardOpen
+  };
+};

package/dist/esm/ui/toolbar-components/hooks/useTableSelectorPopup.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+import { useCallback } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { usePopupManager } from './usePopupManager';
+export var useTableSelectorPopup = function useTableSelectorPopup(_ref) {
+  var api = _ref.api,
+    buttonRef = _ref.buttonRef;
+  var popupManager = usePopupManager({
+    focusTarget: buttonRef
+  });
+  var handleSelectedTableSize = useCallback(function (rowsCount, colsCount) {
+    // workaround to solve race condition where cursor is not placed correctly inside table
+    queueMicrotask(function () {
+      var _api$core, _api$table;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
+    });
+    popupManager.close();
+  }, [api, popupManager]);
+  var onPopupUnmount = useCallback(function () {
+    api === null || api === void 0 || api.core.actions.focus();
+  }, [api]);
+  return _objectSpread(_objectSpread({}, popupManager), {}, {
+    handleSelectedTableSize: handleSelectedTableSize,
+    onPopupUnmount: onPopupUnmount
+  });
+};

package/dist/esm/ui/toolbar-components/popups/EmojiPickerPopup.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
+var EmojiPicker = function EmojiPicker(props) {
+  var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement(AkEmojiPicker, {
+    onPickerRef: setOutsideClickTargetRef,
+    emojiProvider: props.emojiProvider,
+    onSelection: props.onSelection
+  });
+};
+var EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
+export var EmojiPickerPopup = function EmojiPickerPopup(_ref) {
+  var isOpen = _ref.isOpen,
+    targetRef = _ref.targetRef,
+    emojiProvider = _ref.emojiProvider,
+    onSelection = _ref.onSelection,
+    onClickOutside = _ref.onClickOutside,
+    onEscapeKeydown = _ref.onEscapeKeydown,
+    onUnmount = _ref.onUnmount,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  if (!isOpen || !targetRef.current || !emojiProvider) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Popup, {
+    target: targetRef.current,
+    fitHeight: 350,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onUnmount: onUnmount,
+    focusTrap: true,
+    zIndex: akEditorMenuZIndex
+  }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
+    emojiProvider: emojiProvider,
+    onSelection: onSelection,
+    handleClickOutside: onClickOutside,
+    handleEscapeKeydown: onEscapeKeydown
+  }));
+};

package/dist/esm/ui/toolbar-components/popups/TableSelectorPopupWrapper.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
+export var TableSelectorPopupWrapper = function TableSelectorPopupWrapper(_ref) {
+  var isOpen = _ref.isOpen,
+    targetRef = _ref.targetRef,
+    isOpenedByKeyboard = _ref.isOpenedByKeyboard,
+    onSelection = _ref.onSelection,
+    onClickOutside = _ref.onClickOutside,
+    onEscapeKeydown = _ref.onEscapeKeydown,
+    onUnmount = _ref.onUnmount,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  if (!isOpen || !targetRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TableSelectorPopup, {
+    allowOutsideSelection: true,
+    target: targetRef.current,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    handleClickOutside: onClickOutside,
+    handleEscapeKeydown: onEscapeKeydown,
+    isOpenedByKeyboard: isOpenedByKeyboard
+  });
+};

package/dist/esm/ui/toolbar-components/shared/constants.js

@@ -0,0 +1,12 @@
+export var POPUP_Z_INDEX = 'akEditorMenuZIndex';
+export var POPUP_DIMENSIONS = {
+  EMOJI_PICKER: {
+    fitHeight: 350,
+    fitWidth: 350,
+    offset: [0, 3]
+  }
+};
+export var FOCUS_DELAY = {
+  ANIMATION_FRAME: 'requestAnimationFrame',
+  MICROTASK: 'queueMicrotask'
+};

package/dist/esm/ui/toolbar-components/shared/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/toolbar-components.js

@@ -1,8 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER } from '@atlaskit/editor-common/toolbar';
+import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, INSERT_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
 import { EmojiButton } from './toolbar-components/EmojiButton';
 import { ImageButton } from './toolbar-components/ImageButton';
+import { InsertButton } from './toolbar-components/InsertButton';
 import { LayoutButton } from './toolbar-components/LayoutButton';
 import { MediaButton } from './toolbar-components/MediaButton';
 import { MentionButton } from './toolbar-components/MentionButton';
@@ -12,8 +13,42 @@ import { TaskListButton } from './toolbar-components/TaskListButton';
 export var getToolbarComponents = function getToolbarComponents(_ref) {
   var api = _ref.api,
     tableSelectorSupported = _ref.tableSelectorSupported,
-    toolbarShowPlusInsertOnly = _ref.toolbarShowPlusInsertOnly;
-  return _toConsumableArray(toolbarShowPlusInsertOnly ? [] : [{
+    toolbarShowPlusInsertOnly = _ref.toolbarShowPlusInsertOnly,
+    showElementBrowserLink = _ref.showElementBrowserLink,
+    onInsertBlockType = _ref.onInsertBlockType,
+    nativeStatusSupported = _ref.nativeStatusSupported,
+    horizontalRuleEnabled = _ref.horizontalRuleEnabled,
+    expandEnabled = _ref.expandEnabled,
+    insertMenuItems = _ref.insertMenuItems;
+  return _toConsumableArray(toolbarShowPlusInsertOnly ? [{
+    type: INSERT_GROUP.type,
+    key: INSERT_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+    }]
+  }, {
+    type: INSERT_BUTTON.type,
+    key: INSERT_BUTTON.key,
+    parents: [{
+      type: INSERT_GROUP.type,
+      key: INSERT_GROUP.key,
+      rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(InsertButton, {
+        api: api,
+        showElementBrowserLink: showElementBrowserLink,
+        tableSelectorSupported: tableSelectorSupported,
+        onInsertBlockType: onInsertBlockType,
+        nativeStatusSupported: nativeStatusSupported,
+        horizontalRuleEnabled: horizontalRuleEnabled,
+        expandEnabled: expandEnabled,
+        insertMenuItems: insertMenuItems
+      });
+    }
+  }] : [{
     type: TASK_LIST_GROUP.type,
     key: TASK_LIST_GROUP.key,
     parents: [{
@@ -155,5 +190,34 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
         tableSelectorSupported: tableSelectorSupported
       });
     }
+  }, {
+    type: INSERT_GROUP.type,
+    key: INSERT_GROUP.key,
+    parents: [{
+      type: INSERT_BLOCK_SECTION.type,
+      key: INSERT_BLOCK_SECTION.key,
+      rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+    }]
+  }, {
+    type: INSERT_BUTTON.type,
+    key: INSERT_BUTTON.key,
+    parents: [{
+      type: INSERT_GROUP.type,
+      key: INSERT_GROUP.key,
+      rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(InsertButton, {
+        api: api,
+        showElementBrowserLink: showElementBrowserLink,
+        tableSelectorSupported: tableSelectorSupported,
+        onInsertBlockType: onInsertBlockType,
+        nativeStatusSupported: nativeStatusSupported,
+        horizontalRuleEnabled: horizontalRuleEnabled,
+        expandEnabled: expandEnabled,
+        insertMenuItems: insertMenuItems,
+        numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
+      });
+    }
   }]);
 };

package/dist/types/ui/toolbar-components/EmojiButton.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InsertBlockPlugin } from '../../insertBlockPluginType';
-type EmojiButtonProps = {
-    api?: ExtractInjectionAPI<InsertBlockPlugin>;
-};
-export declare const EmojiButton: ({ api }: EmojiButtonProps) => React.JSX.Element | null;
-export {};
+import type { BaseToolbarButtonProps } from './shared/types';
+export declare const EmojiButton: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement }: BaseToolbarButtonProps) => React.JSX.Element | null;

package/dist/types/ui/toolbar-components/InsertButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ExtractInjectionAPI, Command } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { InsertBlockPlugin } from '../../insertBlockPluginType';
+type InsertButtonProps = {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    expandEnabled?: boolean;
+    horizontalRuleEnabled?: boolean;
+    insertMenuItems?: MenuItem[];
+    isFullPageAppearance?: boolean;
+    nativeStatusSupported?: boolean;
+    numberOfButtons?: number;
+    onInsertBlockType?: (name: string) => Command;
+    showElementBrowserLink?: boolean;
+    tableSelectorSupported?: boolean;
+};
+export declare const InsertButton: ({ api, showElementBrowserLink, isFullPageAppearance, tableSelectorSupported, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, numberOfButtons, onInsertBlockType, }: InsertButtonProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/toolbar-components/TableSizePicker.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InsertBlockPlugin } from '../../insertBlockPluginType';
-type TableSizePickerProps = {
-    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+import type { BaseToolbarButtonProps } from './shared/types';
+interface TableSizePickerProps extends BaseToolbarButtonProps {
     tableSelectorSupported?: boolean;
-};
+}
 export declare const TableSizePicker: ({ api, tableSelectorSupported }: TableSizePickerProps) => React.JSX.Element | null;
 export {};

package/dist/types/ui/toolbar-components/hooks/useEmojiPickerPopup.d.ts

@@ -0,0 +1,20 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EmojiId } from '@atlaskit/emoji/types';
+import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
+interface UseEmojiPickerPopupProps {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    buttonRef: React.RefObject<HTMLElement>;
+}
+export declare const useEmojiPickerPopup: ({ api, buttonRef }: UseEmojiPickerPopupProps) => {
+    handleSelectedEmoji: (emojiId: EmojiId) => true;
+    onPopupUnmount: () => void;
+    isOpen: boolean;
+    isOpenedByKeyboard: boolean;
+    toggle: (inputMethod?: import("@atlaskit/editor-common/types").TOOLBAR_MENU_TYPE | INPUT_METHOD) => void;
+    close: () => void;
+    handleEscapeKeydown: () => void;
+    handleClickOutside: (e: MouseEvent) => void;
+    handleKeyboardOpen: (event: React.KeyboardEvent) => void;
+};
+export {};

package/dist/types/ui/toolbar-components/hooks/useInsertButtonState.d.ts

@@ -0,0 +1,24 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { EmojiProvider } from '@atlaskit/emoji';
+import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
+import type { BlockMenuItem } from '../../ToolbarInsertBlock/create-items';
+interface UseInsertButtonStateProps {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    editorView?: EditorView;
+    expandEnabled?: boolean;
+    horizontalRuleEnabled?: boolean;
+    insertMenuItems?: MenuItem[];
+    nativeStatusSupported?: boolean;
+    numberOfButtons?: number;
+    showElementBrowserLink?: boolean;
+    tableSelectorSupported?: boolean;
+}
+export interface InsertButtonState {
+    dropdownItems: BlockMenuItem[];
+    emojiProvider?: EmojiProvider;
+    isTypeAheadAllowed?: boolean;
+}
+export declare const useInsertButtonState: ({ api, editorView, horizontalRuleEnabled, insertMenuItems, nativeStatusSupported, numberOfButtons, tableSelectorSupported, expandEnabled, showElementBrowserLink }: UseInsertButtonStateProps) => InsertButtonState;
+export {};

package/dist/types/ui/toolbar-components/hooks/usePopupManager.d.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from 'react';
+import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+interface PopupManagerConfig {
+    analytics?: {
+        onToggle?: (isOpen: boolean, inputMethod?: TOOLBAR_MENU_TYPE | INPUT_METHOD) => void;
+    };
+    focusTarget?: RefObject<HTMLElement>;
+    onClose?: () => void;
+    onOpen?: (inputMethod?: TOOLBAR_MENU_TYPE | INPUT_METHOD) => void;
+}
+export declare const usePopupManager: (config?: PopupManagerConfig) => {
+    isOpen: boolean;
+    isOpenedByKeyboard: boolean;
+    toggle: (inputMethod?: TOOLBAR_MENU_TYPE | INPUT_METHOD) => void;
+    close: () => void;
+    handleEscapeKeydown: () => void;
+    handleClickOutside: (e: MouseEvent) => void;
+    handleKeyboardOpen: (event: React.KeyboardEvent) => void;
+};
+export {};

package/dist/types/ui/toolbar-components/hooks/useTableSelectorPopup.d.ts

@@ -0,0 +1,19 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
+interface UseTableSelectorPopupProps {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    buttonRef: React.RefObject<HTMLElement>;
+}
+export declare const useTableSelectorPopup: ({ api, buttonRef }: UseTableSelectorPopupProps) => {
+    handleSelectedTableSize: (rowsCount: number, colsCount: number) => void;
+    onPopupUnmount: () => void;
+    isOpen: boolean;
+    isOpenedByKeyboard: boolean;
+    toggle: (inputMethod?: import("@atlaskit/editor-common/types").TOOLBAR_MENU_TYPE | INPUT_METHOD) => void;
+    close: () => void;
+    handleEscapeKeydown: () => void;
+    handleClickOutside: (e: MouseEvent) => void;
+    handleKeyboardOpen: (event: React.KeyboardEvent) => void;
+};
+export {};

package/dist/types/ui/toolbar-components/popups/EmojiPickerPopup.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { EmojiId, EmojiProvider } from '@atlaskit/emoji/types';
+interface EmojiPickerPopupProps {
+    emojiProvider?: Promise<EmojiProvider>;
+    isOpen: boolean;
+    onClickOutside: (e: MouseEvent) => void;
+    onEscapeKeydown: () => void;
+    onSelection: (emojiId: EmojiId) => boolean;
+    onUnmount: () => void;
+    popupsBoundariesElement?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    targetRef: React.RefObject<HTMLElement>;
+}
+export declare const EmojiPickerPopup: ({ isOpen, targetRef, emojiProvider, onSelection, onClickOutside, onEscapeKeydown, onUnmount, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: EmojiPickerPopupProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/toolbar-components/popups/TableSelectorPopupWrapper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TableSelectorPopupWrapperProps {
+    isOpen: boolean;
+    isOpenedByKeyboard: boolean;
+    onClickOutside: (e: MouseEvent) => void;
+    onEscapeKeydown: () => void;
+    onSelection: (rowsCount: number, colsCount: number) => void;
+    onUnmount: () => void;
+    popupsBoundariesElement?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    targetRef: React.RefObject<HTMLElement>;
+}
+export declare const TableSelectorPopupWrapper: ({ isOpen, targetRef, isOpenedByKeyboard, onSelection, onClickOutside, onEscapeKeydown, onUnmount, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: TableSelectorPopupWrapperProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/toolbar-components/shared/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const POPUP_Z_INDEX = "akEditorMenuZIndex";
+export declare const POPUP_DIMENSIONS: {
+    readonly EMOJI_PICKER: {
+        readonly fitHeight: 350;
+        readonly fitWidth: 350;
+        readonly offset: [number, number];
+    };
+};
+export declare const FOCUS_DELAY: {
+    readonly ANIMATION_FRAME: "requestAnimationFrame";
+    readonly MICROTASK: "queueMicrotask";
+};

package/dist/types/ui/toolbar-components/shared/types.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
+export interface BaseToolbarButtonProps {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    popupsBoundariesElement?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+}

package/dist/types/ui/toolbar-components.d.ts

@@ -1,10 +1,17 @@
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { InsertBlockPlugin } from '../insertBlockPluginType';
 type GetToolbarComponentsProps = {
     api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    expandEnabled?: boolean;
+    horizontalRuleEnabled?: boolean;
+    insertMenuItems?: MenuItem[];
+    nativeStatusSupported?: boolean;
+    onInsertBlockType?: (name: string) => Command;
+    showElementBrowserLink?: boolean;
     tableSelectorSupported?: boolean;
     toolbarShowPlusInsertOnly?: boolean;
 };
-export declare const getToolbarComponents: ({ api, tableSelectorSupported, toolbarShowPlusInsertOnly, }: GetToolbarComponentsProps) => RegisterComponent[];
+export declare const getToolbarComponents: ({ api, tableSelectorSupported, toolbarShowPlusInsertOnly, showElementBrowserLink, onInsertBlockType, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, }: GetToolbarComponentsProps) => RegisterComponent[];
 export {};

package/dist/types-ts4.5/ui/toolbar-components/EmojiButton.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InsertBlockPlugin } from '../../insertBlockPluginType';
-type EmojiButtonProps = {
-    api?: ExtractInjectionAPI<InsertBlockPlugin>;
-};
-export declare const EmojiButton: ({ api }: EmojiButtonProps) => React.JSX.Element | null;
-export {};
+import type { BaseToolbarButtonProps } from './shared/types';
+export declare const EmojiButton: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement }: BaseToolbarButtonProps) => React.JSX.Element | null;

package/dist/types-ts4.5/ui/toolbar-components/InsertButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ExtractInjectionAPI, Command } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { InsertBlockPlugin } from '../../insertBlockPluginType';
+type InsertButtonProps = {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    expandEnabled?: boolean;
+    horizontalRuleEnabled?: boolean;
+    insertMenuItems?: MenuItem[];
+    isFullPageAppearance?: boolean;
+    nativeStatusSupported?: boolean;
+    numberOfButtons?: number;
+    onInsertBlockType?: (name: string) => Command;
+    showElementBrowserLink?: boolean;
+    tableSelectorSupported?: boolean;
+};
+export declare const InsertButton: ({ api, showElementBrowserLink, isFullPageAppearance, tableSelectorSupported, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, numberOfButtons, onInsertBlockType, }: InsertButtonProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/ui/toolbar-components/TableSizePicker.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { InsertBlockPlugin } from '../../insertBlockPluginType';
-type TableSizePickerProps = {
-    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+import type { BaseToolbarButtonProps } from './shared/types';
+interface TableSizePickerProps extends BaseToolbarButtonProps {
     tableSelectorSupported?: boolean;
-};
+}
 export declare const TableSizePicker: ({ api, tableSelectorSupported }: TableSizePickerProps) => React.JSX.Element | null;
 export {};

package/dist/types-ts4.5/ui/toolbar-components/hooks/useEmojiPickerPopup.d.ts

@@ -0,0 +1,20 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EmojiId } from '@atlaskit/emoji/types';
+import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
+interface UseEmojiPickerPopupProps {
+    api?: ExtractInjectionAPI<InsertBlockPlugin>;
+    buttonRef: React.RefObject<HTMLElement>;
+}
+export declare const useEmojiPickerPopup: ({ api, buttonRef }: UseEmojiPickerPopupProps) => {
+    handleSelectedEmoji: (emojiId: EmojiId) => true;
+    onPopupUnmount: () => void;
+    isOpen: boolean;
+    isOpenedByKeyboard: boolean;
+    toggle: (inputMethod?: import("@atlaskit/editor-common/types").TOOLBAR_MENU_TYPE | INPUT_METHOD) => void;
+    close: () => void;
+    handleEscapeKeydown: () => void;
+    handleClickOutside: (e: MouseEvent) => void;
+    handleKeyboardOpen: (event: React.KeyboardEvent) => void;
+};
+export {};