@ni/ok-components 0.3.7 → 0.3.9

package/dist/all-components-bundle.js

@@ -17817,6 +17817,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         :host([selected]) .control {
             --ni-private-step-icon-color: ${borderHoverColor};
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
             --ni-private-step-line-color: ${borderHoverColor};
@@ -17856,10 +17857,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 box-shadow ${smallDelay} ease-in-out;
         }
 
-        :host([selected]) .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .icon::before {
             content: '';
             position: absolute;
@@ -17869,7 +17866,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-color: var(--ni-private-step-icon-outline-inset-color);
             outline-style: solid;
             outline-width: 0px;
-            outline-offset: 0px;
+            ${'' /* outline-offset should always be <=-1 to always render inset */}
+            outline-offset: -1px;
             border: none;
             border-radius: 100%;
             color: transparent;
@@ -17947,9 +17945,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             min-width: ${standardPadding};
             height: 1px;
             min-height: 1px;
+            transform: scale(1, 1);
             background: var(--ni-private-step-line-color);
             background-clip: content-box;
-            transform: scale(1, 1);
             transition:
                 background-color ${smallDelay} ease-in-out,
                 transform ${smallDelay} ease-in-out;
@@ -17963,8 +17961,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             width: 1px;
             min-width: 1px;
             height: 100%;
-            padding-top: ${smallPadding};
             min-height: ${standardPadding};
+            padding-top: ${smallPadding};
         }
 
         .subtitle {
@@ -17993,6 +17991,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     @layer hover {
         .control:hover {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${borderHoverColor};
         }
@@ -18023,8 +18022,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
-        .control:hover .icon {
-            --ni-private-step-icon-border-width: 2px;
+        :host([readonly]) .control:hover {
+            --ni-private-step-icon-color: revert-layer;
+            --ni-private-step-icon-border-color: revert-layer;
+            --ni-private-step-icon-border-width: revert-layer;
+            --ni-private-step-icon-background-size: revert-layer;
+            --ni-private-step-line-color: revert-layer;
         }
 
         .control:hover .line {
@@ -18034,11 +18037,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         .container.vertical .control:hover .line {
             transform: scale(2, 1);
         }
+
+        :host([readonly]) .container .control:hover .line {
+            transform: revert-layer;
+        }
     }
 
     @layer focusVisible {
         .control${focusVisible} {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${borderHoverColor};
@@ -18074,10 +18082,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
-        .control${focusVisible} .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
             ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
@@ -18096,6 +18100,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     @layer active {
         .control:active {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: ${fillSelectedColor};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${borderHoverColor};
@@ -18127,26 +18132,45 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
-        .control:active .icon {
-            --ni-private-step-icon-border-width: 2px;
+        :host([readonly]) .control:active {
+            --ni-private-step-icon-color: revert-layer;
+            --ni-private-step-icon-border-color: revert-layer;
+            --ni-private-step-icon-border-width: revert-layer;
+            --ni-private-step-icon-background-color: revert-layer;
+            --ni-private-step-icon-background-size: revert-layer;
+            --ni-private-step-line-color: revert-layer;
         }
 
         .control:active .icon::before {
             outline-width: 0px;
-            outline-offset: 0px;
+            outline-offset: -1px;
+        }
+
+        :host([readonly]) .control:active .icon::before {
+            outline-width: revert-layer;
+            outline-offset: revert-layer;
         }
 
         .control:active .line {
             transform: scale(1, 1);
         }
+
+        :host([readonly]) .control:active .line {
+            transform: revert-layer;
+        }
     }
 
     @layer disabled {
+        :host([readonly]) .control {
+            cursor: default;
+        }
+
         :host([disabled]) .control {
             cursor: default;
             color: ${buttonLabelDisabledFontColor};
             --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);
             --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-border-width: 1px;
             --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -19460,6 +19484,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 aria-owns="${x => x.ariaOwns}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
+                @click="${(x, c) => x.onClick(c.event)}"
                 ${ref('control')}
             >
                 <div class="icon-background"></div>
@@ -19545,6 +19570,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
            */
           this.stepInternals = new StepInternals();
       }
+      /**
+       * @internal
+       */
+      onClick(e) {
+          if (this.disabled || this.readOnly) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+          }
+      }
   }
   __decorate([
       attr()
@@ -32803,7 +32837,8 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(this.from, this.from + this.slice.size, doc.slice(this.from, this.to));
       }
       map(mapping) {
-          let from = mapping.mapResult(this.from, 1), to = mapping.mapResult(this.to, -1);
+          let to = mapping.mapResult(this.to, -1);
+          let from = this.from == this.to && ReplaceStep.MAP_BIAS < 0 ? to : mapping.mapResult(this.from, 1);
           if (from.deletedAcross && to.deletedAcross)
               return null;
           return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice, this.structure);
@@ -32842,6 +32877,15 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
       }
   }
+  /**
+  By default, for backwards compatibility, an inserting step
+  mapped over an insertion at that same position fill move after
+  the inserted content. In a collaborative editing situation, that
+  can make redone insertions appear in unexpected places. You can
+  set this to -1 to make such mapping keep the step before the
+  insertion instead.
+  */
+  ReplaceStep.MAP_BIAS = 1;
   Step$1.jsonID("replace", ReplaceStep);
   /**
   Replace a part of the document with a slice of content, but
@@ -33828,6 +33872,26 @@ so this becomes the fallback color for the slot */ ''}
   }
   function deleteRange$1(tr, from, to) {
       let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
+      // When the deleted range spans from the start of one textblock to
+      // the start of another one, move out of the start of both blocks.
+      if ($from.parent.isTextblock && $to.parent.isTextblock && $from.start() != $to.start() &&
+          $from.parentOffset == 0 && $to.parentOffset == 0) {
+          let shared = $from.sharedDepth(to), isolated = false;
+          for (let d = $from.depth; d > shared; d--)
+              if ($from.node(d).type.spec.isolating)
+                  isolated = true;
+          for (let d = $to.depth; d > shared; d--)
+              if ($to.node(d).type.spec.isolating)
+                  isolated = true;
+          if (!isolated) {
+              for (let d = $from.depth; d > 0 && from == $from.start(d); d--)
+                  from = $from.before(d);
+              for (let d = $to.depth; d > 0 && to == $to.start(d); d--)
+                  to = $to.before(d);
+              $from = tr.doc.resolve(from);
+              $to = tr.doc.resolve(to);
+          }
+      }
       let covered = coveredDepths($from, $to);
       for (let i = 0; i < covered.length; i++) {
           let depth = covered[i], last = i == covered.length - 1;
@@ -42576,7 +42640,6 @@ so this becomes the fallback color for the slot */ ''}
     return !!findMarkInSet(marks, type, attributes);
   }
   function getMarkRange($pos, type, attributes) {
-    var _a;
     if (!$pos || !type) {
       return;
     }
@@ -42587,7 +42650,12 @@ so this becomes the fallback color for the slot */ ''}
     if (!start.node || !start.node.marks.some((mark2) => mark2.type === type)) {
       return;
     }
-    attributes = attributes || ((_a = start.node.marks[0]) == null ? void 0 : _a.attrs);
+    if (!attributes) {
+      const firstMark = start.node.marks.find((mark2) => mark2.type === type);
+      if (firstMark) {
+        attributes = firstMark.attrs;
+      }
+    }
     const mark = findMarkInSet([...start.node.marks], type, attributes);
     if (!mark) {
       return;
@@ -42622,7 +42690,7 @@ so this becomes the fallback color for the slot */ ''}
   }
 
   // src/commands/extendMarkRange.ts
-  var extendMarkRange = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+  var extendMarkRange = (typeOrName, attributes) => ({ tr, state, dispatch }) => {
     const type = getMarkType(typeOrName, state.schema);
     const { doc, selection } = tr;
     const { $from, from, to } = selection;
@@ -45877,7 +45945,7 @@ so this becomes the fallback color for the slot */ ''}
             const newEnd = mapping.slice(index).map(step.to);
             const oldStart = mapping.invert().map(newStart, -1);
             const oldEnd = mapping.invert().map(newEnd);
-            const foundBeforeMark = (_a3 = nextTransaction.doc.nodeAt(newStart - 1)) == null ? void 0 : _a3.marks.some((mark) => mark.eq(step.mark));
+            const foundBeforeMark = newStart > 0 ? (_a3 = nextTransaction.doc.nodeAt(newStart - 1)) == null ? void 0 : _a3.marks.some((mark) => mark.eq(step.mark)) : false;
             const foundAfterMark = (_b3 = nextTransaction.doc.nodeAt(newEnd)) == null ? void 0 : _b3.marks.some((mark) => mark.eq(step.mark));
             this.editor.emit("delete", {
               type: "mark",
@@ -61858,6 +61926,19 @@ ${nextLine.slice(indentLevel + 2)}`;
   }
 
   // src/suggestion.ts
+  function hasInsertedWhitespace(transaction) {
+    if (!transaction.docChanged) {
+      return false;
+    }
+    return transaction.steps.some((step) => {
+      const slice = step.slice;
+      if (!(slice == null ? void 0 : slice.content)) {
+        return false;
+      }
+      const inserted = slice.content.textBetween(0, slice.content.size, "\n");
+      return /\s/.test(inserted);
+    });
+  }
   var SuggestionPluginKey = new PluginKey("suggestion");
   function Suggestion({
     pluginKey = SuggestionPluginKey,
@@ -61876,10 +61957,12 @@ ${nextLine.slice(indentLevel + 2)}`;
     render = () => ({}),
     allow = () => true,
     findSuggestionMatch: findSuggestionMatch2 = findSuggestionMatch,
-    shouldShow
+    shouldShow,
+    shouldResetDismissed
   }) {
     let props;
     const renderer = render == null ? void 0 : render();
+    const effectiveAllowSpaces = allowSpaces && !allowToIncludeChar;
     const getAnchorClientRect = () => {
       const pos = editor.state.selection.$anchor.pos;
       const coords = editor.view.coordsAtPos(pos);
@@ -61901,6 +61984,27 @@ ${nextLine.slice(indentLevel + 2)}`;
         return (currentDecorationNode == null ? void 0 : currentDecorationNode.getBoundingClientRect()) || null;
       };
     };
+    const shouldKeepDismissed = ({
+      match,
+      dismissedRange,
+      state,
+      transaction
+    }) => {
+      if (shouldResetDismissed == null ? void 0 : shouldResetDismissed({
+        editor,
+        state,
+        range: dismissedRange,
+        match,
+        transaction,
+        allowSpaces: effectiveAllowSpaces
+      })) {
+        return false;
+      }
+      if (effectiveAllowSpaces) {
+        return match.range.from === dismissedRange.from;
+      }
+      return match.range.from === dismissedRange.from && !hasInsertedWhitespace(transaction);
+    };
     function dispatchExit(view, pluginKeyRef) {
       var _a;
       try {
@@ -62003,7 +62107,8 @@ ${nextLine.slice(indentLevel + 2)}`;
             },
             query: null,
             text: null,
-            composing: false
+            composing: false,
+            dismissedRange: null
           };
           return state;
         },
@@ -62021,9 +62126,16 @@ ${nextLine.slice(indentLevel + 2)}`;
             next.range = { from: 0, to: 0 };
             next.query = null;
             next.text = null;
+            next.dismissedRange = prev.active ? { ...prev.range } : prev.dismissedRange;
             return next;
           }
           next.composing = composing;
+          if (transaction.docChanged && next.dismissedRange !== null) {
+            next.dismissedRange = {
+              from: transaction.mapping.map(next.dismissedRange.from),
+              to: transaction.mapping.map(next.dismissedRange.to)
+            };
+          }
           if (isEditable && (empty || editor.view.composing)) {
             if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
               next.active = false;
@@ -62049,12 +62161,27 @@ ${nextLine.slice(indentLevel + 2)}`;
               text: match.text,
               transaction
             }))) {
-              next.active = true;
-              next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
-              next.range = match.range;
-              next.query = match.query;
-              next.text = match.text;
+              if (next.dismissedRange !== null && !shouldKeepDismissed({
+                match,
+                dismissedRange: next.dismissedRange,
+                state,
+                transaction
+              })) {
+                next.dismissedRange = null;
+              }
+              if (next.dismissedRange === null) {
+                next.active = true;
+                next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+                next.range = match.range;
+                next.query = match.query;
+                next.text = match.text;
+              } else {
+                next.active = false;
+              }
             } else {
+              if (!match) {
+                next.dismissedRange = null;
+              }
               next.active = false;
             }
           } else {
@@ -62072,41 +62199,18 @@ ${nextLine.slice(indentLevel + 2)}`;
       props: {
         // Call the keydown hook if suggestion is active.
         handleKeyDown(view, event) {
-          var _a, _b, _c, _d;
+          var _a, _b;
           const { active, range } = plugin.getState(view.state);
           if (!active) {
             return false;
           }
           if (event.key === "Escape" || event.key === "Esc") {
             const state = plugin.getState(view.state);
-            const cachedNode = (_a = props == null ? void 0 : props.decorationNode) != null ? _a : null;
-            const decorationNode = cachedNode != null ? cachedNode : (state == null ? void 0 : state.decorationId) ? view.dom.querySelector(`[data-decoration-id="${state.decorationId}"]`) : null;
-            const handledByKeyDown = ((_b = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _b.call(renderer, { view, event, range: state.range })) || false;
-            if (handledByKeyDown) {
-              return true;
-            }
-            const exitProps = {
-              editor,
-              range: state.range,
-              query: state.query,
-              text: state.text,
-              items: [],
-              command: (commandProps) => {
-                return command({ editor, range: state.range, props: commandProps });
-              },
-              decorationNode,
-              // If we have a cached decoration node, use it for the clientRect
-              // to avoid another DOM lookup. If not, leave clientRect null and
-              // let consumer decide if they want to query.
-              clientRect: decorationNode ? () => {
-                return decorationNode.getBoundingClientRect() || null;
-              } : null
-            };
-            (_c = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _c.call(renderer, exitProps);
+            (_a = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _a.call(renderer, { view, event, range: state.range });
             dispatchExit(view, pluginKey);
             return true;
           }
-          const handled = ((_d = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _d.call(renderer, { view, event, range })) || false;
+          const handled = ((_b = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _b.call(renderer, { view, event, range })) || false;
           return handled;
         },
         // Setup decorator on the currently active suggestion.
@@ -62399,7 +62503,8 @@ ${nextLine.slice(indentLevel + 2)}`;
         return helpers.parseChildren([tokens[0]]);
       }
       const content = helpers.parseInline(tokens);
-      if (content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+      const hasExplicitEmptyParagraphMarker = tokens.length === 1 && tokens[0].type === "text" && (tokens[0].raw === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].text === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].raw === NBSP_CHAR || tokens[0].text === NBSP_CHAR);
+      if (hasExplicitEmptyParagraphMarker && content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
         return helpers.createNode("paragraph", void 0, []);
       }
       return helpers.createNode("paragraph", void 0, content);
@@ -63716,6 +63821,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       ];
     }
   });
+  var skipTrailingNodeMeta = "skipTrailingNode";
   function nodeEqualsType({ types, node }) {
     return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
   }
@@ -63735,11 +63841,14 @@ ${nextLine.slice(indentLevel + 2)}`;
       return [
         new Plugin({
           key: plugin,
-          appendTransaction: (_, __, state) => {
+          appendTransaction: (transactions, __, state) => {
             const { doc, tr, schema } = state;
             const shouldInsertNodeAtEnd = plugin.getState(state);
             const endPosition = doc.content.size;
             const type = schema.nodes[defaultNode];
+            if (transactions.some((transaction) => transaction.getMeta(skipTrailingNodeMeta))) {
+              return;
+            }
             if (!shouldInsertNodeAtEnd) {
               return;
             }
@@ -66452,6 +66561,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                 aria-pressed="${x => x.ariaPressed}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
+                @click="${(x, c) => x.onClick(c.event)}"
                 ${ref('control')}
             >
                 <div class="icon-background"></div>
@@ -66505,6 +66615,15 @@ ${nextLine.slice(indentLevel + 2)}`;
            */
           this.stepInternals = new StepInternals();
       }
+      /**
+       * @internal
+       */
+      onClick(e) {
+          if (this.disabled || this.readOnly) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+          }
+      }
   }
   __decorate([
       attr()