@gooddata/sdk-ui-kit 11.41.0-alpha.2 → 11.41.0-alpha.4

package/esm/@ui/UiControlButton/UiControlButton.d.ts

@@ -10,6 +10,12 @@ export interface IUiControlButtonProps {
     icon?: ReactNode;
     titleExtension?: ReactNode;
     subtitleExtension?: ReactNode;
+    /**
+     * `"stacked"` (default): title above subtitle, chevron beside subtitle.
+     * `"row"`: single full-width line, flat background, chevron pinned right.
+     */
+    layout?: "stacked" | "row";
+    hideChevron?: boolean;
     isOpen?: boolean;
     isDraggable?: boolean;
     isDragging?: boolean;
@@ -41,4 +47,4 @@ export interface IUiControlButtonProps {
  *
  * @internal
  */
-export declare function UiControlButton({ title, titleClassName, subtitle, subtitleClassName, icon, titleExtension, subtitleExtension, isOpen, isDraggable, isDragging, isError, disabled, disabledTooltip, onClick, className, "data-testid": dataTestId, buttonRef, buttonId, dropdownId, ariaLabel }: IUiControlButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiControlButton({ title, titleClassName, subtitle, subtitleClassName, icon, titleExtension, subtitleExtension, layout, hideChevron, isOpen, isDraggable, isDragging, isError, disabled, disabledTooltip, onClick, className, "data-testid": dataTestId, buttonRef, buttonId, dropdownId, ariaLabel }: IUiControlButtonProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiControlButton/UiControlButton.js

@@ -21,9 +21,12 @@ const TITLE_TOOLTIP_ALIGN_POINTS = [
  *
  * @internal
  */
-export function UiControlButton({ title, titleClassName, subtitle, subtitleClassName, icon, titleExtension, subtitleExtension, isOpen, isDraggable, isDragging, isError, disabled, disabledTooltip, onClick, className, "data-testid": dataTestId, buttonRef, buttonId, dropdownId, ariaLabel, }) {
+export function UiControlButton({ title, titleClassName, subtitle, subtitleClassName, icon, titleExtension, subtitleExtension, layout = "stacked", hideChevron, isOpen, isDraggable, isDragging, isError, disabled, disabledTooltip, onClick, className, "data-testid": dataTestId, buttonRef, buttonId, dropdownId, ariaLabel, }) {
     const tooltipId = useIdPrefixed("gd-ui-kit-control-button-tooltip");
     const showDisabledTooltip = !!disabled && !!disabledTooltip;
+    const hasSubtitle = subtitle !== undefined || subtitleExtension !== undefined;
+    // Trailing colon on the label, only when a subtitle follows it.
+    const showLabelColon = layout === "row" && hasSubtitle;
     const onKeyDown = (event) => {
         if (!isActionKey(event)) {
             return;
@@ -36,6 +39,8 @@ export function UiControlButton({ title, titleClassName, subtitle, subtitleClass
         onClick?.();
     };
     const button = (_jsxs("div", { id: buttonId, ref: buttonRef, className: cx(b({
+            layout,
+            hideChevron: !!hideChevron,
             isOpen: !!isOpen,
             isDraggable: !!isDraggable,
             isDragging: !!isDragging,
@@ -43,7 +48,7 @@ export function UiControlButton({ title, titleClassName, subtitle, subtitleClass
             disabled: !!disabled,
         }), className), role: "button", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-controls": isOpen ? dropdownId : undefined, "aria-describedby": showDisabledTooltip ? tooltipId : undefined, "aria-label": ariaLabel, "data-testid": dataTestId, onClick: disabled ? undefined : onClick, onKeyDown: onKeyDown, children: [icon ? _jsx("div", { className: e("icon"), children: icon }) : null, _jsxs("div", { className: e("content"), children: [
                     _jsxs("div", { className: e("title-row"), children: [
-                            _jsx("div", { className: e("title"), children: _jsx(ShortenedText, { tooltipAlignPoints: TITLE_TOOLTIP_ALIGN_POINTS, className: titleClassName, children: title }) }), titleExtension] }), subtitle === undefined && subtitleExtension === undefined ? null : (_jsxs("div", { className: e("subtitle-row"), children: [typeof subtitle === "string" ? (_jsx("div", { className: e("subtitle"), children: _jsx(ShortenedText, { tooltipAlignPoints: TITLE_TOOLTIP_ALIGN_POINTS, className: subtitleClassName, children: subtitle }) })) : (subtitle), subtitleExtension] }))] })
+                            _jsx("div", { className: e("title", { withColon: showLabelColon }), children: _jsx(ShortenedText, { tooltipAlignPoints: TITLE_TOOLTIP_ALIGN_POINTS, className: titleClassName, children: title }) }), titleExtension] }), hasSubtitle ? (_jsxs("div", { className: e("subtitle-row"), children: [typeof subtitle === "string" ? (_jsx("div", { className: e("subtitle"), children: _jsx(ShortenedText, { tooltipAlignPoints: TITLE_TOOLTIP_ALIGN_POINTS, className: subtitleClassName, children: subtitle }) })) : (subtitle), subtitleExtension] })) : null] })
         ] }));
     if (showDisabledTooltip) {
         return (_jsx(UiTooltip, { id: tooltipId, anchor: button, content: disabledTooltip, triggerBy: ["focus"], arrowPlacement: "top", showArrow: true }));

package/esm/@ui/UiListbox/UiListbox.js

@@ -135,9 +135,13 @@ export function UiListbox({ items, dataTestId, itemDataTestId, width, maxWidth,
                                 type: "mouse",
                                 newTab: e.ctrlKey || e.metaKey || e.button === 1,
                             });
-                        }, item: item, isFocused: index === focusedIndex, isSelected: item.id === selectedItemId, isCompact: isCompact }) }, item.id)) : (_jsx("li", { ref: (el) => {
+                        }, item: item, isFocused: index === focusedIndex, isSelected: item.id === selectedItemId, isCompact: isCompact }) }, item.id)) : (
+                // Static items (separators, headers) are presentational; `role="presentation"`
+                // keeps the <li> out of the a11y tree so it isn't exposed as a `listitem`,
+                // which is an invalid child of `role="listbox"` (only `option`/`group` allowed).
+                _jsx("li", { ref: (el) => {
                         itemRefs.current[index] = el;
-                    }, "data-testid": testId, children: _jsx(StaticItemComponent, { item: item }) }, item.id ?? index));
+                    }, role: "presentation", "data-testid": testId, children: _jsx(StaticItemComponent, { item: item }) }, item.id ?? index));
             }) }) }));
 }
 const makeItemId = (listboxId, item) => item?.type === "interactive" ? `item-${listboxId}-${item.id}` : undefined;

package/esm/@ui/UiTags/UiTag.d.ts

@@ -6,6 +6,7 @@ export interface IUiTagProps {
     isReadOnly?: boolean;
     isDisabled?: boolean;
     isFocused?: boolean;
+    size?: "small" | "large";
     onDelete?: (tag: IUiTagDef) => void;
     onClick?: (tag: IUiTagDef) => void;
     maxWidth?: number | "none";

package/esm/@ui/UiTags/UiTag.js

@@ -4,9 +4,9 @@ import { forwardRef } from "react";
 import { bem } from "../@utils/bem.js";
 import { UiTag as UiTagComponent } from "../UiTag/UiTag.js";
 const { e } = bem("gd-ui-kit-tags");
-export const UiTag = forwardRef(function UiTag({ tag, maxWidth, isDeletable, isDisabled, isFocused, deleteLabel, onDelete, onClick }, ref) {
+export const UiTag = forwardRef(function UiTag({ tag, maxWidth, isDeletable, isDisabled, isFocused, size, deleteLabel, onDelete, onClick }, ref) {
     const canBeDeleted = isDeletable && (tag.isDeletable ?? true);
-    return (_jsx("div", { className: e("tag", { isFocused: isFocused ?? false }), role: "listitem", style: { maxWidth }, children: _jsx(UiTagComponent, { ref: ref, tabIndex: -1, deleteTabIndex: -1, label: `${tag.label}`, isDeletable: canBeDeleted, isDisabled: isDisabled, accessibilityConfig: {
+    return (_jsx("div", { className: e("tag", { isFocused: isFocused ?? false }), role: "listitem", style: { maxWidth }, children: _jsx(UiTagComponent, { ref: ref, tabIndex: -1, deleteTabIndex: -1, label: `${tag.label}`, size: size, iconBefore: tag.iconBefore, isDeletable: canBeDeleted, isDisabled: isDisabled, accessibilityConfig: {
                 ariaLabel: tag.label,
                 deleteAriaLabel: `${deleteLabel ?? "Delete"} ${tag.label}`,
             }, onDelete: (e) => {

package/esm/@ui/UiTags/UiTags.d.ts

@@ -2,4 +2,4 @@ import { type IUiTagsProps } from "./types.js";
 /**
  * @internal
  */
-export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLabel, closeLabel, saveLabel, noTagsLabel, moreLabel, removeLabel, creatableLabel, mode, canDeleteTags, canCreateTag, readOnly, onTagClick, onTagAdd, onTagRemove, accessibilityConfig }: IUiTagsProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLabel, closeLabel, saveLabel, noTagsLabel, moreLabel, removeLabel, creatableLabel, mode, size, canDeleteTags, canCreateTag, readOnly, onTagClick, onTagAdd, onTagRemove, accessibilityConfig, renderAddButton }: IUiTagsProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiTags/UiTags.js

@@ -17,13 +17,15 @@ const defaultAccessibilityConfig = {};
 /**
  * @internal
  */
-export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Name", cancelLabel = "Cancel", closeLabel = "Close", saveLabel = "Save", noTagsLabel = "No tags", moreLabel = "More tags", removeLabel = "Remove", creatableLabel = "(Create new)", mode = "single-line", canDeleteTags = true, canCreateTag = true, readOnly = false, onTagClick = () => { }, onTagAdd = () => { }, onTagRemove = () => { }, accessibilityConfig = defaultAccessibilityConfig, }) {
+export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Name", cancelLabel = "Cancel", closeLabel = "Close", saveLabel = "Save", noTagsLabel = "No tags", moreLabel = "More tags", removeLabel = "Remove", creatableLabel = "(Create new)", mode = "single-line", size = "small", canDeleteTags = true, canCreateTag = true, readOnly = false, onTagClick = () => { }, onTagAdd = () => { }, onTagRemove = () => { }, accessibilityConfig = defaultAccessibilityConfig, renderAddButton, }) {
     const inputRef = useRef(null);
     const [popupOpen, setPopupOpen] = useState(false);
     const popupId = useId();
     const isDeletable = canDeleteTags && !readOnly;
-    const isAddable = canCreateTag && !readOnly;
-    const { rootRef, showedTags, hiddenTags, tagsContainerRef, hiddenTagsContainerRef, tooltipTagsContainerRef, addButtonRef, allContainerRef, tooltipWidth, availableWidth, lastAvailableWidth, setTooltipContainer, } = useResponsiveTags(tags, mode, [canCreateTag, canDeleteTags, readOnly]);
+    // A custom add-button slot takes precedence over the built-in create-tag combobox.
+    const hasCustomAddButton = !!renderAddButton && !readOnly;
+    const isAddable = canCreateTag && !readOnly && !hasCustomAddButton;
+    const { rootRef, showedTags, hiddenTags, tagsContainerRef, hiddenTagsContainerRef, tooltipTagsContainerRef, addButtonRef, allContainerRef, tooltipWidth, availableWidth, lastAvailableWidth, setTooltipContainer, } = useResponsiveTags(tags, mode, [canCreateTag, canDeleteTags, readOnly, hasCustomAddButton]);
     const items = [...showedTags, hiddenTags];
     const { handleKeyDown, interactionState, onMoreOpen, onMoreClose, onAddOpen, onAddClose, showedFocusedIndex, hiddenFocusedIndex, tag, setTag, onTagClickHandler, onTagRemoveHandler, onTagAddHandler, } = useTagsInteractions(rootRef, tooltipTagsContainerRef, showedTags, hiddenTags, onTagClick, onTagAdd, onTagRemove);
     const comboboxOptions = useMemo(() => {
@@ -37,7 +39,7 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
     }, [tagOptions, tags]);
     return (_jsxs("div", { ref: rootRef, tabIndex: tags.length === 0 ? -1 : 0, onKeyDown: handleKeyDown, className: b({ readOnly, mode }), "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, role: accessibilityConfig?.role ?? "list", children: [
             _jsx("div", { className: e("shadow-container"), ref: allContainerRef, children: tags.map((tag) => {
-                    return (_jsx(UiTag, { tag: tag, isDeletable: isDeletable }, getKey(tag, isDeletable, readOnly)));
+                    return (_jsx(UiTag, { tag: tag, isDeletable: isDeletable, size: size }, getKey(tag, isDeletable, readOnly)));
                 }) }), _jsxs("div", { className: e("tags-container"), ref: tagsContainerRef, children: [items.map((tag, i) => {
                         if (Array.isArray(tag)) {
                             if (hiddenTags.length === 0) {
@@ -55,7 +57,7 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
                                         }, tabIndex: 0, children: hiddenTags.map((tag, i) => {
                                             return (_jsx(UiTag, { tag: tag, deleteLabel: removeLabel, ref: (ref) => {
                                                     interactionState.current.tags[tag.id] = ref;
-                                                }, isDeletable: isDeletable, isDisabled: readOnly, isFocused: hiddenFocusedIndex === i, maxWidth: tooltipWidth, onDelete: onTagRemoveHandler, onClick: onTagClickHandler }, i));
+                                                }, isDeletable: isDeletable, isDisabled: readOnly, isFocused: hiddenFocusedIndex === i, size: size, maxWidth: tooltipWidth, onDelete: onTagRemoveHandler, onClick: onTagClickHandler }, i));
                                         }) })), footer: ({ onClose }) => (_jsx(_Fragment, { children: _jsx(UiButton, { ref: (ref) => {
                                                 interactionState.current.close = ref;
                                             }, label: closeLabel, variant: "secondary", onClick: () => {
@@ -64,8 +66,11 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
                         }
                         return (_jsx(UiTag, { tag: tag, ref: (ref) => {
                                 interactionState.current.tags[tag.id] = ref;
-                            }, isDeletable: isDeletable, isDisabled: readOnly, deleteLabel: removeLabel, isFocused: showedFocusedIndex === i, onDelete: onTagRemoveHandler, onClick: onTagClickHandler, maxWidth: i === showedTags.length - 1 ? lastAvailableWidth : availableWidth }, getKey(tag, isDeletable, readOnly)));
-                    }), isAddable ? (_jsx("div", { className: e("add-button"), ref: addButtonRef, onClick: (e) => {
+                            }, isDeletable: isDeletable, isDisabled: readOnly, deleteLabel: removeLabel, isFocused: showedFocusedIndex === i, size: size, onDelete: onTagRemoveHandler, onClick: onTagClickHandler, maxWidth: i === showedTags.length - 1 ? lastAvailableWidth : availableWidth }, getKey(tag, isDeletable, readOnly)));
+                    }), hasCustomAddButton ? (_jsx("div", { className: e("add-button"), ref: addButtonRef, onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, children: renderAddButton?.() })) : isAddable ? (_jsx("div", { className: e("add-button"), ref: addButtonRef, onClick: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
                         }, children: _jsx(UiPopover, { id: popupId, onOpen: () => {
@@ -106,7 +111,7 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
                                         }, ref: (ref) => {
                                             interactionState.current.save = ref;
                                         } })
-                                ] })) }) })) : null, !isAddable && tags.length === 0 ? (_jsx("div", { className: e("empty-state"), children: noTagsLabel })) : null] })
+                                ] })) }) })) : null, !isAddable && !hasCustomAddButton && tags.length === 0 ? (_jsx("div", { className: e("empty-state"), children: noTagsLabel })) : null] })
         ] }));
 }
 function getKey(tag, isDeletable, readOnly) {

package/esm/@ui/UiTags/types.d.ts

@@ -1,4 +1,6 @@
+import { type ReactNode } from "react";
 import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
+import { type IconType } from "../@types/icon.js";
 /**
  * @internal
  */
@@ -18,10 +20,20 @@ export interface IUiTagsProps {
     canCreateTag?: boolean;
     canDeleteTags?: boolean;
     mode?: "single-line" | "multi-line";
+    /** Visual size of the rendered tags. Defaults to "small". */
+    size?: "small" | "large";
     onTagClick?: (tag: IUiTagDef) => void;
     onTagAdd?: (tag: IUiTagDef) => void;
     onTagRemove?: (tag: IUiTagDef) => void;
     accessibilityConfig?: IAccessibilityConfigBase;
+    /**
+     * Renders custom content in the add-button slot — the last item in the tags row,
+     * in-flow with the tags so it sits right after them (and the "+N" overflow chip)
+     * and is included in the responsive overflow measurement. When provided, it
+     * replaces the built-in create-tag combobox; use it to host a bespoke picker
+     * while keeping the tag display and overflow behaviour. Ignored when readOnly.
+     */
+    renderAddButton?: () => ReactNode;
 }
 /**
  * @internal
@@ -30,4 +42,5 @@ export interface IUiTagDef {
     id: string;
     label: string;
     isDeletable?: boolean;
+    iconBefore?: IconType;
 }

package/esm/AutoSize/AutoSize.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2007-2025 GoodData Corporation
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+// (C) 2007-2026 GoodData Corporation
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { throttle } from "lodash-es";
 import { elementRegion } from "../utils/domUtilities.js";
 /**
@@ -23,10 +23,31 @@ export function AutoSize({ children }) {
         });
     }, []);
     const throttledUpdateSize = useMemo(() => throttle(updateSize, 250, { leading: false }), [updateSize]);
+    // Measure synchronously before paint so the first committed frame already has a real width
+    // instead of 0 (which made children shrink-wrap). This handles the initial render.
+    useLayoutEffect(() => {
+        updateSize();
+    }, [updateSize]);
     useEffect(() => {
-        window.addEventListener("resize", throttledUpdateSize);
-        throttledUpdateSize();
+        const node = wrapperRef.current;
+        // Re-measure whenever the wrapper actually resizes. This catches the post-mount layout
+        // settle (e.g. a fullscreen overlay finishing its alignment a few frames later, where the
+        // synchronous measure above read a not-yet-final width - such as before a scrollbar
+        // disappears) as well as any later container or window resize - precisely, instead of
+        // guessing with a fixed timeout. Throttled to coalesce bursts during continuous resizing.
+        let observer;
+        if (node && typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(() => {
+                throttledUpdateSize();
+            });
+            observer.observe(node);
+        }
+        else {
+            // Fallback for environments without ResizeObserver.
+            window.addEventListener("resize", throttledUpdateSize);
+        }
         return () => {
+            observer?.disconnect();
             throttledUpdateSize.cancel();
             window.removeEventListener("resize", throttledUpdateSize);
         };

package/esm/WidgetNotice/WidgetNotice.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+/**
+ * @internal
+ */
+export type WidgetNoticeType = "info" | "success" | "warning" | "error";
+/**
+ * @internal
+ */
+export interface IWidgetNoticeProps {
+    type?: WidgetNoticeType;
+    message: ReactNode;
+    action?: ReactNode;
+    detail?: ReactNode;
+    detailAction?: ReactNode;
+    expandLabel?: ReactNode;
+    collapseLabel?: ReactNode;
+    defaultExpanded?: boolean;
+    showIcon?: boolean;
+    onClose?: () => void;
+    closeButtonLabel?: string;
+    dataTestId?: string;
+}
+/**
+ * @internal
+ */
+export declare function WidgetNotice({ type, message, action, detail, detailAction, expandLabel, collapseLabel, defaultExpanded, showIcon, onClose, closeButtonLabel, dataTestId }: IWidgetNoticeProps): import("react/jsx-runtime").JSX.Element;

package/esm/WidgetNotice/WidgetNotice.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId, useState } from "react";
+import { useIntl } from "react-intl";
+import { bem } from "../@ui/@utils/bem.js";
+import { UiIcon } from "../@ui/UiIcon/UiIcon.js";
+import { UiIconButton } from "../@ui/UiIconButton/UiIconButton.js";
+import { commonDialogMessages } from "../locales.js";
+const { b, e } = bem("gd-ui-kit-widget-notice");
+const ICON_BY_TYPE = {
+    info: "infoCircle",
+    success: "checkCircle",
+    warning: "warning",
+    error: "exclamationCircle",
+};
+const ICON_COLOR_BY_TYPE = {
+    info: "primary",
+    success: "success",
+    warning: "warning",
+    error: "error",
+};
+/**
+ * @internal
+ */
+export function WidgetNotice({ type = "info", message, action, detail, detailAction, expandLabel, collapseLabel, defaultExpanded = false, showIcon = true, onClose, closeButtonLabel, dataTestId, }) {
+    const intl = useIntl();
+    const detailId = useId();
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const hasDetail = Boolean(detail);
+    const effectiveCloseButtonLabel = closeButtonLabel ?? intl.formatMessage(commonDialogMessages.close);
+    return (_jsxs("div", { className: b({ type, expandable: hasDetail }), "data-testid": dataTestId, children: [
+            _jsxs("div", { className: e("header"), children: [
+                    _jsxs("div", { className: e("content"), children: [showIcon ? (_jsx("span", { className: e("icon"), "aria-hidden": "true", children: _jsx(UiIcon, { type: ICON_BY_TYPE[type], size: 16, color: ICON_COLOR_BY_TYPE[type] }) })) : null, _jsxs("div", { className: e("text"), children: [
+                                    _jsx("span", { className: e("message"), children: message }), action ? _jsx("span", { className: e("action"), children: action }) : null, hasDetail ? (_jsx("button", { type: "button", className: e("toggle"), "aria-expanded": isExpanded, "aria-controls": isExpanded ? detailId : undefined, onClick: () => setIsExpanded((wasExpanded) => !wasExpanded), children: isExpanded ? collapseLabel : expandLabel })) : null] })
+                        ] }), onClose ? (_jsx(UiIconButton, { icon: "cross", variant: "tertiary", size: "xsmall", label: effectiveCloseButtonLabel, onClick: onClose, dataTestId: "widget-notice-close" })) : null] }), hasDetail && isExpanded ? (_jsxs("div", { id: detailId, className: e("detail"), children: [
+                    _jsx("div", { className: e("detail-text"), children: detail }), detailAction ? _jsx("div", { className: e("detail-action"), children: detailAction }) : null] })) : null] }));
+}

package/esm/index.d.ts

@@ -95,6 +95,7 @@ export { ToastMessageList } from "./Messages/toasts/ToastsCenterMessage.js";
 export { ToastsCenter, ToastsCenterContextProvider, ScreenReaderToast, } from "./Messages/toasts/ToastsCenter.js";
 export { NonContextToastsInterop } from "./Messages/toasts/NonContextToastsInterop.js";
 export { ToastsCenterContext, useToastsCenterValue, type IToastsCenterContext, } from "./Messages/toasts/context.js";
+export { WidgetNotice, type IWidgetNoticeProps, type WidgetNoticeType } from "./WidgetNotice/WidgetNotice.js";
 export type { IDialogBaseProps, IDialogProps, IConfirmDialogBaseProps, IExportDialogProps, IExportDialogBaseProps, IDialogCloseButtonProps, IExportDialogData, PageOrientation, PageSize, IExportTabularPdfDialogData, IExportTabularPdfDialogProps, } from "./Dialog/typings.js";
 export { BackButton, type IBackButtonProps } from "./Dialog/BackButton.js";
 export { ConfirmDialog } from "./Dialog/ConfirmDialog.js";

package/esm/index.js

@@ -87,6 +87,7 @@ export { ToastMessageList } from "./Messages/toasts/ToastsCenterMessage.js";
 export { ToastsCenter, ToastsCenterContextProvider, ScreenReaderToast, } from "./Messages/toasts/ToastsCenter.js";
 export { NonContextToastsInterop } from "./Messages/toasts/NonContextToastsInterop.js";
 export { ToastsCenterContext, useToastsCenterValue, } from "./Messages/toasts/context.js";
+export { WidgetNotice } from "./WidgetNotice/WidgetNotice.js";
 export { BackButton } from "./Dialog/BackButton.js";
 export { ConfirmDialog } from "./Dialog/ConfirmDialog.js";
 export { ConfirmDialogBase } from "./Dialog/ConfirmDialogBase.js";

package/esm/sdk-ui-kit.d.ts

@@ -6767,6 +6767,12 @@ export declare interface IUiControlButtonProps {
     icon?: ReactNode;
     titleExtension?: ReactNode;
     subtitleExtension?: ReactNode;
+    /**
+     * `"stacked"` (default): title above subtitle, chevron beside subtitle.
+     * `"row"`: single full-width line, flat background, chevron pinned right.
+     */
+    layout?: "stacked" | "row";
+    hideChevron?: boolean;
     isOpen?: boolean;
     isDraggable?: boolean;
     isDragging?: boolean;
@@ -8347,6 +8353,7 @@ export declare interface IUiTagDef {
     id: string;
     label: string;
     isDeletable?: boolean;
+    iconBefore?: IconType;
 }
 
 /**
@@ -8368,10 +8375,20 @@ export declare interface IUiTagsProps {
     canCreateTag?: boolean;
     canDeleteTags?: boolean;
     mode?: "single-line" | "multi-line";
+    /** Visual size of the rendered tags. Defaults to "small". */
+    size?: "small" | "large";
     onTagClick?: (tag: IUiTagDef) => void;
     onTagAdd?: (tag: IUiTagDef) => void;
     onTagRemove?: (tag: IUiTagDef) => void;
     accessibilityConfig?: IAccessibilityConfigBase;
+    /**
+     * Renders custom content in the add-button slot — the last item in the tags row,
+     * in-flow with the tags so it sits right after them (and the "+N" overflow chip)
+     * and is included in the responsive overflow measurement. When provided, it
+     * replaces the built-in create-tag combobox; use it to host a bespoke picker
+     * while keeping the tag display and overflow behaviour. Ignored when readOnly.
+     */
+    renderAddButton?: () => ReactNode;
 }
 
 /**
@@ -8864,6 +8881,24 @@ export declare interface IWebComponentsOptions {
     unit?: UnitsType;
 }
 
+/**
+ * @internal
+ */
+export declare interface IWidgetNoticeProps {
+    type?: WidgetNoticeType;
+    message: ReactNode;
+    action?: ReactNode;
+    detail?: ReactNode;
+    detailAction?: ReactNode;
+    expandLabel?: ReactNode;
+    collapseLabel?: ReactNode;
+    defaultExpanded?: boolean;
+    showIcon?: boolean;
+    onClose?: () => void;
+    closeButtonLabel?: string;
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -10156,7 +10191,7 @@ export declare function UiConfirmDialog({ title, description, confirmLabel, conf
  *
  * @internal
  */
-export declare function UiControlButton({ title, titleClassName, subtitle, subtitleClassName, icon, titleExtension, subtitleExtension, isOpen, isDraggable, isDragging, isError, disabled, disabledTooltip, onClick, className, "data-testid": dataTestId, buttonRef, buttonId, dropdownId, ariaLabel }: IUiControlButtonProps): JSX.Element;
+export declare function UiControlButton({ title, titleClassName, subtitle, subtitleClassName, icon, titleExtension, subtitleExtension, layout, hideChevron, isOpen, isDraggable, isDragging, isError, disabled, disabledTooltip, onClick, className, "data-testid": dataTestId, buttonRef, buttonId, dropdownId, ariaLabel }: IUiControlButtonProps): JSX.Element;
 
 /**
  * @internal
@@ -10592,7 +10627,7 @@ export declare type UiTagProps = {
 /**
  * @internal
  */
-export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLabel, closeLabel, saveLabel, noTagsLabel, moreLabel, removeLabel, creatableLabel, mode, canDeleteTags, canCreateTag, readOnly, onTagClick, onTagAdd, onTagRemove, accessibilityConfig }: IUiTagsProps): JSX.Element;
+export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLabel, closeLabel, saveLabel, noTagsLabel, moreLabel, removeLabel, creatableLabel, mode, size, canDeleteTags, canCreateTag, readOnly, onTagClick, onTagAdd, onTagRemove, accessibilityConfig, renderAddButton }: IUiTagsProps): JSX.Element;
 
 /**
  * Single-line text input with optional label and leading / trailing icons.
@@ -11239,6 +11274,16 @@ export declare type VariantTooltip = "tooltip";
  */
 export declare type VerticalPosition = "top" | "center" | "bottom";
 
+/**
+ * @internal
+ */
+export declare function WidgetNotice({ type, message, action, detail, detailAction, expandLabel, collapseLabel, defaultExpanded, showIcon, onClose, closeButtonLabel, dataTestId }: IWidgetNoticeProps): JSX.Element;
+
+/**
+ * @internal
+ */
+export declare type WidgetNoticeType = "info" | "success" | "warning" | "error";
+
 /**
  * @internal
  */

package/esm/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.55.2"
+      "packageVersion": "7.58.7"
     }
   ]
 }

package/esm/utils/drag.d.ts

@@ -1,3 +1,4 @@
+import { type DebouncedFunc } from "lodash-es";
 /**
  * Custom event name for goodstrap drag events.
  * Used by Overlay to handle closeOnMouseDrag and other drag-related behaviors.
@@ -9,4 +10,4 @@ export declare const GOODSTRAP_DRAG_EVENT = "goodstrap.drag";
  * This event is throttled by default
  * @internal
  */
-export declare const handleOnGoodstrapDragEvent: import("lodash-es").DebouncedFunc<() => void>;
+export declare const handleOnGoodstrapDragEvent: DebouncedFunc<() => void>;

package/esm/utils/drag.js

@@ -1,4 +1,4 @@
-// (C) 2022-2025 GoodData Corporation
+// (C) 2022-2026 GoodData Corporation
 import { throttle } from "lodash-es";
 /**
  * Custom event name for goodstrap drag events.

package/esm/utils/scroll.d.ts

@@ -1,3 +1,4 @@
+import { type DebouncedFunc } from "lodash-es";
 /**
  * Custom event name for goodstrap scroll events.
  * Used by Overlay to handle closeOnParentScroll and other scroll-related behaviors.
@@ -9,4 +10,4 @@ export declare const GOODSTRAP_SCROLLED_EVENT = "goodstrap.scrolled";
  * This event is throttled by default
  * @internal
  */
-export declare const handleOnScrollEvent: import("lodash-es").DebouncedFunc<(node: HTMLElement) => void>;
+export declare const handleOnScrollEvent: DebouncedFunc<(node: HTMLElement) => void>;

package/esm/utils/scroll.js

@@ -1,4 +1,4 @@
-// (C) 2022-2025 GoodData Corporation
+// (C) 2022-2026 GoodData Corporation
 import { throttle } from "lodash-es";
 /**
  * Custom event name for goodstrap scroll events.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.41.0-alpha.2",
+  "version": "11.41.0-alpha.4",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -74,12 +74,12 @@
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
     "unified": "^11.0.5",
-    "uuid": "11.1.0",
-    "@gooddata/sdk-backend-spi": "11.41.0-alpha.2",
-    "@gooddata/sdk-model": "11.41.0-alpha.2",
-    "@gooddata/sdk-ui": "11.41.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "11.41.0-alpha.2",
-    "@gooddata/util": "11.41.0-alpha.2"
+    "uuid": "11.1.1",
+    "@gooddata/sdk-backend-spi": "11.41.0-alpha.4",
+    "@gooddata/sdk-ui": "11.41.0-alpha.4",
+    "@gooddata/sdk-model": "11.41.0-alpha.4",
+    "@gooddata/util": "11.41.0-alpha.4",
+    "@gooddata/sdk-ui-theme-provider": "11.41.0-alpha.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -128,11 +128,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.41.0-alpha.2",
-    "@gooddata/oxlint-config": "11.41.0-alpha.2",
-    "@gooddata/reference-workspace": "11.41.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "11.41.0-alpha.2",
-    "@gooddata/stylelint-config": "11.41.0-alpha.2"
+    "@gooddata/eslint-config": "11.41.0-alpha.4",
+    "@gooddata/oxlint-config": "11.41.0-alpha.4",
+    "@gooddata/reference-workspace": "11.41.0-alpha.4",
+    "@gooddata/sdk-backend-mockingbird": "11.41.0-alpha.4",
+    "@gooddata/stylelint-config": "11.41.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiControlButton/UiControlButton.scss

@@ -115,6 +115,73 @@ $drag-handle-icon: "data:image/svg+xml,%3Csvg width='7' height='26' viewBox='0 0
         }
     }
 
+    // Single full-width line, flat (no border/gradient), chevron pinned right.
+    // Declared after the state modifiers so its flat `::after` wins.
+    &--layout-row {
+        width: 100%;
+        max-width: none;
+        box-sizing: border-box;
+        font-size: 14px;
+        border-radius: 0;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        // Room for the pinned chevron
+        padding-right: 28px;
+
+        // Flat: no chip border or open-state gradient.
+        &::after {
+            display: none;
+        }
+
+        #{$root}__icon {
+            display: flex;
+            height: 100%;
+            align-items: center;
+        }
+
+        // One left-aligned line; chevron is taken out of flow.
+        #{$root}__content {
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        // min-width: 0 lets a long label ellipsise instead of overflowing.
+        #{$root}__title-row {
+            flex: 0 1 auto;
+            min-width: 0;
+            max-width: 100%;
+            margin-right: 5px;
+        }
+
+        #{$root}__title--withColon::after {
+            content: ":";
+        }
+
+        #{$root}__subtitle-row {
+            flex: 1 1 auto;
+            min-width: 0;
+            max-width: none;
+
+            // Chevron
+            &::after {
+                position: absolute;
+                top: 50%;
+                // `content` is inset by padding-right lands it 12px from the button edge.
+                right: -16px;
+                margin-left: 0;
+                font-size: 18px;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    &--hideChevron {
+        #{$root}__subtitle-row::after {
+            display: none;
+        }
+    }
+
     &__icon {
         position: relative;
         z-index: 1;

package/src/@ui/UiTags/UiTags.scss

@@ -4,6 +4,7 @@
 
 $tags_line_height: 20px;
 $tags_tooltip_max_width: 280px;
+$tags_tooltip_viewport_margin: 160px;
 
 @mixin tag($margin-right: 5px) {
     .gd-ui-kit-tags__tag {
@@ -135,6 +136,10 @@ $tags_tooltip_max_width: 280px;
     display: flex;
     max-width: $tags_tooltip_max_width;
     width: $tags_tooltip_max_width;
+    max-height: calc(100vh - #{$tags_tooltip_viewport_margin});
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 5px;