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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- refactor(DBSwitch): Also toggle on pressing Enter key, not just Space - [see commit 95a7569](https://github.com/db-ux-design-system/core-web/commit/95a7569121ccf0fef318df4f23941c3f48a4a074)
+
 ## 4.2.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.
@@ -10,5 +10,7 @@ export type DBSwitchDefaultProps = {
     variant?: LabelVariantHorizontalType;
 };
 export type DBSwitchProps = GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps & IconProps & IconTrailingProps & IconLeadingProps & DBSwitchDefaultProps;
-export type DBSwitchDefaultState = {};
+export type DBSwitchDefaultState = {
+    handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => void;
+};
 export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState;

package/dist/components/switch/switch.js

@@ -68,6 +68,17 @@ function DBSwitchFn(props, component) {
             props.onFocus(event);
         }
     }
+    function handleKeyDown(event) {
+        var _a;
+        // Support ENTER key for toggling the switch (a11y requirement)
+        if (event.key === "Enter") {
+            event.preventDefault();
+            // Toggle the switch by clicking it programmatically
+            if (!props.disabled) {
+                (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        }
+    }
     useEffect(() => {
         var _a;
         set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`);
@@ -110,7 +121,7 @@ function DBSwitchFn(props, component) {
     }, []);
     return (React.createElement("div", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-custom-validity": props.validation }, 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-switch", props.className) }),
         React.createElement("label", { htmlFor: _id },
-            React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+            React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), onKeyDown: (event) => handleKeyDown(event) })),
             props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", semantic: "adaptive", id: _messageId, icon: props.messageIcon }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_b = props.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null,

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.0",
+  "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.0",
-    "@db-ux/core-foundations": "4.2.0"
+    "@db-ux/core-components": "4.2.2-css-selectors-792dad7",
+    "@db-ux/core-foundations": "4.2.2-css-selectors-792dad7"
   }
 }