@ni/nimble-components 30.2.0 → 30.3.1

package/dist/all-components-bundle.js

@@ -16032,7 +16032,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 31 Jul 2024 20:07:27 GMT
+   * Generated on Thu, 01 Aug 2024 16:35:55 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16053,12 +16053,16 @@
   const Black91 = "#161617";
   const ForestGreen = "#074023";
   const DigitalGreenLight = "#009b65";
+  const DigitalGreenLight10 = "#e6f5f0";
   const NiSky = "#3cb4e7";
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
   const DigitalGreenDark = "#008557";
   const DigitalGreenDark105 = "#00734b";
+  const DigitalGreenDark110 = "#00613f";
   const PowerGreen = "#32eb96";
+  const PowerGreen10 = "#364941";
+  const Black82 = "#434445";
   const NiHoneyLight = "#ffe76b";
   const NiScarlet = "#ef463f";
   const NiFern = "#76bc43";
@@ -16412,7 +16416,21 @@
       mentionFontFamily: 'mention-font-family',
       mentionFontSize: 'mention-font-size',
       mentionFontWeight: 'mention-font-weight',
-      mentionFontLineHeight: 'mention-font-line-height'
+      mentionFontLineHeight: 'mention-font-line-height',
+      calendarEventBackgroundStaticColor: 'calendar-event-background-static-color',
+      calendarEventBackgroundDynamicColor: 'calendar-event-background-dynamic-color',
+      calendarEventBackgroundTransientColor: 'calendar-event-background-transient-color',
+      calendarEventBorderStaticColor: 'calendar-event-border-static-color',
+      calendarEventBorderTransientColor: 'calendar-event-border-transient-color',
+      calendarEventStaticFontColor: 'calendar-event-static-font-color',
+      calendarEventDynamicFontColor: 'calendar-event-dynamic-font-color',
+      calendarEventTransientFontColor: 'calendar-event-transient-font-color',
+      calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
+      calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
+      calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
+      calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
+      calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
+      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color'
   };
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -16661,6 +16679,20 @@
   const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
   const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
   const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight10, PowerGreen10, PowerGreen10));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, White, White));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.3), hexToRgbaCssColor(PowerGreen, 0.3), hexToRgbaCssColor(PowerGreen, 0.3)));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
   // Component Sizing Tokens
   const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
   const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -40605,7 +40637,7 @@ so this becomes the fallback color for the slot */ ''}
           }))
               || node.textContent
               || '%leaf%';
-          textBefore += node.isAtom ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
+          textBefore += node.isAtom && !node.isText ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
       });
       return textBefore;
   };
@@ -41805,12 +41837,12 @@ so this becomes the fallback color for the slot */ ''}
           }
       }
       if (isTextContent) {
-          let schemaToUse = schema;
-          let hasInvalidContent = false;
-          let invalidContent = '';
-          // Only ever check for invalid content if we're supposed to throw an error
+          // Check for invalid content
           if (options.errorOnInvalidContent) {
-              schemaToUse = new Schema$2({
+              let hasInvalidContent = false;
+              let invalidContent = '';
+              // A copy of the current schema with a catch-all node at the end
+              const contentCheckSchema = new Schema$2({
                   topNode: schema.spec.topNode,
                   marks: schema.spec.marks,
                   // Prosemirror's schemas are executed such that: the last to execute, matches last
@@ -41834,15 +41866,21 @@ so this becomes the fallback color for the slot */ ''}
                       },
                   }),
               });
+              if (options.slice) {
+                  DOMParser.fromSchema(contentCheckSchema).parseSlice(elementFromString(content), options.parseOptions);
+              }
+              else {
+                  DOMParser.fromSchema(contentCheckSchema).parse(elementFromString(content), options.parseOptions);
+              }
+              if (options.errorOnInvalidContent && hasInvalidContent) {
+                  throw new Error('[tiptap error]: Invalid HTML content', { cause: new Error(`Invalid element found: ${invalidContent}`) });
+              }
           }
-          const parser = DOMParser.fromSchema(schemaToUse);
-          const response = options.slice
-              ? parser.parseSlice(elementFromString(content), options.parseOptions).content
-              : parser.parse(elementFromString(content), options.parseOptions);
-          if (options.errorOnInvalidContent && hasInvalidContent) {
-              throw new Error('[tiptap error]: Invalid HTML content', { cause: new Error(`Invalid element found: ${invalidContent}`) });
+          const parser = DOMParser.fromSchema(schema);
+          if (options.slice) {
+              return parser.parseSlice(elementFromString(content), options.parseOptions).content;
           }
-          return response;
+          return parser.parse(elementFromString(content), options.parseOptions);
       }
       return createNodeFromContent('', schema, options);
   }
@@ -41891,6 +41929,13 @@ so this becomes the fallback color for the slot */ ''}
               });
           }
           catch (e) {
+              editor.emit('contentError', {
+                  editor,
+                  error: e,
+                  disableCollaboration: () => {
+                      console.error('[tiptap error]: Unable to disable collaboration at this point in time');
+                  },
+              });
               return false;
           }
           let { from, to } = typeof position === 'number' ? { from: position, to: position } : { from: position.from, to: position.to };
@@ -42683,12 +42728,34 @@ so this becomes the fallback color for the slot */ ''}
       return group.split(' ').includes('list');
   }
 
-  function isNodeEmpty(node) {
-      const defaultContent = node.type.createAndFill();
-      if (!defaultContent) {
+  /**
+   * Returns true if the given node is empty.
+   * When `checkChildren` is true (default), it will also check if all children are empty.
+   */
+  function isNodeEmpty(node, { checkChildren } = { checkChildren: true }) {
+      if (node.isText) {
+          return !node.text;
+      }
+      if (node.content.childCount === 0) {
+          return true;
+      }
+      if (node.isLeaf) {
           return false;
       }
-      return node.eq(defaultContent);
+      if (checkChildren) {
+          let hasSameContent = true;
+          node.content.forEach(childNode => {
+              if (hasSameContent === false) {
+                  // Exit early for perf
+                  return;
+              }
+              if (!isNodeEmpty(childNode)) {
+                  hasSameContent = false;
+              }
+          });
+          return hasSameContent;
+      }
+      return false;
   }
 
   function canSetMark(state, tr, newMarkType) {
@@ -42851,15 +42918,24 @@ so this becomes the fallback color for the slot */ ''}
       if (!$from.parent.isBlock) {
           return false;
       }
-      if (dispatch) {
-          const atEnd = $to.parentOffset === $to.parent.content.size;
-          if (selection instanceof TextSelection) {
-              tr.deleteSelection();
-          }
-          const deflt = $from.depth === 0
-              ? undefined
-              : defaultBlockAt($from.node(-1).contentMatchAt($from.indexAfter(-1)));
-          let types = atEnd && deflt
+      const atEnd = $to.parentOffset === $to.parent.content.size;
+      const deflt = $from.depth === 0
+          ? undefined
+          : defaultBlockAt($from.node(-1).contentMatchAt($from.indexAfter(-1)));
+      let types = atEnd && deflt
+          ? [
+              {
+                  type: deflt,
+                  attrs: newAttributes,
+              },
+          ]
+          : undefined;
+      let can = canSplit(tr.doc, tr.mapping.map($from.pos), 1, types);
+      if (!types
+          && !can
+          && canSplit(tr.doc, tr.mapping.map($from.pos), 1, deflt ? [{ type: deflt }] : undefined)) {
+          can = true;
+          types = deflt
               ? [
                   {
                       type: deflt,
@@ -42867,21 +42943,12 @@ so this becomes the fallback color for the slot */ ''}
                   },
               ]
               : undefined;
-          let can = canSplit(tr.doc, tr.mapping.map($from.pos), 1, types);
-          if (!types
-              && !can
-              && canSplit(tr.doc, tr.mapping.map($from.pos), 1, deflt ? [{ type: deflt }] : undefined)) {
-              can = true;
-              types = deflt
-                  ? [
-                      {
-                          type: deflt,
-                          attrs: newAttributes,
-                      },
-                  ]
-                  : undefined;
-          }
+      }
+      if (dispatch) {
           if (can) {
+              if (selection instanceof TextSelection) {
+                  tr.deleteSelection();
+              }
               tr.split(tr.mapping.map($from.pos), 1, types);
               if (deflt && !atEnd && !$from.parentOffset && $from.parent.type !== deflt) {
                   const first = tr.mapping.map($from.before());
@@ -42896,7 +42963,7 @@ so this becomes the fallback color for the slot */ ''}
           }
           tr.scrollIntoView();
       }
-      return true;
+      return can;
   };
 
   const splitListItem = typeOrName => ({ tr, state, dispatch, editor, }) => {
@@ -43985,6 +44052,7 @@ img.ProseMirror-separator {
           this.prependClass();
           // Let’s store the editor instance in the DOM element.
           // So we’ll have access to it for tests.
+          // @ts-ignore
           const dom = this.view.dom;
           dom.editor = this;
       }
@@ -43992,6 +44060,9 @@ img.ProseMirror-separator {
        * Creates all node views.
        */
       createNodeViews() {
+          if (this.view.isDestroyed) {
+              return;
+          }
           this.view.setProps({
               nodeViews: this.extensionManager.nodeViews,
           });
@@ -58010,6 +58081,9 @@ img.ProseMirror-separator {
                   if (event.button !== 0) {
                       return false;
                   }
+                  if (!view.editable) {
+                      return false;
+                  }
                   let a = event.target;
                   const els = [];
                   while (a.nodeName !== 'DIV') {
@@ -60797,14 +60871,54 @@ img.ProseMirror-separator {
        */
       keydownHandler(e) {
           const initialSelectedIndex = this.selectedIndex;
-          super.keydownHandler(e);
           const key = e.key;
           if (e.ctrlKey || e.shiftKey) {
               return true;
           }
+          if (key !== keyArrowDown && key !== keyArrowUp) {
+              super.keydownHandler(e);
+          }
           let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
           let commitValueThenClose = false;
           switch (key) {
+              case keyArrowDown: {
+                  const selectedOption = this.options[this.selectedIndex];
+                  if (this.open
+                      && isListOption(selectedOption)
+                      && !isOptionOrGroupVisible(selectedOption)) {
+                      if (this.openActiveIndex === this.selectedIndex) {
+                          this.selectFirstOption();
+                      }
+                      else {
+                          this.selectNextOption();
+                      }
+                  }
+                  else {
+                      super.keydownHandler(e);
+                  }
+                  // update currentActiveIndex again as dependent state may have changed
+                  currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+                  break;
+              }
+              case keyArrowUp: {
+                  const selectedOption = this.options[this.selectedIndex];
+                  if (this.open
+                      && isListOption(selectedOption)
+                      && !isOptionOrGroupVisible(selectedOption)) {
+                      if (this.openActiveIndex === this.selectedIndex) {
+                          this.selectLastOption();
+                      }
+                      else {
+                          this.selectPreviousOption();
+                      }
+                  }
+                  else {
+                      super.keydownHandler(e);
+                  }
+                  // update currentActiveIndex again as dependent state may have changed
+                  currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+                  break;
+              }
               case keySpace: {
                   // when dropdown is open allow user to enter a space for filter text
                   if (this.open && this.filterMode !== FilterMode.none) {