@sap-ux/ui-components 1.14.2 → 1.15.0

package/dist/components/UIQuickNavigation/UIQuickNavigation.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import './UIQuickNavigation.scss';
+export declare const QUICK_NAVIGATION_ATTRIBUTE = "data-quick-navigation-key";
+export declare const QUICK_NAVIGATION_ATTRIBUTE_OFFSET_Y = "data-quick-navigation-offset-y";
+export declare const QUICK_NAVIGATION_ATTRIBUTE_OFFSET_X = "data-quick-navigation-offset-x";
+export interface UIQuickNavigationAttribute {
+    [QUICK_NAVIGATION_ATTRIBUTE]: string;
+    [QUICK_NAVIGATION_ATTRIBUTE_OFFSET_Y]?: string;
+    [QUICK_NAVIGATION_ATTRIBUTE_OFFSET_X]?: string;
+}
+export declare const setQuickNavigationKey: (key: string, offset?: UIQuickNavigationOffset) => UIQuickNavigationAttribute;
+export interface UIQuickNavigationOffset {
+    x: number;
+    y: number;
+}
+export interface UIQuickNavigationProps {
+    className?: string;
+    children: React.ReactNode;
+    inline?: boolean;
+    offset?: UIQuickNavigationOffset;
+}
+/**
+ * Method checks if quick navigation should be enabled for passed keyboard event.
+ * Quick navigation is enabled when user hold 'ctrl + alt' or 'meta + alt'.
+ *
+ * @param event Keyboard event.
+ * @returns True if quick navigation should be enabled for passed keyboard event.
+ */
+export declare const isQuickNavigationEnabled: (event: KeyboardEvent) => boolean;
+export declare const UIQuickNavigation: React.FC<UIQuickNavigationProps>;
+//# sourceMappingURL=UIQuickNavigation.d.ts.map

package/dist/components/UIQuickNavigation/UIQuickNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIQuickNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/UIQuickNavigation/UIQuickNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,0BAA0B,CAAC;AAElC,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AACtE,eAAO,MAAM,mCAAmC,mCAAmC,CAAC;AACpF,eAAO,MAAM,mCAAmC,mCAAmC,CAAC;AAUpF,MAAM,WAAW,0BAA0B;IACvC,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACrC,CAAC,mCAAmC,CAAC,CAAC,EAAE,MAAM,CAAC;IAC/C,CAAC,mCAAmC,CAAC,CAAC,EAAE,MAAM,CAAC;CAClD;AAED,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAAW,uBAAuB,KAAG,0BASrF,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBAAsB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CACpC;AA+FD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,aAAa,KAAG,OAE/D,CAAC;AAwBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsF9D,CAAC"}

package/dist/components/UIQuickNavigation/UIQuickNavigation.js

@@ -0,0 +1,251 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIQuickNavigation = exports.isQuickNavigationEnabled = exports.setQuickNavigationKey = exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_X = exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_Y = exports.QUICK_NAVIGATION_ATTRIBUTE = void 0;
+const react_1 = __importStar(require("react"));
+const utilities_1 = require("../../utilities");
+require("./UIQuickNavigation.scss");
+exports.QUICK_NAVIGATION_ATTRIBUTE = 'data-quick-navigation-key';
+exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_Y = 'data-quick-navigation-offset-y';
+exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_X = 'data-quick-navigation-offset-x';
+const QUICK_NAVIGATION_CLASSES = {
+    inline: 'quick-navigation--inline',
+    external: 'quick-navigation--external'
+};
+const EXTERNAL_HELPER_OFFSET = {
+    x: 15,
+    y: 15
+};
+const setQuickNavigationKey = (key, offset) => {
+    const attributes = {
+        [exports.QUICK_NAVIGATION_ATTRIBUTE]: key.toUpperCase()
+    };
+    if (offset) {
+        attributes[exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_Y] = offset.y.toString();
+        attributes[exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_X] = offset.x.toString();
+    }
+    return attributes;
+};
+exports.setQuickNavigationKey = setQuickNavigationKey;
+/**
+ * Method returns CSS classnames based on current quick navigation state.
+ *
+ * @param className External classname(s).
+ * @param enabled Is quick navigation enabled/activated.
+ * @param inline Is quick navigation should be rendered with inline approach.
+ * @returns CSS classnames based on current quick navigation state.
+ */
+function getClassName(className, enabled, inline) {
+    const result = [className];
+    if (enabled && inline) {
+        result.push(QUICK_NAVIGATION_CLASSES.inline);
+    }
+    return result.join(' ');
+}
+/**
+ * Method returns scroll offset position for external rendering approach.
+ * External rendering happens in 'document.body' and body scroll position should be considered.
+ *
+ * @returns Scroll position of body and html.
+ */
+function getScrollOffset() {
+    let container = document.body;
+    const scrollOffset = {
+        y: 0,
+        x: 0
+    };
+    do {
+        scrollOffset.y += container.scrollTop || 0;
+        scrollOffset.x += container.scrollLeft || 0;
+        container = container.parentNode && (0, utilities_1.isHTMLElement)(container.parentNode) ? container.parentNode : undefined;
+    } while (container);
+    return scrollOffset;
+}
+/**
+ * Method returns offset for passed DOM element.
+ *
+ * @param target Target element to detect offset.
+ * @returns Scroll position of body and html.
+ */
+function getOffsetFromElement(target) {
+    const yAttr = target.getAttribute(exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_Y);
+    const xAttr = target.getAttribute(exports.QUICK_NAVIGATION_ATTRIBUTE_OFFSET_X);
+    if (!yAttr || !xAttr) {
+        return undefined;
+    }
+    const y = parseFloat(yAttr);
+    const x = parseFloat(xAttr);
+    return !isNaN(y) && !isNaN(x) ? { y, x } : undefined;
+}
+/**
+ * Method toggles visibility of external quick navigation helpers UI.
+ *
+ * @param enabled Is quick navigation enabled/activated.
+ * @param offset Offset values for helper position.
+ */
+function toggleExternalVisibility(enabled, offset = EXTERNAL_HELPER_OFFSET) {
+    const holder = document.body;
+    // Cleanup container
+    const existingContainer = document.querySelector(`.${QUICK_NAVIGATION_CLASSES.external}`);
+    if (existingContainer) {
+        holder.removeChild(existingContainer);
+    }
+    // Show helpers if quick navigation is active
+    if (enabled) {
+        // Create external container
+        const externalContainer = document.createElement('div');
+        externalContainer.classList.add(QUICK_NAVIGATION_CLASSES.external);
+        const navigationTargets = document.querySelectorAll(`[${exports.QUICK_NAVIGATION_ATTRIBUTE}]`);
+        // Create external DOM element to each navigation target
+        const scrollOffset = getScrollOffset();
+        navigationTargets.forEach((target) => {
+            const rect = target.getBoundingClientRect();
+            const helper = document.createElement('div');
+            helper.textContent = target.getAttribute(exports.QUICK_NAVIGATION_ATTRIBUTE);
+            const elementOffset = getOffsetFromElement(target) ?? offset;
+            const position = {
+                top: rect.top + scrollOffset.y - elementOffset.y,
+                left: rect.left + scrollOffset.x - elementOffset.x
+            };
+            position.top = Math.max(position.top, 0);
+            position.left = Math.max(position.left, 0);
+            helper.style.top = `${position.top}px`;
+            helper.style.left = `${position.left}px`;
+            externalContainer.appendChild(helper);
+        });
+        holder.appendChild(externalContainer);
+    }
+}
+/**
+ * Method checks if quick navigation should be enabled for passed keyboard event.
+ * Quick navigation is enabled when user hold 'ctrl + alt' or 'meta + alt'.
+ *
+ * @param event Keyboard event.
+ * @returns True if quick navigation should be enabled for passed keyboard event.
+ */
+const isQuickNavigationEnabled = (event) => {
+    return (event.ctrlKey || event.metaKey) && event.altKey;
+};
+exports.isQuickNavigationEnabled = isQuickNavigationEnabled;
+/**
+ * Method resolves passed keyboard code by removing 'Digit' and 'Key' keywords.
+ *
+ * @param code Code from keyboard event.
+ * @returns Resolved char or digit.
+ */
+function resolveKeyCode(code) {
+    return code.replace('Digit', '').replace('Key', '').toUpperCase();
+}
+/**
+ * Method to stop event bubbling.
+ *
+ * @param event Keyboard event.
+ */
+function stopEventBubling(event) {
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    event.preventDefault();
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const UIQuickNavigation = (props) => {
+    const { className, children, inline, offset } = props;
+    const [enabled, setEnabled] = (0, react_1.useState)(false);
+    const navigated = (0, react_1.useRef)(false);
+    // Handle visibility for 'external' rendering approach(helpers rendered outside of target navigation containers)
+    (0, react_1.useEffect)(() => {
+        if (inline) {
+            return;
+        }
+        toggleExternalVisibility(enabled, offset);
+    }, [enabled]);
+    /**
+     * Method handles key down event.
+     *
+     * @param event Key down event.
+     */
+    const onKeyDown = (0, react_1.useCallback)((event) => {
+        let activated = enabled;
+        if (!enabled && (0, exports.isQuickNavigationEnabled)(event)) {
+            setEnabled(true);
+            activated = true;
+        }
+        if (!activated) {
+            return;
+        }
+        // Quick navigation is active - handle final key press
+        const resolvedKey = resolveKeyCode(event.code);
+        const navigationElement = document.querySelector(`[${exports.QUICK_NAVIGATION_ATTRIBUTE}="${resolvedKey}"]`);
+        const startElement = navigationElement?.firstElementChild;
+        if (navigationElement && startElement && (0, utilities_1.isHTMLElement)(startElement)) {
+            const firstFocusableElement = (0, utilities_1.getUIFirstFocusable)(navigationElement, startElement, true);
+            if (firstFocusableElement) {
+                // Set focus visiblity in UI(fluent-ui feature)
+                (0, utilities_1.setUIFocusVisibility)(true, firstFocusableElement);
+                // Apply focus to element
+                firstFocusableElement?.focus();
+                // Prevent event bubbling
+                stopEventBubling(event);
+                navigated.current = true;
+            }
+            // Disable/deactivate UI with quick navigation
+            setEnabled(false);
+        }
+    }, [enabled]);
+    /**
+     * Method handles key up and window blur events to detect if quick navigation should be deactivated.
+     *
+     * @param event Key up or blur event.
+     */
+    const onRelease = (0, react_1.useCallback)((event) => {
+        if (enabled && (!('keyCode' in event) || !(0, exports.isQuickNavigationEnabled)(event))) {
+            setEnabled(false);
+        }
+        if (navigated.current) {
+            navigated.current = false;
+            stopEventBubling(event);
+        }
+    }, [enabled]);
+    /**
+     * Attach events to listen keydown/keyup within window and blur from window.
+     */
+    (0, react_1.useEffect)(() => {
+        document.body.addEventListener('keydown', onKeyDown);
+        document.body.addEventListener('keyup', onRelease);
+        window.addEventListener('blur', onRelease);
+        return () => {
+            toggleExternalVisibility(false);
+            document.body.removeEventListener('keydown', onKeyDown);
+            document.body.removeEventListener('keyup', onRelease);
+            window.removeEventListener('blur', onRelease);
+        };
+    }, [onKeyDown, onRelease]);
+    return react_1.default.createElement("div", { className: getClassName(className, enabled, inline) }, children);
+};
+exports.UIQuickNavigation = UIQuickNavigation;
+exports.UIQuickNavigation.defaultProps = {
+    inline: false,
+    offset: EXTERNAL_HELPER_OFFSET
+};
+//# sourceMappingURL=UIQuickNavigation.js.map

package/dist/components/UIQuickNavigation/UIQuickNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIQuickNavigation.js","sourceRoot":"","sources":["../../../src/components/UIQuickNavigation/UIQuickNavigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/UIQuickNavigation/UIQuickNavigation.scss

@@ -0,0 +1,33 @@
+// Define here
+@mixin quick-navigation-helper {
+    font-family: var(--vscode-font-family);
+    color: var(--vscode-activityBarBadge-foreground);
+    font-size: 16px;
+    position: absolute;
+    background: var(--vscode-activityBarBadge-background);
+    padding: 5px;
+    width: 18px;
+    height: 18px;
+    text-align: center;
+    line-height: 18px;
+    border-radius: 2px;
+    box-shadow: var(--ui-box-shadow-small);
+    pointer-events: none;
+}
+
+.quick-navigation {
+    // Approach where we render helpers internally inside target containers
+    &--inline [data-quick-navigation-key] {
+        position: relative;
+        &:before {
+            @include quick-navigation-helper;
+            content: attr(data-quick-navigation-key);
+            top: -15px;
+            left: -15px;
+        }
+    }
+    // Approach where we render helpers externally outside target containers
+    &--external > div {
+        @include quick-navigation-helper;
+    }
+}

package/dist/components/UIQuickNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UIQuickNavigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UIQuickNavigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UIQuickNavigation/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/UIQuickNavigation/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UIQuickNavigation"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UIQuickNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UIQuickNavigation/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sDAAoC"}

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export * from './UIMessageBar';
 export * from './UIModal';
 export * from './UIOverlay';
 export * from './UIPersona';
+export * from './UIQuickNavigation';
 export * from './UISearchBox';
 export * from './UISeparator';
 export * from './UISection';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -37,6 +37,7 @@ __exportStar(require("./UIMessageBar"), exports);
 __exportStar(require("./UIModal"), exports);
 __exportStar(require("./UIOverlay"), exports);
 __exportStar(require("./UIPersona"), exports);
+__exportStar(require("./UIQuickNavigation"), exports);
 __exportStar(require("./UISearchBox"), exports);
 __exportStar(require("./UISeparator"), exports);
 __exportStar(require("./UISection"), exports);

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,6CAA2B;AAC3B,iDAA+B;AAC/B,8CAA4B;AAC5B,+CAA6B;AAC7B,kDAAgC;AAChC,+CAA6B;AAC7B,qDAAmC;AACnC,mDAAiC;AACjC,6CAA2B;AAC3B,+CAA6B;AAC7B,oDAAkC;AAClC,gDAA8B;AAC9B,2CAAyB;AACzB,4CAA0B;AAC1B,4CAA0B;AAC1B,2CAAyB;AACzB,2CAAyB;AACzB,6CAA2B;AAC3B,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,4CAA0B;AAC1B,2CAAyB;AACzB,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,8CAA4B;AAC5B,uDAAqC;AACrC,mDAAiC;AACjC,sDAAoC;AACpC,kDAAgC;AAChC,iDAA+B;AAC/B,oDAAkC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,6CAA2B;AAC3B,iDAA+B;AAC/B,8CAA4B;AAC5B,+CAA6B;AAC7B,kDAAgC;AAChC,+CAA6B;AAC7B,qDAAmC;AACnC,mDAAiC;AACjC,6CAA2B;AAC3B,+CAA6B;AAC7B,oDAAkC;AAClC,gDAA8B;AAC9B,2CAAyB;AACzB,4CAA0B;AAC1B,4CAA0B;AAC1B,2CAAyB;AACzB,2CAAyB;AACzB,6CAA2B;AAC3B,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,8CAA4B;AAC5B,sDAAoC;AACpC,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,4CAA0B;AAC1B,2CAAyB;AACzB,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,8CAA4B;AAC5B,uDAAqC;AACrC,mDAAiC;AACjC,sDAAoC;AACpC,kDAAgC;AAChC,iDAA+B;AAC/B,oDAAkC"}

package/dist/utilities/Dom.d.ts

@@ -4,7 +4,7 @@
  * @param element Element.
  * @returns True if passed Element is HTML Element.
  */
-export declare function isHTMLElement(element: Element): element is HTMLElement;
+export declare function isHTMLElement(element: Element | ParentNode): element is HTMLElement;
 /**
  * Method checks if passed Element is HTML Input Element.
  *

package/dist/utilities/Dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../src/utilities/Dom.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CAEtE;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,OAAO,IAAI,gBAAgB,CAE9F"}
+{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../src/utilities/Dom.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,IAAI,WAAW,CAEnF;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,OAAO,IAAI,gBAAgB,CAE9F"}

package/dist/utilities/Dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../src/utilities/Dom.ts"],"names":[],"mappings":";;;AAAA;;;;;GAKG;AACH,SAAgB,aAAa,CAAC,OAAgB;IAC1C,OAAO,OAAO,IAAI,OAAO,CAAC;AAC9B,CAAC;AAFD,sCAEC;AAED;;;;;GAKG;AACH,SAAgB,kBAAkB,CAAC,OAA8B;IAC7D,OAAO,OAAO,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC;AACrF,CAAC;AAFD,gDAEC"}
+{"version":3,"file":"Dom.js","sourceRoot":"","sources":["../../src/utilities/Dom.ts"],"names":[],"mappings":";;;AAAA;;;;;GAKG;AACH,SAAgB,aAAa,CAAC,OAA6B;IACvD,OAAO,OAAO,IAAI,OAAO,CAAC;AAC9B,CAAC;AAFD,sCAEC;AAED;;;;;GAKG;AACH,SAAgB,kBAAkB,CAAC,OAA8B;IAC7D,OAAO,OAAO,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC;AACrF,CAAC;AAFD,gDAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sap-ux/ui-components",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "license": "Apache-2.0",
   "description": "SAP UI Components Library",
   "repository": {