@db-ux/react-core-components 4.2.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/react-core-components
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "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.1",
+    "@db-ux/core-foundations": "4.2.1"
   }
 }