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

package/dist/components/page/page.js

@@ -1,76 +1,44 @@
 "use client";
-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, "fadeIn"),
-		"data-fonts-loaded": r(p, "fontsLoaded"),
-		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 })
-		]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils/index.js";
+function DBPageFn(props, component) {
+    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 (_jsxs("div", { 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: props.id ?? props.propOverrides?.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, "fadeIn"), "data-fonts-loaded": getBooleanAsString(fontsLoaded, "fontsLoaded"), children: [_jsx(_Fragment, { children: props.header }), _jsx("main", { className: cls("db-main", props.mainClass), children: props.children }), _jsx(_Fragment, { children: props.footer })] }));
 }
-var f = i(d);
-//#endregion
-export { f as default };
+const DBPage = forwardRef(DBPageFn);
+export default DBPage;

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

@@ -1 +1 @@
-export { default as DBPopover } from './popover';
+export { default as DBPopover } from './popover.js';

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { default as DBPopover } from './popover.js';

package/dist/components/popover/model.d.ts

@@ -1,4 +1,4 @@
-import type { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';
+import type { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model.js';
 export type DBPopoverDefaultProps = {
     /**
      * Use open to disable the default hover/focus behavior to use it on click or other trigger.

package/dist/components/popover/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/popover/popover.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "placement" | "spacing" | keyof import("../..").PopoverProps | keyof import("./model").DBPopoverDefaultProps | "gap"> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & import("../..").PopoverProps & React.RefAttributes<any>>;
+declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "placement" | "spacing" | keyof import("../../index.js").PopoverProps | keyof import("./model.js").DBPopoverDefaultProps | "gap"> & import("./model.js").DBPopoverDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").SpacingProps & import("../../index.js").PlacementProps & import("../../index.js").GapProps & import("../../index.js").PopoverProps & React.RefAttributes<any>>;
 export default DBPopover;

package/dist/components/popover/popover.js

@@ -1,128 +1,121 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, delay as r, getBooleanAsString as i } from "../../utils/index.js";
-import { DocumentScrollListener as a } from "../../utils/document-scroll-listener.js";
-import { handleFixedPopover as o } from "../../utils/floating-components.js";
-import { forwardRef as s, useEffect as c, useRef as l, useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/popover/popover.tsx
-function m(s, m) {
-	let h = m || l(m), [g, _] = u(() => !1), [v, y] = u(() => !1), [b, x] = u(() => void 0), [S, C] = u(() => void 0);
-	function w(e) {
-		if (!e || e.key === "Escape") for (let e of Array.from(h.current.children)) e.blur();
-	}
-	function T() {
-		if (!h.current) return;
-		let e = h.current.querySelector("article");
-		e && r(() => {
-			o(e, h.current, s.placement ?? "bottom");
-		}, 1);
-	}
-	function E(e) {
-		e?.target?.contains && e?.target?.contains(h.current) && T();
-	}
-	function D() {
-		y(!0), x(new a().addCallback((e) => E(e))), T();
-		let e = k();
-		e && S?.observe(e);
-	}
-	function O(e) {
-		let t = e?.target;
-		if (!t?.parentNode || t.parentNode.querySelector(":focus") !== t && t.parentNode.querySelector(":focus-within") !== t && t.parentNode.querySelector(":hover") !== t) {
-			y(!1), b && new a().removeCallback(b);
-			let e = k();
-			e && S?.unobserve(e);
-		}
-	}
-	function k() {
-		if (h.current) {
-			let e = Array.from(h.current.children);
-			if (e.length >= 2) {
-				let t = e[0];
-				return t.tagName.includes("-") ? t.children?.length > 0 ? t.children[0] : null : t;
-			}
-		}
-		return null;
-	}
-	return c(() => {
-		_(!0);
-	}, []), c(() => {
-		if (h.current && g) {
-			_(!1);
-			let e = k();
-			e && (e.ariaHasPopup = "true"), T(), h.current.addEventListener("keydown", (e) => w(e)), ["mouseenter", "focusin"].forEach((e) => {
-				h.current.addEventListener(e, () => D());
-			}), ["mouseleave", "focusout"].forEach((e) => {
-				h.current.addEventListener(e, () => O());
-			}), typeof window < "u" && "IntersectionObserver" in window && C(new IntersectionObserver((e) => {
-				let t = e.find(({ target: e }) => e === k());
-				t && !t.isIntersecting && w(!1);
-			}));
-		}
-	}, [h.current, g]), c(() => {
-		if (h.current) {
-			let e = k();
-			e && (e.ariaExpanded = (!!v).toString());
-		}
-	}, [h.current, v]), /* @__PURE__ */ p("div", {
-		ref: h,
-		...e(s, [
-			"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: s.id ?? s.propOverrides?.id,
-		...t(s, [
-			"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-popover", s.className),
-		children: [/* @__PURE__ */ f(d, { children: s.trigger }), /* @__PURE__ */ f("article", {
-			className: "db-popover-content",
-			"data-spacing": s.spacing,
-			"data-gap": i(s.gap, "gap"),
-			"data-animation": i(s.animation ?? !0, "animation"),
-			"data-open": i(s.open, "open"),
-			"data-delay": s.delay,
-			"data-width": s.width,
-			"data-placement": s.placement,
-			children: s.children
-		})]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils/index.js";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener.js";
+import { handleFixedPopover } from "../../utils/floating-components.js";
+function DBPopoverFn(props, component) {
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [isExpanded, setIsExpanded] = useState(() => false);
+    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
+    const [_observer, set_observer] = useState(() => undefined);
+    function handleEscape(event) {
+        if (!event || event.key === "Escape") {
+            // TODO: Recursive for any child
+            for (const child of Array.from(_ref.current.children)) {
+                child.blur();
+            }
+        }
+    }
+    function handleAutoPlacement() {
+        if (!_ref.current)
+            return;
+        const article = _ref.current.querySelector("article");
+        if (article) {
+            // This is a workaround for angular
+            void utilsDelay(() => {
+                handleFixedPopover(article, _ref.current, props.placement ?? "bottom");
+            }, 1);
+        }
+    }
+    function handleDocumentScroll(event) {
+        if (event?.target?.contains && event?.target?.contains(_ref.current)) {
+            handleAutoPlacement();
+        }
+    }
+    function handleEnter() {
+        setIsExpanded(true);
+        set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event)));
+        handleAutoPlacement();
+        const child = getTrigger();
+        if (child) {
+            _observer?.observe(child);
+        }
+    }
+    function handleLeave(event) {
+        const element = event?.target;
+        const parent = element?.parentNode;
+        if (!parent ||
+            (element.parentNode.querySelector(":focus") !== element &&
+                element.parentNode.querySelector(":focus-within") !== element &&
+                element.parentNode.querySelector(":hover") !== element)) {
+            setIsExpanded(false);
+            if (_documentScrollListenerCallbackId) {
+                new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
+            }
+            const child = getTrigger();
+            if (child) {
+                _observer?.unobserve(child);
+            }
+        }
+    }
+    function getTrigger() {
+        if (_ref.current) {
+            const children = Array.from(_ref.current.children);
+            if (children.length >= 2) {
+                const firstChild = children[0];
+                if (firstChild.tagName.includes("-")) {
+                    // this is a workaround for custom angular components
+                    return firstChild.children?.length > 0
+                        ? firstChild.children[0]
+                        : null;
+                }
+                else {
+                    return firstChild;
+                }
+            }
+        }
+        return null;
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            setInitialized(false);
+            const child = getTrigger();
+            if (child) {
+                child.ariaHasPopup = "true";
+            }
+            handleAutoPlacement();
+            _ref.current.addEventListener("keydown", (event) => handleEscape(event));
+            ["mouseenter", "focusin"].forEach((event) => {
+                _ref.current.addEventListener(event, () => handleEnter());
+            });
+            ["mouseleave", "focusout"].forEach((event) => {
+                _ref.current.addEventListener(event, () => handleLeave());
+            });
+            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
+                set_observer(new IntersectionObserver((payload) => {
+                    const entry = payload.find(({ target }) => target === getTrigger());
+                    if (entry && !entry.isIntersecting) {
+                        handleEscape(false);
+                    }
+                }));
+            }
+        }
+    }, [_ref.current, initialized]);
+    useEffect(() => {
+        if (_ref.current) {
+            const child = getTrigger();
+            if (child) {
+                child.ariaExpanded = Boolean(isExpanded).toString();
+            }
+        }
+    }, [_ref.current, isExpanded]);
+    return (_jsxs("div", { 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: props.id ?? props.propOverrides?.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-popover", props.className), children: [_jsx(_Fragment, { children: props.trigger }), _jsx("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap, "gap"), "data-animation": getBooleanAsString(props.animation ?? true, "animation"), "data-open": getBooleanAsString(props.open, "open"), "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement, children: props.children })] }));
 }
-var h = s(m);
-//#endregion
-export { h as default };
+const DBPopover = forwardRef(DBPopoverFn);
+export default DBPopover;

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

@@ -1 +1 @@
-export { default as DBRadio } from './radio';
+export { default as DBRadio } from './radio.js';

package/dist/components/radio/index.js

@@ -0,0 +1 @@
+export { default as DBRadio } from './radio.js';

package/dist/components/radio/model.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, InputEventProps, InputEventState, SizeProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, InputEventProps, InputEventState, SizeProps } from '../../shared/model.js';
 export type DBRadioDefaultProps = {};
 export type DBRadioProps = DBRadioDefaultProps & GlobalProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
 export type DBRadioDefaultState = {};

package/dist/components/radio/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | "checked" | keyof import("../../shared/model").InputEventProps<HTMLInputElement>> & import("../../shared/model").GlobalProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "value" | "size" | keyof import("../../shared/model.js").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model.js").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model.js").CustomFormProps | keyof import("../../shared/model.js").BaseFormProps | keyof import("../../shared/model.js").RequiredProps | "showLabel" | "checked" | keyof import("../../shared/model.js").InputEventProps<HTMLInputElement>> & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").InputEventProps<HTMLInputElement> & import("../../shared/model.js").ChangeEventProps<HTMLInputElement> & import("../../shared/model.js").FocusEventProps<HTMLInputElement> & import("../../shared/model.js").CustomFormProps & import("../../shared/model.js").BaseFormProps & import("../../shared/model.js").RequiredProps & import("../../shared/model.js").ShowLabelProps & import("../../shared/model.js").ValueProps & import("../../shared/model.js").FormCheckProps & import("../../shared/model.js").SizeProps & React.RefAttributes<any>>;
 export default DBRadio;