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

package/dist/components/radio/radio.js

@@ -1,126 +1,88 @@
 "use client";
-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
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, delay, getBoolean, getHideProp } from "../../utils/index.js";
+import { addResetEventListener, } from "../../utils/form-components.js";
+import { useId } from "react";
+function DBRadioFn(props, component) {
+    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() {
+        set_id(props.id ?? props.propOverrides?.id ?? `radio-${uuid}`);
+    }
+    useEffect(() => {
+        setInitialized(true);
+        resetIds();
+    }, []);
+    useEffect(() => {
+        if (props.id ?? props.propOverrides?.id) {
+            resetIds();
+        }
+    }, [props.id, props.propOverrides?.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 = {
+                        ...event,
+                        target: {
+                            ...event.target,
+                            value: "",
+                            checked: resetChecked,
+                        },
+                    };
+                    handleChange(valueEvent, true);
+                    handleInput(valueEvent, true);
+                }, 1);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController?.abort();
+        };
+    }, []);
+    return (_jsxs("label", { "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, children: [_jsx("input", { 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 ? _jsx(_Fragment, { children: props.label }) : null, props.children] }));
 }
-var g = s(h);
-//#endregion
-export { g as default };
+const DBRadio = forwardRef(DBRadioFn);
+export default DBRadio;

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

@@ -1 +1 @@
-export { default as DBSection } from './section';
+export { default as DBSection } from './section.js';

package/dist/components/section/index.js

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

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

@@ -1,3 +1,3 @@
-import type { ContainerWidthProps, GlobalProps, SpacingProps } from '../../shared/model';
+import type { ContainerWidthProps, GlobalProps, SpacingProps } from '../../shared/model.js';
 export type DBSectionDefaultProps = {};
 export type DBSectionProps = DBSectionDefaultProps & GlobalProps & SpacingProps & ContainerWidthProps;

package/dist/components/section/model.js

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

package/dist/components/section/section.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSection: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "width" | "spacing"> & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").ContainerWidthProps & React.RefAttributes<any>>;
+declare const DBSection: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "width" | "spacing"> & import("../../index.js").GlobalProps & import("../../index.js").SpacingProps & import("../../index.js").ContainerWidthProps & React.RefAttributes<any>>;
 export default DBSection;

package/dist/components/section/section.js

@@ -1,61 +1,11 @@
 "use client";
-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
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils/index.js";
+function DBSectionFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsx("section", { 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-section", props.className), "data-spacing": props.spacing || "medium", "data-width": props.width, children: props.children }));
 }
-var s = r(o);
-//#endregion
-export { s as default };
+const DBSection = forwardRef(DBSectionFn);
+export default DBSection;

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

@@ -1 +1 @@
-export { default as DBSelect } from './select';
+export { default as DBSelect } from './select.js';

package/dist/components/select/index.js

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

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

@@ -1,4 +1,4 @@
-import type { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model.js';
 export type DBSelectDefaultProps = {
     /**
      * @deprecated

package/dist/components/select/model.js

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

package/dist/components/select/select.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "icon" | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").ClickEventProps<HTMLSelectElement> | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement> | keyof import("./model").DBSelectDefaultProps> & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("./model").DBSelectDefaultProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<any>>;
+declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "value" | "size" | "icon" | "showIcon" | keyof import("../../shared/model.js").CustomFormProps | keyof import("../../shared/model.js").BaseFormProps | keyof import("../../shared/model.js").RequiredProps | "showLabel" | keyof import("../../shared/model.js").FormMessageProps | keyof import("../../shared/model.js").ClickEventProps<HTMLSelectElement> | keyof import("../../shared/model.js").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model.js").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model.js").InputEventProps<HTMLSelectElement> | keyof import("./model.js").DBSelectDefaultProps> & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").ClickEventProps<HTMLSelectElement> & import("../../shared/model.js").ChangeEventProps<HTMLSelectElement> & import("../../shared/model.js").FocusEventProps<HTMLSelectElement> & import("../../shared/model.js").InputEventProps<HTMLSelectElement> & 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").IconProps & import("../../shared/model.js").FormMessageProps & import("./model.js").DBSelectDefaultProps & import("../../shared/model.js").ShowIconProps & import("../../shared/model.js").FormSizeProps & React.RefAttributes<any>>;
 export default DBSelect;