@db-ux/react-core-components 4.9.1 → 4.10.0

package/dist/components/popover/popover.js

@@ -1,127 +1,128 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils";
-import { DocumentScrollListener } from "../../utils/document-scroll-listener";
-import { handleFixedPopover } from "../../utils/floating-components";
-function DBPopoverFn(props, component) {
-    var _a, _b, _c;
-    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(() => {
-                var _a;
-                handleFixedPopover(article, _ref.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
-            }, 1);
-        }
-    }
-    function handleDocumentScroll(event) {
-        var _a, _b;
-        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains) && ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.contains(_ref.current))) {
-            handleAutoPlacement();
-        }
-    }
-    function handleEnter() {
-        setIsExpanded(true);
-        set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event)));
-        handleAutoPlacement();
-        const child = getTrigger();
-        if (child) {
-            _observer === null || _observer === void 0 ? void 0 : _observer.observe(child);
-        }
-    }
-    function handleLeave(event) {
-        const element = event === null || event === void 0 ? void 0 : event.target;
-        const parent = element === null || element === void 0 ? void 0 : 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 === null || _observer === void 0 ? void 0 : _observer.unobserve(child);
-            }
-        }
-    }
-    function getTrigger() {
-        var _a;
-        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 ((_a = firstChild.children) === null || _a === void 0 ? void 0 : _a.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 (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-popover", props.className) }),
-        React.createElement(React.Fragment, null, props.trigger),
-        React.createElement("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap), "data-animation": getBooleanAsString((_c = props.animation) !== null && _c !== void 0 ? _c : true), "data-open": getBooleanAsString(props.open), "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement }, props.children)));
+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),
+			"data-animation": i(s.animation ?? !0),
+			"data-open": i(s.open),
+			"data-delay": s.delay,
+			"data-width": s.width,
+			"data-placement": s.placement,
+			children: s.children
+		})]
+	});
 }
-const DBPopover = forwardRef(DBPopoverFn);
-export default DBPopover;
+var h = s(m);
+//#endregion
+export { h as default };

package/dist/components/radio/radio.js

@@ -1,87 +1,126 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getHideProp } from "../../utils";
-import { addResetEventListener, } from "../../utils/form-components";
-import { useId } from "react";
-function DBRadioFn(props, component) {
-    var _a;
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const [initialized, setInitialized] = useState(() => false);
-    const [_id, set_id] = useState(() => undefined);
-    const [abortController, setAbortController] = useState(() => undefined);
-    function handleInput(event, reset) {
-        if (props.onInput) {
-            props.onInput(event);
-        }
-    }
-    function handleChange(event, reset) {
-        if (props.onChange) {
-            props.onChange(event);
-        }
-    }
-    function handleBlur(event) {
-        if (props.onBlur) {
-            props.onBlur(event);
-        }
-    }
-    function handleFocus(event) {
-        if (props.onFocus) {
-            props.onFocus(event);
-        }
-    }
-    function resetIds() {
-        var _a, _b, _c;
-        set_id((_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `radio-${uuid}`);
-    }
-    useEffect(() => {
-        setInitialized(true);
-        resetIds();
-    }, []);
-    useEffect(() => {
-        var _a, _b;
-        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
-            resetIds();
-        }
-    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
-    useEffect(() => {
-        if (props.checked && initialized && _ref.current) {
-            _ref.current.checked = true;
-        }
-    }, [initialized, _ref.current, props.checked]);
-    useEffect(() => {
-        if (_ref.current) {
-            const defaultChecked = props.defaultChecked;
-            let controller = abortController;
-            if (!controller) {
-                controller = new AbortController();
-                setAbortController(controller);
-            }
-            addResetEventListener(_ref.current, (event) => {
-                void delay(() => {
-                    const resetChecked = props.checked
-                        ? props.checked
-                        : defaultChecked
-                            ? defaultChecked
-                            : _ref.current.checked;
-                    const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: "", checked: resetChecked }) });
-                    handleChange(valueEvent, true);
-                    handleInput(valueEvent, true);
-                }, 1);
-            }, controller.signal);
-        }
-    }, [_ref.current]);
-    useEffect(() => {
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
-    }, []);
-    return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk) }, 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-radio", props.className), htmlFor: _id }),
-        React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
-        props.label ? React.createElement(React.Fragment, null, props.label) : null,
-        props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBoolean as i, getHideProp as a } from "../../utils/index.js";
+import { addResetEventListener as o } from "../../utils/form-components.js";
+import { forwardRef as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/radio/radio.tsx
+function h(s, h) {
+	let g = l(), _ = h || u(h), [v, y] = d(() => !1), [b, x] = d(() => void 0), [S, C] = d(() => void 0);
+	function w(e, t) {
+		s.onInput && s.onInput(e);
+	}
+	function T(e, t) {
+		s.onChange && s.onChange(e);
+	}
+	function E(e) {
+		s.onBlur && s.onBlur(e);
+	}
+	function D(e) {
+		s.onFocus && s.onFocus(e);
+	}
+	function O() {
+		x(s.id ?? s.propOverrides?.id ?? `radio-${g}`);
+	}
+	return c(() => {
+		y(!0), O();
+	}, []), c(() => {
+		(s.id ?? s.propOverrides?.id) && O();
+	}, [s.id, s.propOverrides?.id]), c(() => {
+		s.checked && v && _.current && (_.current.checked = !0);
+	}, [
+		v,
+		_.current,
+		s.checked
+	]), c(() => {
+		if (_.current) {
+			let e = s.defaultChecked, t = S;
+			t || (t = new AbortController(), C(t)), o(_.current, (t) => {
+				r(() => {
+					let n = s.checked ? s.checked : e || _.current.checked, r = {
+						...t,
+						target: {
+							...t.target,
+							value: "",
+							checked: n
+						}
+					};
+					T(r, !0), w(r, !0);
+				}, 1);
+			}, t.signal);
+		}
+	}, [_.current]), c(() => () => {
+		S?.abort();
+	}, []), /* @__PURE__ */ m("label", {
+		"data-size": s.size,
+		"data-hide-label": a(s.showLabel),
+		"data-hide-asterisk": a(s.showRequiredAsterisk),
+		...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-radio", s.className),
+		htmlFor: b,
+		children: [
+			/* @__PURE__ */ p("input", {
+				type: "radio",
+				"aria-invalid": s.validation === "invalid",
+				"data-custom-validity": s.validation,
+				ref: _,
+				...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: b,
+				name: s.name,
+				checked: i(s.checked, "checked"),
+				disabled: i(s.disabled, "disabled"),
+				value: s.value,
+				required: i(s.required, "required"),
+				onInput: (e) => w(e),
+				onChange: (e) => T(e),
+				onBlur: (e) => E(e),
+				onFocus: (e) => D(e)
+			}),
+			s.label ? /* @__PURE__ */ p(f, { children: s.label }) : null,
+			s.children
+		]
+	});
 }
-const DBRadio = forwardRef(DBRadioFn);
-export default DBRadio;
+var g = s(h);
+//#endregion
+export { g as default };

package/dist/components/section/section.js

@@ -1,12 +1,61 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls } from "../../utils";
-function DBSectionFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    return (React.createElement("section", 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-section", props.className), "data-spacing": props.spacing || "medium", "data-width": props.width }), props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import { forwardRef as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/section/section.tsx
+function o(r, o) {
+	return /* @__PURE__ */ a("section", {
+		ref: o || i(o),
+		...e(r, [
+			"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: r.id ?? r.propOverrides?.id,
+		...t(r, [
+			"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-section", r.className),
+		"data-spacing": r.spacing || "medium",
+		"data-width": r.width,
+		children: r.children
+	});
 }
-const DBSection = forwardRef(DBSectionFn);
-export default DBSection;
+var s = r(o);
+//#endregion
+export { s as default };