@ni/nimble-components 20.3.1 → 20.4.0

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 15 Sep 2023 20:18:18 GMT
+   * Generated on Tue, 19 Sep 2023 22:54:28 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16451,6 +16451,7 @@
       controlHeight: 'control-height',
       controlSlimHeight: 'control-slim-height',
       smallPadding: 'small-padding',
+      mediumPadding: 'medium-padding',
       standardPadding: 'standard-padding',
       labelHeight: 'label-height',
       borderWidth: 'border-width',
@@ -16856,6 +16857,7 @@
   const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
   const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
   const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
+  const mediumPadding = DesignToken.create(styleNameFromTokenName(tokenNames.mediumPadding)).withDefault('8px');
   const standardPadding = DesignToken.create(styleNameFromTokenName(tokenNames.standardPadding)).withDefault('16px');
   DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
   const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
@@ -17884,8 +17886,8 @@
 
     slot:not([name]) {
         display: block;
-        padding: calc(${standardPadding} / 2) ${standardPadding}
-            calc(${standardPadding} / 2 - ${borderWidth});
+        padding: ${mediumPadding} ${standardPadding}
+            calc(${mediumPadding} - ${borderWidth});
     }
 
     a::before {
@@ -20548,7 +20550,7 @@
         text-overflow: ellipsis;
         overflow: hidden;
         padding: 0px;
-        padding-left: calc(${standardPadding} / 2);
+        padding-left: ${mediumPadding};
     }
 
     .selected-value[disabled]::placeholder {
@@ -23977,7 +23979,7 @@
     }
 
     :host([slot='submenu']) {
-        margin: 0 calc(${smallPadding} * 2);
+        margin: 0 ${mediumPadding};
     }
 
     ::slotted(*) {
@@ -24531,7 +24533,7 @@
         width: 100%;
         border: none;
         padding: 0px;
-        padding-left: calc(${standardPadding} / 2);
+        padding-left: ${mediumPadding};
     }
 
     .control:hover,
@@ -24558,7 +24560,7 @@
  and the invalid icon because they are not "interactive" i.e. part of the tab order */ ''}
     .step-up {
         order: 3;
-        padding-right: calc(${standardPadding} / 4);
+        padding-right: ${smallPadding};
     }
 
     .step-down {
@@ -24575,7 +24577,7 @@
 
     .error-icon {
         order: 1;
-        padding-right: calc(${standardPadding} / 4);
+        padding-right: ${smallPadding};
     }
 `.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
             .root {
@@ -44882,6 +44884,66 @@ img.ProseMirror-separator {
       group: 'inline',
   });
 
+  const HardBreak = Node$1.create({
+      name: 'hardBreak',
+      addOptions() {
+          return {
+              keepMarks: true,
+              HTMLAttributes: {},
+          };
+      },
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseHTML() {
+          return [
+              { tag: 'br' },
+          ];
+      },
+      renderHTML({ HTMLAttributes }) {
+          return ['br', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+      },
+      renderText() {
+          return '\n';
+      },
+      addCommands() {
+          return {
+              setHardBreak: () => ({ commands, chain, state, editor, }) => {
+                  return commands.first([
+                      () => commands.exitCode(),
+                      () => commands.command(() => {
+                          const { selection, storedMarks } = state;
+                          if (selection.$from.parent.type.spec.isolating) {
+                              return false;
+                          }
+                          const { keepMarks } = this.options;
+                          const { splittableMarks } = editor.extensionManager;
+                          const marks = storedMarks
+                              || (selection.$to.parentOffset && selection.$from.marks());
+                          return chain()
+                              .insertContent({ type: this.name })
+                              .command(({ tr, dispatch }) => {
+                              if (dispatch && marks && keepMarks) {
+                                  const filteredMarks = marks
+                                      .filter(mark => splittableMarks.includes(mark.type.name));
+                                  tr.ensureMarks(filteredMarks);
+                              }
+                              return true;
+                          })
+                              .run();
+                      }),
+                  ]);
+              },
+          };
+      },
+      addKeyboardShortcuts() {
+          return {
+              'Mod-Enter': () => this.editor.commands.setHardBreak(),
+              'Shift-Enter': () => this.editor.commands.setHardBreak(),
+          };
+      },
+  });
+
   const styles$q = css `
     .positioning-region {
         display: flex;
@@ -45271,7 +45333,7 @@ img.ProseMirror-separator {
     :host([error-visible]) .error-icon.scrollbar-width-calculated {
         display: inline-flex;
         position: absolute;
-        top: calc(${standardPadding} / 2);
+        top: ${mediumPadding};
         right: var(--ni-private-rich-text-editor-scrollbar-width);
     }
 `;
@@ -58508,8 +58570,9 @@ img.ProseMirror-separator {
           const supportedTokenizerRules = zeroTokenizerConfiguration.enable([
               'emphasis',
               'list',
+              'escape',
               'autolink',
-              'escape'
+              'newline'
           ]);
           supportedTokenizerRules.validateLink = href => /^https?:\/\//i.test(href);
           /**
@@ -58595,7 +58658,8 @@ img.ProseMirror-separator {
               orderedList: orderedListNode,
               doc: defaultMarkdownSerializer.nodes.doc,
               paragraph: defaultMarkdownSerializer.nodes.paragraph,
-              text: defaultMarkdownSerializer.nodes.text
+              text: defaultMarkdownSerializer.nodes.text,
+              hardBreak: defaultMarkdownSerializer.nodes.hard_break
           };
           const marks = {
               italic: defaultMarkdownSerializer.marks.em,
@@ -58862,6 +58926,7 @@ img.ProseMirror-separator {
                       placeholder: '',
                       showOnlyWhenEditable: false
                   }),
+                  HardBreak,
                   customLink.configure({
                       // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap
                       // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -59789,8 +59854,8 @@ img.ProseMirror-separator {
 
     slot:not([name]) {
         display: block;
-        padding: calc(${standardPadding} / 2) ${standardPadding}
-            calc(${standardPadding} / 2 - ${borderWidth});
+        padding: ${mediumPadding} ${standardPadding}
+            calc(${mediumPadding} - ${borderWidth});
     }
 
     :host::before {
@@ -63672,7 +63737,7 @@ img.ProseMirror-separator {
 
     .collapse-all-button {
         height: ${controlSlimHeight};
-        margin-left: calc(${smallPadding} * 2);
+        margin-left: ${mediumPadding};
         visibility: hidden;
     }
 
@@ -63791,12 +63856,12 @@ img.ProseMirror-separator {
     :host {
         height: ${controlHeight};
         align-items: center;
-        padding: 0px calc(${standardPadding} / 2);
+        padding: 0px ${mediumPadding};
         font: ${tableHeaderFont};
         color: ${tableHeaderFontColor};
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
-        gap: calc(${standardPadding} / 2);
+        gap: ${mediumPadding};
         cursor: default;
     }
 
@@ -63968,9 +64033,9 @@ img.ProseMirror-separator {
 
     :host {
         --ni-private-table-cell-nesting-level: 0;
-        padding: 0px calc(${standardPadding} / 2);
+        padding: 0px ${mediumPadding};
         padding-left: calc(
-            ${smallPadding} * 2 + ${standardPadding} * 2 *
+            ${mediumPadding} + ${standardPadding} * 2 *
                 var(--ni-private-table-cell-nesting-level)
         );
         align-self: center;
@@ -64308,7 +64373,7 @@ img.ProseMirror-separator {
 
     .expand-collapse-button {
         margin-left: calc(
-            ${smallPadding} * 2 + ${standardPadding} * 2 *
+            ${mediumPadding} + ${standardPadding} * 2 *
                 var(--ni-private-table-group-row-indent-level)
         );
         height: ${controlSlimHeight};
@@ -64328,7 +64393,7 @@ img.ProseMirror-separator {
     }
 
     .group-header-view {
-        padding-left: calc(${standardPadding} / 2);
+        padding-left: ${mediumPadding};
         ${userSelectNone}
         overflow: hidden;
         display: flex;
@@ -64336,7 +64401,7 @@ img.ProseMirror-separator {
 
     .group-row-child-count {
         padding-left: 2px;
-        padding-right: calc(${standardPadding} / 2);
+        padding-right: ${mediumPadding};
         pointer-events: none;
         ${userSelectNone}
     }
@@ -68694,7 +68759,7 @@ img.ProseMirror-separator {
         height: 24px;
         border-left: calc(${borderWidth} * 2) solid
             rgba(${borderRgbPartialColor}, 0.3);
-        margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
+        margin: ${smallPadding} ${mediumPadding};
     }
 `;
 
@@ -68861,7 +68926,7 @@ img.ProseMirror-separator {
     :host([error-visible]) .error-icon.scrollbar-width-calculated {
         display: inline-flex;
         position: absolute;
-        top: calc(${standardPadding} / 2);
+        top: ${mediumPadding};
         right: var(--ni-private-scrollbar-width);
     }
 `.withBehaviors(appearanceBehavior(TextAreaAppearance.outline, css `
@@ -69108,7 +69173,7 @@ img.ProseMirror-separator {
         align-items: center;
         justify-content: center;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
-        gap: calc(${standardPadding} / 2);
+        gap: ${mediumPadding};
         padding: ${borderWidth};
     }
 
@@ -69373,8 +69438,8 @@ img.ProseMirror-separator {
         border: ${borderWidth} solid var(--ni-private-tooltip-border-color);
         background-color: var(--ni-private-tooltip-background-color);
         padding-bottom: 6px;
-        padding-left: calc(${standardPadding} / 2);
-        padding-right: calc(${standardPadding} / 2);
+        padding-left: ${mediumPadding};
+        padding-right: ${mediumPadding};
         padding-top: ${smallPadding};
     }