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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- fix(custom-select): dropdown with `dropdownWidth="auto"` now correctly sizes to content width and respects the trigger minimum width. Long option labels no longer get truncated: `auto` keeps them on a single line (dropdown grows to the longest option), while `fixed` and `full` wrap long labels onto new lines. - [see commit 68dedc3](https://github.com/db-ux-design-system/core-web/commit/68dedc33c324b48339d5bb73a85fdff3045ed059)
+
+- fix(drawer): prevent backdrop drag-close when selection starts inside content - [see commit b53ff8a](https://github.com/db-ux-design-system/core-web/commit/b53ff8a4f0a5350c5be41fad072e14797676bba7)
+
 ## 4.12.0
 
 ### Minor 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/components/custom-select/custom-select.js

@@ -449,6 +449,9 @@ function DBCustomSelectFn(props, component) {
                     .toLowerCase()
                     .includes(filterText.toLowerCase())));
         }
+        if (detailsRef.current?.open) {
+            handleAutoPlacement();
+        }
     }
     function handleClearAll(event) {
         event.stopPropagation();
@@ -597,6 +600,10 @@ function DBCustomSelectFn(props, component) {
     useEffect(() => {
         set_options(props.options);
         setAmountOptions(props.options?.filter((option) => !option.isGroupTitle).length ?? 0);
+        // Reposition open auto-width dropdowns: replacing options can change their content width.
+        if (detailsRef.current?.open) {
+            handleAutoPlacement();
+        }
     }, [props.options]);
     useEffect(() => {
         set_searchValue(props.searchValue);

package/dist/components/custom-select-list-item/custom-select-list-item.js

@@ -24,7 +24,7 @@ function DBCustomSelectListItemFn(props, component) {
     return (_jsx("li", { 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-custom-select-list-item", props.className, {
             "db-checkbox": props.type === "checkbox" && !props.isGroupTitle,
             "db-radio": props.type !== "checkbox" && !props.isGroupTitle,
-        }), "data-divider": getBooleanAsString(hasDivider, "hasDivider"), children: !props.isGroupTitle ? (_jsxs("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon, "showIcon"), "data-icon-trailing": getIconTrailing(), children: [_jsx("input", { className: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: props.type, name: props.name, form: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, onChange: (event) => handleChange(event) }), props.label ? _jsx(_Fragment, { children: props.label }) : null, props.children] })) : (_jsx("span", { children: props.groupTitle })) }));
+        }), "data-divider": getBooleanAsString(hasDivider, "hasDivider"), children: !props.isGroupTitle ? (_jsxs("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon, "showIcon"), "data-icon-trailing": getIconTrailing(), children: [_jsx("input", { className: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: props.type, name: props.name, form: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, onChange: (event) => handleChange(event) }), _jsxs("span", { className: "db-custom-select-list-item-label", children: [props.label ? _jsx(_Fragment, { children: props.label }) : null, props.children] })] })) : (_jsx("span", { children: props.groupTitle })) }));
 }
 const DBCustomSelectListItem = forwardRef(DBCustomSelectListItemFn);
 export default DBCustomSelectListItem;

package/dist/components/drawer/drawer.js

@@ -9,6 +9,19 @@ function DBDrawerFn(props, component) {
     const _ref = component || useRef(component);
     const dialogContainerRef = useRef(null);
     const [initialized, setInitialized] = useState(() => false);
+    const [backdropPointerDown, setBackdropPointerDown] = useState(() => false);
+    function isNotModal() {
+        return (props.position === "absolute" ||
+            props.backdrop === "none" ||
+            props.variant === "inside");
+    }
+    function handleBackdropPointerDown(event) {
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        setBackdropPointerDown(event?.target?.nodeName === "DIALOG");
+    }
     function handleClose(event, forceClose) {
         if (!event)
             return;
@@ -29,11 +42,15 @@ function DBDrawerFn(props, component) {
             }
             if (event.target?.nodeName === "DIALOG" &&
                 event.type === "click" &&
-                props.backdrop !== "none") {
+                props.backdrop !== "none" &&
+                backdropPointerDown) {
                 if (props.onClose) {
                     props.onClose(event);
                 }
             }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            setBackdropPointerDown(false);
         }
     }
     function handleDialogOpen() {
@@ -43,12 +60,15 @@ function DBDrawerFn(props, component) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.removeAttribute("data-transition");
                 }
-                if (props.position === "absolute" ||
-                    props.backdrop === "none" ||
-                    props.variant === "inside") {
+                if (isNotModal()) {
                     _ref.current.show();
                 }
                 else {
+                    // Set the closedby attribute imperatively: the JSX
+                    // dialog type does not know this attribute yet, and it
+                    // only applies to modal dialogs. "any" enables native
+                    // light dismiss (backdrop click / Esc).
+                    _ref.current.setAttribute("closedby", "any");
                     _ref.current.showModal();
                 }
                 void delay(() => {
@@ -68,6 +88,7 @@ function DBDrawerFn(props, component) {
             }
         }
     }
+    const [state, setState] = useState(() => null);
     useEffect(() => {
         handleDialogOpen();
         setInitialized(true);
@@ -84,7 +105,7 @@ function DBDrawerFn(props, component) {
             }
         }
     }, [_ref.current, initialized, props.position]);
-    return (_jsx("dialog", { className: "db-drawer", id: props.id ?? props.propOverrides?.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", "data-density", "onClose"]), onClick: (event) => handleClose(event), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant, children: _jsxs("article", { ref: dialogContainerRef, ...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-drawer-container", props.className), "data-spacing": props.spacing, "data-width": props.width, "data-direction": props.direction, "data-rounded": getBooleanAsString(props.rounded, "rounded"), children: [_jsxs("header", { className: "db-drawer-header", children: [_jsx("div", { className: "db-drawer-header-text", children: _jsx(_Fragment, { children: props.drawerHeader }) }), _jsx(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true), children: props.closeButtonText ?? DEFAULT_CLOSE_BUTTON })] }), _jsx("div", { className: "db-drawer-content", children: props.children })] }) }));
+    return (_jsx("dialog", { className: "db-drawer", id: props.id ?? props.propOverrides?.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", "data-density", "onClose"]), onClick: (event) => handleClose(event), onMouseDown: (event) => handleBackdropPointerDown(event), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant, children: _jsxs("article", { ref: dialogContainerRef, ...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-drawer-container", props.className), "data-spacing": props.spacing, "data-width": props.width, "data-direction": props.direction, "data-rounded": getBooleanAsString(props.rounded, "rounded"), children: [_jsxs("header", { className: "db-drawer-header", children: [_jsx("div", { className: "db-drawer-header-text", children: _jsx(_Fragment, { children: props.drawerHeader }) }), _jsx(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true), children: props.closeButtonText ?? DEFAULT_CLOSE_BUTTON })] }), _jsx("div", { className: "db-drawer-content", children: props.children })] }) }));
 }
 const DBDrawer = forwardRef(DBDrawerFn);
 export default DBDrawer;

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

@@ -46,5 +46,8 @@ export type DBDrawerDefaultProps = {
 export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;
 export type DBDrawerDefaultState = {
     handleDialogOpen: () => void;
+    isNotModal: () => boolean;
+    handleBackdropPointerDown: (event: any) => void;
+    backdropPointerDown: boolean;
 };
 export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState;

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/dist/utils/floating-components.js

@@ -64,24 +64,69 @@ export const handleDataOutside = (el) => {
 export const handleFixedDropdown = (element, parent, placement) => {
     if (!element || !parent)
         return;
-    // We skip this if we are in mobile it's already fixed
+    const fullWidth = element.dataset['width'] === 'full';
+    const autoWidth = element.dataset['width'] === 'auto';
+    // Reset width-specific inline styles first so a previous mode (e.g. "auto")
+    // doesn't leave a stale minInlineSize/inlineSize behind when the dropdown
+    // width changes at runtime. This must happen before getFloatingProps
+    // measures the element, otherwise the dropdown would be measured with a
+    // width it no longer has and positioned incorrectly. It also has to run
+    // before the mobile bailout below: otherwise a desktop minInlineSize would
+    // survive into the mobile sheet, where CSS min-inline-size beats the
+    // mobile max-inline-size guard and overflows the viewport.
+    element.style.inlineSize = '';
+    element.style.minInlineSize = '';
+    // We skip the rest if we are in mobile, it's already fixed via CSS.
     if (getComputedStyle(element).zIndex === '9999')
         return;
-    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
-    const fullWidth = element.dataset['width'] === 'full';
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
+    // For auto width the dropdown is forced to be at least as wide as the trigger,
+    // but clamped to its own max-inline-size: CSS lets a min-inline-size override
+    // the max when the minimum is larger, so a trigger wider than the viewport
+    // limit would otherwise drop the side margins or overflow horizontally.
+    let autoMinWidth = width;
+    if (autoWidth) {
+        const maxInlineSize = parseFloat(getComputedStyle(element).maxInlineSize);
+        if (!isNaN(maxInlineSize) && maxInlineSize > 0) {
+            autoMinWidth = Math.min(width, maxInlineSize);
+        }
+    }
     if (fullWidth) {
         element.style.inlineSize = `${width}px`;
     }
-    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+    else if (autoWidth) {
+        element.style.minInlineSize = `${autoMinWidth}px`;
+    }
+    // getFloatingProps measured childWidth before the inline styles were
+    // (re)applied, so use the width the dropdown will actually have:
+    // - auto: the clamped minimum, so end-aligned dropdowns don't extend past
+    //   the trigger's right edge.
+    // - full: the trigger width (the reset above drops it to content width).
+    let effectiveChildWidth = childWidth;
+    if (autoWidth) {
+        effectiveChildWidth = Math.max(childWidth, autoMinWidth);
+    }
+    else if (fullWidth) {
+        effectiveChildWidth = width;
+    }
+    // getFloatingProps detects horizontal overflow assuming a centered element
+    // (it halves childWidth). The dropdown is actually start-aligned (inset =
+    // left), so for the wider auto dropdown re-check overflow against its full
+    // width and flip to end-alignment when it would extend past the viewport.
+    let dropdownPlacement = correctedPlacement;
+    if (autoWidth && (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') && left + effectiveChildWidth > innerWidth) {
+        dropdownPlacement = dropdownPlacement.startsWith('top') ? 'top-end' : 'bottom-end';
+    }
+    if (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') {
         element.style.insetInlineStart = `${left}px`;
     }
-    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        element.style.insetInlineStart = `${right - childWidth}px`;
+    else if (dropdownPlacement === 'top-end' || dropdownPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${Math.max(right - effectiveChildWidth, 0)}px`;
     }
-    if (correctedPlacement?.startsWith('top')) {
+    if (dropdownPlacement?.startsWith('top')) {
         element.style.insetBlockStart = `${top - childHeight}px`;
     }
-    else if (correctedPlacement?.startsWith('bottom')) {
+    else if (dropdownPlacement?.startsWith('bottom')) {
         element.style.insetBlockStart = `${bottom}px`;
     }
     element.style.position = 'fixed';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.12.0",
+  "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.0",
-    "@db-ux/core-foundations": "4.12.0"
+    "@db-ux/core-components": "4.13.0",
+    "@db-ux/core-foundations": "4.13.0"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.60.0",