@db-ux/react-core-components 4.3.2 → 4.4.0-loading-567cd0c

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/react-core-components
 
+## 4.4.0
+
+### Minor Changes
+
+- feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
+
+- feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
+
 ## 4.3.2
 
 ### Patch Changes

package/dist/components/badge/badge.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | keyof import("./model").DBBadgeDefaultProps | "semantic" | "size" | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "semantic" | "text" | keyof import("../..").GlobalProps | keyof import("./model").DBBadgeDefaultProps | "size" | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBBadge;

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

@@ -14,10 +14,11 @@ import DBCustomSelectListItem from "../custom-select-list-item/custom-select-lis
 import DBCustomSelectList from "../custom-select-list/custom-select-list";
 import DBInfotext from "../infotext/infotext";
 import DBInput from "../input/input";
+import DBLoadingIndicator from "../loading-indicator/loading-indicator";
 import DBTag from "../tag/tag";
 import DBTooltip from "../tooltip/tooltip";
 function DBCustomSelectFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
     const _ref = component || useRef(component);
     const detailsRef = useRef(null);
@@ -689,22 +690,20 @@ function DBCustomSelectFn(props, component) {
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : null,
-                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_f = (props.showLoading
-                        ? props.loadingText
-                        : props.noResultsText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
+                    _hasNoOptions || props.showLoading ? (React.createElement(React.Fragment, null, props.showLoading ? (React.createElement(DBLoadingIndicator, { id: _infoTextId }, (_f = props.loadingText) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(DBInfotext, { semantic: "warning", id: _infoTextId }, (_g = props.noResultsText) !== null && _g !== void 0 ? _g : DEFAULT_MESSAGE)))) : (React.createElement(React.Fragment, null,
                         React.createElement(React.Fragment, null,
                             selectAllEnabled ? (React.createElement("div", null,
                                 React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },
                                     React.createElement("label", null,
                                         React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
                                         getSelectAllLabel())))) : null,
-                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_h = (_g = props.listLabel) !== null && _g !== void 0 ? _g : props.label) !== null && _h !== void 0 ? _h : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
+                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_j = (_h = props.listLabel) !== null && _h !== void 0 ? _h : props.label) !== null && _j !== void 0 ? _j : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
                     React.createElement("div", null,
-                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_j = props.mobileCloseButtonText) !== null && _j !== void 0 ? _j : DEFAULT_CLOSE_BUTTON))))) : null),
-        ((_k = props.showClearSelection) !== null && _k !== void 0 ? _k : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
+                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_k = props.mobileCloseButtonText) !== null && _k !== void 0 ? _k : DEFAULT_CLOSE_BUTTON))))) : null),
+        ((_l = props.showClearSelection) !== null && _l !== void 0 ? _l : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
             props.clearSelectionText,
             React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
-        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
+        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_m = props.placeholder) !== null && _m !== void 0 ? _m : props.label),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

package/dist/components/infotext/infotext.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | "semantic" | "size" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "semantic" | "text" | keyof import("../..").GlobalProps | "size" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBInfotext;

package/dist/components/link/link.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").ClickEventProps<HTMLAnchorElement> | keyof import("../..").LinkProps | "wrap"> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "role" | "text" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").ClickEventProps<HTMLAnchorElement> | keyof import("../..").LinkProps | "wrap"> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").RoleProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
 export default DBLink;

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

@@ -1,4 +1,4 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, RoleProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
 export declare const LinkVariantList: readonly ["adaptive", "brand", "inline"];
 export type LinkVariantType = (typeof LinkVariantList)[number];
 export declare const LinkSizeList: readonly ["medium", "small"];
@@ -19,6 +19,6 @@ export type DBLinkDefaultProps = {
      */
     variant?: LinkVariantType;
 };
-export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & ShowIconProps & TextProps & WrapProps;
+export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & RoleProps & ShowIconProps & TextProps & WrapProps;
 export type DBLinkDefaultState = {};
 export type DBLinkState = DBLinkDefaultState & GlobalState & ClickEventState<HTMLAnchorElement>;

package/dist/components/loading-indicator/examples/_indicators.data.d.ts

@@ -0,0 +1,49 @@
+import { PopoverDelayType, SizeType } from '../../../shared/model';
+import { LoadingIndicatorStateType, LoadingIndicatorVariantType } from '../model';
+export declare const indicators: {
+    variant: LoadingIndicatorVariantType;
+    progressText: string;
+    progressTextState: string;
+    label: string;
+}[];
+export declare const densities: {
+    value: string;
+    name: string;
+}[];
+export declare const indeterminateArray: {
+    value: boolean;
+    name: string;
+}[];
+export declare const sizes: {
+    value: SizeType;
+    name: string;
+}[];
+export declare const statesArray: {
+    value: LoadingIndicatorStateType;
+    name: string;
+}[];
+export declare const showLabels: {
+    value: boolean;
+    name: string;
+}[];
+export declare const showProgressTexts: {
+    value: boolean;
+    name: string;
+}[];
+export declare const overlays: {
+    value: boolean;
+    name: string;
+}[];
+export declare const delays: {
+    value: PopoverDelayType;
+    name: string;
+}[];
+export declare const buttonExamples: {
+    overlay: boolean;
+    name: string;
+}[];
+export type TimeoutStore = {
+    loadingState: LoadingIndicatorStateType;
+    onTimeoutFn: () => void;
+    getLabel: (loadingState: LoadingIndicatorStateType | string) => string;
+};

package/dist/components/loading-indicator/examples/_indicators.data.js

@@ -0,0 +1,91 @@
+export const indicators = [{
+        variant: 'inline',
+        progressText: '42 of 100',
+        progressTextState: '100 of 100',
+        label: 'Inline'
+    }, {
+        variant: 'onsite',
+        progressText: '42%',
+        progressTextState: '100%',
+        label: 'Onsite'
+    }, {
+        variant: 'progress-bar',
+        progressText: '42 of 100',
+        progressTextState: '100 of 100',
+        label: 'Progress'
+    }];
+export const densities = [{
+        value: 'functional',
+        name: 'Functional'
+    }, {
+        value: 'regular',
+        name: '(Default) Regular'
+    }, {
+        value: 'expressive',
+        name: 'Expressive'
+    }];
+export const indeterminateArray = [{
+        value: true,
+        name: '(Default) True'
+    }, {
+        value: false,
+        name: 'False'
+    }];
+export const sizes = [{
+        value: 'small',
+        name: 'Small'
+    }, {
+        value: 'medium',
+        name: '(Default) Medium'
+    }];
+export const statesArray = [{
+        value: 'inactive',
+        name: 'Inactive'
+    }, {
+        value: 'active',
+        name: 'Active'
+    }, {
+        value: 'successful',
+        name: 'Successful'
+    }, {
+        value: 'critical',
+        name: 'Critical'
+    }];
+export const showLabels = [{
+        value: true,
+        name: '(Default) True'
+    }, {
+        value: false,
+        name: 'False'
+    }];
+export const showProgressTexts = [{
+        value: true,
+        name: '(Default) True'
+    }, {
+        value: false,
+        name: 'False'
+    }];
+export const overlays = [{
+        value: false,
+        name: '(Default) False'
+    }, {
+        value: true,
+        name: 'True'
+    }];
+export const delays = [{
+        value: 'none',
+        name: '(Default) None'
+    }, {
+        value: 'slow',
+        name: 'Slow'
+    }, {
+        value: 'fast',
+        name: 'Fast'
+    }];
+export const buttonExamples = [{
+        overlay: false,
+        name: 'Without overlay'
+    }, {
+        overlay: true,
+        name: 'With overlay'
+    }];

package/dist/components/loading-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default as DBLoadingIndicator } from "./loading-indicator";

package/dist/components/loading-indicator/index.js

@@ -0,0 +1 @@
+export { default as DBLoadingIndicator } from "./loading-indicator";

package/dist/components/loading-indicator/loading-indicator.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBLoadingIndicator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "size" | "showLabel" | keyof import("./model").DBLoadingIndicatorDefaultProps | "delay"> & import("./model").DBLoadingIndicatorDefaultProps & import("../..").GlobalProps & import("../..").SizeProps & import("../..").ShowLabelProps & import("../..").DelayProps & React.RefAttributes<any>>;
+export default DBLoadingIndicator;

package/dist/components/loading-indicator/loading-indicator.js

@@ -0,0 +1,153 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_ID } from "../../shared/constants";
+import { cls, delay as delayFn, getBooleanAsString, uuid } from "../../utils";
+function DBLoadingIndicatorFn(props, component) {
+    var _a, _b;
+    props = Object.assign({ indeterminate: true, variant: "inline", size: "medium", autoDisable: true }, props);
+    const _ref = component || useRef(undefined);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [_loadingState, set_loadingState] = useState(() => "inactive");
+    const [_previousLoadingState, set_previousLoadingState] = useState(() => undefined);
+    const [_style, set_style] = useState(() => ({}));
+    const [initialized, setInitialized] = useState(() => false);
+    function getPercentage() {
+        if (props.indeterminate || !props.value || !props.max) {
+            return;
+        }
+        return `${(Number(props.value) / Number(props.max)).toFixed(2)}`;
+    }
+    function getRole() {
+        if (props.role) {
+            if (props.role === "none") {
+                return;
+            }
+            return props.role;
+        }
+        return "status";
+    }
+    function handleParentDisabled() {
+        if (_ref.current && props.autoDisable && initialized) {
+            let parent = _ref.current.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (parent && "disabled" in parent) {
+                parent.disabled = _loadingState !== "inactive";
+            }
+        }
+    }
+    function handleParentAria(remove) {
+        if (_ref.current && _id && initialized) {
+            let parent = _ref.current.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (!parent)
+                return;
+            const isButton = (parent === null || parent === void 0 ? void 0 : parent.localName) === "button";
+            if (!(isButton || props.overlay))
+                return;
+            const ariaAttribute = isButton ? "aria-labelledby" : "aria-describedby";
+            const ariaLabelledBy = parent.getAttribute(ariaAttribute);
+            let labelledByElements = ariaLabelledBy ? ariaLabelledBy.split(",") : [];
+            if (remove || _loadingState === "inactive") {
+                if (labelledByElements.includes(_id)) {
+                    labelledByElements = labelledByElements.filter((elementId) => elementId !== _id);
+                    if (!isButton) {
+                        parent.ariaBusy = null;
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                if (!labelledByElements.includes(_id)) {
+                    labelledByElements.push(_id);
+                }
+                if (!isButton) {
+                    parent.ariaBusy = _loadingState === "active" ? "true" : null;
+                }
+            }
+            if (labelledByElements.length) {
+                parent.setAttribute(ariaAttribute, labelledByElements.join(","));
+            }
+            else {
+                parent.removeAttribute(ariaAttribute);
+            }
+        }
+    }
+    useEffect(() => {
+        set_id(props.id || "loading-indicator-" + uuid());
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        handleParentDisabled();
+    }, [_ref.current, initialized, props.autoDisable, _loadingState]);
+    useEffect(() => {
+        handleParentAria(false);
+    }, [_ref.current, initialized, _loadingState, props.overlay, _id]);
+    useEffect(() => {
+        if (props.onTimeout) {
+            // Not merged if as workaround for angular
+            if (_loadingState !== "inactive" &&
+                _loadingState !== _previousLoadingState) {
+                set_previousLoadingState(_loadingState);
+                void delayFn(() => {
+                    if (props.onTimeout) {
+                        props.onTimeout(_loadingState);
+                    }
+                }, _loadingState === "active" ? 5000 : 2000);
+            }
+        }
+    }, [_loadingState, props.onTimeout]);
+    useEffect(() => {
+        if (_loadingState === props.state)
+            return;
+        if (props.state) {
+            set_loadingState(props.state);
+        }
+        else if (props.indeterminate === undefined || props.indeterminate) {
+            set_loadingState("active");
+        }
+        else {
+            set_loadingState("inactive");
+        }
+    }, [props.state]);
+    useEffect(() => {
+        if (_ref.current) {
+            if (props.delay === "slow" || props.delay === "fast") {
+                void delayFn(() => {
+                    if (_ref.current) {
+                        _ref.current.dataset["delay"] = "";
+                    }
+                }, props.delay === "slow" ? 500 : 250);
+            }
+        }
+    }, [_ref.current, props.delay]);
+    useEffect(() => {
+        set_style({
+            "--db-loading-indicator-percentage": getPercentage(),
+        });
+    }, [props.indeterminate, props.value, props.max]);
+    useEffect(() => {
+        return () => {
+            handleParentAria(true);
+            handleParentDisabled();
+        };
+    }, []);
+    return (React.createElement("div", Object.assign({ 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", "autoDisable", "onTimeout"]), 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-loading-indicator", props.className), style: _style, "data-indeterminate": getBooleanAsString(props.indeterminate), "data-size": props.size, "data-variant": props.variant, "data-delay": props.delay, "data-state": _loadingState, "data-overlay": getBooleanAsString(props.overlay) }),
+        props.variant !== "progress-bar" ? (React.createElement("svg", { className: "db-loading-indicator-circle", "aria-hidden": "true", viewBox: props.variant === "inline" ? "10 10 20 20" : "32 32 64 64" },
+            React.createElement("circle", { className: "db-loading-indicator-circle-track" }),
+            React.createElement("circle", { className: "db-loading-indicator-circle-segment" }))) : null,
+        React.createElement("div", { role: getRole() },
+            React.createElement("label", { "data-show-label": getBooleanAsString(props.showLabel), id: _id },
+                props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children),
+                React.createElement("progress", { value: props.indeterminate ? undefined : (_a = props.value) !== null && _a !== void 0 ? _a : 0, max: props.indeterminate ? undefined : (_b = props.max) !== null && _b !== void 0 ? _b : 100 }, props.indeterminate ? React.createElement(React.Fragment, null, undefined) : React.createElement(React.Fragment, null, props.progressText))),
+            !props.indeterminate ? (React.createElement("span", { "aria-hidden": "true", "data-show-progress-text": getBooleanAsString(props.showProgressText) }, props.progressText)) : null)));
+}
+const DBLoadingIndicator = forwardRef(DBLoadingIndicatorFn);
+export default DBLoadingIndicator;

package/dist/components/loading-indicator/model.d.ts

@@ -0,0 +1,39 @@
+import { DelayProps, GlobalProps, GlobalState, InitializedState, ShowLabelProps, SizeProps } from '../../shared/model';
+export declare const LoadingIndicatorVariantList: readonly ["progress-bar", "onsite", "inline"];
+export type LoadingIndicatorVariantType = (typeof LoadingIndicatorVariantList)[number];
+export declare const LoadingIndicatorStateList: readonly ["inactive", "active", "successful", "critical"];
+export type LoadingIndicatorStateType = (typeof LoadingIndicatorStateList)[number];
+export type DBLoadingIndicatorDefaultProps = {
+    indeterminate?: boolean | string;
+    label?: string;
+    max?: number | string;
+    progressText?: string;
+    /**
+     * Enables/disables the visibility of the progressText
+     */
+    showProgressText?: boolean | string;
+    value?: string | number;
+    overlay?: boolean | string;
+    variant?: LoadingIndicatorVariantType;
+    state?: LoadingIndicatorStateType | string;
+    /**
+     * Disable the parent component (e.g. a DBButton) when loading indicator is inside it
+     */
+    autoDisable?: boolean | string;
+    role?: 'alert' | 'status' | 'none';
+    /**
+     * Triggers after a timeout. For "active" after 5 seconds, for "successful" and "critical" after 2 seconds
+     */
+    onTimeout?: (state?: LoadingIndicatorStateType | string) => void;
+};
+export type DBLoadingIndicatorProps = DBLoadingIndicatorDefaultProps & GlobalProps & SizeProps & ShowLabelProps & DelayProps;
+export type DBLoadingIndicatorDefaultState = {
+    _loadingState?: LoadingIndicatorStateType | string;
+    _previousLoadingState?: LoadingIndicatorStateType | string;
+    _style: any;
+    getPercentage: () => string | undefined;
+    getRole: () => string | undefined;
+    handleParentAria: (remove: boolean) => void;
+    handleParentDisabled: () => void;
+};
+export type DBLoadingIndicatorState = DBLoadingIndicatorDefaultState & GlobalState & InitializedState;

package/dist/components/loading-indicator/model.js

@@ -0,0 +1,2 @@
+export const LoadingIndicatorVariantList = ['progress-bar', 'onsite', 'inline'];
+export const LoadingIndicatorStateList = ['inactive', 'active', 'successful', 'critical'];

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

@@ -1,4 +1,4 @@
-import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
 export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
 export type NotificationVariantType = (typeof NotificationVariantList)[number];
 export declare const NotificationLinkVariantList: readonly ["block", "inline"];
@@ -52,6 +52,6 @@ export type DBNotificationDefaultProps = {
      */
     variant?: NotificationVariantType;
 };
-export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
+export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & RoleProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
 export type DBNotificationDefaultState = {};
 export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement>>;

package/dist/components/notification/notification.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 import { ClickEvent } from "../../shared/model";
-declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../../shared/model").GlobalProps | "semantic" | "icon" | "showIcon" | keyof import("../../shared/model").PopoverProps | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").PopoverProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | "semantic" | "text" | keyof import("../../shared/model").GlobalProps | "icon" | "showIcon" | "width" | "delay" | "animation" | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & {
+    animation?: boolean | string;
+    width?: import("../../shared/model").PopoverWidthType;
+} & import("../../shared/model").DelayProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBNotification;

package/dist/components/notification/notification.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, getBoolean, getBooleanAsString, stringPropVisible, } from "../../utils";
+import { cls, getBoolean, getBooleanAsString, getNotificationRole, stringPropVisible, } from "../../utils";
 import DBButton from "../button/button";
 function DBNotificationFn(props, component) {
     var _a;
@@ -16,7 +16,11 @@ function DBNotificationFn(props, component) {
             props.onClose(event);
         }
     }
-    return (React.createElement("article", Object.assign({ 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", "onClose"]), { id: props.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"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
+    return (React.createElement("div", Object.assign({ 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", "onClose"]), { id: props.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"]), { className: cls("db-notification", props.className), role: getNotificationRole({
+            semantic: props.semantic,
+            role: props.role,
+            ariaLive: props.ariaLive,
+        }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
         stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
         React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),

package/dist/components/popover/popover.d.ts

@@ -1,3 +1,6 @@
 import * as React from "react";
-declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "placement" | "spacing" | keyof import("../..").PopoverProps | keyof import("./model").DBPopoverDefaultProps | "gap"> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & import("../..").PopoverProps & React.RefAttributes<any>>;
+declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "placement" | "width" | "spacing" | "delay" | "animation" | keyof import("./model").DBPopoverDefaultProps | "gap"> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & {
+    animation?: boolean | string;
+    width?: import("../..").PopoverWidthType;
+} & import("../..").DelayProps & React.RefAttributes<any>>;
 export default DBPopover;

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

@@ -9,6 +9,15 @@ export type DBSelectDefaultProps = {
      * If you don't/can't use children/slots you can pass in the options as an array.
      */
     options?: DBSelectOptionType[];
+    /**
+     * Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.
+     * By default, it is shown for non-required selects and hidden for required selects.
+     * Set to `true` to always show or `false` to always hide the empty option.
+     *
+     * Note: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.
+     * Setting `showEmptyOption` alone has no effect if neither of these conditions is met.
+     */
+    showEmptyOption?: boolean;
 };
 export type DBSelectOptionType = {
     /**
@@ -40,5 +49,6 @@ export type DBSelectProps = GlobalProps & ClickEventProps<HTMLSelectElement> & C
 export type DBSelectDefaultState = {
     _placeholderId: string;
     getOptionLabel: (option: DBSelectOptionType) => string;
+    shouldShowEmptyOption: () => boolean;
 };
 export type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState & FromValidState;

package/dist/components/select/select.js

@@ -87,6 +87,17 @@ function DBSelectFn(props, component) {
         var _a, _b;
         return (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString();
     }
+    function shouldShowEmptyOption() {
+        const hasPlaceholderOrFloating = props.variant === "floating" || !!props.placeholder;
+        if (!hasPlaceholderOrFloating) {
+            return false;
+        }
+        if (props.showEmptyOption !== undefined) {
+            return props.showEmptyOption;
+        }
+        // Default: show empty option for non-required selects
+        return !props.required;
+    }
     useEffect(() => {
         var _a;
         setInitialized(true);
@@ -156,7 +167,7 @@ function DBSelectFn(props, component) {
     return (React.createElement("div", Object.assign({}, 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-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
         React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),
-            props.variant === "floating" || props.placeholder ? (React.createElement("option", { className: "placeholder", value: "" })) : null,
+            props.variant === "floating" || !!props.placeholder ? (React.createElement("option", { className: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(shouldShowEmptyOption()) })) : null,
             ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(React.Fragment, null, (_d = props.options) === null || _d === void 0 ? void 0 : _d.map((option) => {
                 var _a;
                 return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));

package/dist/components/tag/tag.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../shared/model").GlobalProps | "semantic" | "emphasis" | "icon" | "showIcon" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & React.RefAttributes<any>>;
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | "semantic" | keyof import("../../shared/model").GlobalProps | "emphasis" | "icon" | "showIcon" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & React.RefAttributes<any>>;
 export default DBTag;

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,6 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | "width" | "delay" | keyof import("./model").DBTooltipDefaultProps | "animation"> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & {
+    animation?: boolean | string;
+    width?: import("../../shared/model").PopoverWidthType;
+} & import("../../shared/model").DelayProps & React.RefAttributes<any>>;
 export default DBTooltip;

package/dist/index.d.ts

@@ -77,3 +77,5 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from "./components/loading-indicator";
+export * from "./components/loading-indicator/model";

package/dist/index.js

@@ -77,3 +77,5 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from "./components/loading-indicator";
+export * from "./components/loading-indicator/model";

package/dist/shared/model.d.ts

@@ -158,10 +158,6 @@ export type PopoverDelayType = (typeof PopoverDelayList)[number];
 export declare const PopoverWidthList: readonly ["auto", "fixed"];
 export type PopoverWidthType = (typeof PopoverWidthList)[number];
 export type PopoverProps = {
-    /**
-     * Add a delay before showing the tooltip
-     */
-    delay?: PopoverDelayType;
     /**
      * Disable animation
      */
@@ -170,6 +166,12 @@ export type PopoverProps = {
      * Use fixed with for default max-width
      */
     width?: PopoverWidthType;
+} & DelayProps;
+export type DelayProps = {
+    /**
+     * Add a delay before showing the component
+     */
+    delay?: PopoverDelayType;
 };
 export type NameProps = {
     /**
@@ -398,10 +400,6 @@ export type LinkProps = {
      * The relationship of the linked URL as space-separated link types.
      */
     rel?: string;
-    /**
-     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
-     */
-    role?: string;
     /**
      * How much of the referrer to send when following the link.
      * @deprecated use `referrerPolicy` instead
@@ -412,6 +410,12 @@ export type LinkProps = {
      */
     referrerPolicy?: LinkReferrerPolicyType;
 };
+export type RoleProps = {
+    /**
+     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     */
+    role?: string;
+};
 export type TextProps = {
     /**
      * Alternative for default slot/children.

package/dist/utils/index.d.ts

@@ -58,3 +58,15 @@ export declare const getOptionKey: (option: {
     value?: string | number | string[] | undefined;
 }, prefix: string) => string;
 export declare const isKeyboardEvent: <T>(event?: ClickEvent<T> | GeneralKeyboardEvent<T>) => event is GeneralKeyboardEvent<T>;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+export declare const getNotificationRole: ({ semantic, role, ariaLive }: {
+    semantic?: string;
+    role?: string;
+    ariaLive?: string;
+}) => string | undefined;

package/dist/utils/index.js

@@ -141,3 +141,28 @@ export const getOptionKey = (option, prefix) => {
     return `${prefix}${key}`;
 };
 export const isKeyboardEvent = (event) => event.key !== undefined;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+export const getNotificationRole = ({ semantic, role, ariaLive }) => {
+    if (role) {
+        return role;
+    }
+    if (ariaLive) {
+        return 'article';
+    }
+    switch (semantic) {
+        case 'critical':
+        case 'warning':
+            return 'alert';
+        case 'informational':
+        case 'successful':
+            return 'status';
+        default:
+            return 'article';
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.3.2",
+  "version": "4.4.0-loading-567cd0c",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -31,9 +31,9 @@
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.57.0",
-    "@types/react": "19.2.8",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "@types/react": "19.2.10",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.3.2",
-    "@db-ux/core-foundations": "4.3.2"
+    "@db-ux/core-components": "4.4.0-loading-567cd0c",
+    "@db-ux/core-foundations": "4.4.0-loading-567cd0c"
   }
 }