@yuntijs/ui 1.0.0-beta.8 → 1.0.0-beta.80

package/es/LogViewer/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DivProps } from 'react-layout-kit';
+import type { LazyLogProps } from './types';
+export interface LogViewerProps extends Omit<LazyLogProps, 'iconFilterLines' | 'iconFindNext' | 'iconFindPrevious' | 'loadingComponent'>, Pick<DivProps, 'className' | 'id' | 'style'> {
+    /**
+     * Timed refresh, in ms, only takes effect when url is specified and not websocket
+     */
+    refreshInterval?: number;
+}
+export declare const LogViewer: React.FC<LogViewerProps>;

package/es/LogViewer/index.js

@@ -0,0 +1,141 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "id", "style", "height", "onScroll", "url", "websocket", "refreshInterval", "onLoad", "onError"];
+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 { Icon } from '@lobehub/ui';
+import { LazyLog, ScrollFollow } from '@melloware/react-logviewer';
+import { ArrowDown, ArrowUp, LoaderCircle, TextSearch } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var LogViewer = function LogViewer(_ref) {
+  var className = _ref.className,
+    id = _ref.id,
+    style = _ref.style,
+    height = _ref.height,
+    _onScroll = _ref.onScroll,
+    urlFromProps = _ref.url,
+    websocket = _ref.websocket,
+    refreshInterval = _ref.refreshInterval,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    urlHash = _useState2[0],
+    setUrlHash = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    followAfterLoaded = _useState6[0],
+    setFollowAfterLoaded = _useState6[1];
+  var setLoadingTimeout = useRef();
+  var setFollowAfterLoadedTimeout = useRef();
+  useEffect(function () {
+    return function () {
+      clearTimeout(setLoadingTimeout.current);
+      clearTimeout(setFollowAfterLoadedTimeout.current);
+    };
+  }, []);
+  useEffect(function () {
+    var intervalTimeout;
+    if (urlFromProps && !websocket && refreshInterval) {
+      intervalTimeout = setInterval(function () {
+        setUrlHash(function (hash) {
+          return hash + 1;
+        });
+      }, refreshInterval);
+    }
+    return function () {
+      clearInterval(intervalTimeout);
+    };
+  }, [refreshInterval, urlFromProps, websocket]);
+  var url = useMemo(function () {
+    if (!urlFromProps) {
+      return urlFromProps;
+    }
+    // workaround for onLoad exec twice
+    setLoadingTimeout.current = setTimeout(function () {
+      setLoading(true);
+      setLoadingTimeout.current = undefined;
+    }, 50);
+    return "".concat(urlFromProps, "#").concat(urlHash);
+  }, [urlFromProps, urlHash]);
+  var handleOnLoad = useCallback(function () {
+    // if has log line clear setLoading timeout
+    if (document.querySelector('.react-lazylog .log-line')) {
+      clearTimeout(setLoadingTimeout.current);
+    }
+    setLoading(false);
+
+    // scroll to bottom
+    setFollowAfterLoaded(true);
+    setFollowAfterLoadedTimeout.current = setTimeout(function () {
+      return setFollowAfterLoaded(false);
+    }, 100);
+    onLoad === null || onLoad === void 0 || onLoad();
+  }, [onLoad]);
+  var handleOnError = useCallback(function (error) {
+    setLoading(false);
+    clearTimeout(setLoadingTimeout.current);
+    onError === null || onError === void 0 || onError(error);
+  }, [onError]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(styles.root, className),
+    id: id,
+    style: _objectSpread({
+      height: height
+    }, style),
+    children: [/*#__PURE__*/_jsx(ScrollFollow, {
+      render: function render(_ref2) {
+        var follow = _ref2.follow,
+          onFollowScroll = _ref2.onScroll;
+        return /*#__PURE__*/_jsx(LazyLog, _objectSpread(_objectSpread({
+          url: url,
+          websocket: websocket
+        }, props), {}, {
+          follow: followAfterLoaded || follow,
+          height: height,
+          iconFilterLines: /*#__PURE__*/_jsx(Icon, {
+            className: styles.searchBarIcon,
+            icon: TextSearch
+          }),
+          iconFindNext: /*#__PURE__*/_jsx(Icon, {
+            className: styles.searchBarIcon,
+            icon: ArrowDown
+          }),
+          iconFindPrevious: /*#__PURE__*/_jsx(Icon, {
+            className: styles.searchBarIcon,
+            icon: ArrowUp
+          }),
+          onError: handleOnError,
+          onLoad: handleOnLoad,
+          onScroll: function onScroll(args) {
+            onFollowScroll(args);
+            _onScroll === null || _onScroll === void 0 || _onScroll(args);
+          }
+        }));
+      },
+      startFollowing: true
+    }), loading && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.loaderText,
+        children: "loading ..."
+      }), /*#__PURE__*/_jsx(Icon, {
+        className: styles.loaderIcon,
+        icon: LoaderCircle,
+        spin: true
+      })]
+    })]
+  });
+};

package/es/LogViewer/style.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    root: import("antd-style").SerializedStyles;
+    searchBarIcon: import("antd-style").SerializedStyles;
+    loaderText: import("antd-style").SerializedStyles;
+    loaderIcon: import("antd-style").SerializedStyles;
+}>;

package/es/LogViewer/style.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  var bgColor = '#222222';
+  return {
+    root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        background-color: ", ";\n        border-radius: ", "px;\n\n        .react-lazylog-searchbar {\n          margin-bottom: ", "px;\n          padding: ", "px;\n\n          background-color: ", ";\n          border-bottom: 1px solid #2d2d2d;\n          border-top-left-radius: ", "px;\n          border-top-right-radius: ", "px;\n          & > input {\n            border-radius: ", "px;\n          }\n          & > button {\n            cursor: pointer;\n            padding: 2px 6px;\n            border-radius: ", "px;\n          }\n          &-up-arrow {\n            margin-right: 0;\n          }\n        }\n        .react-lazylog {\n          scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\n          scrollbar-width: auto;\n          background-color: ", ";\n          border-radius: ", "px;\n\n          .log-number {\n            margin-right: 0;\n          }\n          .log-content {\n            margin-left: 15px;\n            font-family: ", ";\n          }\n        }\n      "])), bgColor, token.borderRadiusLG, token.marginXXS, token.paddingXS, bgColor, token.borderRadiusLG, token.borderRadiusLG, token.borderRadius, token.borderRadius, bgColor, token.borderRadiusLG, token.fontFamilyCode),
+    searchBarIcon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 16px;\n      "]))),
+    loaderText: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 44px;\n        left: 15px;\n\n        font-family: ", ";\n        font-size: 12px;\n        color: #fff;\n      "])), token.fontFamilyCode),
+    loaderIcon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", "px;\n        bottom: ", "px;\n\n        font-size: 18px;\n        color: #999;\n      "])), token.marginSM, token.marginSM)
+  };
+}, {
+  hashPriority: 'low'
+});

package/es/LogViewer/types.d.ts

@@ -0,0 +1,235 @@
+/// <reference types="react" />
+export interface WebsocketOptions {
+    /**
+     * Callback when the socket is opened
+     */
+    onOpen?: ((e: Event, socket: WebSocket) => void) | undefined;
+    /**
+     * Callback when the socket is closed
+     */
+    onClose?: ((e: CloseEvent) => void) | undefined;
+    /**
+     * Callback when the socket has an error
+     */
+    onError?: ((e: Event) => void) | undefined;
+    /**
+     * Callback allback which formats the websocket data stream.
+     */
+    formatMessage?: ((message: any) => string) | undefined;
+    /**
+     * Set to true, to reconnect the WebSocket automatically.
+     */
+    reconnect?: boolean;
+    /**
+     * Set the time to wait between reconnects in seconds.
+     * Default is 1s
+     */
+    reconnectWait?: number;
+}
+export interface LineNumberClickEvent {
+    lineNumber: number;
+    highlightRange?: Immutable.Seq.Indexed<number>;
+}
+export interface LazyLogProps {
+    /**
+     * Flag to enable/disable case insensitive search
+     */
+    caseInsensitive?: boolean;
+    /**
+     * Optional custom inline style to attach to element which contains
+     * the interior scrolling container.
+     */
+    containerStyle?: React.CSSProperties;
+    /**
+     * If true, capture system hotkeys for searching the page (Cmd-F, Ctrl-F,
+     * etc.)
+     */
+    enableHotKeys?: boolean;
+    /**
+     * Enable the line gutters to be displayed. Default is false
+     */
+    enableGutters?: boolean;
+    /**
+     * Enable the line numbers to be displayed. Default is true.
+     */
+    enableLineNumbers?: boolean;
+    /**
+     * Enable hyperlinks to be discovered in log text and made clickable links. Default is false.
+     */
+    enableLinks?: boolean;
+    /**
+     * Enable the search feature.
+     */
+    enableSearch?: boolean;
+    /**
+     * If true, search like a browser search - enter jumps to the next line
+     * with the searched term, shift + enter goes backwards.
+     * Also adds up and down arrows to search bar to jump
+     * to the next and previous result.
+     * If false, enter toggles the filter instead.
+     * Defaults to true.
+     */
+    enableSearchNavigation?: boolean;
+    /**
+     * Enable the ability to select multiple lines using shift + click.
+     * Defaults to true.
+     */
+    enableMultilineHighlight?: boolean;
+    /**
+     * Number of extra lines to show at the bottom of the log.
+     * Set this to 1 so that Linux users can see the last line
+     * of the log output.
+     */
+    extraLines?: number;
+    /**
+     * Options object which will be passed through to the `fetch` request.
+     * Defaults to `{ credentials: 'omit' }`.
+     */
+    fetchOptions?: RequestInit;
+    /**
+     * Scroll to the end of the component after each update to the content.
+     * Cannot be used in combination with `scrollToLine`.
+     */
+    follow?: boolean;
+    /**
+     * Execute a function against each string part of a line,
+     * returning a new line part. Is passed a single argument which is
+     * the string part to manipulate, should return a new string
+     * with the manipulation completed.
+     */
+    formatPart?: (text: string) => React.ReactNode;
+    /**
+     * The Line Gutter component
+     */
+    gutter?: React.ReactNode[];
+    /**
+     * Set the height in pixels for the component.
+     * Defaults to `'auto'` if unspecified. When the `height` is `'auto'`,
+     * the component will expand vertically to fill its container.
+     */
+    height?: string | number;
+    /**
+     * Line number (e.g. `highlight={10}`) or line number range to highlight
+     * inclusively (e.g. `highlight={[5, 10]}` highlights lines 5-10).
+     * This is 1-indexed, i.e. line numbers start at `1`.
+     */
+    highlight?: number | number[];
+    /**
+     * Specify an additional className to append to highlighted lines.
+     */
+    highlightLineClassName?: string;
+    /**
+     * Icon for the Filter Lines button in the Search Bar. Defaults to FilterLineIcon SVG.
+     */
+    iconFilterLines?: React.ReactNode;
+    /**
+     * Icon for the Find Next button in the Search Bar. Defaults to ArrowDownIcon SVG.
+     */
+    iconFindNext?: React.ReactNode;
+    /**
+     * Icon for the Find Previous button in the Search Bar. Defaults to ArrowUpIcon SVG.
+     */
+    iconFindPrevious?: React.ReactNode;
+    /**
+     * Specify an additional className to append to lines.
+     */
+    lineClassName?: string;
+    /**
+     * Specify an alternate component to use when loading.
+     */
+    loadingComponent?: React.ReactNode | ((props: any) => React.ReactNode);
+    /**
+     * Execute a function if the provided `url` has encountered an error
+     * during loading.
+     */
+    onError?: (error: any) => any;
+    /**
+     * Execute a function when the highlighted range has changed.
+     * Is passed a single argument which is an `Immutable.Range`
+     * of the highlighted line numbers.
+     */
+    onHighlight?: (range: Immutable.Seq.Indexed<number>) => any;
+    /**
+     * Execute a function if/when the provided `url` has completed loading.
+     */
+    onLoad?: () => any;
+    /**
+     * Additional function called when a line number is clicked.
+     * On click, the line will always be highlighted.
+     * This function is to provide additional actions.
+     * Receives an object with lineNumber and highlightRange.
+     * Defaults to null.
+     */
+    onLineNumberClick?: (event: LineNumberClickEvent) => any;
+    /**
+     * Callback to invoke on click of line contents.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onLineContentClick?(event: React.MouseEvent<HTMLSpanElement>): void;
+    /**
+     * Callback to invoke on user scroll. Args matches the ScrollFollow onScroll callback.
+     * @param args
+     */
+    onScroll?(args: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }): void;
+    /**
+     * Number of rows to render above/below the visible bounds of the list.
+     * This can help reduce flickering during scrolling on
+     * certain browsers/devices. Defaults to `100`.
+     */
+    overscanRowCount?: number;
+    /**
+     * A fixed row height in pixels. Controls how tall a line is,
+     * as well as the `lineHeight` style of the line's text.
+     * Defaults to `19`.
+     */
+    rowHeight?: number;
+    /**
+     * Scroll to a particular line number once it has loaded.
+     * This is 1-indexed, i.e. line numbers start at `1`.
+     * Cannot be used in combination with `follow`.
+     */
+    scrollToLine?: number;
+    /**
+     * Make the text selectable, allowing to copy & paste. Defaults to `false`.
+     */
+    selectableLines?: boolean;
+    /**
+     * Set to `true` to specify remote URL will be streaming chunked data.
+     * Defaults to `false` to download data until completion.
+     */
+    stream?: boolean;
+    /**
+     * Optional custom inline style to attach to root
+     * virtual `LazyList` element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * String containing text to display.
+     */
+    text?: string;
+    /**
+     * The URL from which to fetch content. Subject to same-origin policy,
+     * so must be accessible via fetch on same domain or via CORS.
+     */
+    url?: string;
+    /**
+     * Set to `true` to specify that url is a websocket URL.
+     * Defaults to `false` to download data until completion.
+     */
+    websocket?: boolean;
+    /**
+     * Options object which will be passed through to websocket.
+     */
+    websocketOptions?: WebsocketOptions;
+    /**
+     * Set the width in pixels for the component.
+     * Defaults to `'auto'` if unspecified.
+     * When the `width` is `'auto'`, the component will expand
+     * horizontally to fill its container.
+     */
+    width?: string | number;
+}

package/es/LogViewer/types.js

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

package/es/Mentions/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_PUNCTUATION = "\\.,\\*\\?\\$\\|#{}\\(\\)\\^\\[\\]\\\\/!%'\"~=<>_:;";
+export declare const PRE_TRIGGER_CHARS = "\\(";
+export declare const TRIGGERS: (triggers: string[]) => string;
+export declare const VALID_CHARS: (triggers: string[], punctuation: string) => string;
+export declare const VALID_JOINS: (punctuation: string) => string;
+export declare const LENGTH_LIMIT = 75;

package/es/Mentions/constants.js

@@ -0,0 +1,28 @@
+export var DEFAULT_PUNCTUATION = '\\.,\\*\\?\\$\\|#{}\\(\\)\\^\\[\\]\\\\/!%\'"~=<>_:;';
+
+// Makes it possible to use brackets before the trigger: (@mention)
+export var PRE_TRIGGER_CHARS = '\\(';
+
+// Strings that can trigger the mention menu.
+export var TRIGGERS = function TRIGGERS(triggers) {
+  return '(?:' + triggers.join('|') + ')';
+};
+
+// Chars we expect to see in a mention (non-space, non-punctuation).
+export var VALID_CHARS = function VALID_CHARS(triggers, punctuation) {
+  var lookahead = triggers.length === 0 ? '' : '(?!' + triggers.join('|') + ')';
+  return lookahead + '[^\\s' + punctuation + ']';
+};
+
+// Non-standard series of chars. Each series must be preceded and followed by
+// a valid char.
+export var VALID_JOINS = function VALID_JOINS(punctuation) {
+  return '(?:' + '\\.[ |$]|' +
+  // E.g. "r. " in "Mr. Smith"
+  '\\s|' +
+  // E.g. " " in "Josh Duck"
+  '[' + punctuation + ']|' +
+  // E.g. "-' in "Salier-Hellendag"
+  ')';
+};
+export var LENGTH_LIMIT = 75;

package/es/Mentions/hooks.d.ts

@@ -0,0 +1,20 @@
+import type { MenuTextMatch } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import type { LexicalCommand } from 'lexical';
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+export type UseSelectOrDeleteHanlder = (nodeKey: string, command: LexicalCommand<undefined>) => [RefObject<HTMLDivElement>, boolean];
+export declare const useSelectOrDelete: UseSelectOrDeleteHanlder;
+export type UseTriggerHandler = () => [
+    RefObject<HTMLDivElement>,
+    boolean,
+    Dispatch<SetStateAction<boolean>>
+];
+export declare const useTrigger: UseTriggerHandler;
+export declare function checkForMentions(text: string, triggers: string[], preTriggerChars: string, punctuation: string, allowSpaces: boolean): MenuTextMatch | null;
+export declare const useCheckForMentionMatch: (triggers: string[], { punctuation, preTriggerChars, allowSpaces, }: {
+    punctuation: string;
+    preTriggerChars: string;
+    allowSpaces: boolean;
+}) => {
+    trigger: string | null;
+    checkForMentionMatch: (text: string) => MenuTextMatch | null;
+};

package/es/Mentions/hooks.js

@@ -0,0 +1,133 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* eslint-disable unicorn/no-useless-undefined */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isDecoratorNode, $isNodeSelection, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LENGTH_LIMIT, TRIGGERS, VALID_CHARS, VALID_JOINS } from "./constants";
+export var useSelectOrDelete = function useSelectOrDelete(nodeKey, command) {
+  var ref = useRef(null);
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useLexicalNodeSelect = useLexicalNodeSelection(nodeKey),
+    _useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 3),
+    isSelected = _useLexicalNodeSelect2[0],
+    setSelected = _useLexicalNodeSelect2[1],
+    clearSelection = _useLexicalNodeSelect2[2];
+  var handleDelete = useCallback(function (event) {
+    var selection = $getSelection();
+    var nodes = selection === null || selection === void 0 ? void 0 : selection.getNodes();
+    if (!isSelected && (nodes === null || nodes === void 0 ? void 0 : nodes.length) === 1) {
+      editor.dispatchCommand(command, undefined);
+    }
+    if (isSelected && $isNodeSelection(selection)) {
+      event.preventDefault();
+      var node = $getNodeByKey(nodeKey);
+      if ($isDecoratorNode(node)) {
+        if (command) {
+          editor.dispatchCommand(command, undefined);
+        }
+        node.remove();
+        return true;
+      }
+    }
+    return false;
+  }, [isSelected, nodeKey, command, editor]);
+  var handleSelect = useCallback(function (e) {
+    e.stopPropagation();
+    clearSelection();
+    setSelected(true);
+  }, [setSelected, clearSelection]);
+  useEffect(function () {
+    var ele = ref.current;
+    if (ele) ele.addEventListener('click', handleSelect);
+    return function () {
+      if (ele) ele.removeEventListener('click', handleSelect);
+    };
+  }, [handleSelect]);
+  useEffect(function () {
+    return mergeRegister(editor.registerCommand(KEY_DELETE_COMMAND, handleDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, handleDelete, COMMAND_PRIORITY_LOW));
+  }, [editor, clearSelection, handleDelete]);
+  return [ref, isSelected];
+};
+export var useTrigger = function useTrigger() {
+  var triggerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var handleOpen = useCallback(function (e) {
+    e.stopPropagation();
+    setOpen(function (v) {
+      return !v;
+    });
+  }, []);
+  useEffect(function () {
+    var trigger = triggerRef.current;
+    if (trigger) trigger.addEventListener('click', handleOpen);
+    return function () {
+      if (trigger) trigger.removeEventListener('click', handleOpen);
+    };
+  }, [handleOpen]);
+  return [triggerRef, open, setOpen];
+};
+
+// Regex used to trigger the mention menu.
+function createMentionsRegex(triggers, preTriggerChars, punctuation, allowSpaces) {
+  return new RegExp((preTriggerChars ? "(^|\\s|".concat(preTriggerChars, ")(") : '(^|\\s)(') + TRIGGERS(triggers) + '((?:' + VALID_CHARS(triggers, punctuation) + (allowSpaces ? VALID_JOINS(punctuation) : '') + '){0,' + LENGTH_LIMIT + '})' + ')$');
+}
+export function checkForMentions(text, triggers, preTriggerChars, punctuation, allowSpaces) {
+  var match = createMentionsRegex(triggers, preTriggerChars, punctuation, allowSpaces).exec(text);
+  if (match !== null) {
+    // The strategy ignores leading whitespace, but we need to know its
+    // length to add it to the leadOffset
+    var maybeLeadingWhitespace = match[1];
+    var matchingStringWithTrigger = match[2];
+    var matchingString = match[3];
+    if (matchingStringWithTrigger.length > 0) {
+      return {
+        leadOffset: match.index + maybeLeadingWhitespace.length,
+        matchingString: matchingString,
+        replaceableString: matchingStringWithTrigger
+      };
+    }
+  }
+  return null;
+}
+export var useCheckForMentionMatch = function useCheckForMentionMatch(triggers, _ref) {
+  var punctuation = _ref.punctuation,
+    preTriggerChars = _ref.preTriggerChars,
+    allowSpaces = _ref.allowSpaces;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    trigger = _useState4[0],
+    setTrigger = _useState4[1];
+  var checkForMentionMatch = useCallback(function (text) {
+    // Don't show the menu if the next character is a word character
+    // const selectionInfo = $getSelectionInfo(triggers, punctuation);
+    // if (selectionInfo?.isTextNode && selectionInfo.wordCharAfterCursor) {
+    //   return null;
+    // }
+
+    var queryMatch = checkForMentions(text, triggers, preTriggerChars, punctuation, allowSpaces);
+    if (queryMatch) {
+      var replaceableString = queryMatch.replaceableString,
+        matchingString = queryMatch.matchingString;
+      var index = replaceableString.lastIndexOf(matchingString);
+      var _trigger = index === -1 ? replaceableString : replaceableString.slice(0, Math.max(0, index)) + replaceableString.slice(Math.max(0, index + matchingString.length));
+      setTrigger(_trigger || null);
+      if (queryMatch.replaceableString) {
+        return queryMatch;
+      }
+    } else {
+      setTrigger(null);
+    }
+    return null;
+  }, [preTriggerChars, allowSpaces, punctuation, triggers]);
+  return {
+    trigger: trigger,
+    checkForMentionMatch: checkForMentionMatch
+  };
+};

package/es/Mentions/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type MentionPickerPluginProps } from './plugins/mention-picker';
+import type { AutoSize } from './types';
+export interface MentionsProps extends MentionPickerPluginProps {
+    className?: string;
+    wrapperClassname?: string;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    value?: string;
+    defaultValue?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onChange?: (text: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    variant?: 'outlined' | 'filled' | 'borderless';
+    autoSize?: AutoSize;
+}
+export declare const Mentions: React.FC<MentionsProps>;