@db-ux/react-core-components 4.11.1 → 4.12.1

package/dist/utils/form-components.js

@@ -1,35 +1,72 @@
-import { delay as e } from "./index.js";
-//#region src/utils/form-components.ts
-var t = (e, t, n) => {
-	e.form && !e._dbFormResetListenerAdded && (e.form.addEventListener("reset", (e) => {
-		t(e);
-	}, { signal: n }), e._dbFormResetListenerAdded = !0);
-}, n = (n, r, i, a) => {
-	t(n, (t) => {
-		e(() => {
-			let e = r.checked ? r.checked : r.defaultChecked ? r.defaultChecked : n.checked;
-			i({
-				...t,
-				target: {
-					...t.target,
-					checked: e
-				}
-			});
-		}, 1);
-	}, a);
-}, r = (n, r, i, a) => {
-	t(n, (t) => {
-		e(() => {
-			let e = r.value ? r.value : r.defaultValue ? r.defaultValue : n.value;
-			i({
-				...t,
-				target: {
-					...t.target,
-					value: e
-				}
-			});
-		}, 1);
-	}, a);
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { delay } from './index.js';
+const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
+export const handleFrameworkEventAngular = (component, event, modelValue = 'value', lastValue) => {
+    const value = event.target[modelValue];
+    const type = event.target?.type;
+    if (!value && value !== '' && ['date', 'time', 'week', 'month', 'datetime-local'].includes(type)) {
+        // If value is empty and type date we skip `writingValue` function
+        return;
+    }
+    if (type === 'number') {
+        if (event.type === 'input') {
+            if (specialNumberCharacters.includes(event.data) || specialNumberCharacters.some(specialCharacter => lastValue?.toString().includes(specialCharacter)) && event.inputType === 'deleteContentBackward') {
+                // Skip `writingValue` function if number type and input event
+                // and `.` or `,` or 'e', 'E', '+', '-' was typed
+                // or content was deleted but last number had a `.`
+                return;
+            }
+        }
+        else if (event.type === 'change') {
+            // Skip `writingValue` function if number type and change event
+            return;
+        }
+    }
+    component.propagateChange(value);
+    component.writeValue(value);
+};
+export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
+    // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
+    emit(`update:${modelValue}`, event.target[modelValue]);
+};
+export const addResetEventListener = (element, resetFunction, signal) => {
+    if (element.form && !element._dbFormResetListenerAdded) {
+        element.form.addEventListener('reset', (event) => {
+            resetFunction(event);
+        }, {
+            signal
+        });
+        // Mark as added to avoid duplicate listeners
+        element._dbFormResetListenerAdded = true;
+    }
+};
+export const addCheckedResetEventListener = (element, props, resetFunction, signal) => {
+    addResetEventListener(element, (event) => {
+        void delay(() => {
+            const resetValue = props.checked ? props.checked : props.defaultChecked ? props.defaultChecked : element.checked;
+            const valueEvent = {
+                ...event,
+                target: {
+                    ...event.target,
+                    checked: resetValue
+                }
+            };
+            resetFunction(valueEvent);
+        }, 1);
+    }, signal);
+};
+export const addValueResetEventListener = (element, props, resetFunction, signal) => {
+    addResetEventListener(element, (event) => {
+        void delay(() => {
+            const resetValue = props.value ? props.value : props.defaultValue ? props.defaultValue : element.value;
+            const valueEvent = {
+                ...event,
+                target: {
+                    ...event.target,
+                    value: resetValue
+                }
+            };
+            resetFunction(valueEvent);
+        }, 1);
+    }, signal);
 };
-//#endregion
-export { n as addCheckedResetEventListener, t as addResetEventListener, r as addValueResetEventListener };

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { ClickEvent, GeneralKeyboardEvent } from '../shared/model';
+import { ClickEvent, GeneralKeyboardEvent } from '../shared/model.js';
 export declare const uuid: () => string;
 export declare const addAttributeToChildren: (element: Element, attribute: {
     key: string;

package/dist/utils/index.js

@@ -1,49 +1,170 @@
-//#region src/utils/index.ts
-var e = () => {
-	if (typeof window < "u") {
-		if (window.crypto?.randomUUID) return window.crypto.randomUUID();
-		if (window.crypto?.getRandomValues) return window.crypto.getRandomValues(new Uint32Array(3)).join("-");
-	}
-	return Math.random().toString().substring(2);
-}, t = (e, n) => {
-	let r = e.children;
-	Object.values(r).forEach((e) => {
-		e.setAttribute(n.key, n.value), e.children.length > 0 && t(e, n);
-	});
-}, n = (...e) => {
-	let t = "";
-	for (let n of e) if (n) if (typeof n == "string") t += `${n} `;
-	else for (let e in n) n[e] && (t += `${e} `);
-	return t.trim();
-}, r = (e) => Array.isArray(e) && e.every((e) => typeof e == "string"), i = [
-	"Mac",
-	"iPhone",
-	"iPad",
-	"iPod"
-], a = () => typeof window < "u" && i.some((e) => window.navigator.userAgent.includes(e)), o = () => {
-	if (typeof window > "u" || typeof navigator > "u") return !1;
-	let e = navigator.userAgent, t = /iP(ad|hone|od)/.test(e), n = !!e.match(/Safari/) && !e.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
-	return t && n;
-}, s = (e, t) => new Promise(() => setTimeout(e, t)), c = (e, t) => {
-	if (e != null) return String(typeof e == "string" ? e === "" || e === "true" || t?.toLowerCase() === e.toLowerCase() : e);
-}, l = (e, t) => {
-	if (e != null) return typeof e == "string" ? e === "" || e === "true" || t?.toLowerCase() === e.toLowerCase() : !!e;
-}, u = (e, t) => {
-	if (!(e == null && t == null)) return Number(e ?? t);
-}, d = (e) => {
-	if (e != null) return e === "any" ? "any" : Number(e);
-}, f = (e, t) => t && ["number", "range"].includes(t) ? u(e) : e, p = (e) => typeof e == "string" ? e !== "false" : e, m = (e) => {
-	if (e != null) return c(!p(e), "show");
-}, h = (e, t) => (t === void 0 || p(t)) && !!e, g = (e) => e.querySelector("input[type=\"search\"]"), _ = (t, n) => `${n}${t.id ?? t.value ?? e()}`, v = (e) => e.key !== void 0, y = ({ semantic: e, role: t, ariaLive: n }) => {
-	if (t) return t;
-	if (n) return "article";
-	switch (e) {
-		case "critical":
-		case "warning": return "alert";
-		case "informational":
-		case "successful": return "status";
-		default: return "article";
-	}
-};
-//#endregion
-export { t as addAttributeToChildren, n as cls, s as delay, l as getBoolean, c as getBooleanAsString, m as getHideProp, f as getInputValue, y as getNotificationRole, u as getNumber, _ as getOptionKey, g as getSearchInput, d as getStep, a as hasVoiceOver, r as isArrayOfStrings, o as isIOSSafari, v as isKeyboardEvent, h as stringPropVisible, e as uuid };
+export const uuid = () => {
+    if (typeof window !== 'undefined') {
+        if (window.crypto?.randomUUID) {
+            return window.crypto.randomUUID();
+        }
+        else if (window.crypto?.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();
+};
+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));
+/**
+ * Determines if the current browser is Safari running on an iOS device.
+ *
+ * This function checks the user agent string to verify both iOS platform
+ * (iPad, iPhone, or iPod) and Safari browser, excluding other browsers
+ * such as Chrome, Firefox, Opera, and Edge on iOS.
+ *
+ * @returns {boolean} `true` if the browser is Safari on iOS, otherwise `false`.
+ */
+export const isIOSSafari = () => {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined')
+        return false;
+    const ua = navigator.userAgent;
+    // iOS detection
+    const isIOS = /iP(ad|hone|od)/.test(ua);
+    // Safari detection (not Chrome or Firefox on iOS)
+    const isSafari = !!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
+    return isIOS && isSafari;
+};
+export const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
+/**
+ * Converts boolean-like inputs to "true" or "false" strings.
+ * Handles HTML-style boolean attributes where an empty string or the
+ * attribute's own name as value (e.g. noText="noText") should be treated as true.
+ * Some frameworks like Stencil do not add "true" as value for a prop
+ * if it is used in a framework like Angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Boolean or string value to convert
+ * @param propertyName The prop/attribute name — when originBool is a string equal
+ *   to this name (case-insensitive), it is treated as true
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getBooleanAsString = (originBool, propertyName) => {
+    if (originBool === undefined || originBool === null)
+        return;
+    if (typeof originBool === 'string') {
+        return String(originBool === '' || originBool === 'true' || propertyName?.toLowerCase() === originBool.toLowerCase());
+    }
+    return String(originBool);
+};
+export const getBoolean = (originBool, propertyName) => {
+    if (originBool === undefined || originBool === null)
+        return;
+    if (typeof originBool === 'string') {
+        return Boolean(originBool === '' || originBool === 'true' || propertyName?.toLowerCase() === originBool.toLowerCase());
+    }
+    return Boolean(originBool);
+};
+export const getNumber = (originNumber, alternativeNumber) => {
+    if ((originNumber === undefined || originNumber === null) && (alternativeNumber === undefined || alternativeNumber === null)) {
+        return;
+    }
+    return Number(originNumber ?? alternativeNumber);
+};
+/**
+ * Retrieves the step value for an input element.
+ *
+ * The step attribute can be a number or the special string "any".
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step
+ *
+ * @param step - The step value, which can be a number, string, or undefined.
+ * @returns The step value as a number or the string "any", or undefined.
+ */
+export const getStep = (step) => {
+    if (step === undefined || step === null) {
+        return;
+    }
+    if (step === 'any') {
+        return 'any';
+    }
+    return Number(step);
+};
+/**
+ * Retrieves the input value based on the provided value and input type.
+ *
+ * If the input type is "number" or "range", the value is processed as a number.
+ * Otherwise, the value is returned as-is.
+ *
+ * @param value - The input value, which can be a number, string, or undefined.
+ * @param inputType - The type of the input, such as "number", "range", or other string types.
+ * @returns The processed input value as a string, number, or undefined.
+ */
+export const getInputValue = (value, inputType) => {
+    return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
+};
+const toBool = (value) => typeof value === 'string' ? value !== 'false' : value;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getHideProp = (show) => {
+    if (show === undefined || show === null) {
+        return undefined;
+    }
+    return getBooleanAsString(!toBool(show), 'show');
+};
+export const stringPropVisible = (givenString, showString) => {
+    if (showString === undefined) {
+        return !!givenString;
+    }
+    return toBool(showString) && Boolean(givenString);
+};
+export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
+export const getOptionKey = (option, prefix) => {
+    const key = option.id ?? option.value ?? uuid();
+    return `${prefix}${key}`;
+};
+export const isKeyboardEvent = (event) => event.key !== undefined;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+export const getNotificationRole = ({ semantic, role, ariaLive }) => {
+    if (role) {
+        return role;
+    }
+    if (ariaLive) {
+        return 'article';
+    }
+    switch (semantic) {
+        case 'critical':
+        case 'warning':
+            return 'alert';
+        case 'informational':
+        case 'successful':
+            return 'status';
+        default:
+            return 'article';
+    }
+};

package/dist/utils/navigation.js

@@ -1,69 +1,135 @@
-import { handleDataOutside as e } from "./floating-components.js";
-//#region src/utils/navigation.ts
-var t = (e) => {
-	let { target: t } = e;
-	return !!(!t?.classList?.contains("db-navigation-item-expand-button") && t?.parentElement?.classList.contains("db-navigation-item"));
-}, n = class {
-	constructor(e, t) {
-		this.parentSubNavigation = null, this.initialized = !1, this.mouseX = 0, this.mouseY = 0, this.element = e, this.subNavigation = t, !(!this.element || !this.subNavigation) && (this.parentSubNavigation = this.element?.closest(".db-sub-navigation"), this.parentSubNavigation && !this.element.closest(".db-drawer") && this.init());
-	}
-	init() {
-		let e = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
-		this.element?.style.setProperty("--db-navigation-item-inline-size", `${e}px`), this.initialized = !0;
-	}
-	enableFollow() {
-		if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) return;
-		let t = e(this.subNavigation), n = this.element.getBoundingClientRect(), r = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
-		this.triangleData = {
-			itemRect: n,
-			parentElementWidth: r,
-			subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
-			padding: (r - n.width) / 2,
-			outsideVX: t.vx,
-			outsideVY: t.vy
-		};
-	}
-	disableFollow() {
-		this.triangleData = void 0;
-	}
-	getTriangleTipX() {
-		return this.triangleData ? this.triangleData.outsideVX === "right" ? this.triangleData.itemRect.width - this.mouseX : Math.min(this.mouseX, this.triangleData.itemRect.width * .75) : 0;
-	}
-	getTriangleTipY() {
-		if (!this.triangleData) return 0;
-		let e = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
-		return this.triangleData.outsideVY === "bottom" ? e + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height) : e;
-	}
-	hasMouseEnteredSubNavigation() {
-		if (!this.triangleData) return !1;
-		let e = this.triangleData.outsideVX === "right";
-		return !!(e && this.mouseX < -1 * this.triangleData.padding || !e && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding);
-	}
-	getTriangleCoordinates(e) {
-		if (!this.triangleData) return;
-		if (e === "fill-gap") {
-			let e = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, t = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
-			return {
-				lb: `${t} ${e}`,
-				lt: `${t} 0`,
-				rt: "100% 0",
-				rb: `100% ${e}`
-			};
-		}
-		let t = this.getTriangleTipX(), n = this.getTriangleTipY();
-		return {
-			lb: `${t}px ${n}px`,
-			lt: `${t}px ${n}px`,
-			rt: "100% 0",
-			rb: "100% 100%"
-		};
-	}
-	followByMouseEvent(e) {
-		if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) return;
-		this.mouseX = e.clientX - this.triangleData.itemRect.left, this.mouseY = e.clientY - this.triangleData.itemRect.top;
-		let t = this.hasMouseEnteredSubNavigation(), n = this.getTriangleCoordinates(t ? "fill-gap" : "safe-triangle");
-		n && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${n.lb}, ${n.lt}, ${n.rt}, ${n.rb})`), t && (this.triangleData = void 0));
-	}
+import { handleDataOutside } from './floating-components.js';
+export const isEventTargetNavigationItem = (event) => {
+    const { target } = event;
+    return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));
+};
+export class NavigationItemSafeTriangle {
+    element;
+    subNavigation;
+    parentSubNavigation = null;
+    triangleData;
+    initialized = false;
+    mouseX = 0;
+    mouseY = 0;
+    constructor(element, subNavigation) {
+        this.element = element;
+        this.subNavigation = subNavigation;
+        if (!this.element || !this.subNavigation) {
+            return;
+        }
+        this.parentSubNavigation = this.element?.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() {
+        const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 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.
+        this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
+        this.initialized = true;
+    }
+    enableFollow() {
+        if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
+            return;
+        }
+        const dataOutsidePair = handleDataOutside(this.subNavigation);
+        const itemRect = this.element.getBoundingClientRect();
+        const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 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
 };
-//#endregion
-export { n as NavigationItemSafeTriangle, t as isEventTargetNavigationItem };

package/dist/utils/react.js

@@ -1,10 +1,21 @@
-//#region src/utils/react.ts
-var e = /* @__PURE__ */ "suppressHydrationWarning.suppressContentEditableWarning.translate.title.tabIndex.style.spellCheck.nonce.lang.hidden.draggable.dir.contextMenu.contentEditable.accessKey.is.inputMode.unselectable.security.results.vocab.typeof.rev.resource.rel.property.inlist.datatype.content.about.role.radioGroup.color.form.formAction.formEncType.formMethod.formNoValidate.formTarget.capture.dirName.download.ping".split("."), t = (t, n) => Object.keys(t).filter((t) => (t.startsWith("data-") || t.startsWith("aria-") || t.startsWith("default") || t.startsWith("auto") || t.startsWith("item") || t.startsWith("on") || e.includes(t)) && !n.includes(t)).reduce((e, n) => ({
-	...e,
-	[n]: t[n]
-}), {}), n = (e, t) => Object.keys(e).filter((e) => t.includes(e)).reduce((t, n) => ({
-	...t,
-	[n]: e[n]
-}), {});
-//#endregion
-export { t as filterPassingProps, n as getRootProps };
+const reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color',
+    // other attributes for button,input,etc.
+    'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'capture', 'dirName', 'download', 'ping'];
+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 {
+        ...obj,
+        [key]: props[key]
+    };
+}, {});
+export const getRootProps = (props, rooProps) => {
+    return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj, key) => {
+        return {
+            ...obj,
+            [key]: props[key]
+        };
+    }, {});
+};
+export default {
+    getRootProps,
+    filterPassingProps
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.11.1",
+  "version": "4.12.1",
   "type": "module",
   "description": "React components for @db-ux/core-components",
   "repository": {
@@ -17,20 +17,18 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "4.11.1",
-    "@db-ux/core-foundations": "4.11.1"
+    "@db-ux/core-components": "4.12.1",
+    "@db-ux/core-foundations": "4.12.1"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.60.0",
     "@types/react": "19.2.17",
-    "@vitejs/plugin-react": "6.0.2",
     "cpr": "3.0.1",
     "npm-run-all2": "9.0.2",
     "playwright": "1.60.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "typescript": "5.9.3",
-    "vite": "8.0.16"
+    "typescript": "5.9.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -38,7 +36,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "npm-run-all --parallel tsc vite --sequential mv:*",
+    "build": "npm-run-all tsc mv:*",
     "mv:agent": "cpr agent ../../build-outputs/react/agent --overwrite",
     "mv:changelog": "cpr CHANGELOG.md ../../build-outputs/react/CHANGELOG.md --overwrite",
     "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
@@ -49,7 +47,6 @@
     "test:components": "playwright test --config playwright.config.ts",
     "test:components:ui": "playwright test --config playwright.config.ts --ui",
     "test:windows": "playwright test --config playwright.screen-reader.win.ts",
-    "tsc": "tsc --project . --sourceMap false",
-    "vite": "vite build"
+    "tsc": "tsc --project . --sourceMap false"
   }
 }