@db-ux/react-core-components 4.9.1 → 4.10.0-esm-94516f3

package/dist/components/navigation-item/navigation-item.js

@@ -1,83 +1,119 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_BACK } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString } from "../../utils";
-import { NavigationItemSafeTriangle } from "../../utils/navigation";
-import DBButton from "../button/button";
-import { useId } from "react";
-function DBNavigationItemFn(props, component) {
-    var _a, _b, _c;
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const [initialized, setInitialized] = useState(() => false);
-    const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
-    const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
-    const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
-    const [autoClose, setAutoClose] = useState(() => false);
-    const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
-    const [subNavigationId, setSubNavigationId] = useState(() => undefined);
-    const [subNavigationToggleId, setSubNavigationToggleId] = useState(() => undefined);
-    function handleNavigationItemClick(event) {
-        var _a;
-        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
-            setAutoClose(true);
-            void delay(() => {
-                setAutoClose(false);
-            }, 1000);
-        }
-    }
-    function handleClick(event) {
-        if (props.onClick) {
-            event.stopPropagation();
-            props.onClick(event);
-        }
-        if (hasAreaPopup) {
-            setIsSubNavigationExpanded(true);
-        }
-    }
-    function handleBackClick(event) {
-        event.stopPropagation();
-        setIsSubNavigationExpanded(false);
-    }
-    useEffect(() => {
-        var _a;
-        setInitialized(true);
-        const subNavId = `sub-nav-${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}`;
-        setSubNavigationId(subNavId);
-        setSubNavigationToggleId(`${subNavId}-toggle`);
-    }, []);
-    useEffect(() => {
-        if (props.subNavigationExpanded !== undefined) {
-            setIsSubNavigationExpanded(!!getBoolean(props.subNavigationExpanded, "subNavigationExpanded"));
-        }
-    }, [props.subNavigationExpanded]);
-    useEffect(() => {
-        var _a;
-        if (initialized && _ref.current) {
-            const subNavigationSlot = _ref.current.querySelector("menu");
-            if (subNavigationSlot) {
-                if (((_a = subNavigationSlot.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    setHasAreaPopup(true);
-                    if (!navigationItemSafeTriangle) {
-                        setNavigationItemSafeTriangle(new NavigationItemSafeTriangle(_ref.current, subNavigationSlot));
-                    }
-                }
-                else {
-                    setHasSubNavigation(false);
-                }
-            }
-        }
-    }, [initialized, _ref.current]);
-    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
-        !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
-        hasSubNavigation ? (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
-                hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
-                    React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
-                React.createElement(React.Fragment, null, props.subNavigation)))) : null));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a } from "../../utils/index.js";
+import "../../shared/constants.js";
+import o from "../button/button.js";
+import { NavigationItemSafeTriangle as s } from "../../utils/navigation.js";
+import { forwardRef as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/navigation-item/navigation-item.tsx
+function g(c, g) {
+	let _ = u(), v = g || d(g), [y, b] = f(() => !1), [x, S] = f(() => !1), [C, w] = f(() => !0), [T, E] = f(() => !1), [D, O] = f(() => !1), [k, A] = f(() => void 0), [j, M] = f(() => void 0), [N, P] = f(() => void 0);
+	function F(e) {
+		e?.target?.nodeName === "A" && (O(!0), r(() => {
+			O(!1);
+		}, 1e3));
+	}
+	function I(e) {
+		c.onClick && (e.stopPropagation(), c.onClick(e)), x && E(!0);
+	}
+	function L(e) {
+		e.stopPropagation(), E(!1);
+	}
+	return l(() => {
+		b(!0);
+		let e = `sub-nav-${c.id ?? _}`;
+		M(e), P(`${e}-toggle`);
+	}, []), l(() => {
+		c.subNavigationExpanded !== void 0 && E(!!i(c.subNavigationExpanded, "subNavigationExpanded"));
+	}, [c.subNavigationExpanded]), l(() => {
+		if (y && v.current) {
+			let e = v.current.querySelector("menu");
+			e && (e.children?.length > 0 ? (S(!0), k || A(new s(v.current, e))) : w(!1));
+		}
+	}, [y, v.current]), /* @__PURE__ */ m("li", {
+		ref: v,
+		...e(c, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: c.id ?? c.propOverrides?.id,
+		onMouseOver: (e) => k?.enableFollow(),
+		onMouseLeave: (e) => k?.disableFollow(),
+		onMouseMove: (e) => k?.followByMouseEvent(e),
+		...t(c, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-navigation-item", c.className),
+		"data-width": c.width,
+		"data-icon": c.icon,
+		"data-show-icon": a(c.showIcon),
+		"data-active": c.active,
+		"data-wrap": a(c.wrap),
+		"aria-disabled": a(c.disabled),
+		children: !i(c.hideSubNavigation, "hideSubNavigation") && C ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+			className: "db-navigation-item-expand-button",
+			id: N,
+			"aria-haspopup": x ? "true" : void 0,
+			"aria-expanded": T,
+			"aria-controls": j,
+			disabled: i(c.disabled, "disabled"),
+			onClick: (e) => I(e),
+			children: c.text ? /* @__PURE__ */ m(p, { children: c.text }) : /* @__PURE__ */ m(p, { children: c.children })
+		}), /* @__PURE__ */ h("menu", {
+			className: "db-sub-navigation",
+			id: j,
+			"aria-labelledby": N,
+			"data-force-close": D,
+			onClick: (e) => F(e),
+			children: [x ? /* @__PURE__ */ m("div", {
+				className: "db-mobile-navigation-back",
+				children: /* @__PURE__ */ m(o, {
+					icon: "arrow_left",
+					variant: "ghost",
+					id: c.backButtonId,
+					onClick: (e) => L(e),
+					children: c.backButtonText ?? "Back"
+				})
+			}) : null, /* @__PURE__ */ m(p, { children: c.subNavigation })]
+		})] }) : c.text ? /* @__PURE__ */ m(p, { children: c.text }) : /* @__PURE__ */ m(p, { children: c.children })
+	});
 }
-const DBNavigationItem = forwardRef(DBNavigationItemFn);
-export default DBNavigationItem;
+var _ = c(g);
+//#endregion
+export { _ as default };

package/dist/components/notification/model.js

@@ -1,3 +1,12 @@
-export const NotificationVariantList = ['docked', 'standalone', 'overlay'];
-export const NotificationLinkVariantList = ['block', 'inline'];
-export const NotificationAriaLiveList = ['assertive', 'polite', 'off'];
+//#region src/components/notification/model.ts
+var e = [
+	"docked",
+	"standalone",
+	"overlay"
+], t = ["block", "inline"], n = [
+	"assertive",
+	"polite",
+	"off"
+];
+//#endregion
+export { n as NotificationAriaLiveList, t as NotificationLinkVariantList, e as NotificationVariantList };

package/dist/components/notification/notification.js

@@ -1,34 +1,102 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, getBoolean, getBooleanAsString, getNotificationRole, stringPropVisible, } from "../../utils";
-import DBButton from "../button/button";
-function DBNotificationFn(props, component) {
-    var _a, _b, _c;
-    const _ref = component || useRef(component);
-    function handleClose(event) {
-        if (!event)
-            return;
-        event.stopPropagation();
-        if (props.onClose) {
-            props.onClose(event);
-        }
-    }
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onClose"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-notification", props.className), role: getNotificationRole({
-            semantic: props.semantic,
-            role: props.role,
-            ariaLive: props.ariaLive,
-        }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
-        React.createElement(React.Fragment, null, props.image),
-        stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", { "data-area": "head" }, props.headline)) : null,
-        React.createElement("div", { "data-area": "content" },
-            props.text ? React.createElement(React.Fragment, null, props.text) : null,
-            props.children),
-        stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("time", { "data-area": "timestamp", dateTime: props.timestampDatetime }, props.timestamp)) : null,
-        React.createElement(React.Fragment, null, props.link),
-        getBoolean(props.closeable, "closeable") ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBoolean as r, getBooleanAsString as i, getNotificationRole as a, stringPropVisible as o } from "../../utils/index.js";
+import "../../shared/constants.js";
+import s from "../button/button.js";
+import { forwardRef as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/notification/notification.tsx
+function p(c, p) {
+	let m = p || l(p);
+	function h(e) {
+		e && (e.stopPropagation(), c.onClose && c.onClose(e));
+	}
+	return /* @__PURE__ */ f("div", {
+		ref: m,
+		...e(c, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density",
+			"onClose"
+		]),
+		id: c.id ?? c.propOverrides?.id,
+		...t(c, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-notification", c.className),
+		role: a({
+			semantic: c.semantic,
+			role: c.role,
+			ariaLive: c.ariaLive
+		}),
+		"aria-live": c.ariaLive,
+		"data-semantic": c.semantic,
+		"data-variant": c.variant,
+		"data-icon": r(c.showIcon) === !1 ? void 0 : c.icon,
+		"data-show-icon": i(c.showIcon),
+		"data-link-variant": c.linkVariant,
+		children: [
+			/* @__PURE__ */ d(u, { children: c.image }),
+			o(c.headline, c.showHeadline) ? /* @__PURE__ */ d("header", {
+				"data-area": "head",
+				children: c.headline
+			}) : null,
+			/* @__PURE__ */ f("div", {
+				"data-area": "content",
+				children: [c.text ? /* @__PURE__ */ d(u, { children: c.text }) : null, c.children]
+			}),
+			o(c.timestamp, c.showTimestamp) ? /* @__PURE__ */ d("time", {
+				"data-area": "timestamp",
+				dateTime: c.timestampDatetime,
+				children: c.timestamp
+			}) : null,
+			/* @__PURE__ */ d(u, { children: c.link }),
+			r(c.closeable, "closeable") ? /* @__PURE__ */ d(s, {
+				icon: "cross",
+				variant: "ghost",
+				size: "small",
+				id: c.closeButtonId,
+				noText: !0,
+				onClick: (e) => h(e),
+				children: c.closeButtonText ?? "Close"
+			}) : null
+		]
+	});
 }
-const DBNotification = forwardRef(DBNotificationFn);
-export default DBNotification;
+var m = c(p);
+//#endregion
+export { m as default };

package/dist/components/page/model.js

@@ -1,2 +1,4 @@
-export const PageVariantList = ['auto', 'fixed'];
-export const PageDocumentOverflowList = ['hidden', 'auto'];
+//#region src/components/page/model.ts
+var e = ["auto", "fixed"], t = ["hidden", "auto"];
+//#endregion
+export { t as PageDocumentOverflowList, e as PageVariantList };

package/dist/components/page/page.js

@@ -1,48 +1,76 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBPageFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    const [fontsLoaded, setFontsLoaded] = useState(() => false);
-    const hasInitialized = useRef(false);
-    if (!hasInitialized.current) {
-        if (typeof window !== "undefined" &&
-            document &&
-            (props.documentOverflow === "hidden" ||
-                (props.variant === "fixed" && props.documentOverflow !== "auto"))) {
-            // We need to set this to `html` element that the flex-box solution works
-            // See https://stackoverflow.com/a/43710216 - Approach 1 - flexbox
-            document.documentElement.classList.add("db-page-document");
-        }
-        hasInitialized.current = true;
-    }
-    useEffect(() => {
-        setFontsLoaded(!props.fadeIn);
-        if (document && props.fadeIn) {
-            document.fonts.ready.then(() => {
-                setFontsLoaded(true);
-            });
-        }
-        else {
-            setFontsLoaded(true);
-        }
-    }, []);
-    useEffect(() => {
-        return () => {
-            if (typeof window !== "undefined" &&
-                document.documentElement.classList.contains("db-page-document")) {
-                // remove document styles set by this
-                document.documentElement.classList.remove("db-page-document");
-            }
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-page", props.className), "data-variant": props.variant, "data-fade-in": getBooleanAsString(props.fadeIn), "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
-        React.createElement(React.Fragment, null, props.header),
-        React.createElement("main", { className: cls("db-main", props.mainClass) }, props.children),
-        React.createElement(React.Fragment, null, props.footer)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
+import { forwardRef as i, useEffect as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/page/page.tsx
+function d(i, d) {
+	let f = d || o(d), [p, m] = s(() => !1), h = o(!1);
+	return h.current ||= (typeof window < "u" && document && (i.documentOverflow === "hidden" || i.variant === "fixed" && i.documentOverflow !== "auto") && document.documentElement.classList.add("db-page-document"), !0), a(() => {
+		m(!i.fadeIn), document && i.fadeIn ? document.fonts.ready.then(() => {
+			m(!0);
+		}) : m(!0);
+	}, []), a(() => () => {
+		typeof window < "u" && document.documentElement.classList.contains("db-page-document") && document.documentElement.classList.remove("db-page-document");
+	}, []), /* @__PURE__ */ u("div", {
+		ref: f,
+		...e(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: i.id ?? i.propOverrides?.id,
+		...t(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-page", i.className),
+		"data-variant": i.variant,
+		"data-fade-in": r(i.fadeIn),
+		"data-fonts-loaded": r(p),
+		children: [
+			/* @__PURE__ */ l(c, { children: i.header }),
+			/* @__PURE__ */ l("main", {
+				className: n("db-main", i.mainClass),
+				children: i.children
+			}),
+			/* @__PURE__ */ l(c, { children: i.footer })
+		]
+	});
 }
-const DBPage = forwardRef(DBPageFn);
-export default DBPage;
+var f = i(d);
+//#endregion
+export { f as default };