@ni/spright-components 5.1.0 → 5.2.0

package/dist/all-components-bundle.js

@@ -28195,7 +28195,7 @@ so this becomes the fallback color for the slot */ ''}
   tree shape like this (without back pointers) makes easy.
 
   **Do not** directly mutate the properties of a `Node` object. See
-  [the guide](/docs/guide/#doc) for more information.
+  [the guide](https://prosemirror.net/docs/guide/#doc) for more information.
   */
   let Node$2 = class Node {
       /**
@@ -28230,7 +28230,7 @@ so this becomes the fallback color for the slot */ ''}
       get children() { return this.content.content; }
       /**
       The size of this node, as defined by the integer-based [indexing
-      scheme](/docs/guide/#doc.indexing). For text nodes, this is the
+      scheme](https://prosemirror.net/docs/guide/#doc.indexing). For text nodes, this is the
       amount of characters. For other leaf nodes, it is one. For
       non-leaf nodes, it is the size of the content plus two (the
       start and end token).
@@ -30687,18 +30687,14 @@ so this becomes the fallback color for the slot */ ''}
   maps](https://prosemirror.net/docs/ref/#transform.StepMap). It has special provisions for losslessly
   handling mapping positions through a series of steps in which some
   steps are inverted versions of earlier steps. (This comes up when
-  ‘[rebasing](/docs/guide/#transform.rebasing)’ steps for
+  ‘[rebasing](https://prosemirror.net/docs/guide/#transform.rebasing)’ steps for
   collaboration or history management.)
   */
   class Mapping {
       /**
       Create a new mapping with the given position maps.
       */
-      constructor(
-      /**
-      The step maps in this mapping.
-      */
-      maps = [], 
+      constructor(maps, 
       /**
       @internal
       */
@@ -30711,23 +30707,22 @@ so this becomes the fallback color for the slot */ ''}
       /**
       The end position in the `maps` array.
       */
-      to = maps.length) {
-          this.maps = maps;
+      to = maps ? maps.length : 0) {
           this.mirror = mirror;
           this.from = from;
           this.to = to;
+          this._maps = maps || [];
+          this.ownData = !(maps || mirror);
       }
       /**
-      Create a mapping that maps only through a part of this one.
+      The step maps in this mapping.
       */
-      slice(from = 0, to = this.maps.length) {
-          return new Mapping(this.maps, this.mirror, from, to);
-      }
+      get maps() { return this._maps; }
       /**
-      @internal
+      Create a mapping that maps only through a part of this one.
       */
-      copy() {
-          return new Mapping(this.maps.slice(), this.mirror && this.mirror.slice(), this.from, this.to);
+      slice(from = 0, to = this.maps.length) {
+          return new Mapping(this._maps, this.mirror, from, to);
       }
       /**
       Add a step map to the end of this mapping. If `mirrors` is
@@ -30735,18 +30730,23 @@ so this becomes the fallback color for the slot */ ''}
       image of this one.
       */
       appendMap(map, mirrors) {
-          this.to = this.maps.push(map);
+          if (!this.ownData) {
+              this._maps = this._maps.slice();
+              this.mirror = this.mirror && this.mirror.slice();
+              this.ownData = true;
+          }
+          this.to = this._maps.push(map);
           if (mirrors != null)
-              this.setMirror(this.maps.length - 1, mirrors);
+              this.setMirror(this._maps.length - 1, mirrors);
       }
       /**
       Add all the step maps in a given mapping to this one (preserving
       mirroring information).
       */
       appendMapping(mapping) {
-          for (let i = 0, startSize = this.maps.length; i < mapping.maps.length; i++) {
+          for (let i = 0, startSize = this._maps.length; i < mapping._maps.length; i++) {
               let mirr = mapping.getMirror(i);
-              this.appendMap(mapping.maps[i], mirr != null && mirr < i ? startSize + mirr : undefined);
+              this.appendMap(mapping._maps[i], mirr != null && mirr < i ? startSize + mirr : undefined);
           }
       }
       /**
@@ -30772,9 +30772,9 @@ so this becomes the fallback color for the slot */ ''}
       Append the inverse of the given mapping to this one.
       */
       appendMappingInverted(mapping) {
-          for (let i = mapping.maps.length - 1, totalSize = this.maps.length + mapping.maps.length; i >= 0; i--) {
+          for (let i = mapping.maps.length - 1, totalSize = this._maps.length + mapping._maps.length; i >= 0; i--) {
               let mirr = mapping.getMirror(i);
-              this.appendMap(mapping.maps[i].invert(), mirr != null && mirr > i ? totalSize - mirr - 1 : undefined);
+              this.appendMap(mapping._maps[i].invert(), mirr != null && mirr > i ? totalSize - mirr - 1 : undefined);
           }
       }
       /**
@@ -30792,7 +30792,7 @@ so this becomes the fallback color for the slot */ ''}
           if (this.mirror)
               return this._map(pos, assoc, true);
           for (let i = this.from; i < this.to; i++)
-              pos = this.maps[i].map(pos, assoc);
+              pos = this._maps[i].map(pos, assoc);
           return pos;
       }
       /**
@@ -30806,12 +30806,12 @@ so this becomes the fallback color for the slot */ ''}
       _map(pos, assoc, simple) {
           let delInfo = 0;
           for (let i = this.from; i < this.to; i++) {
-              let map = this.maps[i], result = map.mapResult(pos, assoc);
+              let map = this._maps[i], result = map.mapResult(pos, assoc);
               if (result.recover != null) {
                   let corr = this.getMirror(i);
                   if (corr != null && corr > i && corr < this.to) {
                       i = corr;
-                      pos = this.maps[corr].recover(result.recover);
+                      pos = this._maps[corr].recover(result.recover);
                       continue;
                   }
               }
@@ -32613,7 +32613,7 @@ so this becomes the fallback color for the slot */ ''}
       greater than one, any number of nodes above that. By default, the
       parts split off will inherit the node type of the original node.
       This can be changed by passing an array of types and attributes to
-      use after the split.
+      use after the split (with the outermost nodes coming first).
       */
       split(pos, depth = 1, typesAfter) {
           split(this, pos, depth, typesAfter);
@@ -33846,11 +33846,13 @@ so this becomes the fallback color for the slot */ ''}
   function scrollRectIntoView(view, rect, startDOM) {
       let scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5;
       let doc = view.dom.ownerDocument;
-      for (let parent = startDOM || view.dom;; parent = parentNode(parent)) {
+      for (let parent = startDOM || view.dom;;) {
           if (!parent)
               break;
-          if (parent.nodeType != 1)
+          if (parent.nodeType != 1) {
+              parent = parentNode(parent);
               continue;
+          }
           let elt = parent;
           let atTop = elt == doc.body;
           let bounding = atTop ? windowRect(doc) : clientRect(elt);
@@ -33879,8 +33881,10 @@ so this becomes the fallback color for the slot */ ''}
                   rect = { left: rect.left - dX, top: rect.top - dY, right: rect.right - dX, bottom: rect.bottom - dY };
               }
           }
-          if (atTop || /^(fixed|sticky)$/.test(getComputedStyle(parent).position))
+          let pos = atTop ? "fixed" : getComputedStyle(parent).position;
+          if (/^(fixed|sticky)$/.test(pos))
               break;
+          parent = pos == "absolute" ? parent.offsetParent : parentNode(parent);
       }
   }
   // Store the scroll position of the editor's parent nodes, along with
@@ -39291,6 +39295,17 @@ so this becomes the fallback color for the slot */ ''}
           return doPaste(this, text, null, true, event || new ClipboardEvent("paste"));
       }
       /**
+      Serialize the given slice as it would be if it was copied from
+      this editor. Returns a DOM element that contains a
+      representation of the slice as its children, a textual
+      representation, and the transformed slice (which can be
+      different from the given input due to hooks like
+      [`transformCopied`](https://prosemirror.net/docs/ref/#view.EditorProps.transformCopied)).
+      */
+      serializeForClipboard(slice) {
+          return serializeForClipboard(this, slice);
+      }
+      /**
       Removes the editor from the DOM and destroys all [node
       views](https://prosemirror.net/docs/ref/#view.NodeView).
       */
@@ -39738,7 +39753,7 @@ so this becomes the fallback color for the slot */ ''}
       return false;
   };
   /**
-  A more limited form of [`joinBackward`]($commands.joinBackward)
+  A more limited form of [`joinBackward`](https://prosemirror.net/docs/ref/#commands.joinBackward)
   that only tries to join the current textblock to the one before
   it, if the cursor is at the start of a textblock.
   */
@@ -39750,7 +39765,7 @@ so this becomes the fallback color for the slot */ ''}
       return $cut ? joinTextblocksAround(state, $cut, dispatch) : false;
   };
   /**
-  A more limited form of [`joinForward`]($commands.joinForward)
+  A more limited form of [`joinForward`](https://prosemirror.net/docs/ref/#commands.joinForward)
   that only tries to join the current textblock to the one after
   it, if the cursor is at the end of a textblock.
   */
@@ -40405,9 +40420,9 @@ so this becomes the fallback color for the slot */ ''}
       if (target == null)
           return false;
       tr.lift(range, target);
-      let after = tr.mapping.map(end, -1) - 1;
-      if (canJoin(tr.doc, after))
-          tr.join(after);
+      let $after = tr.doc.resolve(tr.mapping.map(end, -1) - 1);
+      if (canJoin(tr.doc, $after.pos) && $after.nodeBefore.type == $after.nodeAfter.type)
+          tr.join($after.pos);
       dispatch(tr.scrollIntoView());
       return true;
   }
@@ -44086,13 +44101,14 @@ so this becomes the fallback color for the slot */ ''}
       },
   });
 
+  const focusEventsPluginKey = new PluginKey('focusEvents');
   const FocusEvents = Extension.create({
       name: 'focusEvents',
       addProseMirrorPlugins() {
           const { editor } = this;
           return [
               new Plugin({
-                  key: new PluginKey('focusEvents'),
+                  key: focusEventsPluginKey,
                   props: {
                       handleDOMEvents: {
                           focus: (view, event) => {
@@ -53326,6 +53342,16 @@ img.ProseMirror-separator {
   	return output;
   }
 
+  /**
+   * Creates a string based on an array of numeric code points.
+   * @see `punycode.ucs2.decode`
+   * @memberOf punycode.ucs2
+   * @name encode
+   * @param {Array} codePoints The array of numeric code points.
+   * @returns {String} The new Unicode string (UCS-2).
+   */
+  const ucs2encode = codePoints => String.fromCodePoint(...codePoints);
+
   /**
    * Converts a basic code point into a digit/integer.
    * @see `digitToBasic()`
@@ -53611,6 +53637,25 @@ img.ProseMirror-separator {
 
   /** Define the public API */
   const punycode = {
+  	/**
+  	 * A string representing the current Punycode.js version number.
+  	 * @memberOf punycode
+  	 * @type String
+  	 */
+  	'version': '2.3.1',
+  	/**
+  	 * An object of methods to convert from JavaScript's internal character
+  	 * representation (UCS-2) to Unicode code points, and back.
+  	 * @see <https://mathiasbynens.be/notes/javascript-encoding>
+  	 * @memberOf punycode
+  	 * @type Object
+  	 */
+  	'ucs2': {
+  		'decode': ucs2decode,
+  		'encode': ucs2encode
+  	},
+  	'decode': decode,
+  	'encode': encode,
   	'toASCII': toASCII,
   	'toUnicode': toUnicode
   };
@@ -54507,6 +54552,7 @@ img.ProseMirror-separator {
               toDOM(node) { return ["a", node.attrs]; }
           },
           code: {
+              code: true,
               parseDOM: [{ tag: "code" }],
               toDOM() { return ["code"]; }
           }
@@ -59444,7 +59490,7 @@ img.ProseMirror-separator {
                   },
               },
               type: {
-                  default: undefined,
+                  default: null,
                   parseHTML: element => element.getAttribute('type'),
               },
           };
@@ -67791,7 +67837,7 @@ focus outline in that case.
   function memo(getDeps, fn, opts) {
     let deps = opts.initialDeps ?? [];
     let result;
-    return () => {
+    function memoizedFunction() {
       var _a, _b, _c, _d;
       let depTime;
       if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
@@ -67829,7 +67875,11 @@ focus outline in that case.
       }
       (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
       return result;
+    }
+    memoizedFunction.updateDeps = (newDeps) => {
+      deps = newDeps;
     };
+    return memoizedFunction;
   }
   function notUndefined(value, msg) {
     if (value === void 0) {
@@ -68038,7 +68088,7 @@ focus outline in that case.
           isScrollingResetDelay: 150,
           enabled: true,
           isRtl: false,
-          useScrollendEvent: true,
+          useScrollendEvent: false,
           useAnimationFrameWithResizeObserver: false,
           ...opts2
         };
@@ -68256,6 +68306,7 @@ focus outline in that case.
             startIndex = range.startIndex;
             endIndex = range.endIndex;
           }
+          this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
           return [
             this.options.rangeExtractor,
             this.options.overscan,
@@ -68478,10 +68529,19 @@ focus outline in that case.
         let end;
         if (measurements.length === 0) {
           end = this.options.paddingStart;
+        } else if (this.options.lanes === 1) {
+          end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
         } else {
-          end = this.options.lanes === 1 ? ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0 : Math.max(
-            ...measurements.slice(-this.options.lanes).map((m) => m.end)
-          );
+          const endByLane = Array(this.options.lanes).fill(null);
+          let endIndex = measurements.length - 1;
+          while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+            const item = measurements[endIndex];
+            if (endByLane[item.lane] === null) {
+              endByLane[item.lane] = item.end;
+            }
+            endIndex--;
+          }
+          end = Math.max(...endByLane.filter((val) => val !== null));
         }
         return Math.max(
           end - this.options.scrollMargin + this.options.paddingEnd,
@@ -68527,6 +68587,12 @@ focus outline in that case.
   }) {
     const lastIndex = measurements.length - 1;
     const getOffset = (index) => measurements[index].start;
+    if (measurements.length <= lanes) {
+      return {
+        startIndex: 0,
+        endIndex: lastIndex
+      };
+    }
     let startIndex = findNearestBinarySearch(
       0,
       lastIndex,
@@ -68534,10 +68600,23 @@ focus outline in that case.
       scrollOffset
     );
     let endIndex = startIndex;
-    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
-      endIndex++;
-    }
-    if (lanes > 1) {
+    if (lanes === 1) {
+      while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
+        endIndex++;
+      }
+    } else if (lanes > 1) {
+      const endPerLane = Array(lanes).fill(0);
+      while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+        const item = measurements[endIndex];
+        endPerLane[item.lane] = item.end;
+        endIndex++;
+      }
+      const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+      while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+        const item = measurements[startIndex];
+        startPerLane[item.lane] = item.start;
+        startIndex--;
+      }
       startIndex = Math.max(0, startIndex - startIndex % lanes);
       endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
     }
@@ -68561,7 +68640,6 @@ focus outline in that case.
           this.headerContainerMarginRight = 0;
           this.rowContainerYOffset = 0;
           this._pageSize = 0;
-          this.isScrollingTimer = 0;
           this.table = table;
           this.tanStackTable = tanStackTable;
           this.viewportResizeObserver = new ResizeObserver(entries => {
@@ -68624,6 +68702,7 @@ focus outline in that case.
               enableSmoothScroll: true,
               overscan: 3,
               isScrollingResetDelay: 250,
+              useScrollendEvent: false,
               scrollToFn: elementScroll,
               observeElementOffset,
               observeElementRect,
@@ -68635,15 +68714,6 @@ focus outline in that case.
           this.visibleItems = virtualizer.getVirtualItems();
           this.scrollHeight = virtualizer.getTotalSize();
           this.isScrolling = virtualizer.isScrolling;
-          // There are multiple browser bugs that can result in us getting stuck thinking that we're scrolling.
-          // As a workaround, we assume scrolling stopped if we haven't received an update in 300ms.
-          // Tech debt item to remove this workaround: https://github.com/ni/nimble/issues/2382
-          window.clearTimeout(this.isScrollingTimer);
-          if (this.isScrolling) {
-              this.isScrollingTimer = window.setTimeout(() => {
-                  this.isScrolling = false;
-              }, 300);
-          }
           // We're using a separate div ('table-scroll') to represent the full height of all rows, and
           // the row container's height is only big enough to hold the virtualized rows. So we don't
           // use the TanStackVirtual-provided 'start' offset (which is in terms of the full height)
@@ -92977,7 +93047,7 @@ focus outline in that case.
     :host {
         flex-direction: column;
         justify-content: flex-start;
-        row-gap: ${standardPadding};
+        row-gap: 32px;
         padding: ${mediumPadding};
         background: ${applicationBackgroundColor};
         overflow-y: auto;
@@ -93003,6 +93073,16 @@ focus outline in that case.
       .withPrefix('spright')
       .register(sprightChatConversation());
 
+  /**
+   * A message type in a chat conversation.
+   * @public
+   */
+  const ChatMessageType = {
+      system: undefined,
+      outbound: 'outbound',
+      inbound: 'inbound'
+  };
+
   const styles$1 = css `
     ${display('flex')}
 
@@ -93017,45 +93097,85 @@ focus outline in that case.
         color: ${bodyFontColor};
     }
 
-    :host([message-type='outbound']) {
+    :host([message-type='${ChatMessageType.outbound}']) {
         justify-content: flex-end;
     }
 
-    :host([message-type='inbound']) {
+    :host([message-type='${ChatMessageType.inbound}']) {
         justify-content: flex-start;
     }
 
-    div {
-        max-width: calc(100% - 200px);
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .message-content {
         width: fit-content;
         height: fit-content;
-        padding: ${mediumPadding};
         overflow-x: auto;
     }
 
-    :host([message-type='outbound']) div {
+    :host([message-type='${ChatMessageType.outbound}']) .message-content {
         background: ${fillSelectedColor};
         border: ${borderWidth} solid ${borderHoverColor};
-        border-radius: 8px 8px 0px 8px;
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
+    }
+
+    .footer-actions {
+        display: none;
+    }
+
+    :host([message-type='${ChatMessageType.inbound}'])
+        .footer-actions.has-content {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(${buttonTag}),
+    .footer-actions ::slotted(${toggleButtonTag}),
+    .footer-actions ::slotted(${anchorButtonTag}),
+    .footer-actions ::slotted(${menuButtonTag}) {
+        height: ${controlSlimHeight};
+    }
+
+    .end {
+        display: none;
     }
 
-    :host([message-type='inbound']) div {
-        border-radius: 8px 8px 8px 0px;
+    :host([message-type='${ChatMessageType.inbound}']) .end {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${largePadding};
     }
 `;
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$1 = html `<div><slot></slot></div>`;
+  const template$1 = (context, definition) => html `
+    <div class="container">
+        ${startSlotTemplate(context, definition)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+           <slot 
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+           ></slot>
+        </section>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
   /* eslint-enable @typescript-eslint/indent */
 
-  /**
-   * A message type in a chat conversation.
-   * @public
-   */
-  const ChatMessageType = {
-      system: undefined};
-
   /**
    * A Spright component for displaying a chat message
    */
@@ -93069,11 +93189,23 @@ focus outline in that case.
            * HTML Attribute: message-type
            */
           this.messageType = ChatMessageType.system;
+          /** @internal */
+          this.footerActionsIsEmpty = true;
+      }
+      slottedFooterActionsElementsChanged(_prev, next) {
+          this.footerActionsIsEmpty = !next?.length;
       }
   }
   __decorate([
       attr({ attribute: 'message-type' })
   ], ChatMessage.prototype, "messageType", void 0);
+  __decorate([
+      observable
+  ], ChatMessage.prototype, "footerActionsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatMessage.prototype, "slottedFooterActionsElements", void 0);
+  applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$1,