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

package/dist/components/checkbox/checkbox.js

@@ -1,159 +1,165 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, } from "../../utils";
-import { addCheckedResetEventListener, } from "../../utils/form-components";
-import DBInfotext from "../infotext/infotext";
-import { useId } from "react";
-function DBCheckboxFn(props, component) {
-    var _a, _b;
-    const uuid = useId();
-    const _ref = component || useRef(component);
-    const [initialized, setInitialized] = useState(() => false);
-    const [_id, set_id] = useState(() => undefined);
-    const [_messageId, set_messageId] = useState(() => undefined);
-    const [_validMessageId, set_validMessageId] = useState(() => undefined);
-    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
-    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => undefined);
-    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
-    const [abortController, setAbortController] = useState(() => undefined);
-    function hasValidState() {
-        var _a;
-        return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
-    }
-    function handleValidation() {
-        var _a, _b, _c, _d;
-        /* For a11y reasons we need to map the correct message with the checkbox */
-        if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
-            set_descByIds(_invalidMessageId);
-            set_invalidMessage(props.invalidMessage ||
-                ((_b = _ref.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
-                DEFAULT_INVALID_MESSAGE);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback(_invalidMessage);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-        }
-        else if (hasValidState() &&
-            ((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
-            props.required) {
-            set_descByIds(_validMessageId);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-        }
-        else if (stringPropVisible(props.message, props.showMessage)) {
-            set_descByIds(_messageId);
-        }
-        else {
-            set_descByIds(undefined);
-        }
-    }
-    function handleChange(event, reset) {
-        if (props.onChange) {
-            props.onChange(event);
-        }
-        handleValidation();
-    }
-    function handleBlur(event) {
-        if (props.onBlur) {
-            props.onBlur(event);
-        }
-    }
-    function handleFocus(event) {
-        if (props.onFocus) {
-            props.onFocus(event);
-        }
-    }
-    function resetIds() {
-        var _a, _b, _c;
-        const mId = (_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 : `checkbox-${uuid}`;
-        set_id(mId);
-        set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
-        set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-        set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-    }
-    useEffect(() => {
-        setInitialized(true);
-        resetIds();
-        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
-    }, []);
-    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(() => {
-        var _a;
-        set_invalidMessage(props.invalidMessage ||
-            ((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
-            DEFAULT_INVALID_MESSAGE);
-    }, [_ref.current, props.invalidMessage]);
-    useEffect(() => {
-        if (_id) {
-            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
-            set_messageId(messageId);
-            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
-            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
-            if (stringPropVisible(props.message, props.showMessage)) {
-                set_descByIds(messageId);
-            }
-            handleValidation();
-        }
-    }, [_id]);
-    useEffect(() => {
-        if (_ref.current) {
-            if (props.indeterminate !== undefined) {
-                // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
-                // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
-                _ref.current.indeterminate = !!getBoolean(props.indeterminate);
-            }
-        }
-    }, [initialized, _ref.current, props.indeterminate]);
-    useEffect(() => {
-        if (initialized && _ref.current) {
-            // in angular this must be set via native element
-            if (props.checked != undefined) {
-                _ref.current.checked = !!getBoolean(props.checked);
-            }
-            setInitialized(false);
-        }
-    }, [initialized, _ref.current, props.checked]);
-    useEffect(() => {
-        if (_ref.current) {
-            const defaultChecked = props.defaultChecked;
-            let controller = abortController;
-            if (!controller) {
-                controller = new AbortController();
-                setAbortController(controller);
-            }
-            addCheckedResetEventListener(_ref.current, {
-                checked: props.checked,
-                defaultChecked,
-            }, (event) => {
-                handleChange(event, true);
-            }, controller.signal);
-        }
-    }, [_ref.current]);
-    useEffect(() => {
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({}, 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-checkbox", props.className), "data-size": props.size, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel) }),
-        React.createElement("label", { htmlFor: _id },
-            React.createElement("input", Object.assign({ type: "checkbox", "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"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds })),
-            props.label ? React.createElement(React.Fragment, null, props.label) : null,
-            props.children),
-        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
-        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBoolean as i, getHideProp as a, hasVoiceOver as o, stringPropVisible as s } from "../../utils/index.js";
+import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as c, DEFAULT_MESSAGE_ID_SUFFIX as l, DEFAULT_VALID_MESSAGE_ID_SUFFIX as u } from "../../shared/constants.js";
+import { addCheckedResetEventListener as d } from "../../utils/form-components.js";
+import f from "../infotext/infotext.js";
+import { forwardRef as p, useEffect as m, useId as h, useRef as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox.tsx
+function x(p, x) {
+	let S = h(), C = x || g(x), [w, T] = _(() => !1), [E, D] = _(() => void 0), [O, k] = _(() => void 0), [A, j] = _(() => void 0), [M, N] = _(() => void 0), [P, F] = _(() => void 0), [I, L] = _(() => void 0), [R, z] = _(() => ""), [B, V] = _(() => void 0);
+	function H() {
+		return !!(p.validMessage ?? p.validation === "valid");
+	}
+	function U() {
+		!C.current?.validity.valid || p.validation === "invalid" ? (L(M), F(p.invalidMessage || C.current?.validationMessage || "TODO: Add an invalidMessage"), o() && (z(P), r(() => z(""), 1e3))) : H() && C.current?.validity.valid && p.required ? (L(A), o() && (z(p.validMessage ?? "TODO: Add a validMessage"), r(() => z(""), 1e3))) : s(p.message, p.showMessage) ? L(O) : L(void 0);
+	}
+	function W(e, t) {
+		p.onChange && p.onChange(e), U();
+	}
+	function G(e) {
+		p.onBlur && p.onBlur(e);
+	}
+	function K(e) {
+		p.onFocus && p.onFocus(e);
+	}
+	function q() {
+		let e = p.id ?? p.propOverrides?.id ?? `checkbox-${S}`;
+		D(e), k(e + l), j(e + u), N(e + c);
+	}
+	return m(() => {
+		T(!0), q(), F(p.invalidMessage || "TODO: Add an invalidMessage");
+	}, []), m(() => {
+		(p.id ?? p.propOverrides?.id) && q();
+	}, [p.id, p.propOverrides?.id]), m(() => {
+		F(p.invalidMessage || C.current?.validationMessage || "TODO: Add an invalidMessage");
+	}, [C.current, p.invalidMessage]), m(() => {
+		if (E) {
+			let e = E + l;
+			k(e), j(E + u), N(E + c), s(p.message, p.showMessage) && L(e), U();
+		}
+	}, [E]), m(() => {
+		C.current && p.indeterminate !== void 0 && (C.current.indeterminate = !!i(p.indeterminate));
+	}, [
+		w,
+		C.current,
+		p.indeterminate
+	]), m(() => {
+		w && C.current && (p.checked != null && (C.current.checked = !!i(p.checked)), T(!1));
+	}, [
+		w,
+		C.current,
+		p.checked
+	]), m(() => {
+		if (C.current) {
+			let e = p.defaultChecked, t = B;
+			t || (t = new AbortController(), V(t)), d(C.current, {
+				checked: p.checked,
+				defaultChecked: e
+			}, (e) => {
+				W(e, !0);
+			}, t.signal);
+		}
+	}, [C.current]), m(() => () => {
+		B?.abort();
+	}, []), /* @__PURE__ */ b("div", {
+		...t(p, [
+			"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-checkbox", p.className),
+		"data-size": p.size,
+		"data-hide-asterisk": a(p.showRequiredAsterisk),
+		"data-hide-label": a(p.showLabel),
+		children: [
+			/* @__PURE__ */ b("label", {
+				htmlFor: E,
+				children: [
+					/* @__PURE__ */ y("input", {
+						type: "checkbox",
+						"aria-invalid": p.validation === "invalid",
+						"data-custom-validity": p.validation,
+						ref: C,
+						...e(p, [
+							"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: E,
+						name: p.name,
+						checked: i(p.checked, "checked"),
+						disabled: i(p.disabled, "disabled"),
+						value: p.value,
+						required: i(p.required, "required"),
+						onChange: (e) => W(e),
+						onBlur: (e) => G(e),
+						onFocus: (e) => K(e),
+						"aria-describedby": p.ariaDescribedBy ?? I
+					}),
+					p.label ? /* @__PURE__ */ y(v, { children: p.label }) : null,
+					p.children
+				]
+			}),
+			s(p.message, p.showMessage) ? /* @__PURE__ */ y(f, {
+				size: "small",
+				icon: p.messageIcon,
+				id: O,
+				children: p.message
+			}) : null,
+			H() ? /* @__PURE__ */ y(f, {
+				size: "small",
+				semantic: "successful",
+				id: A,
+				children: p.validMessage || "TODO: Add a validMessage"
+			}) : null,
+			/* @__PURE__ */ y(f, {
+				size: "small",
+				semantic: "critical",
+				id: M,
+				children: P
+			}),
+			/* @__PURE__ */ y("span", {
+				"data-visually-hidden": "true",
+				role: "status",
+				children: R
+			})
+		]
+	});
 }
-const DBCheckbox = forwardRef(DBCheckboxFn);
-export default DBCheckbox;
+var S = p(x);
+//#endregion
+export { S as default };

package/dist/components/custom-button/custom-button.js

@@ -1,12 +1,67 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBCustomButtonFn(props, component) {
-    var _a, _b, _c, _d;
-    const _ref = component || useRef(component);
-    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-custom-button", props.className), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText) }), props.children));
+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, useRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/custom-button/custom-button.tsx
+function s(i, s) {
+	return /* @__PURE__ */ o("div", {
+		ref: s || a(s),
+		...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-custom-button", i.className),
+		"data-icon": i.iconLeading ?? i.icon,
+		"data-show-icon": r(i.showIconLeading ?? i.showIcon),
+		"data-icon-trailing": i.iconTrailing,
+		"data-show-icon-trailing": r(i.showIconTrailing),
+		"data-size": i.size,
+		"data-width": i.width,
+		"data-variant": i.variant,
+		"data-no-text": r(i.noText),
+		children: i.children
+	});
 }
-const DBCustomButton = forwardRef(DBCustomButtonFn);
-export default DBCustomButton;
+var c = i(s);
+//#endregion
+export { c as default };