@db-ux/react-core-components 4.12.1 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/react-core-components
 
+## 4.13.0
+
+### Minor Changes
+
+- feat: enable Invoker Commands (`command`- and `commandfor`-HTML-attributes) for DBButton - [see commit 00f50c3](https://github.com/db-ux-design-system/core-web/commit/00f50c3fc4508e62f2e30589c00148c54e2fc852)
+
 ## 4.12.1
 
 ### Patch Changes

package/dist/components/button/button.js

@@ -12,10 +12,13 @@ function DBButtonFn(props, component) {
         else if (props.onClick) {
             return "button";
         }
+        else if (props.commandfor) {
+            return "button";
+        }
         return "submit";
     }
     return (_jsxs("button", { 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", "data-density"]), id: props.id ?? props.propOverrides?.id, ...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", "data-density"]), className: cls("db-button", props.className), type: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": props.iconLeading ?? props.icon, "data-show-icon": getBooleanAsString(props.showIconLeading, "showIconLeading") ||
-            getBooleanAsString(props.showIcon, "showIcon"), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing, "showIconTrailing"), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-wrap": getBooleanAsString(props.wrap, "wrap"), "data-no-text": getBooleanAsString(props.noText, "noText"), name: props.name, form: props.form, value: props.value, children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
+            getBooleanAsString(props.showIcon, "showIcon"), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing, "showIconTrailing"), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-wrap": getBooleanAsString(props.wrap, "wrap"), "data-no-text": getBooleanAsString(props.noText, "noText"), name: props.name, form: props.form, value: props.value, command: props.command, commandfor: props.commandfor, children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
 }
 const DBButton = forwardRef(DBButtonFn);
 export default DBButton;

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

@@ -10,6 +10,14 @@ export type DBButtonSharedProps = {
     variant?: ButtonVariantType | string;
 };
 export type DBButtonDefaultProps = {
+    /**
+     * The [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) attribute specifies the action to perform on the element controlled by a `<button>` element.
+     */
+    command?: string;
+    /**
+     * The [commandfor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) attribute turns a `<button>` into a command button that controls the given interactive element referenced by `id`.
+     */
+    commandfor?: string;
     /**
      * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
      */

package/dist/index.d.ts

@@ -95,3 +95,19 @@ export * from './utils/document-scroll-listener.js';
 export * from './utils/floating-components.js';
 export * from './utils/index.js';
 export * from './utils/navigation.js';
+/**
+ * Type augmentation for Invoker Commands API
+ * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API
+ *
+ * Extends React's ButtonHTMLAttributes to include the `command` and `commandfor`
+ * HTML attributes for declarative dialog control via Invoker Commands.
+ *
+ * TODO: This augmentation can be removed once React's type definitions
+ * natively support these attributes.
+ */
+declare module "react" {
+    interface ButtonHTMLAttributes<T> {
+        command?: string | undefined;
+        commandfor?: string | undefined;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.12.1",
+  "version": "4.13.0",
   "type": "module",
   "description": "React components for @db-ux/core-components",
   "repository": {
@@ -17,8 +17,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "4.12.1",
-    "@db-ux/core-foundations": "4.12.1"
+    "@db-ux/core-components": "4.13.0",
+    "@db-ux/core-foundations": "4.13.0"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.60.0",