@globalpayments/vega 2.53.0 → 2.54.0

package/dist/collection/components/vega-carousel/vega-carousel.js

@@ -18,6 +18,7 @@ import { VegaPageUpdate } from '../../helpers/event-manager/event-id/vega-event-
 import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/deprecated-property-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaCarouselRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-carousel/runtime-metrics-payload-definition';
+import { tryGetDocument } from '../../utils/try-get-document';
 /**
  * @vegaVersion 1.0.2
  */
@@ -133,7 +134,7 @@ export class VegaCarousel {
       item.gap = this.spacing;
     });
   }
-  async disconnectedCallback() {
+  disconnectedCallback() {
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
     }
@@ -233,26 +234,25 @@ export class VegaCarousel {
   wrapChildContentAsCarouselItem() {
     const carouselItemWrapperList = [];
     const carouselContentElementArray = this.carouselContentElements;
-    for (let j = 0; j < this.totalPages; j++) {
-      // eslint-disable-next-line no-restricted-globals
-      const carouselItemWrapper = document.createElement('vega-grid');
-      carouselItemWrapper.setAttribute('gap', this.spacing);
-      carouselItemWrapper.setAttribute('column', this.currentItemsPerPage.toString());
-      carouselItemWrapper.setAttribute('row', '1');
-      for (let i = j * this.currentItemsPerPage; i < carouselContentElementArray.length && i < this.currentItemsPerPage * (j + 1); i++) {
-        // eslint-disable-next-line no-restricted-globals
-        const divInner = document.createElement('div');
-        divInner.appendChild(carouselContentElementArray[i]);
-        carouselItemWrapper.appendChild(divInner);
+    if (tryGetDocument()) {
+      for (let j = 0; j < this.totalPages; j++) {
+        const carouselItemWrapper = tryGetDocument().createElement('vega-grid');
+        carouselItemWrapper.setAttribute('gap', this.spacing);
+        carouselItemWrapper.setAttribute('column', this.currentItemsPerPage.toString());
+        carouselItemWrapper.setAttribute('row', '1');
+        for (let i = j * this.currentItemsPerPage; i < carouselContentElementArray.length && i < this.currentItemsPerPage * (j + 1); i++) {
+          const divInner = tryGetDocument().createElement('div');
+          divInner.appendChild(carouselContentElementArray[i]);
+          carouselItemWrapper.appendChild(divInner);
+        }
+        const divOuter = tryGetDocument().createElement('div');
+        divOuter.classList.add('carousel-item');
+        j === 0 && divOuter.classList.add('active');
+        divOuter.appendChild(carouselItemWrapper);
+        carouselItemWrapperList.push(divOuter);
       }
-      // eslint-disable-next-line no-restricted-globals
-      const divOuter = document.createElement('div');
-      divOuter.classList.add('carousel-item');
-      j === 0 && divOuter.classList.add('active');
-      divOuter.appendChild(carouselItemWrapper);
-      carouselItemWrapperList.push(divOuter);
+      this.host.replaceChildren(...carouselItemWrapperList);
     }
-    this.host.replaceChildren(...carouselItemWrapperList);
   }
   /**
    * 1.make targetItem from translateX(-/+100%) to translateX(0).

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-history-controller.js

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { ComponentValueHistoryControllerSlimmer } from '../../../../helpers/slimmers/component-value-history-controller-slimmer.abstract';
+/**
+ * The class used to control the code block history.
+ * It extends the ComponentValueHistoryControllerSlimmer to manage the history of code block states.
+ */
+export class VegaCodeBlockHistoryController extends ComponentValueHistoryControllerSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Get the effective target elements for the code block history.
+     *
+     * @returns {HTMLElement[]} - An array of effective target elements.
+     */
+    this.getEffectiveTargets = () => {
+      return [this.contentRenderer.getCodeContentContainerRef()];
+    };
+  }
+  /**
+   * Invoke the method to back up the current code block state.
+   */
+  async undo() {
+    if (this.undoStack.length > 1) {
+      const clonedState = this.undoStack.pop();
+      this.redoStack.push(clonedState);
+      const prev = this.undoStack[this.undoStack.length - 1];
+      if (prev) {
+        await this.restoreState(prev);
+      }
+    }
+  }
+  /**
+   * Invoke the redo action to restore the last undone state.
+   */
+  async redo() {
+    const clonedState = this.redoStack.pop();
+    this.undoStack.push(clonedState);
+    await this.restoreState(clonedState);
+  }
+  /**
+   * Set the initial state of the code block history when the component is loaded.
+   */
+  initialHistory() {
+    this.registerHistory({
+      value: this.value,
+      offset: this.value.code.length,
+    }, true);
+  }
+  /**
+   * Get the ineffective target elements for the code block history.
+   *
+   * @returns { HTMLElement[]} - An empty array, as there are no ineffective targets for the code block.
+   */
+  getIneffectiveTargets() {
+    return [];
+  }
+  /**
+   * Restore the state of the code block from the given state.
+   *
+   * @param {CodeBlockState} state - The state to restore.
+   */
+  async restoreState(state) {
+    const { value, offset } = state;
+    this.selectionController.setNextCodeBlockRange(offset);
+    this.valueController.updateValue(value.code, value.language);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockHistoryController.prototype, "contentRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockHistoryController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockHistoryController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockHistoryController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCodeBlockHistoryController.prototype, "initialHistory", null);

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-input-controller.js

@@ -28,30 +28,37 @@ export class CodeBlockInputController extends VegaSlimmer {
     this.handleBeforeInput = (e) => {
       e.stopPropagation();
       const inputType = e.inputType;
-      if (inputType === 'insertFromPaste' && e.dataTransfer) {
-        // Should prevent the paste action if the content is a file.
-        if (e.dataTransfer.files && e.dataTransfer.files.length) {
-          e.preventDefault();
+      switch (inputType) {
+        case 'insertFromPaste':
+          if (e.dataTransfer) {
+            // Should prevent the paste action if the content is a file.
+            if (e.dataTransfer.files && e.dataTransfer.files.length) {
+              e.preventDefault();
+              return;
+            }
+            // Should prevent the paste action if the plain text is empty.
+            const htmlContent = e.dataTransfer.getData('text/html');
+            // eslint-disable-next-line no-restricted-globals
+            const tempContainer = document.createElement('div');
+            tempContainer.innerHTML = htmlContent;
+            if (htmlContent && !tempContainer.innerText) {
+              e.preventDefault();
+              return;
+            }
+          }
+          break;
+        case 'deleteContentBackward':
+          if (!this.value || !this.value.code || this.value.code === '') {
+            e.preventDefault();
+          }
+          else {
+            this.handleDeleteAction(e);
+          }
           return;
-        }
-        // Should prevent the paste action if the plain text is empty.
-        const htmlContent = e.dataTransfer.getData('text/html');
-        // eslint-disable-next-line no-restricted-globals
-        const tempContainer = document.createElement('div');
-        tempContainer.innerHTML = htmlContent;
-        if (htmlContent && !tempContainer.innerText) {
+        case 'historyUndo':
+        case 'historyRedo':
           e.preventDefault();
           return;
-        }
-      }
-      else if (inputType === 'deleteContentBackward') {
-        if (!this.value || !this.value.code || this.value.code === '') {
-          e.preventDefault();
-        }
-        else {
-          this.handleDeleteAction(e);
-        }
-        return;
       }
       this.updateCodeBlockRange(e);
     };
@@ -105,8 +112,11 @@ export class CodeBlockInputController extends VegaSlimmer {
         content = content.slice(0, contentStartOffset - 1) + content.slice(contentStartOffset);
         nextOffset -= 1;
       }
-      this.valueController.updateValue(content, this.value.language);
       this.selectionController.setNextCodeBlockRange(nextOffset);
+      this.valueController.updateValue(content, this.value.language, {
+        recordHistory: true,
+        offset: nextOffset,
+      });
     }
   }
   /**
@@ -187,7 +197,10 @@ export class CodeBlockInputController extends VegaSlimmer {
       if (this.isInsertLineBreakInLowVersionFirefox(newText)) {
         newText = newText + '\n';
       }
-      this.valueController.updateValue(newText, (_a = this.value) === null || _a === void 0 ? void 0 : _a.language);
+      this.valueController.updateValue(newText, (_a = this.value) === null || _a === void 0 ? void 0 : _a.language, {
+        recordHistory: true,
+        offset: this.selectionController.getCurrentRange().contentOffset,
+      });
     }
   }
   /**

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-value-controller.js

@@ -14,14 +14,21 @@ export class VegaCodeBlockValueController extends VegaSlimmer {
    *
    * @param {string} code - The new code content.
    * @param {string} language - The new code language.
+   * @param {CodeBlockHistoryState} codeBlockHistoryState - Update the history or not.
    */
-  updateValue(code, language) {
+  updateValue(code, language, codeBlockHistoryState) {
     if (!this.value || this.value.code !== code || this.value.language !== language) {
       this.value = {
         language: language,
         code,
       };
       this.changeEventEmitter.emit(this.value);
+      if (codeBlockHistoryState && codeBlockHistoryState.recordHistory) {
+        this.historyController.registerHistory({
+          value: this.value,
+          offset: codeBlockHistoryState.offset,
+        });
+      }
     }
   }
   /**
@@ -39,6 +46,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCodeBlockValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockValueController.prototype, "historyController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaCodeBlockValueController.prototype, "initialValue", null);

package/dist/collection/components/vega-code-block/vega-code-block.js

@@ -27,6 +27,7 @@ import { DefaultCodeHighlightParseController } from './slimmers/controllers/defa
 import { ComponentGlobalStyleSlimmer } from '../../helpers/slimmers/component-global-style-slimmer';
 import codeColorVariable from './code-color-variable.css';
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
+import { VegaCodeBlockHistoryController } from './slimmers/controllers/vega-code-block-history-controller';
 /**
  * A component for capturing and displaying syntax-highlighted code blocks with copy-to-clipboard functionality.
  *
@@ -50,6 +51,7 @@ export class VegaCodeBlock {
     this.inputController = new CodeBlockInputController();
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.focusController = new VegaCodeBlockFocusController();
+    this.historyController = new VegaCodeBlockHistoryController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaChange);
     this.removeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaRemove);
     this.eventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.codeBlockRenderer.getToolbarContainerRef());
@@ -393,6 +395,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCodeBlock.prototype, "focusController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "historyController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCodeBlock.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-list-renderer.js

@@ -58,7 +58,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
             return item['children']
               ? this.groupLevelRenderer.render(item, index, fixHeight)
               : this.itemLevelRenderer.render(item, fixHeight);
-          }, viewportMaxHeight: this.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
+          }, viewportMaxHeight: this.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading, virtualizationThreshold: this.virtualizationThreshold }))));
   }
   renderDropdownListBySlot() {
     return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
@@ -104,3 +104,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "virtualizationThreshold", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown.js

@@ -237,6 +237,14 @@ export class VegaDropdown {
      * @vegaVersion 2.46.0
      */
     this.resettable = false;
+    /**
+     * The count of the source that will be used as the threshold for determining whether to use virtual scrolling.
+     * If the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used
+     * If the value is 0, it means we will disable the virtualization all the time.
+     *
+     * @vegaVersion 2.54.0
+     */
+    this.virtualizationThreshold = 60;
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -903,6 +911,27 @@ export class VegaDropdown {
       "attribute": "resettable",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "virtualizationThreshold": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.54.0"
+          }],
+        "text": "The count of the source that will be used as the threshold for determining whether to use virtual scrolling.\nIf the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used\nIf the value is 0, it means we will disable the virtualization all the time."
+      },
+      "attribute": "virtualization-threshold",
+      "reflect": false,
+      "defaultValue": "60"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.css

@@ -11,7 +11,7 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 :host(.selected) a {
-  background-color: rgba(0, 151, 255, 0.3);
+  background-color: rgba(var(--v-bg-selected, 0, 151, 255, 0.3));
 }
 
 :host .vega-counter-badge {

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/code-block-renderer.js

@@ -3,10 +3,25 @@ import { RTEBlockRenderer } from './block-renderer.abstract';
 import { RTECodeBlock } from '../../blocks/code-block';
 import RTECodeBlockNodeRenderer from '../nodes/code-block-node-renderer';
 import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 /**
  * The code block renderer.
  */
 class RTECodeBlockRenderer extends RTEBlockRenderer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Prevent the click event bubble, avoid the rich text content trigger focus event.
+     *
+     * @param {MouseEvent} e - The event object.
+     */
+    this.preventParentDoFocus = (e) => {
+      e.stopPropagation();
+      if (e.type === 'keydown') {
+        this.dispatchMockKeydownEvent(e);
+      }
+    };
+  }
   /**
    * Check the input block type.
    *
@@ -51,12 +66,21 @@ class RTECodeBlockRenderer extends RTEBlockRenderer {
       } }, ZERO_WIDTH_SPACE));
   }
   /**
-   * Prevent the click event bubble, avoid the rich text content trigger focus event.
+   * If redo and undo in code block, here need a mock keydown event to make the helper class `KeyboardManager` could monitor the current keydown event.
    *
-   * @param {MouseEvent} e - The event object.
+   * @param {KeyboardEvent} e - The keyboard event object.
    */
-  preventParentDoFocus(e) {
-    e.stopPropagation();
+  dispatchMockKeydownEvent(e) {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      const { type, code, metaKey, ctrlKey, shiftKey } = e;
+      const event = new Event(type, { bubbles: false, cancelable: true });
+      event['code'] = code;
+      event['metaKey'] = metaKey;
+      event['ctrlKey'] = ctrlKey;
+      event['shiftKey'] = shiftKey;
+      safeDocument.dispatchEvent(event);
+    }
   }
 }
 export default new RTECodeBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/history-controller.js

@@ -6,40 +6,54 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { RTEEditorState } from '../../dto/editor-state';
-import { debounce } from '../../../../utils/timer';
 import { RTESelectionState } from '../../dto/selection-state';
-import { KeyboardManagerSlimmer } from '../../../../helpers/slimmers/keyboard-manager-slimmer';
+import { ComponentValueHistoryControllerSlimmer } from '../../../../helpers/slimmers/component-value-history-controller-slimmer.abstract';
 /**
  * History controller for RTE.
  */
-export class HistoryController extends KeyboardManagerSlimmer {
+export class HistoryController extends ComponentValueHistoryControllerSlimmer {
   constructor() {
-    super(() => this.getKeyboardShortcutOptions.call(this));
-    this.redoStack = [];
-    this.undoStack = [];
-    this.registerHistoryDelay = 300;
-    this.registerHistoryDebounced = debounce(() => {
-      this.internalRegisterHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
-    }, this.registerHistoryDelay, this);
+    super(...arguments);
+    /**
+     * Gets the effective target elements for the RTE history.
+     *
+     * @returns {HTMLElement[]} - An array of effective target elements.
+     */
+    this.getEffectiveTargets = () => {
+      return [this.vegaRichTextEditorRenderer.getRTEEditableElementRef()];
+    };
+    /**
+     * Gets the ineffective target elements for the RTE history.
+     *
+     * @returns {HTMLElement[]} - An array of ineffective target elements.
+     */
+    this.getIneffectiveTargets = () => {
+      const editorElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+      let result = [];
+      if (editorElementRef) {
+        result = Array.from(editorElementRef.querySelectorAll('.code-block-container'));
+      }
+      return result;
+    };
   }
   /**
    * Component lifecycle - [componentDidLoad]
    */
   registerInitState() {
     if (this.value) {
-      this.internalRegisterHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
+      this.registerHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())), true);
     }
   }
   /**
    * Restores the previous state from the undo stack.
    */
   async undo() {
-    if (this.undoStack.length > 0) {
+    if (this.undoStack.length > 1) {
       const clonedState = this.undoStack.pop().clone();
       this.redoStack.push(clonedState);
       const prev = this.undoStack[this.undoStack.length - 1];
       if (prev) {
-        await this.restoreState(prev.clone());
+        await this.restoreState(prev);
       }
     }
   }
@@ -53,69 +67,16 @@ export class HistoryController extends KeyboardManagerSlimmer {
       await this.restoreState(clonedState);
     }
   }
-  /**
-   * Registers history based on the editor state.
-   *
-   * @param {RTEEditorState} editorState - The state to record in history.
-   */
-  registerHistory(editorState) {
-    // TODO: feat: add a `force` option to register history immediately when needed.
-    this.registerHistoryDebounced(editorState);
-  }
-  /**
-   * Internal function to register history immediately.
-   *
-   * @param {RTEEditorState} state - The state to record in history.
-   */
-  internalRegisterHistory(state) {
-    this.redoStack = []; // clear redo stack when new action happens.
-    this.undoStack.push(state);
-  }
   /**
    * Restores the editor state based on the provided history state.
    *
    * @param {RTEEditorState} state - The state to restore to.
    */
   async restoreState(state) {
-    const { content, selection } = state;
+    const { content, selection } = state.clone();
     this.selectionController.setSelectionState(selection);
     await this.valueController.flushChanges(content, false);
   }
-  /**
-   * Returns the keyboard shortcut options for undo/redo functionality.
-   *
-   * @returns {KeyboardEventListener[]} - An array of keyboard shortcut options.
-   */
-  getKeyboardShortcutOptions() {
-    const baseOption = {
-      keyCode: 'KeyZ',
-      activeElementInScope: [this.vegaRichTextEditorRenderer.getRTEEditableElementRef()],
-      eventName: 'keydown',
-      modifierPressed: true,
-    };
-    return [
-      Object.assign(Object.assign({}, baseOption), { shiftKey: false, 
-        /**
-         * Callback function for the undo action.
-         *
-         * @param {KeyboardEvent} e - The keyboard event triggered by the user.
-         */
-        callback: (e) => {
-          e.preventDefault();
-          void this.undo();
-        } }),
-      Object.assign(Object.assign({}, baseOption), { shiftKey: true, 
-        /**
-         * Callback function for the redo action.
-         *
-         * @param {KeyboardEvent} e - The keyboard event triggered by the user.
-         */
-        callback: (e) => {
-          e.preventDefault();
-          void this.redo();
-        } }),
-    ];
-  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/value-controller.js

@@ -69,10 +69,10 @@ export class ValueController extends VegaSlimmer {
    * @param {boolean} recordHistory - Whether to record the change in history.
    */
   async flushChanges(newValue, recordHistory = true) {
+    this.value = newValue.clone();
     if (recordHistory) {
-      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
+      this.historyController.registerHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
     }
-    this.value = newValue.clone();
     await waitForComponentDidRender(this.host);
   }
   /**

package/dist/collection/components/vega-virtual-scroll/slimmers/controllers/vega-virtual-scroll-mode-controller.js

@@ -44,7 +44,10 @@ export class VegaVirtualScrollModeController extends VegaSlimmer {
    */
   setMode() {
     const originalMode = this.mode;
-    this.mode = this.source.length > this.virtualizationThreshold ? 'virtual' : 'normal';
+    this.mode =
+      this.source.length > this.virtualizationThreshold && this.virtualizationThreshold > 0
+        ? 'virtual'
+        : 'normal';
     if (originalMode === 'normal' && this.mode === 'virtual') {
       this.positionController.changeModeFromNormalToVirtual();
     }

package/dist/collection/components/vega-virtual-scroll/vega-virtual-scroll.js

@@ -52,6 +52,7 @@ export class VegaVirtualScroll {
     /**
      * The count of the source that will be used as the threshold for determining whether to use virtual scrolling.
      * If the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used
+     * If the value is 0, it means we will disable the virtualization all the time.
      *
      * @vegaVersion 2.3.0
      */
@@ -199,7 +200,7 @@ export class VegaVirtualScroll {
             "name": "vegaVersion",
             "text": "2.3.0"
           }],
-        "text": "The count of the source that will be used as the threshold for determining whether to use virtual scrolling.\nIf the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used"
+        "text": "The count of the source that will be used as the threshold for determining whether to use virtual scrolling.\nIf the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used\nIf the value is 0, it means we will disable the virtualization all the time."
       },
       "attribute": "virtualization-threshold",
       "reflect": false,

package/dist/collection/helpers/keyboard/keyboard-manager.js

@@ -76,6 +76,9 @@ class KeyboardManager {
     const isKeyCodeAccepted = Array.isArray(listener.keyCode)
       ? listener.keyCode.includes(keyCode)
       : listener.keyCode === keyCode;
+    if (!isKeyCodeAccepted) {
+      return false;
+    }
     /* istanbul ignore next */
     if (typeof listener.activeElementInScope === 'function') {
       activeElementInScope = listener.activeElementInScope();
@@ -95,6 +98,9 @@ class KeyboardManager {
         return isParent(getDeepActiveElementInShadow(), element);
       })
       : true;
+    if (!isActiveElementInScope) {
+      return false;
+    }
     const isActiveElementOutScope = listener.activeElementOutScope
       ? activeElementOutScope.every((element) => !isParent(getDeepActiveElementInShadow(), element))
       : true;

package/dist/collection/helpers/keyboard/test/keyboard-manager.test.js

@@ -203,4 +203,35 @@ describe('KeyboardManager', () => {
     expect(callback2).toBeCalledTimes(1);
     expect(callback3).toBeCalledTimes(2);
   });
+  test('should not check the next condition when the prev condition is not pass', () => {
+    const callback = jest.fn();
+    const inScopeCallback = jest.fn().mockReturnValue([button1]);
+    const mockArray = new Array();
+    spyOn(mockArray, 'every').and.callThrough();
+    const outScopeCallback = jest.fn().mockReturnValue(mockArray);
+    KeyboardManager.register([
+      {
+        keyCode: 'Tab',
+        activeElementInScope: inScopeCallback,
+        activeElementOutScope: outScopeCallback,
+        callback: callback,
+      },
+    ]);
+    document.dispatchEvent(new KeyboardEvent('keyup', { code: 'ArrowUp' }));
+    expect(callback).toBeCalledTimes(0);
+    expect(inScopeCallback).toBeCalledTimes(0);
+    expect(outScopeCallback).toBeCalledTimes(0);
+    Object.assign(document, { activeElement: button2 });
+    document.dispatchEvent(new KeyboardEvent('keyup', { code: 'Tab' }));
+    expect(callback).toBeCalledTimes(0);
+    expect(inScopeCallback).toBeCalledTimes(1);
+    expect(outScopeCallback).toBeCalledTimes(1);
+    expect(mockArray.every).toBeCalledTimes(0);
+    Object.assign(document, { activeElement: button1 });
+    document.dispatchEvent(new KeyboardEvent('keyup', { code: 'Tab' }));
+    expect(callback).toBeCalledTimes(1);
+    expect(inScopeCallback).toBeCalledTimes(2);
+    expect(outScopeCallback).toBeCalledTimes(2);
+    expect(mockArray.every).toBeCalledTimes(1);
+  });
 });