genesys-spark-components 3.34.2 → 3.34.4

package/dist/cjs/{index-a4138a99.js → index-ce5e725f.js}

@@ -22,6 +22,14 @@ function _interopNamespace(e) {
 
 const NAMESPACE = 'genesys-webcomponents';
 
+/**
+ * Virtual DOM patching algorithm based on Snabbdom by
+ * Simon Friis Vindum (@paldepind)
+ * Licensed under the MIT License
+ * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
+ *
+ * Modified for Stencil's renderer and slot projection
+ */
 let scopeId;
 let contentRef;
 let hostTagName;
@@ -30,62 +38,10 @@ let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
 let isSvgMode = false;
 let queuePending = false;
-const win = typeof window !== 'undefined' ? window : {};
-const doc = win.document || { head: {} };
-const plt = {
-    $flags$: 0,
-    $resourcesUrl$: '',
-    jmp: (h) => h(),
-    raf: (h) => requestAnimationFrame(h),
-    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
-    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-    ce: (eventName, opts) => new CustomEvent(eventName, opts),
-};
-const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
-        try {
-            new CSSStyleSheet();
-            return typeof new CSSStyleSheet().replaceSync === 'function';
-        }
-        catch (e) { }
-        return false;
-    })()
-    ;
-const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-    if (listeners) {
-        listeners.map(([flags, name, method]) => {
-            const target = getHostListenerTarget(elm, flags) ;
-            const handler = hostListenerProxy(hostRef, method);
-            const opts = hostListenerOpts(flags);
-            plt.ael(target, name, handler, opts);
-            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
-        });
-    }
-};
-const hostListenerProxy = (hostRef, methodName) => (ev) => {
-    try {
-        {
-            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
-                // instance is ready, let's call it's member method for this event
-                hostRef.$lazyInstance$[methodName](ev);
-            }
-            else {
-                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-            }
-        }
-    }
-    catch (e) {
-        consoleError(e);
-    }
-};
-const getHostListenerTarget = (elm, flags) => {
-    if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
-        return win;
-    return elm;
+const getAssetPath = (path) => {
+    const assetUrl = new URL(path, plt.$resourcesUrl$);
+    return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
 };
-// prettier-ignore
-const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
-const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
 const createTime = (fnName, tagName = '') => {
     {
         return () => {
@@ -100,76 +56,7 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
-const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
-const registerStyle = (scopeId, cssText, allowCS) => {
-    let style = styles.get(scopeId);
-    if (supportsConstructableStylesheets && allowCS) {
-        style = (style || new CSSStyleSheet());
-        if (typeof style === 'string') {
-            style = cssText;
-        }
-        else {
-            style.replaceSync(cssText);
-        }
-    }
-    else {
-        style = cssText;
-    }
-    styles.set(scopeId, style);
-};
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
-    let scopeId = getScopeId(cmpMeta);
-    const style = styles.get(scopeId);
-    // if an element is NOT connected then getRootNode() will return the wrong root node
-    // so the fallback is to always use the document for the root node in those cases
-    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
-    if (style) {
-        if (typeof style === 'string') {
-            styleContainerNode = styleContainerNode.head || styleContainerNode;
-            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-            let styleElm;
-            if (!appliedStyles) {
-                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
-            }
-            if (!appliedStyles.has(scopeId)) {
-                {
-                    {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
-                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
-                }
-                if (appliedStyles) {
-                    appliedStyles.add(scopeId);
-                }
-            }
-        }
-        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-        }
-    }
-    return scopeId;
-};
-const attachStyles = (hostRef) => {
-    const cmpMeta = hostRef.$cmpMeta$;
-    const elm = hostRef.$hostElement$;
-    const flags = cmpMeta.$flags$;
-    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
-    if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
-        // only required when we're NOT using native shadow dom (slot)
-        // or this browser doesn't support native shadow dom
-        // and this host element was NOT created with SSR
-        // let's pick out the inner content for slot projection
-        // create a node to represent where the original
-        // content was first placed, which is useful later on
-        // DOM WRITE!!
-        elm['s-sc'] = scopeId;
-        elm.classList.add(scopeId + '-h');
-    }
-    endAttachStyles();
-};
-const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
+const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
 /**
  * Default style mode id
  */
@@ -318,6 +205,149 @@ const convertToPrivate = (node) => {
     vnode.$name$ = node.vname;
     return vnode;
 };
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
+const parsePropertyValue = (propValue, propType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
+        if (propType & 2 /* MEMBER_FLAGS.Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (propType & 1 /* MEMBER_FLAGS.String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
+                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
+                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+/**
+ * Helper function to create & dispatch a custom Event on a provided target
+ * @param elm the target of the Event
+ * @param name the name to give the custom Event
+ * @param opts options for configuring a custom Event
+ * @returns the custom Event
+ */
+const emitEvent = (elm, name, opts) => {
+    const ev = plt.ce(name, opts);
+    elm.dispatchEvent(ev);
+    return ev;
+};
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructableStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    let scopeId = getScopeId(cmpMeta);
+    const style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
+    if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+    }
+    endAttachStyles();
+};
+const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
 /**
  * Production setAccessor() function based on Preact by
  * Jason Miller (@developit)
@@ -1222,32 +1252,6 @@ const renderVdom = (hostRef, renderFnResults) => {
         relocateNodes.length = 0;
     }
 };
-const getElement = (ref) => (getHostRef(ref).$hostElement$ );
-const createEvent = (ref, name, flags) => {
-    const elm = getElement(ref);
-    return {
-        emit: (detail) => {
-            return emitEvent(elm, name, {
-                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
-                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
-                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
-                detail,
-            });
-        },
-    };
-};
-/**
- * Helper function to create & dispatch a custom Event on a provided target
- * @param elm the target of the Event
- * @param name the name to give the custom Event
- * @param opts options for configuring a custom Event
- * @returns the custom Event
- */
-const emitEvent = (elm, name, opts) => {
-    const ev = plt.ce(name, opts);
-    elm.dispatchEvent(ev);
-    return ev;
-};
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
         ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
@@ -1437,53 +1441,6 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
         ;
-/**
- * Parse a new property value for a given property type.
- *
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
- *   1. `any`, the type given to `propValue` in the function signature
- *   2. the type stored from `propType`.
- *
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
- *
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
- * ```tsx
- * <my-cmp prop-val={0}></my-cmp>
- * ```
- *
- * HTML prop values on the other hand, will always a string
- *
- * @param propValue the new value to coerce to some type
- * @param propType the type of the prop, expressed as a binary number
- * @returns the parsed/coerced value
- */
-const parsePropertyValue = (propValue, propType) => {
-    // ensure this value is of the correct prop type
-    if (propValue != null && !isComplexType(propValue)) {
-        if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
-            // per the HTML spec, any string value means it is a boolean true value
-            // but we'll cheat here and say that the string "false" is the boolean false
-            return propValue === 'false' ? false : propValue === '' || !!propValue;
-        }
-        if (propType & 2 /* MEMBER_FLAGS.Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
-        }
-        if (propType & 1 /* MEMBER_FLAGS.String */) {
-            // could have been passed as a number or boolean
-            // but we still want it as a string
-            return String(propValue);
-        }
-        // redundant return here for better minification
-        return propValue;
-    }
-    // not sure exactly what type we want
-    // so no need to change to a different type
-    return propValue;
-};
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
@@ -1527,6 +1484,16 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         }
     }
 };
+/**
+ * Attach a series of runtime constructs to a compiled Stencil component
+ * constructor, including getters and setters for the `@Prop` and `@State`
+ * decorators, callbacks for when attributes change, and so on.
+ *
+ * @param Cstr the constructor for a component that we need to process
+ * @param cmpMeta metadata collected previously about the component
+ * @param flags a number used to store a series of bit flags
+ * @returns a reference to the same constructor passed in (but now mutated)
+ */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
@@ -1901,10 +1868,40 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
-const getAssetPath = (path) => {
-    const assetUrl = new URL(path, plt.$resourcesUrl$);
-    return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (listeners) {
+        listeners.map(([flags, name, method]) => {
+            const target = getHostListenerTarget(elm, flags) ;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        {
+            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
 };
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
+        return win;
+    return elm;
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -2464,6 +2461,27 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     }, consoleError);
 };
 const styles = /*@__PURE__*/ new Map();
+const win = typeof window !== 'undefined' ? window : {};
+const doc = win.document || { head: {} };
+const plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    jmp: (h) => h(),
+    raf: (h) => requestAnimationFrame(h),
+    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+    ce: (eventName, opts) => new CustomEvent(eventName, opts),
+};
+const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
+        try {
+            new CSSStyleSheet();
+            return typeof new CSSStyleSheet().replaceSync === 'function';
+        }
+        catch (e) { }
+        return false;
+    })()
+    ;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueTask = (queue, write) => (cb) => {

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4138a99.js');
+const index = require('./index-ce5e725f.js');
 
 /*
- Stencil Client Patch Esm v2.18.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.18.1 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/dist/cjs/{on-click-outside-64dc5f14.js → on-click-outside-63ec9076.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a4138a99.js');
+const index = require('./index-ce5e725f.js');
 
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 const OnClickOutsideOptionsDefaults = {

package/dist/cjs/{on-mutation-74bf4591.js → on-mutation-3a62df7a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a4138a99.js');
+const index = require('./index-ce5e725f.js');
 
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 function OnMutation(opt) {

package/dist/cjs/{on-resize-b1f6a92b.js → on-resize-827aa87c.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a4138a99.js');
+const index = require('./index-ce5e725f.js');
 
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 function OnResize() {

package/dist/cjs/{usage-tracking-90b0b930.js → usage-tracking-9f3cf4bf.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "3.34.2";
+const version = "3.34.4";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";
@@ -76,7 +76,7 @@ const devDependencies = {
 	"@babel/preset-env": "^7.19.3",
 	"@commitlint/cli": "^17.1.2",
 	"@commitlint/config-conventional": "^17.1.0",
-	"@stencil/core": "^2.18.0",
+	"@stencil/core": "^2.18.1",
 	"@stencil/less": "^1.0.0",
 	"@stencil/react-output-target": "^0.3.1",
 	"@stencil/utils": "0.0.5",
@@ -85,8 +85,8 @@ const devDependencies = {
 	"@types/puppeteer": "^5.4.6",
 	"@types/resize-observer-browser": "^0.1.7",
 	"@types/sortablejs": "^1.15.0",
-	"@typescript-eslint/eslint-plugin": "^5.38.1",
-	"@typescript-eslint/parser": "^5.38.1",
+	"@typescript-eslint/eslint-plugin": "^5.39.0",
+	"@typescript-eslint/parser": "^5.39.0",
 	"axe-live": "^1.0.1",
 	"babel-loader": "^8.2.5",
 	commitizen: "^4.2.5",

package/dist/collection/collection-manifest.json

@@ -144,7 +144,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.0",
+    "version": "2.18.1",
     "typescriptVersion": "4.7.4"
   },
   "collections": [],

package/dist/collection/components/beta/gux-flyout-menu/gux-flyout-menu.js

@@ -1,7 +1,8 @@
-import { createPopper } from '@popperjs/core';
 import { h, Host } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '../../../usage-tracking';
-import { hideDelay, moveFocusDelay } from './gux-menu/gux-menu.common';
+import { hideDelay } from './gux-menu/gux-menu.common';
 export class GuxFlyoutMenu {
   constructor() {
     this.isShown = false;
@@ -27,9 +28,9 @@ export class GuxFlyoutMenu {
           this.focusOnMenu();
           return;
         case 'Enter':
-          this.hideDelayTimeout = setTimeout(() => {
+          this.hideDelayTimeout = afterNextRenderTimeout(() => {
             this.focusOnMenu();
-          }, moveFocusDelay);
+          });
           return;
       }
     }
@@ -44,9 +45,9 @@ export class GuxFlyoutMenu {
           this.root.focus();
         }
         else {
-          this.hideDelayTimeout = setTimeout(() => {
+          this.hideDelayTimeout = afterNextRenderTimeout(() => {
             this.focusOnMenu();
-          }, moveFocusDelay);
+          });
         }
         return;
     }

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-menu.common.js

@@ -1,5 +1,4 @@
 export const hideDelay = 250;
-export const moveFocusDelay = 100;
 export function menuNavigation(event, currentElement) {
   switch (event.key) {
     case 'ArrowUp':

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -1,6 +1,7 @@
-import { createPopper } from '@popperjs/core';
 import { h, Host } from '@stencil/core';
-import { hideDelay, moveFocusDelay, menuNavigation } from '../gux-menu.common';
+import { createPopper } from '@popperjs/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { hideDelay, menuNavigation } from '../gux-menu.common';
 export class GuxSubmenu {
   constructor() {
     this.isShown = false;
@@ -23,17 +24,18 @@ export class GuxSubmenu {
     menuNavigation(event, this.root);
     switch (event.key) {
       case 'Enter':
-        this.hideDelayTimeout = setTimeout(() => {
+        event.stopPropagation();
+        this.hideDelayTimeout = afterNextRenderTimeout(() => {
           this.focusOnSubmenu();
-        }, moveFocusDelay);
+        });
         void this.guxFocus();
         break;
       case 'ArrowRight':
         event.stopPropagation();
         this.show();
-        this.hideDelayTimeout = setTimeout(() => {
+        this.hideDelayTimeout = afterNextRenderTimeout(() => {
           this.focusOnSubmenu();
-        }, moveFocusDelay);
+        });
         break;
       case 'ArrowLeft':
       case 'Escape':
@@ -54,9 +56,9 @@ export class GuxSubmenu {
           this.root.focus();
         }
         else {
-          this.hideDelayTimeout = setTimeout(() => {
+          this.hideDelayTimeout = afterNextRenderTimeout(() => {
             this.focusOnSubmenu();
-          }, moveFocusDelay);
+          });
         }
         break;
     }

package/dist/collection/components/beta/gux-loading-message/gux-loading-message.js

@@ -1,4 +1,5 @@
 import { h, readTask } from '@stencil/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '../../../usage-tracking';
 import * as loadingMessageWidth from './gux-loading-message-constants';
 /**
@@ -33,7 +34,7 @@ export class GuxLoadingMessage {
     if (this.resizeObserver) {
       this.resizeObserver.observe(this.root);
     }
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.updateLoadingMessageSize();
     }, 500);
   }

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-beta.js

@@ -1,4 +1,5 @@
 import { h, readTask } from '@stencil/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '../../../usage-tracking';
 /**
  * The minimum size in px at which the advanced layout will display.
@@ -92,7 +93,7 @@ export class GuxPaginationBeta {
     if (this.resizeObserver) {
       this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-pagination-container'));
     }
-    setTimeout(() => {
+    afterNextRenderTimeout(() => {
       this.checkPaginationContainerWidthForLayout();
     }, 500);
   }