@db-ux/react-core-components 1.0.0-test-13b991d

package/dist/utils/index.js

@@ -0,0 +1,166 @@
+export const uuid = () => {
+    var _a, _b;
+    if (typeof window !== 'undefined') {
+        if ((_a = window.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) {
+            return window.crypto.randomUUID();
+        }
+        else if ((_b = window.crypto) === null || _b === void 0 ? void 0 : _b.getRandomValues) {
+            return window.crypto.getRandomValues(new Uint32Array(3)).join('-');
+        }
+    }
+    return Math.random().toString().substring(2);
+};
+export const addAttributeToChildren = (element, attribute) => {
+    const children = element.children;
+    Object.values(children).forEach((child) => {
+        child.setAttribute(attribute.key, attribute.value);
+        if (child.children.length > 0) {
+            addAttributeToChildren(child, attribute);
+        }
+    });
+};
+export const cls = (...args) => {
+    let result = '';
+    for (const arg of args) {
+        if (arg) {
+            if (typeof arg === 'string') {
+                result += `${arg} `;
+            }
+            else {
+                for (const key in arg) {
+                    if (arg[key]) {
+                        result += `${key} `;
+                    }
+                }
+            }
+        }
+    }
+    return result.trim();
+};
+const reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'autoFocus', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color'];
+export const filterPassingProps = (props, propsPassingFilter) => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj, key) => {
+    return Object.assign(Object.assign({}, obj), { [key]: props[key] });
+}, {});
+export const getRootProps = (props, rooProps) => {
+    return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj, key) => {
+        return Object.assign(Object.assign({}, obj), { [key]: props[key] });
+    }, {});
+};
+export const visibleInVX = (el) => {
+    const { left, right } = el.getBoundingClientRect();
+    const { innerWidth } = window;
+    return left >= 0 && right <= innerWidth;
+};
+export const visibleInVY = (el) => {
+    const { top, bottom } = el.getBoundingClientRect();
+    const { innerHeight } = window;
+    return top >= 0 && bottom <= innerHeight;
+};
+export const isInView = (el) => {
+    var _a;
+    const { top, bottom, left, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let outTop = top < 0;
+    let outBottom = bottom > innerHeight;
+    let outLeft = left < 0;
+    let outRight = right > innerWidth;
+    // We need to check if it was already outside
+    const outsideY = el.hasAttribute('data-outside-vy');
+    const outsideX = el.hasAttribute('data-outside-vx');
+    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (parentRect) {
+        if (outsideY) {
+            const position = el.getAttribute('data-outside-vy');
+            if (position === 'top') {
+                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
+            }
+            else {
+                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
+            }
+        }
+        if (outsideX) {
+            const position = el.getAttribute('data-outside-vx');
+            if (position === 'left') {
+                outLeft = parentRect.left - (right - parentRect.right) < 0;
+            }
+            else {
+                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
+            }
+        }
+    }
+    return {
+        outTop,
+        outBottom,
+        outLeft,
+        outRight
+    };
+};
+export const handleDataOutside = (el) => {
+    const { outTop, outBottom, outLeft, outRight } = isInView(el);
+    let dataOutsidePair = {};
+    if (outTop || outBottom) {
+        dataOutsidePair = {
+            vy: outTop ? 'top' : 'bottom'
+        };
+        el.setAttribute('data-outside-vy', dataOutsidePair.vy);
+    }
+    else {
+        el.removeAttribute('data-outside-vy');
+    }
+    if (outLeft || outRight) {
+        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
+        el.setAttribute('data-outside-vx', dataOutsidePair.vx);
+    }
+    else {
+        el.removeAttribute('data-outside-vx');
+    }
+    return dataOutsidePair;
+};
+export const isArrayOfStrings = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
+const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
+export const hasVoiceOver = () => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));
+export const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
+/**
+ * Some frameworks like stencil would not add "true" as value for a prop
+ * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Some boolean to convert to string
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getBooleanAsString = (originBool) => {
+    if (originBool) {
+        return String(originBool);
+    }
+    return originBool;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getHideProp = (show) => {
+    if (show === undefined || show === null) {
+        return undefined;
+    }
+    return getBooleanAsString(!show);
+};
+export const stringPropVisible = (givenString, showString) => {
+    if (showString === undefined) {
+        return !!givenString;
+    }
+    else {
+        return showString && givenString;
+    }
+};
+export default {
+    getRootProps,
+    filterPassingProps,
+    cls,
+    addAttributeToChildren,
+    uuid,
+    visibleInVX,
+    visibleInVY,
+    isInView,
+    handleDataOutside,
+    isArrayOfStrings,
+    hasVoiceOver,
+    delay,
+    getBooleanAsString,
+    getHideProp,
+    stringPropVisible
+};

package/dist/utils/navigation.d.ts

@@ -0,0 +1,32 @@
+export type TriangleData = {
+    itemRect: DOMRect;
+    parentElementWidth: number;
+    subNavigationHeight: number;
+    padding: number;
+    outsideVX: 'left' | 'right' | undefined;
+    outsideVY: 'top' | 'bottom' | undefined;
+};
+export declare const isEventTargetNavigationItem: (event: unknown) => boolean;
+export declare class NavigationItemSafeTriangle {
+    private readonly element;
+    private readonly subNavigation;
+    private readonly parentSubNavigation;
+    private triangleData?;
+    private initialized;
+    private mouseX;
+    private mouseY;
+    constructor(element: HTMLElement | null, subNavigation: Element | null);
+    private init;
+    enableFollow(): void;
+    disableFollow(): void;
+    private getTriangleTipX;
+    private getTriangleTipY;
+    private hasMouseEnteredSubNavigation;
+    private getTriangleCoordinates;
+    followByMouseEvent(event: MouseEvent): void;
+}
+declare const _default: {
+    isEventTargetNavigationItem: (event: unknown) => boolean;
+    NavigationItemSafeTriangle: typeof NavigationItemSafeTriangle;
+};
+export default _default;

package/dist/utils/navigation.js

@@ -0,0 +1,136 @@
+import { handleDataOutside } from './index';
+export const isEventTargetNavigationItem = (event) => {
+    var _a, _b;
+    const { target } = event;
+    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
+};
+export class NavigationItemSafeTriangle {
+    constructor(element, subNavigation) {
+        var _a;
+        this.parentSubNavigation = null;
+        this.initialized = false;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.element = element;
+        this.subNavigation = subNavigation;
+        if (!this.element || !this.subNavigation) {
+            return;
+        }
+        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
+        /*
+         * only initiate if:
+         * 1. item is not at root navigation level
+         * 2. item is not in the mobile navigation / within db-drawer
+         */
+        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
+            this.init();
+        }
+    }
+    init() {
+        var _a, _b, _c;
+        const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+        // the triangle has the width of the sub-navigation, current nav-item can be wider.
+        // so the width of the triangle must be adapted to a possibly wider nav-item.
+        (_c = this.element) === null || _c === void 0 ? void 0 : _c.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
+        this.initialized = true;
+    }
+    enableFollow() {
+        var _a, _b;
+        if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
+            return;
+        }
+        const dataOutsidePair = handleDataOutside(this.subNavigation);
+        const itemRect = this.element.getBoundingClientRect();
+        const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+        this.triangleData = {
+            itemRect,
+            parentElementWidth,
+            subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
+            padding: (parentElementWidth - itemRect.width) / 2,
+            outsideVX: dataOutsidePair.vx,
+            outsideVY: dataOutsidePair.vy
+        };
+    }
+    disableFollow() {
+        this.triangleData = undefined;
+    }
+    getTriangleTipX() {
+        if (!this.triangleData)
+            return 0;
+        if (this.triangleData.outsideVX === 'right') {
+            // vertical flipped triangle needs an inverted x pos
+            return this.triangleData.itemRect.width - this.mouseX;
+        }
+        // triangle stops shrinking from 75% x pos
+        return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
+    }
+    getTriangleTipY() {
+        if (!this.triangleData)
+            return 0;
+        // padding must be added to the y pos of the tip so that the y pos matches the cursor
+        const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
+        if (this.triangleData.outsideVY === 'bottom') {
+            // add offset to tip y pos to match corrected sub-navigation y pos
+            return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
+        }
+        return mouseYLimited;
+    }
+    hasMouseEnteredSubNavigation() {
+        if (!this.triangleData) {
+            return false;
+        }
+        const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
+        if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
+            return true;
+        }
+        if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
+            return true;
+        }
+        return false;
+    }
+    getTriangleCoordinates(variant) {
+        if (!this.triangleData) {
+            return;
+        }
+        if (variant === 'fill-gap') {
+            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
+            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
+            return {
+                lb: `${xStart} ${itemHeight}`,
+                lt: `${xStart} 0`,
+                rt: '100% 0',
+                rb: `100% ${itemHeight}`
+            };
+        }
+        const tipX = this.getTriangleTipX();
+        const tipY = this.getTriangleTipY();
+        const lb = `${tipX}px ${tipY}px`;
+        const lt = `${tipX}px ${tipY}px`;
+        return {
+            lb,
+            lt,
+            rt: '100% 0',
+            rb: '100% 100%'
+        };
+    }
+    followByMouseEvent(event) {
+        if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
+            return;
+        }
+        this.mouseX = event.clientX - this.triangleData.itemRect.left;
+        this.mouseY = event.clientY - this.triangleData.itemRect.top;
+        const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
+        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
+        if (!coordinates) {
+            return;
+        }
+        this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
+        if (isOverSubNavigation) {
+            this.triangleData = undefined;
+        }
+    }
+}
+export default {
+    isEventTargetNavigationItem,
+    NavigationItemSafeTriangle
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@db-ux/react-core-components",
+  "version": "1.0.0-test-13b991d",
+  "description": "React components for @db-ux/core-components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/db-ux-design-system/core-web.git"
+  },
+  "license": "Apache-2.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "npm-run-all tsc",
+    "mv:dist": "cpr dist ../../build-outputs/react/dist -o",
+    "mv:package.json": "cpr package.json ../../build-outputs/react/package.json -o",
+    "mv:readme": "cpr README.md ../../build-outputs/react/README.md -o",
+    "open:report": "npx playwright show-report",
+    "postbuild": "npm-run-all -p mv:*",
+    "regenerate:screenshots": "playwright test -c playwright.config.ts --update-snapshots",
+    "test:components": "playwright test -c playwright.config.ts",
+    "test:windows": "playwright test -c playwright.screen-reader.win.ts",
+    "tsc": "tsc -p . --sourceMap false"
+  },
+  "devDependencies": {
+    "@playwright/experimental-ct-react": "1.50.1",
+    "@types/react": "^18.3.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@db-ux/core-components": "1.0.0-test-13b991d",
+    "@db-ux/core-foundations": "1.0.0-test-13b991d"
+  }
+}