@luscii-healthtech/web-ui 54.4.3 → 54.5.0

package/dist/index.development.js

@@ -29,6 +29,7 @@ var Creatable = require('react-select/creatable');
 var RadixSwitch = require('@radix-ui/react-switch');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
+var extensionMention = require('@tiptap/extension-mention');
 var solid = require('@heroicons/react/20/solid');
 var react$1 = require('@headlessui/react');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
@@ -4490,7 +4491,26 @@ function generateCustomStyles(hasError) {
       return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
     },
     multiValue: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { lineHeight: "1rem" });
+      return Object.assign(Object.assign({}, baseStyles), {
+        // background-info-primary-default (blue-300)
+        backgroundColor: "#d7e3fb",
+        borderRadius: "4px",
+        lineHeight: "1rem"
+      });
+    },
+    multiValueLabel: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), {
+        // text-info-primary-default (brand-900)
+        color: "#112d9c",
+        fontSize: "14px"
+      });
+    },
+    multiValueRemove: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), { color: "#112d9c", borderRadius: "0 4px 4px 0", "&:hover": {
+        // background-info-primary-hovered (blue-500)
+        backgroundColor: "#b3cafc",
+        color: "#112d9c"
+      } });
     },
     valueContainer: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
@@ -5170,6 +5190,15 @@ const TextEditorToolbarButton = ({ option, hasTextSelected, editor, translations
             editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
           }
         }, "aria-pressed": editor.isActive("link"), children: jsxRuntime.jsx(solid.LinkIcon, { width: 16 }) });
+      case "tag":
+        if (!editor.schema.nodes.mention) {
+          return null;
+        }
+        return jsxRuntime.jsx(TertiaryIconButton, { label: translations.tagLabel, className: buttonClasses, onClick: () => {
+          const before = editor.state.selection.$from.nodeBefore;
+          const needsSpace = Boolean((before === null || before === void 0 ? void 0 : before.isText) && before.text && !/\s$/.test(before.text));
+          editor.chain().focus().insertContent(needsSpace ? " @" : "@").run();
+        }, children: jsxRuntime.jsx(solid.AtSymbolIcon, { width: 16 }) });
       default:
         return null;
     }
@@ -5205,6 +5234,123 @@ const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected, editor, transl
   return jsxRuntime.jsx(Stack, { axis: "x", gap: "m", _px: "xs", id: toolbarId, children: toolbar.map((group) => jsxRuntime.jsx(Stack, { axis: "x", _gap: "xs", children: group.map((option, optionIndex) => jsxRuntime.jsx(TextEditorToolbarButton, { option, hasTextSelected, editor, translations }, getOptionKey(option, optionIndex))) }, getGroupKey(group))) });
 };
 
+const MentionList = React.forwardRef(({ items, command }, ref) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  React.useEffect(() => {
+    setSelectedIndex(0);
+  }, [items]);
+  const selectItem = (index) => {
+    const item = items[index];
+    if (item) {
+      command({ id: item.id, label: item.label });
+    }
+  };
+  React.useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (items.length === 0) {
+        return false;
+      }
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((selectedIndex + 1) % items.length);
+        return true;
+      }
+      if (event.key === "Enter") {
+        selectItem(selectedIndex);
+        return true;
+      }
+      return false;
+    }
+  }));
+  if (items.length === 0) {
+    return null;
+  }
+  return jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", padding: false, border: true, className: "ui:max-w-80 ui:overflow-hidden", children: jsxRuntime.jsx(Stack, { width: "full", align: "stretch", className: "ui:p-1", children: items.map((item, index) => jsxRuntime.jsx(Box, {
+    as: "button",
+    type: "button",
+    // Use mousedown so selection happens before the editor loses focus.
+    onMouseDown: (event) => {
+      event.preventDefault();
+      selectItem(index);
+    },
+    onMouseEnter: () => setSelectedIndex(index),
+    borderRadius: "xs",
+    className: classNames__default.default("ui:w-full ui:text-left ui:cursor-pointer ui:px-2 ui:py-1.5", {
+      "ui:bg-background-neutral-secondary-hovered": index === selectedIndex
+    }),
+    children: jsxRuntime.jsx(Text, { truncate: true, children: item.label })
+  }, item.id)) }) });
+});
+MentionList.displayName = "MentionList";
+
+const MAX_RESULTS = 8;
+const createMentionSuggestion = (getTags) => ({
+  items: ({ query }) => {
+    const normalizedQuery = query.toLowerCase();
+    return getTags().filter((tag) => tag.label.toLowerCase().includes(normalizedQuery)).slice(0, MAX_RESULTS);
+  },
+  render: () => {
+    let component = null;
+    let popup = null;
+    const reposition = (clientRect) => {
+      if (!popup || !clientRect) {
+        return;
+      }
+      const rect = clientRect();
+      if (!rect) {
+        return;
+      }
+      popup.style.top = `${rect.bottom + 4}px`;
+      popup.style.left = `${rect.left}px`;
+    };
+    return {
+      onStart: (props) => {
+        component = new react.ReactRenderer(MentionList, {
+          props,
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = document.createElement("div");
+        popup.style.position = "fixed";
+        popup.style.zIndex = "1000";
+        popup.appendChild(component.element);
+        document.body.appendChild(popup);
+        reposition(props.clientRect);
+      },
+      onUpdate: (props) => {
+        component === null || component === void 0 ? void 0 : component.updateProps(props);
+        reposition(props.clientRect);
+      },
+      onKeyDown: (props) => {
+        var _a, _b;
+        return (_b = (_a = component === null || component === void 0 ? void 0 : component.ref) === null || _a === void 0 ? void 0 : _a.onKeyDown(props)) !== null && _b !== void 0 ? _b : false;
+      },
+      onExit: () => {
+        popup === null || popup === void 0 ? void 0 : popup.remove();
+        popup = null;
+        component === null || component === void 0 ? void 0 : component.destroy();
+        component = null;
+      }
+    };
+  }
+});
+
+const MentionView = ({ node }) => {
+  var _a, _b;
+  const id = node.attrs.id;
+  const label = (_a = node.attrs.label) !== null && _a !== void 0 ? _a : id;
+  const char = (_b = node.attrs.mentionSuggestionChar) !== null && _b !== void 0 ? _b : "@";
+  const display = `${char}${label}`;
+  const tooltipText = id && id !== label ? id : null;
+  const pill = jsxRuntime.jsx("span", { className: "web-ui-mention", children: display });
+  return jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", children: tooltipText ? jsxRuntime.jsx(Tooltip$1.Provider, { children: jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: pill }), jsxRuntime.jsx(Tooltip.Content, { children: jsxRuntime.jsx(Tooltip.Text, { children: tooltipText }) })] }) }) : pill });
+};
+
 const TEXT_EDITOR_TRANSLATIONS = {
   "en-GB": {
     boldLabel: "bold",
@@ -5212,6 +5358,7 @@ const TEXT_EDITOR_TRANSLATIONS = {
     underlineLabel: "underline",
     strikeLabel: "strike",
     linkLabel: "link",
+    tagLabel: "insert tag",
     orderedListLabel: "ordered list",
     bulletListLabel: "bullet list",
     enterUrlPrompt: "Enter URL:",
@@ -5227,6 +5374,7 @@ const TEXT_EDITOR_TRANSLATIONS = {
     underlineLabel: "onderstreept",
     strikeLabel: "doorgestreept",
     linkLabel: "link",
+    tagLabel: "tag invoegen",
     orderedListLabel: "genummerde lijst",
     bulletListLabel: "opsommingslijst",
     enterUrlPrompt: "Voer URL in:",
@@ -5242,6 +5390,7 @@ const TEXT_EDITOR_TRANSLATIONS = {
     underlineLabel: "unterstrichen",
     strikeLabel: "durchgestrichen",
     linkLabel: "Link",
+    tagLabel: "Tag einf\xFCgen",
     orderedListLabel: "nummerierte Liste",
     bulletListLabel: "Aufz\xE4hlungsliste",
     enterUrlPrompt: "URL eingeben:",
@@ -5257,6 +5406,7 @@ const TEXT_EDITOR_TRANSLATIONS = {
     underlineLabel: "soulign\xE9",
     strikeLabel: "barr\xE9",
     linkLabel: "lien",
+    tagLabel: "ins\xE9rer une balise",
     orderedListLabel: "liste num\xE9rot\xE9e",
     bulletListLabel: "liste \xE0 puces",
     enterUrlPrompt: "Entrer l'URL :",
@@ -5272,6 +5422,7 @@ const TEXT_EDITOR_TRANSLATIONS = {
     underlineLabel: "sublinhado",
     strikeLabel: "riscado",
     linkLabel: "liga\xE7\xE3o",
+    tagLabel: "inserir etiqueta",
     orderedListLabel: "lista numerada",
     bulletListLabel: "lista com marcadores",
     enterUrlPrompt: "Introduzir URL:",
@@ -5286,29 +5437,46 @@ const getTextEditorTranslations = (locale) => {
   return TEXT_EDITOR_TRANSLATIONS[locale] || TEXT_EDITOR_TRANSLATIONS["en-GB"];
 };
 
-var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.web-ui-text-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  outline: none;\n}\n.web-ui-text-editor.tiptap.ProseMirror p.is-editor-empty:first-child::before {\n  color: var(--ui-color-text-neutral-primary-disabled);\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n.web-ui-text-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.web-ui-text-editor ul,\n.web-ui-text-editor ol {\n  padding-left: 1.5rem;\n}\n.web-ui-text-editor ul {\n  list-style-type: disc;\n}\n.web-ui-text-editor ol {\n  list-style-type: decimal;\n}\n.web-ui-text-editor li {\n  margin-bottom: 0.25rem;\n}\n.web-ui-text-editor strong {\n  font-weight: 600;\n}\n.web-ui-text-editor em {\n  font-style: italic;\n}\n.web-ui-text-editor u {\n  text-decoration: underline;\n}\n.web-ui-text-editor s {\n  text-decoration: line-through;\n}\n.web-ui-text-editor h1,\n.web-ui-text-editor h2,\n.web-ui-text-editor h3,\n.web-ui-text-editor h4,\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.web-ui-text-editor h1:first-child,\n.web-ui-text-editor h2:first-child,\n.web-ui-text-editor h3:first-child,\n.web-ui-text-editor h4:first-child,\n.web-ui-text-editor h5:first-child,\n.web-ui-text-editor h6:first-child {\n  margin-top: 0;\n}\n.web-ui-text-editor h1 {\n  font-size: 2rem;\n}\n.web-ui-text-editor h2 {\n  font-size: 1.5rem;\n}\n.web-ui-text-editor h3 {\n  font-size: 1.25rem;\n}\n.web-ui-text-editor h4 {\n  font-size: 1.125rem;\n}\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-size: 1rem;\n}";
+var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.web-ui-text-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  outline: none;\n}\n.web-ui-text-editor.tiptap.ProseMirror p.is-editor-empty:first-child::before {\n  color: var(--ui-color-text-neutral-primary-disabled);\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n.web-ui-text-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.web-ui-text-editor .web-ui-mention {\n  display: inline-block;\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n  background-color: var(--ui-primitive-color-pink-100);\n  color: var(--ui-primitive-color-pink-700);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.web-ui-text-editor ul,\n.web-ui-text-editor ol {\n  padding-left: 1.5rem;\n}\n.web-ui-text-editor ul {\n  list-style-type: disc;\n}\n.web-ui-text-editor ol {\n  list-style-type: decimal;\n}\n.web-ui-text-editor li {\n  margin-bottom: 0.25rem;\n}\n.web-ui-text-editor strong {\n  font-weight: 600;\n}\n.web-ui-text-editor em {\n  font-style: italic;\n}\n.web-ui-text-editor u {\n  text-decoration: underline;\n}\n.web-ui-text-editor s {\n  text-decoration: line-through;\n}\n.web-ui-text-editor h1,\n.web-ui-text-editor h2,\n.web-ui-text-editor h3,\n.web-ui-text-editor h4,\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.web-ui-text-editor h1:first-child,\n.web-ui-text-editor h2:first-child,\n.web-ui-text-editor h3:first-child,\n.web-ui-text-editor h4:first-child,\n.web-ui-text-editor h5:first-child,\n.web-ui-text-editor h6:first-child {\n  margin-top: 0;\n}\n.web-ui-text-editor h1 {\n  font-size: 2rem;\n}\n.web-ui-text-editor h2 {\n  font-size: 1.5rem;\n}\n.web-ui-text-editor h3 {\n  font-size: 1.25rem;\n}\n.web-ui-text-editor h4 {\n  font-size: 1.125rem;\n}\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-size: 1rem;\n}";
 styleInject(css_248z$1);
 
+const MentionWithTooltip = extensionMention.Mention.extend({
+  addNodeView() {
+    return react.ReactNodeViewRenderer(MentionView);
+  }
+});
 const sanitize = (html) => DOMPurify__default.default.sanitize(html, {
-  ALLOWED_TAGS: ["u", "a", "s", "ul", "ol", "li", "p", "strong", "em"],
-  ALLOWED_ATTR: ["href", "target"]
+  ALLOWED_TAGS: ["u", "a", "s", "ul", "ol", "li", "p", "strong", "em", "span"],
+  ALLOWED_ATTR: [
+    "href",
+    "target",
+    // Mention/tag nodes render as a span carrying these attributes.
+    "class",
+    "data-type",
+    "data-id",
+    "data-label",
+    "data-mention-suggestion-char"
+  ]
 });
 const TextEditor = (_a) => {
   var { defaultValue, formats = ["bold", "italic", "underline", "strike", "list", "link"], toolbar = [
     ["bold", "italic", "underline", "strike"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
-  ], placeholder, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "onValueChange"]);
+  ], placeholder, tags, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "tags", "onValueChange"]);
   const rawId = React.useId();
   const toolbarId = `toolbar-${rawId.replace(/:/g, "")}`;
   const defaultValueRef = React.useRef(sanitize(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""));
   const onTextChangeRef = React.useRef(onValueChange);
+  const tagsRef = React.useRef(tags !== null && tags !== void 0 ? tags : []);
+  const mentionsEnabled = tags !== void 0;
   const [linkTooltip, setLinkTooltip] = React.useState(null);
   const [hasTextSelected, setHasTextSelected] = React.useState(false);
   const locale = useLocaleContext();
   const translations = getTextEditorTranslations(locale);
   React.useLayoutEffect(() => {
     onTextChangeRef.current = onValueChange;
+    tagsRef.current = tags !== null && tags !== void 0 ? tags : [];
   });
   const editor = react.useEditor({
     extensions: [
@@ -5335,7 +5503,13 @@ const TextEditor = (_a) => {
           }
         } : false,
         codeBlock: (formats === null || formats === void 0 ? void 0 : formats.includes("code")) ? {} : false
-      })
+      }),
+      ...mentionsEnabled ? [
+        MentionWithTooltip.configure({
+          HTMLAttributes: { class: "web-ui-mention" },
+          suggestion: createMentionSuggestion(() => tagsRef.current)
+        })
+      ] : []
     ],
     content: defaultValueRef.current,
     editorProps: {