@db-ux/react-core-components 4.2.1 → 4.2.2-css-selectors-792dad7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/react-core-components
 
+## 4.2.2
+
+### Patch Changes
+
+- fix(form elements): `valid` background- and border-colors - [see commit 8f07e55](https://github.com/db-ux-design-system/core-web/commit/8f07e55f2155fcb619198857397ce354f90c4803)
+
+- fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
+
+      - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+
 ## 4.2.1
 
 ### Patch Changes

package/dist/components/tab-item/model.d.ts

@@ -20,5 +20,8 @@ export type DBTabItemDefaultProps = {
 export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
 export type DBTabItemDefaultState = {
     _selected: boolean;
+    _listenerAdded: boolean;
+    boundSetSelectedOnChange?: (event: any) => void;
+    setSelectedOnChange: (event: any) => void;
 };
 export type DBTabItemState = DBTabItemDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & InitializedState & NameState;

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

@@ -9,6 +9,12 @@ function DBTabItemFn(props, component) {
     const [_selected, set_selected] = useState(() => false);
     const [_name, set_name] = useState(() => undefined);
     const [initialized, setInitialized] = useState(() => false);
+    const [_listenerAdded, set_listenerAdded] = useState(() => false);
+    const [boundSetSelectedOnChange, setBoundSetSelectedOnChange] = useState(() => undefined);
+    function setSelectedOnChange(event) {
+        event.stopPropagation();
+        set_selected(event.target === _ref.current);
+    }
     function handleNameAttribute() {
         if (_ref.current) {
             const setAttribute = _ref.current.setAttribute;
@@ -21,31 +27,47 @@ function DBTabItemFn(props, component) {
         }
     }
     function handleChange(event) {
-        var _a;
-        event.stopPropagation();
         if (props.onChange) {
             props.onChange(event);
         }
-        // We have different ts types in different frameworks, so we need to use any here
-        set_selected((_a = event.target) === null || _a === void 0 ? void 0 : _a["checked"]);
     }
     useEffect(() => {
+        setBoundSetSelectedOnChange(() => setSelectedOnChange);
         setInitialized(true);
     }, []);
     useEffect(() => {
-        if (initialized && _ref.current) {
-            if (props.active) {
-                _ref.current.click();
-            }
+        var _a;
+        if (_ref.current && initialized && boundSetSelectedOnChange) {
             handleNameAttribute();
             setInitialized(false);
+            // deselect this tab when another tab in tablist is selected
+            if (!_listenerAdded) {
+                (_a = _ref.current
+                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.addEventListener("change", boundSetSelectedOnChange);
+                set_listenerAdded(true);
+            }
+            // Initialize selected state from either active prop (set by parent) or checked attribute
+            if (props.active || _ref.current.checked) {
+                set_selected(true);
+                _ref.current.click();
+            }
         }
-    }, [_ref.current, initialized]);
+    }, [_ref.current, initialized, boundSetSelectedOnChange]);
     useEffect(() => {
         if (props.name) {
             set_name(props.name);
         }
     }, [props.name]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            if (_listenerAdded && _ref.current && boundSetSelectedOnChange) {
+                (_a = _ref.current
+                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", boundSetSelectedOnChange);
+                set_listenerAdded(false);
+            }
+        };
+    }, []);
     return (React.createElement("li", Object.assign({ role: "none" }, 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-tab-item", props.className) }),
         React.createElement("label", { htmlFor: props.id, "data-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
             React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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"]), { name: _name, id: props.id, onInput: (event) => handleChange(event) })),

package/dist/components/tabs/tabs.js

@@ -123,9 +123,9 @@ function DBTabsFn(props, component) {
                 if (tabItem) {
                     const list = tabItem.parentElement;
                     if (list) {
-                        const indices = Array.from(list.childNodes).indexOf(tabItem);
+                        const tabIndex = Array.from(list.children).indexOf(tabItem);
                         if (props.onIndexChange) {
-                            props.onIndexChange(indices);
+                            props.onIndexChange(tabIndex);
                         }
                         if (props.onTabSelect) {
                             props.onTabSelect(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.2.1",
+  "version": "4.2.2-css-selectors-792dad7",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.2.1",
-    "@db-ux/core-foundations": "4.2.1"
+    "@db-ux/core-components": "4.2.2-css-selectors-792dad7",
+    "@db-ux/core-foundations": "4.2.2-css-selectors-792dad7"
   }
 }