@lumel/mention 5.2.4 → 5.2.5

package/lib/MentionSuggestions/MentionSuggestions.d.ts

@@ -1,7 +1,7 @@
 import { AriaProps, EditorCommand } from '@draft-js-plugins/editor';
 import { DraftHandleValue, EditorState, SelectionState } from 'draft-js';
 import PropTypes from 'prop-types';
-import { Component, ComponentType, KeyboardEvent, ReactElement, RefAttributes } from 'react';
+import React, { Component, ComponentType, KeyboardEvent, ReactElement, RefAttributes } from 'react';
 import { MentionData, MentionPluginStore, PopperOptions } from '..';
 import { MentionPluginTheme } from '../theme';
 import { PositionSuggestionsFn } from '../utils/positionSuggestions';
@@ -31,6 +31,8 @@ export interface MentionSuggestionsPubProps {
     entryComponent?: ComponentType<EntryComponentProps>;
     popoverContainer?: ComponentType<PopoverProps>;
     renderEmptyPopup?: boolean;
+    handleScroll?: React.UIEventHandler<HTMLElement>;
+    isMentionLoading?: boolean;
 }
 export interface MentionSuggestionsProps extends MentionSuggestionsPubProps {
     callbacks: MentionSuggestionCallbacks;
@@ -43,6 +45,16 @@ export interface MentionSuggestionsProps extends MentionSuggestionsPubProps {
     entityMutability: 'SEGMENTED' | 'IMMUTABLE' | 'MUTABLE';
     popperOptions?: PopperOptions;
 }
+interface RenderSuggestionsProps {
+    suggestions: MentionData[];
+    focusedOptionIndex: number;
+    onMentionSelect: (mention: MentionData | null) => void;
+    onMentionFocus: (index: number) => void;
+    theme: MentionPluginTheme;
+    lastSearchValue?: string;
+    entryComponent?: ComponentType<EntryComponentProps>;
+    isMentionLoading?: boolean;
+}
 export declare class MentionSuggestions extends Component<MentionSuggestionsProps> {
     static propTypes: {
         open: PropTypes.Validator<boolean>;
@@ -51,6 +63,8 @@ export declare class MentionSuggestions extends Component<MentionSuggestionsProp
         entryComponent: PropTypes.Requireable<(...args: any[]) => any>;
         onAddMention: PropTypes.Requireable<(...args: any[]) => any>;
         suggestions: PropTypes.Validator<any[]>;
+        handleScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        isMentionLoading: PropTypes.Requireable<boolean>;
     };
     state: {
         focusedOptionIndex: number;
@@ -76,6 +90,7 @@ export declare class MentionSuggestions extends Component<MentionSuggestionsProp
     openDropdown: () => void;
     closeDropdown: () => void;
     private getMentionKey;
+    renderSuggestionsList: (props: RenderSuggestionsProps) => JSX.Element;
     render(): ReactElement | null;
 }
 export default MentionSuggestions;

package/lib/MentionSuggestions/Popover.d.ts

@@ -1,10 +1,11 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { MentionPluginStore, PopperOptions } from '..';
 import { MentionPluginTheme } from '../theme';
 export interface PopoverProps {
     store: MentionPluginStore;
     children: ReactNode;
-    popperOptions?: PopperOptions;
     theme: MentionPluginTheme;
+    popperOptions?: PopperOptions;
+    handleScroll?: React.UIEventHandler<HTMLElement>;
 }
-export default function Popover({ store, children, theme, popperOptions, }: PopoverProps): ReactElement;
+export default function Popover({ store, children, theme, popperOptions, handleScroll, }: PopoverProps): ReactElement;

package/lib/index.cjs.js

@@ -433,7 +433,8 @@ function Popover(_ref) {
     _ref$popperOptions = _ref.popperOptions,
     popperOptions = _ref$popperOptions === void 0 ? {
       placement: 'bottom-start'
-    } : _ref$popperOptions;
+    } : _ref$popperOptions,
+    handleScroll = _ref.handleScroll;
   var _useState = React.useState(function () {
       return clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup);
     }),
@@ -455,16 +456,17 @@ function Popover(_ref) {
     style: styles.popper
   }, attributes.popper, {
     className: className,
-    role: "listbox"
+    role: "listbox",
+    onScroll: handleScroll
   }), children);
 }
 
-var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix"];
+var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix", "handleScroll", "isMentionLoading"];
 var MentionSuggestions = /*#__PURE__*/function (_Component) {
   _inheritsLoose(MentionSuggestions, _Component);
-  function MentionSuggestions(props) {
+  function MentionSuggestions(_props) {
     var _this;
-    _this = _Component.call(this, props) || this;
+    _this = _Component.call(this, _props) || this;
     _this.state = {
       focusedOptionIndex: 0
     };
@@ -623,6 +625,37 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
       _this.props.ariaProps.ariaOwneeID = undefined;
       _this.props.onOpenChange(false);
     };
+    _this.renderSuggestionsList = function (props) {
+      var suggestions = props.suggestions,
+        focusedOptionIndex = props.focusedOptionIndex,
+        onMentionSelect = props.onMentionSelect,
+        onMentionFocus = props.onMentionFocus,
+        theme = props.theme,
+        lastSearchValue = props.lastSearchValue,
+        entryComponent = props.entryComponent,
+        isMentionLoading = props.isMentionLoading;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.map(function (mention, index) {
+        return /*#__PURE__*/React.createElement(Entry, {
+          key: _this.getMentionKey(mention, index),
+          onMentionSelect: onMentionSelect,
+          onMentionFocus: onMentionFocus,
+          isFocused: focusedOptionIndex === index,
+          mention: mention,
+          index: index,
+          id: "mention-option-" + index,
+          theme: theme,
+          searchValue: lastSearchValue,
+          entryComponent: entryComponent || DefaultEntryComponent
+        });
+      }), isMentionLoading && /*#__PURE__*/React.createElement("div", {
+        className: "list-title",
+        style: {
+          padding: '8px 8px',
+          marginTop: '8px',
+          marginLeft: '40px'
+        }
+      }, "Loading..."));
+    };
     _this.props.callbacks.onChange = _this.onEditorStateChange;
     return _this;
   }
@@ -685,17 +718,19 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
       _this$props.onOpenChange;
       _this$props.onAddMention;
       _this$props.onSearchChange;
-      _this$props.suggestions;
+      var suggestions = _this$props.suggestions;
       _this$props.ariaProps;
       _this$props.callbacks;
       var _this$props$theme = _this$props.theme,
-      theme = _this$props$theme === void 0 ? {} : _this$props$theme;
-      _this$props.store;
+      theme = _this$props$theme === void 0 ? {} : _this$props$theme,
+      store = _this$props.store;
       _this$props.entityMutability;
       var positionSuggestions = _this$props.positionSuggestions;
       _this$props.mentionTriggers;
       _this$props.mentionPrefix;
-      var elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      var handleScroll = _this$props.handleScroll,
+      isMentionLoading = _this$props.isMentionLoading,
+      elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     if (popoverComponent || positionSuggestions) {
       warning('The properties `popoverComponent` and `positionSuggestions` are deprecated and will be removed in @draft-js-plugins/mentions 6.0 . Use `popperOptions` instead');
       return /*#__PURE__*/React.cloneElement(popoverComponent || /*#__PURE__*/React.createElement("div", null), _extends({}, elementProps, {
@@ -704,43 +739,41 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
         id: "mentions-list-" + this.key,
         ref: function ref(element) {
           _this2.popover = element;
-        }
-      }), this.props.suggestions.map(function (mention, index) {
-        return /*#__PURE__*/React.createElement(Entry, {
-          key: _this2.getMentionKey(mention, index),
-          onMentionSelect: _this2.onMentionSelect,
-          onMentionFocus: _this2.onMentionFocus,
-          isFocused: _this2.state.focusedOptionIndex === index,
-          mention: mention,
-          index: index,
-          id: "mention-option-" + _this2.key + "-" + index,
-          theme: theme,
-          searchValue: _this2.lastSearchValue,
-          entryComponent: entryComponent || DefaultEntryComponent
-        });
-      }));
+        },
+        handleScroll: handleScroll
+      }), /*#__PURE__*/React.createElement("div", {
+        id: 'mention-suggestion-popoverComponent'
+      }, this.renderSuggestionsList({
+        suggestions: suggestions,
+        focusedOptionIndex: this.state.focusedOptionIndex,
+        onMentionSelect: this.onMentionSelect,
+        onMentionFocus: this.onMentionFocus,
+        theme: theme,
+        lastSearchValue: this.lastSearchValue,
+        entryComponent: entryComponent,
+        isMentionLoading: isMentionLoading
+      })));
     }
-    if (!this.props.renderEmptyPopup && this.props.suggestions.length === 0) {
+    if (!this.props.renderEmptyPopup && suggestions.length === 0 && !isMentionLoading) {
       return null;
     }
     return /*#__PURE__*/React.createElement(PopoverContainer, {
-      store: this.props.store,
+      store: store,
       popperOptions: popperOptions,
-      theme: theme
-    }, this.props.suggestions.map(function (mention, index) {
-      return /*#__PURE__*/React.createElement(Entry, {
-        key: _this2.getMentionKey(mention, index),
-        onMentionSelect: _this2.onMentionSelect,
-        onMentionFocus: _this2.onMentionFocus,
-        isFocused: _this2.state.focusedOptionIndex === index,
-        mention: mention,
-        index: index,
-        id: "mention-option-" + _this2.key + "-" + index,
-        theme: theme,
-        searchValue: _this2.lastSearchValue,
-        entryComponent: entryComponent || DefaultEntryComponent
-      });
-    }));
+      theme: theme,
+      handleScroll: handleScroll
+    }, /*#__PURE__*/React.createElement("div", {
+      id: 'mention-suggestion-PopoverContainer'
+    }, this.renderSuggestionsList({
+      suggestions: suggestions,
+      focusedOptionIndex: this.state.focusedOptionIndex,
+      onMentionSelect: this.onMentionSelect,
+      onMentionFocus: this.onMentionFocus,
+      theme: theme,
+      lastSearchValue: this.lastSearchValue,
+      entryComponent: entryComponent,
+      isMentionLoading: isMentionLoading
+    })));
   };
   return MentionSuggestions;
 }(React.Component);
@@ -750,7 +783,9 @@ MentionSuggestions.propTypes = {
   entityMutability: PropTypes.oneOf(['SEGMENTED', 'IMMUTABLE', 'MUTABLE']),
   entryComponent: PropTypes.func,
   onAddMention: PropTypes.func,
-  suggestions: PropTypes.array.isRequired
+  suggestions: PropTypes.array.isRequired,
+  handleScroll: PropTypes.func,
+  isMentionLoading: PropTypes.bool
 };
 
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

package/lib/index.esm.js

@@ -429,7 +429,8 @@ function Popover(_ref) {
     _ref$popperOptions = _ref.popperOptions,
     popperOptions = _ref$popperOptions === void 0 ? {
       placement: 'bottom-start'
-    } : _ref$popperOptions;
+    } : _ref$popperOptions,
+    handleScroll = _ref.handleScroll;
   var _useState = useState(function () {
       return clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup);
     }),
@@ -451,16 +452,17 @@ function Popover(_ref) {
     style: styles.popper
   }, attributes.popper, {
     className: className,
-    role: "listbox"
+    role: "listbox",
+    onScroll: handleScroll
   }), children);
 }
 
-var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix"];
+var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix", "handleScroll", "isMentionLoading"];
 var MentionSuggestions = /*#__PURE__*/function (_Component) {
   _inheritsLoose(MentionSuggestions, _Component);
-  function MentionSuggestions(props) {
+  function MentionSuggestions(_props) {
     var _this;
-    _this = _Component.call(this, props) || this;
+    _this = _Component.call(this, _props) || this;
     _this.state = {
       focusedOptionIndex: 0
     };
@@ -619,6 +621,37 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
       _this.props.ariaProps.ariaOwneeID = undefined;
       _this.props.onOpenChange(false);
     };
+    _this.renderSuggestionsList = function (props) {
+      var suggestions = props.suggestions,
+        focusedOptionIndex = props.focusedOptionIndex,
+        onMentionSelect = props.onMentionSelect,
+        onMentionFocus = props.onMentionFocus,
+        theme = props.theme,
+        lastSearchValue = props.lastSearchValue,
+        entryComponent = props.entryComponent,
+        isMentionLoading = props.isMentionLoading;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.map(function (mention, index) {
+        return /*#__PURE__*/React.createElement(Entry, {
+          key: _this.getMentionKey(mention, index),
+          onMentionSelect: onMentionSelect,
+          onMentionFocus: onMentionFocus,
+          isFocused: focusedOptionIndex === index,
+          mention: mention,
+          index: index,
+          id: "mention-option-" + index,
+          theme: theme,
+          searchValue: lastSearchValue,
+          entryComponent: entryComponent || DefaultEntryComponent
+        });
+      }), isMentionLoading && /*#__PURE__*/React.createElement("div", {
+        className: "list-title",
+        style: {
+          padding: '8px 8px',
+          marginTop: '8px',
+          marginLeft: '40px'
+        }
+      }, "Loading..."));
+    };
     _this.props.callbacks.onChange = _this.onEditorStateChange;
     return _this;
   }
@@ -681,17 +714,19 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
       _this$props.onOpenChange;
       _this$props.onAddMention;
       _this$props.onSearchChange;
-      _this$props.suggestions;
+      var suggestions = _this$props.suggestions;
       _this$props.ariaProps;
       _this$props.callbacks;
       var _this$props$theme = _this$props.theme,
-      theme = _this$props$theme === void 0 ? {} : _this$props$theme;
-      _this$props.store;
+      theme = _this$props$theme === void 0 ? {} : _this$props$theme,
+      store = _this$props.store;
       _this$props.entityMutability;
       var positionSuggestions = _this$props.positionSuggestions;
       _this$props.mentionTriggers;
       _this$props.mentionPrefix;
-      var elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      var handleScroll = _this$props.handleScroll,
+      isMentionLoading = _this$props.isMentionLoading,
+      elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     if (popoverComponent || positionSuggestions) {
       warning('The properties `popoverComponent` and `positionSuggestions` are deprecated and will be removed in @draft-js-plugins/mentions 6.0 . Use `popperOptions` instead');
       return /*#__PURE__*/React.cloneElement(popoverComponent || /*#__PURE__*/React.createElement("div", null), _extends({}, elementProps, {
@@ -700,43 +735,41 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
         id: "mentions-list-" + this.key,
         ref: function ref(element) {
           _this2.popover = element;
-        }
-      }), this.props.suggestions.map(function (mention, index) {
-        return /*#__PURE__*/React.createElement(Entry, {
-          key: _this2.getMentionKey(mention, index),
-          onMentionSelect: _this2.onMentionSelect,
-          onMentionFocus: _this2.onMentionFocus,
-          isFocused: _this2.state.focusedOptionIndex === index,
-          mention: mention,
-          index: index,
-          id: "mention-option-" + _this2.key + "-" + index,
-          theme: theme,
-          searchValue: _this2.lastSearchValue,
-          entryComponent: entryComponent || DefaultEntryComponent
-        });
-      }));
+        },
+        handleScroll: handleScroll
+      }), /*#__PURE__*/React.createElement("div", {
+        id: 'mention-suggestion-popoverComponent'
+      }, this.renderSuggestionsList({
+        suggestions: suggestions,
+        focusedOptionIndex: this.state.focusedOptionIndex,
+        onMentionSelect: this.onMentionSelect,
+        onMentionFocus: this.onMentionFocus,
+        theme: theme,
+        lastSearchValue: this.lastSearchValue,
+        entryComponent: entryComponent,
+        isMentionLoading: isMentionLoading
+      })));
     }
-    if (!this.props.renderEmptyPopup && this.props.suggestions.length === 0) {
+    if (!this.props.renderEmptyPopup && suggestions.length === 0 && !isMentionLoading) {
       return null;
     }
     return /*#__PURE__*/React.createElement(PopoverContainer, {
-      store: this.props.store,
+      store: store,
       popperOptions: popperOptions,
-      theme: theme
-    }, this.props.suggestions.map(function (mention, index) {
-      return /*#__PURE__*/React.createElement(Entry, {
-        key: _this2.getMentionKey(mention, index),
-        onMentionSelect: _this2.onMentionSelect,
-        onMentionFocus: _this2.onMentionFocus,
-        isFocused: _this2.state.focusedOptionIndex === index,
-        mention: mention,
-        index: index,
-        id: "mention-option-" + _this2.key + "-" + index,
-        theme: theme,
-        searchValue: _this2.lastSearchValue,
-        entryComponent: entryComponent || DefaultEntryComponent
-      });
-    }));
+      theme: theme,
+      handleScroll: handleScroll
+    }, /*#__PURE__*/React.createElement("div", {
+      id: 'mention-suggestion-PopoverContainer'
+    }, this.renderSuggestionsList({
+      suggestions: suggestions,
+      focusedOptionIndex: this.state.focusedOptionIndex,
+      onMentionSelect: this.onMentionSelect,
+      onMentionFocus: this.onMentionFocus,
+      theme: theme,
+      lastSearchValue: this.lastSearchValue,
+      entryComponent: entryComponent,
+      isMentionLoading: isMentionLoading
+    })));
   };
   return MentionSuggestions;
 }(Component);
@@ -746,7 +779,9 @@ MentionSuggestions.propTypes = {
   entityMutability: PropTypes.oneOf(['SEGMENTED', 'IMMUTABLE', 'MUTABLE']),
   entryComponent: PropTypes.func,
   onAddMention: PropTypes.func,
-  suggestions: PropTypes.array.isRequired
+  suggestions: PropTypes.array.isRequired,
+  handleScroll: PropTypes.func,
+  isMentionLoading: PropTypes.bool
 };
 
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumel/mention",
-  "version": "5.2.4",
+  "version": "5.2.5",
   "sideEffects": [
     "*.css"
   ],