@heartlandone/vega 2.78.0 → 2.79.0

package/dist/collection/helpers/slimmers/test/aria-dialog-focusable-trap-slimmer.test.js

@@ -0,0 +1,375 @@
+import '../../../polyfill/test-polyfill/unit/index';
+import * as uiUtils from '../../../utils/ui';
+import { AriaDialogFocusableTrapSlimmer, } from '../aria-dialog-focusable-trap-slimmer';
+describe('AriaDialogFocusableTrapSlimmer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    jest.restoreAllMocks();
+  });
+  const mockRect = (element, rect = { x: 0, y: 0, width: 100, height: 40 }) => {
+    spyOn(element, 'getBoundingClientRect').and.returnValue(rect);
+  };
+  const createSlimmer = (trigger, dialog) => {
+    const entry = {
+      triggerEl: () => trigger,
+      dialogEl: () => dialog,
+    };
+    return new AriaDialogFocusableTrapSlimmer(entry);
+  };
+  it('should mark click as VoiceOver click when the click is at target center', () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    mockRect(trigger);
+    slimmer.componentDidLoad();
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 50, clientY: 20, detail: 1 }));
+    expect(slimmer.isVoiceOverClick).toEqual(true);
+  });
+  it('should mark click as non-VoiceOver click when the click is away from center', () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    mockRect(trigger);
+    slimmer.componentDidLoad();
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 10, clientY: 10, detail: 1 }));
+    expect(slimmer.isVoiceOverClick).toEqual(false);
+  });
+  it('should mark click as non-VoiceOver click when click detail is not 1 (e.g. double or triple click)', () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    mockRect(trigger);
+    slimmer.componentDidLoad();
+    // detail: 3 simulates a triple-click (Puppeteer's inputClear uses clickCount: 3)
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 50, clientY: 20, detail: 3 }));
+    expect(slimmer.isVoiceOverClick).toEqual(false);
+  });
+  it('should mark click as VoiceOver click when click detail is 0', () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    mockRect(trigger);
+    slimmer.componentDidLoad();
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 10, clientY: 10, detail: 0 }));
+    expect(slimmer.isVoiceOverClick).toEqual(true);
+  });
+  it('should focus first focusable element in dialog while showing for VoiceOver click', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const button = document.createElement('button');
+    button.setAttribute('tabindex', '0');
+    dialog.appendChild(button);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const activeElement = document.createElement('input');
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(activeElement);
+    const buttonFocusSpy = jest.spyOn(button, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(buttonFocusSpy).toHaveBeenCalledTimes(1);
+    expect(slimmer.focusTriggerElement).toEqual(activeElement);
+  });
+  it('should focus dialog element as fallback while showing for VoiceOver click', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    dialog.setAttribute('tabindex', '0');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const activeElement = document.createElement('input');
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(activeElement);
+    const dialogFocusSpy = jest.spyOn(dialog, 'focus');
+    mockRect(trigger);
+    slimmer.componentDidLoad();
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 50, clientY: 20, detail: 1 }));
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(dialogFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should not move focus while showing when click is not VoiceOver click', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const button = document.createElement('button');
+    dialog.appendChild(button);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const activeElement = document.createElement('input');
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(activeElement);
+    const buttonFocusSpy = jest.spyOn(button, 'focus');
+    mockRect(trigger);
+    slimmer.componentDidLoad();
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 10, clientY: 10, detail: 1 }));
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(buttonFocusSpy).not.toHaveBeenCalled();
+    expect(slimmer.focusTriggerElement).toBeNull();
+  });
+  it('should skip hidden and disabled elements when finding first focusable', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const hiddenButton = document.createElement('button');
+    hiddenButton.setAttribute('aria-hidden', 'true');
+    hiddenButton.setAttribute('tabindex', '0');
+    const disabledInput = document.createElement('input');
+    disabledInput.setAttribute('disabled', 'true');
+    const validButton = document.createElement('button');
+    validButton.setAttribute('tabindex', '0');
+    dialog.appendChild(hiddenButton);
+    dialog.appendChild(disabledInput);
+    dialog.appendChild(validButton);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const activeElement = document.createElement('input');
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(activeElement);
+    const validButtonFocusSpy = jest.spyOn(validButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(validButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should restore focus to trigger element while hiding', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const triggerFocusSpy = jest.spyOn(trigger, 'focus');
+    slimmer.focusTriggerElement = trigger;
+    await slimmer.hide();
+    await slimmer.componentDidRender();
+    expect(triggerFocusSpy).toHaveBeenCalledTimes(1);
+    expect(slimmer.focusTriggerElement).toBeNull();
+  });
+  it('should not enqueue focus task when show is called and active element is null', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const button = document.createElement('button');
+    button.setAttribute('tabindex', '0');
+    dialog.appendChild(button);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(null);
+    const buttonFocusSpy = jest.spyOn(button, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(buttonFocusSpy).not.toHaveBeenCalled();
+    expect(slimmer.focusTriggerElement).toBeNull();
+  });
+  it('should call show when toggle is true', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const slimmer = createSlimmer(trigger, dialog);
+    const showSpy = jest.spyOn(slimmer, 'show').mockResolvedValue();
+    const hideSpy = jest.spyOn(slimmer, 'hide').mockResolvedValue();
+    await slimmer.toggle(true);
+    expect(showSpy).toHaveBeenCalledTimes(1);
+    expect(hideSpy).not.toHaveBeenCalled();
+  });
+  it('should call hide when toggle is false', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const slimmer = createSlimmer(trigger, dialog);
+    const showSpy = jest.spyOn(slimmer, 'show').mockResolvedValue();
+    const hideSpy = jest.spyOn(slimmer, 'hide').mockResolvedValue();
+    await slimmer.toggle(false);
+    expect(hideSpy).toHaveBeenCalledTimes(1);
+    expect(showSpy).not.toHaveBeenCalled();
+  });
+  it('should do nothing when hide is called with no stored trigger element', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const triggerFocusSpy = jest.spyOn(trigger, 'focus');
+    await slimmer.hide();
+    await slimmer.componentDidRender();
+    expect(triggerFocusSpy).not.toHaveBeenCalled();
+  });
+  it('should register click handler on window when trigger element is null', () => {
+    const dialog = document.createElement('div');
+    const entry = { triggerEl: () => null, dialogEl: () => dialog };
+    const slimmer = new AriaDialogFocusableTrapSlimmer(entry);
+    const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+    slimmer.componentDidLoad();
+    expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), { capture: true });
+  });
+  it('should remove click handler from trigger and window on disconnectedCallback', () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const slimmer = createSlimmer(trigger, dialog);
+    const removeFromTriggerSpy = jest.spyOn(trigger, 'removeEventListener');
+    const removeFromWindowSpy = jest.spyOn(window, 'removeEventListener');
+    slimmer.disconnectedCallback();
+    expect(removeFromTriggerSpy).toHaveBeenCalledWith('click', expect.any(Function), { capture: true });
+    expect(removeFromWindowSpy).toHaveBeenCalledWith('click', expect.any(Function), { capture: true });
+  });
+  it('should register click handler on trigger when connectedCallback is called', () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    const addEventListenerSpy = jest.spyOn(trigger, 'addEventListener');
+    mockRect(trigger);
+    slimmer.connectedCallback();
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, clientX: 50, clientY: 20, detail: 1 }));
+    expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), { capture: true });
+    expect(slimmer.isVoiceOverClick).toEqual(true);
+  });
+  it('should skip inert elements when finding first focusable', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const inertButton = document.createElement('button');
+    inertButton.setAttribute('inert', '');
+    inertButton.setAttribute('tabindex', '0');
+    const validButton = document.createElement('button');
+    validButton.setAttribute('tabindex', '0');
+    dialog.appendChild(inertButton);
+    dialog.appendChild(validButton);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const validButtonFocusSpy = jest.spyOn(validButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(validButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should skip hidden input element when finding first focusable', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const hiddenInput = document.createElement('input');
+    hiddenInput.type = 'hidden';
+    const validButton = document.createElement('button');
+    validButton.setAttribute('tabindex', '0');
+    dialog.appendChild(hiddenInput);
+    dialog.appendChild(validButton);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const validButtonFocusSpy = jest.spyOn(validButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(validButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should skip elements with negative tabindex when finding first focusable', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    const negativeTabDiv = document.createElement('div');
+    negativeTabDiv.setAttribute('tabindex', '-1');
+    const validButton = document.createElement('button');
+    validButton.setAttribute('tabindex', '0');
+    dialog.appendChild(negativeTabDiv);
+    dialog.appendChild(validButton);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const validButtonFocusSpy = jest.spyOn(validButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(validButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should find focusable element inside child shadow DOM', async () => {
+    const trigger = document.createElement('div');
+    const dialog = document.createElement('div');
+    // First shadow host has an empty shadow root so that findFirst returns null (covers if (found) false branch)
+    const emptyShadowHost = document.createElement('div');
+    emptyShadowHost.attachShadow({ mode: 'open' });
+    // Second shadow host has a focusable button in its shadow root (covers if (found) true branch)
+    const shadowHost = document.createElement('div');
+    const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+    const shadowButton = document.createElement('button');
+    shadowButton.setAttribute('tabindex', '0');
+    shadowRoot.appendChild(shadowButton);
+    dialog.appendChild(emptyShadowHost);
+    dialog.appendChild(shadowHost);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const shadowButtonFocusSpy = jest.spyOn(shadowButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(shadowButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should return container itself when it is instance of HTMLElement, focusable, and has no shadow root', async () => {
+    // Use a class extending HTMLElement (no shadow root) so that findFirst(container) triggers
+    // the `node instance of HTMLElement && isFocusableElement(node)` early-return on line 184.
+    class FocusableNoShadowDialog extends HTMLElement {
+    }
+    const trigger = document.createElement('div');
+    const dialog = new FocusableNoShadowDialog();
+    dialog.setAttribute('tabindex', '0');
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const dialogFocusSpy = jest.spyOn(dialog, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(dialogFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should return dialog container itself when it has shadow root and is focusable', async () => {
+    // Use a class that extends HTMLElement so that container instance of HTMLElement is true,
+    // which exercises the getFirstFocusableElement container.shadowRoot branch.
+    class FocusableDialog extends HTMLElement {
+    }
+    const trigger = document.createElement('div');
+    const dialog = new FocusableDialog();
+    dialog.setAttribute('tabindex', '0');
+    dialog.attachShadow({ mode: 'open' });
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const dialogFocusSpy = jest.spyOn(dialog, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(dialogFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should find focusable element in light DOM when dialog container has shadow root', async () => {
+    // Use a class that extends HTMLElement so that container instance of HTMLElement is true,
+    // covering findFirst(container) returning non-null (short-circuits the || in the shadowRoot branch).
+    class ShadowDialog extends HTMLElement {
+    }
+    const trigger = document.createElement('div');
+    const dialog = new ShadowDialog();
+    dialog.attachShadow({ mode: 'open' });
+    const lightButton = document.createElement('button');
+    lightButton.setAttribute('tabindex', '0');
+    dialog.appendChild(lightButton);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const lightButtonFocusSpy = jest.spyOn(lightButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(lightButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+  it('should find focusable element in shadow DOM when dialog container light DOM has no focusable', async () => {
+    // Use a class that extends HTMLElement so that container instance of HTMLElement is true,
+    // covering findFirst(container) returning null and then findFirst(container.shadowRoot) being called.
+    class ShadowOnlyDialog extends HTMLElement {
+    }
+    const trigger = document.createElement('div');
+    const dialog = new ShadowOnlyDialog();
+    const dialogShadowRoot = dialog.attachShadow({ mode: 'open' });
+    const shadowButton = document.createElement('button');
+    shadowButton.setAttribute('tabindex', '0');
+    dialogShadowRoot.appendChild(shadowButton);
+    document.body.appendChild(trigger);
+    const slimmer = createSlimmer(trigger, dialog);
+    spyOn(uiUtils, 'getDeepActiveElementInShadow').and.returnValue(document.createElement('input'));
+    const shadowButtonFocusSpy = jest.spyOn(shadowButton, 'focus');
+    slimmer.isVoiceOverClick = true;
+    await slimmer.show();
+    await slimmer.componentDidRender();
+    expect(shadowButtonFocusSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/collection/helpers/translation/locales/en.js

@@ -161,5 +161,7 @@ export const staticTranslations = {
   '{0} Selected': '{0} Selected',
   'date picker': 'Date Picker',
   'Selected result': 'Selected result',
+  'Close event preview detail': 'Close event preview detail',
+  'More actions': 'More actions',
 };
 export default staticTranslations;

package/dist/collection/helpers/translation/tests/internal-translation-controller.test.js

@@ -251,6 +251,8 @@ describe('VegaTranslationController', () => {
       'The value does not exist in the source': 'The value does not exist in the source',
       'There are values that do not exist in the source': 'There are values that do not exist in the source',
       '{0} Selected': '{0} Selected',
+      'Close event preview detail': 'Close event preview detail',
+      'More actions': 'More actions',
     });
     /* eslint-enable @typescript-eslint/naming-convention,spellcheck/spell-checker */
   });

package/dist/collection/types/type-guard.js

@@ -3,7 +3,7 @@ import { Spacing } from '../constants/tokens/spacing';
 import { Shadows } from '../constants/tokens/shadows';
 import { Breakpoints } from '../constants/tokens/breakpoints';
 import { BorderRadius } from '../constants/tokens/border-radius';
-import { BorderStyle, BoxDisplay, CssStates, FlexAlignItem, FlexDirections, FlexJustifyContent, FlexWrap, TextAlign, } from '../constants/ui';
+import { BorderStyle, BoxDisplay, CssStates, FlexAlignItem, FlexDirections, FlexJustifyContent, GridJustifyItems, FlexWrap, TextAlign, } from '../constants/ui';
 import { GridColumnsRegex, GridRowsRegex } from '../constants/regex';
 import { TypographyKeys } from '../constants/public-api';
 import { Borders } from '../constants/tokens/borders';
@@ -142,6 +142,15 @@ export const isGridColumnsType = (input) => {
 export const isGridRowsType = (input) => {
   return (typeof input === 'string' || typeof input === 'number') && GridRowsRegex.test(input.toString());
 };
+/**
+ * Checks if the input is a valid GridJustifyItemsType value.
+ *
+ * @param {unknown} input - The input to test.
+ * @returns {boolean} indicating if the input is {@link GridJustifyItemsType}
+ */
+export const isGridJustifyItemsType = (input) => {
+  return typeof input === 'string' && GridJustifyItems.includes(input);
+};
 /**
  * If the input is a string, and that string is a key in the Breakpoints object, then the input is a GridRowType.
  *

package/dist/collection/utils/e2e-utils.js

@@ -243,9 +243,10 @@ export const getScreenshotDiffResults = async (page, desc, selector) => {
  * @param {InjectFeatureFlagsConfig} config.featureFlags -inject feature flags.
  * @param {string} config.timezone -sets the browser timezone (defaults to 'Asia/Shanghai' for consistent behavior across environments).
  * @param {boolean} config.isMobile - whether to set the viewport to a mobile device size (defaults to false).
+ * @param {boolean} config.initSuggestionsDropdown - whether to inject the vega-input suggestionsDropdownSource initializer (defaults to true).
  */
 export const initVegaE2EPage = async (content, config) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const page = await newE2EPage();
   if (config === null || config === void 0 ? void 0 : config.isMobile) {
     await page.setUserAgent('Mobile');
@@ -268,9 +269,23 @@ export const initVegaE2EPage = async (content, config) => {
 		window.VegaEnabledFeatureKeys = ${JSON.stringify(((_b = config === null || config === void 0 ? void 0 : config.featureFlags) === null || _b === void 0 ? void 0 : _b.enabled) || [])};
 		window.VegaDisabledFeatureKeys = ${JSON.stringify(((_c = config === null || config === void 0 ? void 0 : config.featureFlags) === null || _c === void 0 ? void 0 : _c.disabled) || [])};
 	</script>`;
+  const initSuggestionsDropdownScript = `<script>
+		// Initialize suggestionsDropdownSource to empty array after component loads
+		window.addEventListener('DOMContentLoaded', () => {
+			setTimeout(() => {
+				const vegaInputs = document.querySelectorAll('vega-input');
+				vegaInputs.forEach(input => {
+					if (!input.suggestionsDropdownSource) {
+						input.suggestionsDropdownSource = [];
+					}
+				});
+			}, 100);
+		});
+	</script>`;
+  const initSuggestionsDropdown = ((_d = config === null || config === void 0 ? void 0 : config.initSuggestionsDropdown) !== null && _d !== void 0 ? _d : true) ? initSuggestionsDropdownScript : '';
   const contentHtml = (config === null || config === void 0 ? void 0 : config.wrapped)
-    ? `${injectTestIcons}${script}${injectFeatureFlags}<div style="padding: 10px" id="visual-container">${content}</div>`
-    : injectTestIcons + script + injectFeatureFlags + content;
+    ? `${injectTestIcons}${script}${injectFeatureFlags}${initSuggestionsDropdown}<div style="padding: 10px" id="visual-container">${content}</div>`
+    : injectTestIcons + script + injectFeatureFlags + initSuggestionsDropdown + content;
   (config === null || config === void 0 ? void 0 : config.timeout)
     ? await page.setContent(contentHtml, { timeout: config.timeout })
     : await page.setContent(contentHtml);
@@ -339,3 +354,36 @@ export const injectE2EFontAwesomeLib = async (page) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   await new Promise((r) => setTimeout(r, 300)); // Note: Waiting for fontawesome.css loaded by addStyleTag
 };
+/* istanbul ignore next */
+/**
+ * NOTE: This method is only for **E2E** test cases.
+ * When you want to click an element nested in multiple level shadowRoot but the element is not clickable by normal click method, you can use this method to click the element by clicking the area off center of the element.
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} selector - the element you want to click, it can be a nested selector with >>> to separate each level of shadow DOM, for example: vega-progress-tracker >>> vega-carousel >>> .carousel-inner
+ */
+export const clickOffCenter = async (page, selector) => {
+  const box = await page.evaluate((selector) => {
+    const selectorParts = selector.split('>>>').map((item) => item.trim());
+    const rootSelector = selectorParts[0];
+    const nestedSelectors = selectorParts.slice(1);
+    // eslint-disable-next-line no-restricted-globals
+    let element = document.querySelector(rootSelector);
+    nestedSelectors.forEach((item) => {
+      var _a;
+      element = (_a = element === null || element === void 0 ? void 0 : element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(item);
+    });
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      return {
+        x: rect.x,
+        y: rect.y,
+      };
+    }
+    return null;
+  }, selector);
+  if (box) {
+    await page.mouse.click(box.x + 1, box.y);
+    await page.waitForChanges();
+  }
+};

package/dist/collection/utils/object.js

@@ -35,10 +35,12 @@ export function deepEqual(obj, compareTo) {
  *
  * @template T - The type of the input object.
  * @param {T} obj - The object to be cleaned.
- * @returns {Partial<T>} A new object with properties that have non-null and non-undefined values.
+ * @param {{ cleanEmptyString?: boolean }} [options] - Optional settings for cleaning the object.
+ * @param {boolean} [options.cleanEmptyString=false] - If true, also removes properties with empty string values.
+ * @returns {Partial<T>} A new object with properties that have non-null and non-undefined and empty string (optional) values.
  */
-export function cleanObject(obj) {
-  return Object.fromEntries(
+export function cleanObject(obj, options) {
+  return Object.fromEntries(Object.entries(obj).filter(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Object.entries(obj).filter(([_k, v]) => v !== null && v !== undefined));
+  ([_k, v]) => v !== null && v !== undefined && ((options === null || options === void 0 ? void 0 : options.cleanEmptyString) ? v !== '' : true)));
 }

package/dist/collection/utils/spec-utils.js

@@ -66,13 +66,14 @@ export const setPropOnMockHTMLElement = (element, propertyKey, value) => {
  *
  * @param {HTMLElement} element - The element to trigger the event on.
  * @param {string} eventName - The name of the event to trigger.
+ * @param {MouseEventInit} [options] - MouseEventInit - An object that contains properties
  */
-export const triggerMouseEvent = (element, eventName) => {
+export const triggerMouseEvent = (element, eventName, options = { bubbles: true, cancelable: true, view: window }) => {
   if (element instanceof HTMLElement) {
-    element.dispatchEvent(new MouseEvent(eventName, { bubbles: true, cancelable: true, view: window }));
+    element.dispatchEvent(new MouseEvent(eventName, options));
   }
   else {
-    element.dispatchEvent(new MockMouseEvent(eventName, { bubbles: true, cancelable: true, view: window }));
+    element.dispatchEvent(new MockMouseEvent(eventName, options));
   }
 };
 /* istanbul ignore next */

package/dist/collection/utils/ui.js

@@ -241,3 +241,23 @@ export function getDeepActiveElementInShadow(root = document) {
 export function isHTMLElement(element) {
   return element && element.nodeType === Node.ELEMENT_NODE;
 }
+/**
+ * Checks if the click event is likely triggered by VoiceOver by comparing the click coordinates with the center of the clicked element.
+ * VoiceOver clicks typically have coordinates that are very close to the center of the element,
+ *   so if the click is within 1 pixel of the center, we consider it a VoiceOver click.
+ *
+ * @param {MouseEvent} clickEvent - The click event to check.
+ * @returns {boolean} True if the click is likely a VoiceOver click, false otherwise.
+ */
+export function checkIsVoiceOverClick(clickEvent) {
+  if (clickEvent.detail === 0)
+    return true;
+  const targetElementRect = clickEvent.composedPath()[0].getBoundingClientRect();
+  const targetElementMiddleX = Math.floor(targetElementRect.x + targetElementRect.width / 2);
+  const targetElementMiddleY = Math.floor(targetElementRect.y + targetElementRect.height / 2);
+  const clickPositionX = clickEvent.clientX;
+  const clickPositionY = clickEvent.clientY;
+  return (clickEvent.detail === 1 &&
+    Math.abs(targetElementMiddleX - clickPositionX) <= 1 &&
+    Math.abs(targetElementMiddleY - clickPositionY) <= 1);
+}

package/dist/esm/align-left-7f959adf.js

@@ -0,0 +1,17 @@
+const AlignRight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 64c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
+};
+
+const AlignCenter = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M352 64c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32z"/></svg>`,
+};
+
+const AlignJustify = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z"/></svg>`,
+};
+
+const AlignLeft = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
+};
+
+export { AlignCenter as A, AlignJustify as a, AlignLeft as b, AlignRight as c };

package/dist/esm/{app-globals-3b97bb20.js → app-globals-776ccaa3.js}

@@ -1,19 +1,20 @@
 import { F as FeatureFlag } from './feature-flag-controller-30f7b625.js';
-import { V as VegaLoader, a as VegaNotify, b as VegaThemeManager, c as VegaEventManager, d as VegaZIndexManager, w as waitForVega, e as VegaSkeletonLoader, f as VegaTranslation, g as VegaRTETokenExtension, h as VegaRTELanguageExtension, i as VegaRTEFunctionExtension } from './token-extension-ffd98170.js';
+import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, w as waitForVega, d as VegaSkeletonLoader, e as VegaTranslation, f as VegaRTETokenExtension, g as VegaRTELanguageExtension, h as VegaRTEFunctionExtension, i as VegaRTETableExtension } from './token-extension-612575cb.js';
+import { V as VegaThemeManager } from './split-cell-operation-55cd9fae.js';
 import { M as MapToComponentMethod, V as VegaSlimmer, s as setVegaLogLevel, G as GlobalSlimmersRegistry } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaDialog } from './vega-dialog-controller-bbb2fc52.js';
 import { T as TypographyUrls } from './typography-396de03f.js';
 import { V as VegaIconManager } from './icon-manager-539d7cf7.js';
-import { V as VegaInternalTranslation, s as staticTranslations } from './internal-translation-controller-0787a7a7.js';
-import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-c023326d.js';
+import { V as VegaInternalTranslation, s as staticTranslations } from './internal-translation-controller-b08aa9ab.js';
+import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-b9c3c2f8.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
 import { U as UPDATE_TRANSLATION } from './static-subject-title-52f93124.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { f as forceUpdate } from './index-090d31ca.js';
-import { V as VegaRTEContent } from './dto-renderer-manager-73df5cbe.js';
+import { V as VegaRTEContent } from './content-state-dad1fd71.js';
 import { v as vegaNonceManager, s as setVegaNonce } from './vega-nonce-manager-497e5eb5.js';
-import { V as VegaRTEPresetToolbarItems } from './code-block-d65bab61.js';
+import { V as VegaRTEPresetToolbarItems } from './code-block-58d1dbe5.js';
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -389,12 +390,13 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELanguageExtension = VegaRTELanguageExtension;
   globalThis.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
   globalThis.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+  globalThis.VegaRTETableExtension = VegaRTETableExtension;
 }
 /**
  * Inject VegaPublicValidationRules to global as a public api
  */
 function injectVegaPublicValidationRules() {
-  void import('./public-rules-49912d52.js').then((module) => {
+  void import('./public-rules-1626fb0d.js').then((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
     });