@pibit.ai/cure-design-system 0.6.52 → 0.6.54

package/dist/rich-text/token-input/token-suggestion.d.ts

@@ -1,23 +1,53 @@
-import { Extension } from '@tiptap/core';
+import { Extension, Range } from '@tiptap/core';
 import { ReactNode } from 'react';
 export interface TokenSuggestionItem {
     /** Inserted as the token's value. */
     value: string;
     label: string;
+    /** Second line under the label. */
     description?: string;
+    /** Muted text after the label on the same line, e.g. the stored token. */
+    hint?: string;
     icon?: ReactNode;
 }
+/** What a headless trigger reports while its query is active. */
+export interface TokenSuggestionState {
+    /** Text typed after the trigger. */
+    query: string;
+    /** Document range of the trigger plus query. */
+    range: Range;
+    /** The decorated trigger element, for anchoring a popover. */
+    decorationNode: Element | null;
+    clientRect: (() => DOMRect | null) | null;
+    /** Replaces the trigger and query with a token. */
+    insertToken: (value: string) => void;
+}
 export interface TokenSuggestionTrigger {
     /** Character(s) that open the menu, e.g. "/", "{{" or "@". */
     char: string;
     /** Items for the text typed after the trigger; filter as you see fit. */
-    items: (query: string) => TokenSuggestionItem[] | Promise<TokenSuggestionItem[]>;
+    items?: (query: string) => TokenSuggestionItem[] | Promise<TokenSuggestionItem[]>;
     /** Let the query contain spaces. @default false */
     allowSpaces?: boolean;
+    /**
+     * Whether the text typed after the trigger keeps the menu open. With
+     * `allowSpaces`, this decides when prose takes over. @default always
+     */
+    allowQuery?: (query: string) => boolean;
     /** Characters allowed right before the trigger. @default [" "] plus line start */
     allowedPrefixes?: string[] | null;
     /** Message when nothing matches. @default "No matches" */
     emptyMessage?: string;
+    /** Text inserted after the chosen token, e.g. " ". */
+    appendText?: string;
+    /** Class on the decorated trigger + query while active. */
+    decorationClass?: string;
+    /**
+     * Headless mode: the app renders its own picker. Called with the state while
+     * the trigger is active and with null when it ends. Handle the picker's
+     * keys in TokenInput's `onKeyDownCapture`; Escape still closes it.
+     */
+    onStateChange?: (state: TokenSuggestionState | null) => void;
 }
 interface ListProps {
     items: TokenSuggestionItem[];
@@ -30,7 +60,7 @@ export interface TokenSuggestionListHandle {
 export declare const TokenSuggestionList: import('react').ForwardRefExoticComponent<ListProps & import('react').RefAttributes<TokenSuggestionListHandle>>;
 /**
  * One Suggestion plugin per trigger. `onOpenChange` reports whether any menu is
- * showing, so TokenInput lets Enter through to the menu in single-line fields.
+ * active, so TokenInput lets Enter through to it in single-line fields.
  */
 export declare function createTokenSuggestionExtension(triggers: TokenSuggestionTrigger[], onOpenChange: (open: boolean) => void): Extension<any, any>;
 export {};

package/dist/rich-text/token-input/token-suggestion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-suggestion.d.ts","sourceRoot":"","sources":["../../../src/rich-text/token-input/token-suggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,KACV,mBAAmB,EAAE,GAAG,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAC5D,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kFAAkF;IAClF,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC9C;AAED,eAAO,MAAM,mBAAmB,iHAqE9B,CAAC;AAGH;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,sBAAsB,EAAE,EAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,uBAmFtC"}
+{"version":3,"file":"token-suggestion.d.ts","sourceRoot":"","sources":["../../../src/rich-text/token-input/token-suggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAQrD,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,iEAAiE;AACjE,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,KAAK,CAAC;IACb,8DAA8D;IAC9D,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1C,mDAAmD;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,sBAAsB;IACrC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,KAAK,CAAC,EAAE,CACN,KAAK,EAAE,MAAM,KACV,mBAAmB,EAAE,GAAG,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAC5D,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,kFAAkF;IAClF,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC9C;AAED,eAAO,MAAM,mBAAmB,iHA4E9B,CAAC;AAMH;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,sBAAsB,EAAE,EAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,uBAyHtC"}

package/dist/rich-text/token-input/token-suggestion.js

@@ -1,110 +1,141 @@
-import { jsx as i, jsxs as u } from "react/jsx-runtime";
-import { Extension as d } from "@tiptap/core";
-import { PluginKey as f } from "@tiptap/pm/state";
-import { ReactRenderer as y } from "@tiptap/react";
-import g from "@tiptap/suggestion";
-import { forwardRef as h, useState as w, useEffect as x, useImperativeHandle as k } from "react";
-import R from "tippy.js";
-import { cx as b } from "../../utils/cn.js";
-const m = h(({ items: o, emptyMessage: s, onSelect: l }, c) => {
-  const [t, r] = w(0);
-  return x(() => r(0), [o]), k(c, () => ({
-    onKeyDown: (n) => o.length ? n.key === "ArrowDown" ? (r((e) => (e + 1) % o.length), !0) : n.key === "ArrowUp" ? (r((e) => (e + o.length - 1) % o.length), !0) : n.key === "Enter" || n.key === "Tab" ? (l(o[t]), !0) : !1 : !1
-  })), /* @__PURE__ */ i(
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { Extension as y } from "@tiptap/core";
+import { PluginKey as x } from "@tiptap/pm/state";
+import { ReactRenderer as w } from "@tiptap/react";
+import S, { exitSuggestion as k } from "@tiptap/suggestion";
+import { forwardRef as N, useState as R, useEffect as C, useImperativeHandle as b } from "react";
+import p from "tippy.js";
+import { cx as D } from "../../utils/cn.js";
+const h = N(({ items: s, emptyMessage: u, onSelect: n }, d) => {
+  const [c, a] = R(0);
+  return C(() => a(0), [s]), b(d, () => ({
+    onKeyDown: (e) => s.length ? e.key === "ArrowDown" ? (a((o) => (o + 1) % s.length), !0) : e.key === "ArrowUp" ? (a((o) => (o + s.length - 1) % s.length), !0) : e.key === "Enter" || e.key === "Tab" ? (n(s[c]), !0) : !1 : !1
+  })), /* @__PURE__ */ r(
     "div",
     {
       role: "listbox",
       "aria-label": "Suggestions",
       className: "max-h-64 min-w-56 overflow-y-auto rounded-lg bg-primary p-1 shadow-lg ring-1 ring-secondary",
-      onMouseDown: (n) => n.preventDefault(),
-      children: o.length === 0 ? /* @__PURE__ */ i("div", { className: "px-2.5 py-2 text-sm text-tertiary", children: s }) : o.map((n, e) => /* @__PURE__ */ u(
+      onMouseDown: (e) => e.preventDefault(),
+      children: s.length === 0 ? /* @__PURE__ */ r("div", { className: "px-2.5 py-2 text-sm text-tertiary", children: u }) : s.map((e, o) => /* @__PURE__ */ m(
         "div",
         {
           role: "option",
-          "aria-selected": e === t,
-          onMouseEnter: () => r(e),
-          onClick: () => l(n),
-          className: b(
+          "aria-selected": o === c,
+          onMouseEnter: () => a(o),
+          onClick: () => n(e),
+          className: D(
             "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-2 text-sm",
-            e === t ? "bg-primary_hover" : ""
+            o === c ? "bg-primary_hover" : ""
           ),
           children: [
-            n.icon && /* @__PURE__ */ i("span", { className: "flex size-4 shrink-0 items-center text-fg-quaternary", children: n.icon }),
-            /* @__PURE__ */ u("span", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ i("span", { className: "block truncate font-medium text-secondary", children: n.label }),
-              n.description && /* @__PURE__ */ i("span", { className: "block truncate text-xs text-tertiary", children: n.description })
+            e.icon && /* @__PURE__ */ r("span", { className: "flex size-4 shrink-0 items-center text-fg-quaternary", children: e.icon }),
+            /* @__PURE__ */ m("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ m("span", { className: "flex min-w-0 items-baseline gap-2", children: [
+                /* @__PURE__ */ r("span", { className: "truncate font-medium text-secondary", children: e.label }),
+                e.hint && /* @__PURE__ */ r("span", { className: "truncate text-xs text-placeholder", children: e.hint })
+              ] }),
+              e.description && /* @__PURE__ */ r("span", { className: "block truncate text-xs text-tertiary", children: e.description })
             ] })
           ]
         },
-        `${n.value}-${e}`
+        `${e.value}-${o}`
       ))
     }
   );
 });
-m.displayName = "TokenSuggestionList";
-function T(o, s) {
-  return d.create({
+h.displayName = "TokenSuggestionList";
+const E = 99999;
+function U(s, u) {
+  return y.create({
     name: "tokenSuggestion",
     addProseMirrorPlugins() {
-      return o.map(
-        (l, c) => g({
+      return s.map((n, d) => {
+        const c = new x(`tokenSuggestion${d}`);
+        return S({
           editor: this.editor,
-          char: l.char,
-          pluginKey: new f(`tokenSuggestion${c}`),
-          allowSpaces: l.allowSpaces ?? !1,
-          allowedPrefixes: l.allowedPrefixes === void 0 ? [" "] : l.allowedPrefixes,
-          items: ({ query: t }) => l.items(t),
-          command: ({ editor: t, range: r, props: n }) => {
-            t.chain().focus().deleteRange(r).insertToken(n.value).run();
+          char: n.char,
+          pluginKey: c,
+          allowSpaces: n.allowSpaces ?? !1,
+          ...n.allowQuery ? {
+            allow: ({ state: a, range: e }) => n.allowQuery(
+              a.doc.textBetween(
+                e.from + n.char.length,
+                e.to
+              )
+            )
+          } : {},
+          allowedPrefixes: n.allowedPrefixes === void 0 ? [" "] : n.allowedPrefixes,
+          ...n.decorationClass ? { decorationClass: n.decorationClass } : {},
+          items: ({ query: a }) => n.items ? n.items(a) : [],
+          command: ({ editor: a, range: e, props: o }) => {
+            const i = a.chain().focus().deleteRange(e).insertToken(o.value);
+            n.appendText && i.insertContent(n.appendText), i.run();
           },
           render: () => {
-            let t = null, r = null;
-            const n = (e) => ({
-              items: e.items,
-              emptyMessage: l.emptyMessage ?? "No matches",
-              onSelect: (a) => e.command(a)
+            let a = null, e = null;
+            const o = (t) => ({
+              items: t.items,
+              emptyMessage: n.emptyMessage ?? "No matches",
+              onSelect: (l) => t.command(l)
+            }), i = (t) => ({
+              query: t.query,
+              range: t.range,
+              decorationNode: t.decorationNode,
+              clientRect: t.clientRect ?? null,
+              insertToken: (l) => t.command({ value: l, label: l })
             });
             return {
-              onStart: (e) => {
-                s(!0), t = new y(m, {
-                  props: n(e),
-                  editor: e.editor
-                }), e.clientRect && (r = R(document.body, {
+              onStart: (t) => {
+                if (u(!0), n.onStateChange) {
+                  n.onStateChange(i(t));
+                  return;
+                }
+                a = new w(h, {
+                  props: o(t),
+                  editor: t.editor
+                }), t.clientRect && (e = p(document.body, {
                   getReferenceClientRect: () => {
-                    var a;
-                    return ((a = e.clientRect) == null ? void 0 : a.call(e)) ?? new DOMRect();
+                    var l;
+                    return ((l = t.clientRect) == null ? void 0 : l.call(t)) ?? new DOMRect();
                   },
                   appendTo: () => document.body,
-                  content: t.element,
+                  content: a.element,
                   showOnCreate: !0,
                   interactive: !0,
                   trigger: "manual",
-                  placement: "bottom-start"
+                  placement: "bottom-start",
+                  zIndex: E
                 }));
               },
-              onUpdate: (e) => {
-                t == null || t.updateProps(n(e)), r == null || r.setProps({
+              onUpdate: (t) => {
+                if (n.onStateChange) {
+                  n.onStateChange(i(t));
+                  return;
+                }
+                a == null || a.updateProps(o(t)), e == null || e.setProps({
                   getReferenceClientRect: () => {
-                    var a;
-                    return ((a = e.clientRect) == null ? void 0 : a.call(e)) ?? new DOMRect();
+                    var l;
+                    return ((l = t.clientRect) == null ? void 0 : l.call(t)) ?? new DOMRect();
                   }
                 });
               },
-              onKeyDown: ({ event: e }) => {
-                var a;
-                return e.key === "Escape" ? (r == null || r.hide(), !0) : ((a = t == null ? void 0 : t.ref) == null ? void 0 : a.onKeyDown(e)) ?? !1;
+              onKeyDown: ({ view: t, event: l }) => {
+                var f;
+                return l.key === "Escape" ? (k(t, c), !0) : n.onStateChange ? !1 : ((f = a == null ? void 0 : a.ref) == null ? void 0 : f.onKeyDown(l)) ?? !1;
               },
               onExit: () => {
-                s(!1), r == null || r.destroy(), t == null || t.destroy(), r = null, t = null;
+                var t;
+                u(!1), (t = n.onStateChange) == null || t.call(n, null), e == null || e.destroy(), a == null || a.destroy(), e = null, a = null;
               }
             };
           }
-        })
-      );
+        });
+      });
     }
   });
 }
 export {
-  m as TokenSuggestionList,
-  T as createTokenSuggestionExtension
+  h as TokenSuggestionList,
+  U as createTokenSuggestionExtension
 };