@db-ux/react-core-components 3.1.4 → 3.1.16

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) {
@@ -184,7 +189,7 @@ function DBCustomSelectFn(props, component) {
         }
     }
     function handleArrowDownUp(event) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) {
             if (self.document) {
                 const activeElement = self.document.activeElement;
@@ -195,36 +200,53 @@ function DBCustomSelectFn(props, component) {
                     if (isCheckbox) {
                         const listElement = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest("li");
                         if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                            if (listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling) {
-                                (_c = (_b = listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling) === null || _b === void 0 ? void 0 : _b.querySelector("input")) === null || _c === void 0 ? void 0 : _c.focus();
+                            // Find next element with input, skipping group titles
+                            let nextElement = listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling;
+                            while (nextElement) {
+                                const nextInput = nextElement.querySelector("input");
+                                if (nextInput) {
+                                    nextInput.focus();
+                                    break;
+                                }
+                                nextElement = nextElement.nextElementSibling;
                             }
-                            else {
+                            if (!nextElement) {
                                 // We are on the last checkbox we move to the top checkbox
                                 handleFocusFirstDropdownCheckbox(activeElement);
                             }
                         }
                         else {
-                            if (listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling) {
-                                (_e = (_d = listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling) === null || _d === void 0 ? void 0 : _d.querySelector("input")) === null || _e === void 0 ? void 0 : _e.focus();
-                            }
-                            else if (detailsRef.current.querySelector(`input[type="checkbox"]`) !==
-                                activeElement) {
-                                // We are on the top list checkbox but there is a select all checkbox as well
-                                handleFocusFirstDropdownCheckbox(activeElement);
+                            // Find previous element with input, skipping group titles
+                            let prevElement = listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling;
+                            while (prevElement) {
+                                const prevInput = prevElement.querySelector("input");
+                                if (prevInput) {
+                                    prevInput.focus();
+                                    break;
+                                }
+                                prevElement = prevElement.previousElementSibling;
                             }
-                            else {
-                                // We are on the top checkbox, we need to move to the search
-                                // or to the last checkbox
-                                const search = getSearchInput(detailsRef.current);
-                                if (search) {
-                                    delay(() => {
-                                        search.focus();
-                                    }, 100);
+                            if (!prevElement) {
+                                // Check if we have a "select all" checkbox (only relevant for multi-select)
+                                const selectAllCheckbox = detailsRef.current.querySelector(`input[type="checkbox"]`);
+                                if (selectAllCheckbox && selectAllCheckbox !== activeElement) {
+                                    // We are on the top list checkbox but there is a select all checkbox as well
+                                    handleFocusFirstDropdownCheckbox(activeElement);
                                 }
                                 else {
-                                    const checkboxList = Array.from((_f = detailsRef.current) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
-                                    if (checkboxList.length) {
-                                        (_g = checkboxList.at(-1)) === null || _g === void 0 ? void 0 : _g.focus();
+                                    // We are on the top checkbox, we need to move to the search
+                                    // or to the last checkbox
+                                    const search = getSearchInput(detailsRef.current);
+                                    if (search) {
+                                        delay(() => {
+                                            search.focus();
+                                        }, 100);
+                                    }
+                                    else {
+                                        const checkboxList = Array.from((_b = detailsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                        if (checkboxList.length) {
+                                            (_c = checkboxList.at(-1)) === null || _c === void 0 ? void 0 : _c.focus();
+                                        }
                                     }
                                 }
                             }
@@ -510,11 +532,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 +647,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 +668,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/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.4",
+  "version": "3.1.16",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -11,7 +11,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/"
+    "dist/",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "npm-run-all tsc",
@@ -27,7 +28,7 @@
     "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.55.0",
+    "@playwright/experimental-ct-react": "1.55.1",
     "@types/react": "18.3.13",
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -38,7 +39,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.1.4",
-    "@db-ux/core-foundations": "3.1.4"
+    "@db-ux/core-components": "3.1.16",
+    "@db-ux/core-foundations": "3.1.16"
   }
 }