@db-ux/react-core-components 3.1.3 → 3.1.15

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

@@ -156,13 +156,18 @@ function DBCustomSelectFn(props, component) {
         }
         return false;
     }
-    function getTagRemoveLabel(index) {
-        if (props.removeTagsTexts && props.removeTagsTexts.length > index) {
-            return props.removeTagsTexts.at(index);
-        }
-        else {
-            return `${DEFAULT_REMOVE} ${_selectedOptions ? getOptionLabel(_selectedOptions[index]) : ""}`;
+    function getTagRemoveLabel(option) {
+        const removeTexts = props.removeTagsTexts;
+        const options = props.options;
+        if (removeTexts && options) {
+            // Find the index of the option in the original options array
+            const optionIndex = options.findIndex((opt) => opt.value === option.value);
+            if (optionIndex >= 0 && optionIndex < removeTexts.length) {
+                return removeTexts[optionIndex];
+            }
         }
+        // Fallback to default behavior
+        return `${DEFAULT_REMOVE} ${getOptionLabel(option)}`;
     }
     function handleTagRemove(option, event) {
         if (event) {
@@ -510,11 +515,14 @@ function DBCustomSelectFn(props, component) {
         setSearchEnabled((_a = props.showSearch) !== null && _a !== void 0 ? _a : amountOptions > 9);
     }, [props.showSearch, amountOptions]);
     useEffect(() => {
-        var _a;
-        if (props.values &&
-            Array.isArray(props.values) &&
-            props.values !== _values) {
-            set_values((_a = props.values) !== null && _a !== void 0 ? _a : []);
+        const v = props.values;
+        if (Array.isArray(v)) {
+            if (_values !== v) {
+                set_values(v);
+            }
+        }
+        else if (v == null && (_values === null || _values === void 0 ? void 0 : _values.length) !== 0) {
+            set_values([]);
         }
     }, [props.values]);
     useEffect(() => {
@@ -622,7 +630,7 @@ function DBCustomSelectFn(props, component) {
             props.options ? (React.createElement(React.Fragment, null,
                 React.createElement("summary", { className: "db-custom-select-form-field", id: _summaryId, "aria-disabled": getBooleanAsString(props.disabled), "aria-labelledby": _labelId },
                     (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId }, _selectedLabels)) : null,
-                    props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(index), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
+                    props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
                 React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
                     searchEnabled ? (React.createElement("div", null,
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
@@ -643,7 +651,7 @@ function DBCustomSelectFn(props, component) {
         ((_k = props.showClearSelection) !== null && _k !== void 0 ? _k : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
             props.clearSelectionText,
             React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
-        React.createElement("span", { "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
+        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
         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),

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

@@ -194,7 +194,7 @@ export type DBCustomSelectDefaultState = {
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;
-    getTagRemoveLabel: (index: number) => string;
+    getTagRemoveLabel: (option: CustomSelectOptionType) => string;
     selectAllEnabled: boolean;
     searchEnabled: boolean;
     amountOptions: number;

package/dist/components/select/select.js

@@ -134,7 +134,7 @@ function DBSelectFn(props, component) {
                 var _a;
                 return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));
             }))) : (React.createElement(React.Fragment, null, props.children))),
-        props.placeholder ? (React.createElement("span", { id: _placeholderId }, props.placeholder)) : null,
+        props.placeholder ? (React.createElement("span", { className: "db-select-placeholder", id: _placeholderId }, props.placeholder)) : null,
         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),

package/dist/components/tooltip/tooltip.js

@@ -38,7 +38,10 @@ function DBTooltipFn(props, component) {
             // This is a workaround for angular
             utilsDelay(() => {
                 var _a;
-                handleFixedPopover(_ref.current, parent, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
+                // Due to race conditions we need to check for _ref again
+                if (_ref.current) {
+                    handleFixedPopover(_ref.current, parent, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
+                }
             }, 1);
         }
     }

package/dist/utils/form-components.js

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
-    // Change event to work with reactive and template driven forms
     component.propagateChange(event.target[modelValue]);
-    component.writeValue(event.target[modelValue]);
 };
 export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
     // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.1.3",
+  "version": "3.1.15",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.54.2",
+    "@playwright/experimental-ct-react": "1.55.1",
     "@types/react": "18.3.13",
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -36,9 +36,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "sideEffects": false,
-  "dependencies": {
-    "@db-ux/core-components": "3.1.3",
-    "@db-ux/core-foundations": "3.1.3"
-  }
+  "sideEffects": false
 }