@luscii-healthtech/web-ui 54.6.1 → 54.7.1

package/dist/index.development.js

@@ -3064,13 +3064,17 @@ const TopBar = (props) => {
 TopBar.Actions = Actions$1;
 
 function Card(props) {
-  const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _, borderRadius = "m", highlighted = false } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title", "borderRadius", "highlighted"]);
+  const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _, borderRadius = "m", highlighted = false, selected = false } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title", "borderRadius", "highlighted", "selected"]);
   const hasHoverEffect = !(elevation === elevationOnHover || elevationOnHover === void 0);
   const hoverShadowClassName = createShadowClassName(elevationOnHover, {
     modifier: "hover",
     transition: true
   });
-  const outerClasses = classNames__default.default("ui:transition-colors ui:duration-300", className, hoverShadowClassName, "ui:transition-shadow ui:duration-300");
+  const outerClasses = classNames__default.default("ui:transition-colors ui:duration-300", className, hoverShadowClassName, "ui:transition-shadow ui:duration-300", {
+    // Selected state: brand-primary ring hugging the card's rounded corners,
+    // matching the selected treatment of `LabeledRadioCard`.
+    "ui:ring-2 ui:ring-border-brand-primary-default ui:focus-visible:ring-offset-2": selected
+  });
   const innerClasses = classNames__default.default("ui:rounded-inherit ui:border ui:border-transparent ui:transition[border-color] ui:duration-300 ui:motion-reduce:duration-[0ms]! ui:overflow-hidden", "ui:relative", "ui:before:contain-strict ui:before:transition[transform, opacity] ui:before:delay-50 ui:before:duration-150 ui:before:motion-reduce:duration-[0ms]!", "ui:before:origin-left ui:before:absolute ui:before:left-0 ui:before:content-[''] ui:before:inset-y-0 ui:before:ease-in-out", {
     "ui:border-slate-300": border || highlighted,
     "ui:hover:border-slate-400": hasHoverEffect,
@@ -5296,7 +5300,7 @@ const MentionList = React.forwardRef(({ items, command }, ref) => {
 MentionList.displayName = "MentionList";
 
 const MAX_RESULTS = 8;
-const createMentionSuggestion = (getTags) => ({
+const createMentionSuggestion = (getTags, getPopupContainer = () => null) => ({
   items: ({ query }) => {
     const normalizedQuery = query.toLowerCase();
     return getTags().filter((tag) => tag.label.toLowerCase().includes(normalizedQuery)).slice(0, MAX_RESULTS);
@@ -5304,7 +5308,10 @@ const createMentionSuggestion = (getTags) => ({
   render: () => {
     let component = null;
     let popup = null;
+    let latestClientRect = null;
+    let mountTarget = document.body;
     const reposition = (clientRect) => {
+      latestClientRect = clientRect;
       if (!popup || !clientRect) {
         return;
       }
@@ -5312,11 +5319,14 @@ const createMentionSuggestion = (getTags) => ({
       if (!rect) {
         return;
       }
-      popup.style.top = `${rect.bottom + 4}px`;
-      popup.style.left = `${rect.left}px`;
+      const originRect = mountTarget.getBoundingClientRect();
+      popup.style.top = `${rect.bottom - originRect.top + 4}px`;
+      popup.style.left = `${rect.left - originRect.left}px`;
     };
+    const handleViewportChange = () => reposition(latestClientRect);
     return {
       onStart: (props) => {
+        var _a, _b;
         component = new react.ReactRenderer(MentionList, {
           props,
           editor: props.editor
@@ -5324,12 +5334,15 @@ const createMentionSuggestion = (getTags) => ({
         if (!props.clientRect) {
           return;
         }
+        mountTarget = (_b = (_a = getPopupContainer()) !== null && _a !== void 0 ? _a : props.editor.view.dom.closest("dialog")) !== null && _b !== void 0 ? _b : document.body;
         popup = document.createElement("div");
-        popup.style.position = "fixed";
+        popup.style.position = "absolute";
         popup.style.zIndex = "1000";
         popup.appendChild(component.element);
-        document.body.appendChild(popup);
+        mountTarget.appendChild(popup);
         reposition(props.clientRect);
+        window.addEventListener("scroll", handleViewportChange, true);
+        window.addEventListener("resize", handleViewportChange);
       },
       onUpdate: (props) => {
         component === null || component === void 0 ? void 0 : component.updateProps(props);
@@ -5340,6 +5353,9 @@ const createMentionSuggestion = (getTags) => ({
         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: () => {
+        window.removeEventListener("scroll", handleViewportChange, true);
+        window.removeEventListener("resize", handleViewportChange);
+        latestClientRect = null;
         popup === null || popup === void 0 ? void 0 : popup.remove();
         popup = null;
         component === null || component === void 0 ? void 0 : component.destroy();
@@ -5356,8 +5372,13 @@ const MentionView = ({ node }) => {
   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 [dialogContainer, setDialogContainer] = React.useState(null);
+  const pillRef = React.useCallback((el) => {
+    var _a2;
+    setDialogContainer((_a2 = el === null || el === void 0 ? void 0 : el.closest("dialog")) !== null && _a2 !== void 0 ? _a2 : null);
+  }, []);
+  const pill = jsxRuntime.jsx("span", { ref: pillRef, 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, { container: dialogContainer !== null && dialogContainer !== void 0 ? dialogContainer : void 0, children: jsxRuntime.jsx(Tooltip.Text, { children: tooltipText }) })] }) }) : pill });
 };
 
 const TEXT_EDITOR_TRANSLATIONS = {
@@ -5472,12 +5493,13 @@ const TextEditor = (_a) => {
     ["bold", "italic", "underline", "strike"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
-  ], placeholder, tags, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "tags", "onValueChange"]);
+  ], placeholder, tags, popupContainer, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "tags", "popupContainer", "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 popupContainerRef = React.useRef(popupContainer);
   const mentionsEnabled = tags !== void 0;
   const [linkTooltip, setLinkTooltip] = React.useState(null);
   const [hasTextSelected, setHasTextSelected] = React.useState(false);
@@ -5486,6 +5508,7 @@ const TextEditor = (_a) => {
   React.useLayoutEffect(() => {
     onTextChangeRef.current = onValueChange;
     tagsRef.current = tags !== null && tags !== void 0 ? tags : [];
+    popupContainerRef.current = popupContainer;
   });
   const editor = react.useEditor({
     extensions: [
@@ -5516,7 +5539,7 @@ const TextEditor = (_a) => {
       ...mentionsEnabled ? [
         MentionWithTooltip.configure({
           HTMLAttributes: { class: "web-ui-mention" },
-          suggestion: createMentionSuggestion(() => tagsRef.current)
+          suggestion: createMentionSuggestion(() => tagsRef.current, () => popupContainerRef.current)
         })
       ] : []
     ],