@db-ux/react-core-components 2.0.5 → 2.0.7

package/dist/components/button/button.js

@@ -6,6 +6,7 @@ import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
 function DBButtonFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {
+        event.stopPropagation();
         if (props.onClick) {
             props.onClick(event);
         }

package/dist/components/card/card.js

@@ -6,6 +6,7 @@ import { cls } from "../../utils";
 function DBCardFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {
+        event.stopPropagation();
         if (props.onClick) {
             props.onClick(event);
         }

package/dist/components/checkbox/checkbox.js

@@ -49,17 +49,20 @@ function DBCheckboxFn(props, component) {
         }
     }
     function handleChange(event) {
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
         handleValidation();
     }
     function handleBlur(event) {
+        event.stopPropagation();
         if (props.onBlur) {
             props.onBlur(event);
         }
     }
     function handleFocus(event) {
+        event.stopPropagation();
         if (props.onFocus) {
             props.onFocus(event);
         }

package/dist/components/input/input.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, getInputValue, } from "../../utils";
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
@@ -51,23 +51,27 @@ function DBInputFn(props, component) {
         }
     }
     function handleInput(event) {
+        event.stopPropagation();
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
     function handleChange(event) {
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
         handleValidation();
     }
     function handleBlur(event) {
+        event.stopPropagation();
         if (props.onBlur) {
             props.onBlur(event);
         }
     }
     function handleFocus(event) {
+        event.stopPropagation();
         if (props.onFocus) {
             props.onFocus(event);
         }
@@ -115,7 +119,7 @@ function DBInputFn(props, component) {
     }, [props.value]);
     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"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-icon": getHideProp(props.showIcon), "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon-after": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("input", Object.assign({ "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"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getNumber(props.max), min: getNumber(props.min), readOnly: getBoolean(props.readOnly, "readOnly") ||
+        React.createElement("input", Object.assign({ "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"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
                 getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds })),
         props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList()) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
         props.children,

package/dist/components/link/link.js

@@ -7,6 +7,7 @@ function DBLinkFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
     function handleClick(event) {
+        event.stopPropagation();
         if (props.onClick) {
             props.onClick(event);
         }

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

@@ -25,6 +25,7 @@ function DBNavigationItemFn(props, component) {
         }
     }
     function handleClick(event) {
+        event.stopPropagation();
         if (props.onClick) {
             props.onClick(event);
         }

package/dist/components/notification/notification.js

@@ -9,6 +9,7 @@ function DBNotificationFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
     function handleClose(event) {
+        event.stopPropagation();
         if (props.onClose) {
             props.onClose(event);
         }

package/dist/components/radio/radio.js

@@ -8,16 +8,19 @@ function DBRadioFn(props, component) {
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
     function handleChange(event) {
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
     }
     function handleBlur(event) {
+        event.stopPropagation();
         if (props.onBlur) {
             props.onBlur(event);
         }
     }
     function handleFocus(event) {
+        event.stopPropagation();
         if (props.onFocus) {
             props.onFocus(event);
         }

package/dist/components/select/select.js

@@ -52,28 +52,33 @@ function DBSelectFn(props, component) {
         }
     }
     function handleClick(event) {
+        event.stopPropagation();
         if (props.onClick) {
             props.onClick(event);
         }
     }
     function handleInput(event) {
+        event.stopPropagation();
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
     function handleChange(event) {
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
         handleValidation();
     }
     function handleBlur(event) {
+        event.stopPropagation();
         if (props.onBlur) {
             props.onBlur(event);
         }
     }
     function handleFocus(event) {
+        event.stopPropagation();
         if (props.onFocus) {
             props.onFocus(event);
         }

package/dist/components/switch/switch.js

@@ -9,6 +9,7 @@ function DBSwitchFn(props, component) {
     const [_checked, set_checked] = useState(() => { var _a; return (_a = props["defaultChecked"]) !== null && _a !== void 0 ? _a : false; });
     function handleChange(event) {
         var _a;
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
@@ -16,11 +17,13 @@ function DBSwitchFn(props, component) {
         set_checked((_a = event.target) === null || _a === void 0 ? void 0 : _a["checked"]);
     }
     function handleBlur(event) {
+        event.stopPropagation();
         if (props.onBlur) {
             props.onBlur(event);
         }
     }
     function handleFocus(event) {
+        event.stopPropagation();
         if (props.onFocus) {
             props.onFocus(event);
         }

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

@@ -21,6 +21,7 @@ function DBTabItemFn(props, component) {
     }
     function handleChange(event) {
         var _a;
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }

package/dist/components/tabs/tabs.js

@@ -101,6 +101,7 @@ function DBTabsFn(props, component) {
     }
     function handleChange(event) {
         var _a, _b;
+        event.stopPropagation();
         const list = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("ul");
         const listItem = 
         // db-tab-item for angular and stencil wrapping elements

package/dist/components/tag/tag.js

@@ -9,6 +9,7 @@ function DBTagFn(props, component) {
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     function handleRemove(event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (props.onRemove) {
             props.onRemove(event);
         }

package/dist/components/textarea/textarea.js

@@ -50,23 +50,27 @@ function DBTextareaFn(props, component) {
         }
     }
     function handleInput(event) {
+        event.stopPropagation();
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
     function handleChange(event) {
+        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
         handleValidation();
     }
     function handleBlur(event) {
+        event.stopPropagation();
         if (props.onBlur) {
             props.onBlur(event);
         }
     }
     function handleFocus(event) {
+        event.stopPropagation();
         if (props.onFocus) {
             props.onFocus(event);
         }

package/dist/utils/index.d.ts

@@ -31,6 +31,17 @@ export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
 export declare const getBooleanAsString: (originBool?: boolean | string) => any;
 export declare const getBoolean: (originBool?: boolean | string, propertyName?: string) => boolean | undefined;
 export declare const getNumber: (originNumber?: number | string, alternativeNumber?: number | string) => number | undefined;
+/**
+ * Retrieves the input value based on the provided value and input type.
+ *
+ * If the input type is "number" or "range", the value is processed as a number.
+ * Otherwise, the value is returned as-is.
+ *
+ * @param value - The input value, which can be a number, string, or undefined.
+ * @param inputType - The type of the input, such as "number", "range", or other string types.
+ * @returns The processed input value as a string, number, or undefined.
+ */
+export declare const getInputValue: (value?: number | string, inputType?: string) => string | number | undefined;
 export declare const getHideProp: (show?: boolean | string) => any;
 export declare const stringPropVisible: (givenString?: string, showString?: boolean | string) => boolean;
 export declare const getSearchInput: (element: HTMLElement) => HTMLInputElement | null;

package/dist/utils/index.js

@@ -139,6 +139,19 @@ export const getNumber = (originNumber, alternativeNumber) => {
     }
     return Number(originNumber !== null && originNumber !== void 0 ? originNumber : alternativeNumber);
 };
+/**
+ * Retrieves the input value based on the provided value and input type.
+ *
+ * If the input type is "number" or "range", the value is processed as a number.
+ * Otherwise, the value is returned as-is.
+ *
+ * @param value - The input value, which can be a number, string, or undefined.
+ * @param inputType - The type of the input, such as "number", "range", or other string types.
+ * @returns The processed input value as a string, number, or undefined.
+ */
+export const getInputValue = (value, inputType) => {
+    return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getHideProp = (show) => {
     if (show === undefined || show === null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.0.5",
-    "@db-ux/core-foundations": "2.0.5"
+    "@db-ux/core-components": "2.0.7",
+    "@db-ux/core-foundations": "2.0.7"
   }
 }