@sustaina/shared-ui 1.62.3 → 1.64.0

package/dist/index.d.mts

@@ -1329,13 +1329,15 @@ type RichTextProps<T = DefaultMentionItem$1> = {
     mentions?: T[];
     /** Configuration for mapping mention item fields. If not provided, assumes default structure {id, name, fieldName} */
     mentionConfig?: MentionConfig$1<T>;
-    /** Optional trigger character for mentions (e.g., "$", "@"). If not provided, suggestions appear when typing matching text */
+    /** Optional trigger character for mentions (e.g., "$", "@", "{{"). If not provided, suggestions appear when typing matching text */
     mentionTrigger?: string;
+    /** If true, suggestions will ONLY appear when the trigger is typed. Text matching is disabled. Requires mentionTrigger to be set. */
+    mentionTriggerOnly?: boolean;
     /** If true, mentions will be rendered as plain text (e.g., {{FIRSTNAME}}) suitable for mail templates. If false, mentions will be styled HTML tags */
     plainTextMentions?: boolean;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
-declare function RichTextInner<T = DefaultMentionItem$1>({ value, defaultValue, onChange, onHtmlChange, onTextChange, placeholder, readOnly, disabled, editorClassName, toolbarClassName, autoFocus, onImageUpload, onImageUploadError, onImageDialogUpload, onImageDialogUploadError, acceptImageMimeTypes, allowImageUrlInsert, maxLength, mentions, mentionConfig, mentionTrigger, plainTextMentions, className, id, ...rest }: RichTextProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function RichTextInner<T = DefaultMentionItem$1>({ value, defaultValue, onChange, onHtmlChange, onTextChange, placeholder, readOnly, disabled, editorClassName, toolbarClassName, autoFocus, onImageUpload, onImageUploadError, onImageDialogUpload, onImageDialogUploadError, acceptImageMimeTypes, allowImageUrlInsert, maxLength, mentions, mentionConfig, mentionTrigger, mentionTriggerOnly, plainTextMentions, className, id, ...rest }: RichTextProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare const RichText: <T = DefaultMentionItem$1>(props: RichTextProps<T> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => ReturnType<typeof RichTextInner>;
@@ -1933,6 +1935,7 @@ type ProgressBarSize = "sm" | "md" | "lg" | number;
 type PercentPosition = {
     align?: "start" | "center" | "end";
     type?: "inner" | "outer";
+    side?: "top" | "bottom" | "left" | "right";
 };
 type SuccessConfig = {
     percent: number;
@@ -2080,13 +2083,15 @@ type InputMentionProps<T = DefaultMentionItem> = {
     mentions?: T[];
     /** Configuration for mapping mention item fields. If not provided, assumes default structure {id, name, fieldName} */
     mentionConfig?: MentionConfig<T>;
-    /** Optional trigger character for mentions (e.g., "$", "@"). If not provided, suggestions appear when typing matching text */
+    /** Optional trigger character for mentions (e.g., "$", "@", "{{"). If not provided, suggestions appear when typing matching text */
     mentionTrigger?: string;
+    /** If true, suggestions will ONLY appear when the trigger is typed. Text matching is disabled. Requires mentionTrigger to be set. */
+    mentionTriggerOnly?: boolean;
     /** If true, mentions will be rendered as plain text (e.g., {{FIRSTNAME}}) suitable for mail templates. If false, mentions will be styled HTML tags */
     plainTextMentions?: boolean;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
-declare function InputMentionInner<T = DefaultMentionItem>({ value, onChange, placeholder, readOnly, disabled, editorClassName, autoFocus, maxLength, mentions, mentionConfig, mentionTrigger, plainTextMentions, className, id, ...rest }: InputMentionProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function InputMentionInner<T = DefaultMentionItem>({ value, onChange, placeholder, readOnly, disabled, editorClassName, autoFocus, maxLength, mentions, mentionConfig, mentionTrigger, mentionTriggerOnly, plainTextMentions, className, id, ...rest }: InputMentionProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare const InputMention: <T = DefaultMentionItem>(props: InputMentionProps<T> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => ReturnType<typeof InputMentionInner>;

package/dist/index.d.ts

@@ -1329,13 +1329,15 @@ type RichTextProps<T = DefaultMentionItem$1> = {
     mentions?: T[];
     /** Configuration for mapping mention item fields. If not provided, assumes default structure {id, name, fieldName} */
     mentionConfig?: MentionConfig$1<T>;
-    /** Optional trigger character for mentions (e.g., "$", "@"). If not provided, suggestions appear when typing matching text */
+    /** Optional trigger character for mentions (e.g., "$", "@", "{{"). If not provided, suggestions appear when typing matching text */
     mentionTrigger?: string;
+    /** If true, suggestions will ONLY appear when the trigger is typed. Text matching is disabled. Requires mentionTrigger to be set. */
+    mentionTriggerOnly?: boolean;
     /** If true, mentions will be rendered as plain text (e.g., {{FIRSTNAME}}) suitable for mail templates. If false, mentions will be styled HTML tags */
     plainTextMentions?: boolean;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
-declare function RichTextInner<T = DefaultMentionItem$1>({ value, defaultValue, onChange, onHtmlChange, onTextChange, placeholder, readOnly, disabled, editorClassName, toolbarClassName, autoFocus, onImageUpload, onImageUploadError, onImageDialogUpload, onImageDialogUploadError, acceptImageMimeTypes, allowImageUrlInsert, maxLength, mentions, mentionConfig, mentionTrigger, plainTextMentions, className, id, ...rest }: RichTextProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function RichTextInner<T = DefaultMentionItem$1>({ value, defaultValue, onChange, onHtmlChange, onTextChange, placeholder, readOnly, disabled, editorClassName, toolbarClassName, autoFocus, onImageUpload, onImageUploadError, onImageDialogUpload, onImageDialogUploadError, acceptImageMimeTypes, allowImageUrlInsert, maxLength, mentions, mentionConfig, mentionTrigger, mentionTriggerOnly, plainTextMentions, className, id, ...rest }: RichTextProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare const RichText: <T = DefaultMentionItem$1>(props: RichTextProps<T> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => ReturnType<typeof RichTextInner>;
@@ -1933,6 +1935,7 @@ type ProgressBarSize = "sm" | "md" | "lg" | number;
 type PercentPosition = {
     align?: "start" | "center" | "end";
     type?: "inner" | "outer";
+    side?: "top" | "bottom" | "left" | "right";
 };
 type SuccessConfig = {
     percent: number;
@@ -2080,13 +2083,15 @@ type InputMentionProps<T = DefaultMentionItem> = {
     mentions?: T[];
     /** Configuration for mapping mention item fields. If not provided, assumes default structure {id, name, fieldName} */
     mentionConfig?: MentionConfig<T>;
-    /** Optional trigger character for mentions (e.g., "$", "@"). If not provided, suggestions appear when typing matching text */
+    /** Optional trigger character for mentions (e.g., "$", "@", "{{"). If not provided, suggestions appear when typing matching text */
     mentionTrigger?: string;
+    /** If true, suggestions will ONLY appear when the trigger is typed. Text matching is disabled. Requires mentionTrigger to be set. */
+    mentionTriggerOnly?: boolean;
     /** If true, mentions will be rendered as plain text (e.g., {{FIRSTNAME}}) suitable for mail templates. If false, mentions will be styled HTML tags */
     plainTextMentions?: boolean;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
 
-declare function InputMentionInner<T = DefaultMentionItem>({ value, onChange, placeholder, readOnly, disabled, editorClassName, autoFocus, maxLength, mentions, mentionConfig, mentionTrigger, plainTextMentions, className, id, ...rest }: InputMentionProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function InputMentionInner<T = DefaultMentionItem>({ value, onChange, placeholder, readOnly, disabled, editorClassName, autoFocus, maxLength, mentions, mentionConfig, mentionTrigger, mentionTriggerOnly, plainTextMentions, className, id, ...rest }: InputMentionProps<T>, ref: React.Ref<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare const InputMention: <T = DefaultMentionItem>(props: InputMentionProps<T> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => ReturnType<typeof InputMentionInner>;

package/dist/index.js

@@ -15719,7 +15719,8 @@ function MentionsTypeaheadMenuItem({
 function MentionsPlugin({
   mentions = [],
   mentionConfig,
-  trigger
+  trigger,
+  triggerOnly = false
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [queryString, setQueryString] = React.useState(null);
@@ -15894,10 +15895,13 @@ function MentionsPlugin({
         if (triggerMatch) {
           return triggerMatch;
         }
+        if (triggerOnly) {
+          return null;
+        }
       }
       return checkForTextMatch(text, mentions, mentionConfig);
     },
-    [trigger, mentions, mentionConfig]
+    [trigger, triggerOnly, mentions, mentionConfig]
   );
   if (mentions.length === 0) {
     return null;
@@ -16090,6 +16094,7 @@ function RichTextInner({
   mentions,
   mentionConfig,
   mentionTrigger,
+  mentionTriggerOnly,
   plainTextMentions = false,
   className,
   id,
@@ -16198,7 +16203,8 @@ function RichTextInner({
             {
               mentions,
               mentionConfig: finalMentionConfig,
-              trigger: mentionTrigger
+              trigger: mentionTrigger,
+              triggerOnly: mentionTriggerOnly
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(MentionDeletePlugin, {}),
@@ -17618,6 +17624,11 @@ var alignClassMap = {
   center: "justify-center",
   end: "justify-end"
 };
+var outerAlignClassMap = {
+  start: "self-start",
+  center: "self-center",
+  end: "self-end"
+};
 var ProgressBar = ({
   percent = 0,
   size = "md",
@@ -17640,7 +17651,11 @@ var ProgressBar = ({
   const linecapClass = linecapMap[strokeLinecap];
   const posType = percentPosition?.type ?? "outer";
   const posAlign = percentPosition?.align ?? "end";
+  const posSide = percentPosition?.side;
   const isInner = posType === "inner";
+  const isTopBottom = posSide === "top" || posSide === "bottom";
+  const isLeftOuter = !isInner && !isTopBottom && (posSide === "left" || !posSide && posAlign === "start");
+  const outerAlignClass = outerAlignClassMap[posAlign];
   const { className: sizeClass, style: sizeStyle } = resolveSize(size);
   const info = React.useMemo(() => {
     if (!showInfo) return null;
@@ -17651,11 +17666,13 @@ var ProgressBar = ({
     "div",
     {
       className: cn(
-        "flex w-full items-center gap-2 min-w-0",
-        posAlign === "start" && !isInner && "flex-row-reverse",
+        "flex w-full min-w-0",
+        isTopBottom ? "flex-col gap-1" : "items-center gap-2",
+        isLeftOuter && "flex-row-reverse",
         className
       ),
       children: [
+        posSide === "top" && info && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs shrink-0 tabular-nums", outerAlignClass), children: info }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -17694,7 +17711,8 @@ var ProgressBar = ({
             ]
           }
         ),
-        !isInner && info && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs shrink-0 tabular-nums", children: info })
+        posSide === "bottom" && info && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs shrink-0 tabular-nums", outerAlignClass), children: info }),
+        !isInner && !isTopBottom && info && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs shrink-0 tabular-nums", children: info })
       ]
     }
   );
@@ -18146,7 +18164,8 @@ function MentionsTypeaheadMenuItem2({
 function MentionsPlugin2({
   mentions = [],
   mentionConfig,
-  trigger
+  trigger,
+  triggerOnly = false
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [queryString, setQueryString] = React.useState(null);
@@ -18324,10 +18343,13 @@ function MentionsPlugin2({
         if (triggerMatch) {
           return triggerMatch;
         }
+        if (triggerOnly) {
+          return null;
+        }
       }
       return checkForTextMatch2(text, mentions, mentionConfig);
     },
-    [trigger, mentions, mentionConfig]
+    [trigger, triggerOnly, mentions, mentionConfig]
   );
   if (mentions.length === 0) {
     return null;
@@ -18478,6 +18500,7 @@ function InputMentionInner({
   mentions,
   mentionConfig,
   mentionTrigger,
+  mentionTriggerOnly,
   plainTextMentions = false,
   className,
   id,
@@ -18557,7 +18580,8 @@ function InputMentionInner({
           {
             mentions,
             mentionConfig: finalMentionConfig,
-            trigger: mentionTrigger
+            trigger: mentionTrigger,
+            triggerOnly: mentionTriggerOnly
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(MentionDeletePlugin2, {}),