npm - @gooddata/sdk-ui-kit - Versions diffs - 11.57.0-alpha.3 → 11.57.0-alpha.4 - Mend

@gooddata/sdk-ui-kit 11.57.0-alpha.3 → 11.57.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/esm/@ui/UiToolbar/useToolbarRovingFocus.js ADDED Viewed

@@ -0,0 +1,172 @@
+// (C) 2026 GoodData Corporation
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, } from "react";
+import { useAutoupdateRef } from "@gooddata/sdk-ui";
+import { makeHorizontalKeyboardNavigation } from "../@utils/keyboardNavigation.js";
+import { TOOLBAR_COMPOSITE_ATTR, TOOLBAR_SKIP_ATTR, applyRovingTabIndex, getStopFocusTarget, getToolbarStops, hasSystemModifier, isCaretAtEdge, isEditingTarget, isEligibleFocusable, isSkipped, resolveStop, } from "./rovingFocusUtils.js";
+/**
+ * Roving tabindex over the focusable descendants of a container, driven by the DOM.
+ *
+ * Children must not render a tabIndex that changes between renders. React only rewrites the
+ * attribute when the prop changes, so a constant value never overrides what this hook writes.
+ */
+export function useToolbarRovingFocus({ containerRef, isDisabledFocusable, loop, }) {
+    const rememberedRef = useRef(null);
+    const hadFocusRef = useRef(false);
+    const optionsRef = useAutoupdateRef({ isDisabledFocusable, loop });
+    const sync = useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return null;
+        }
+        return applyRovingTabIndex(container, rememberedRef.current, optionsRef.current);
+    }, [containerRef, optionsRef]);
+    // Re-applies the tabindexes and, when the focused item stopped being an eligible stop (removed,
+    // hidden, disabled, or excluded by an option change), hands focus to the fallback. Browsers move
+    // focus to <body> silently on removal; a hidden element may keep it.
+    const syncAndRepairFocus = useCallback(() => {
+        const container = containerRef.current;
+        const remembered = rememberedRef.current;
+        const target = sync();
+        if (!container ||
+            !hadFocusRef.current ||
+            remembered === null ||
+            target === null ||
+            target === remembered) {
+            return;
+        }
+        // A subtree that opted out keeps its focus; it only leaves the roving management.
+        if (isSkipped(container, remembered)) {
+            return;
+        }
+        const rememberedIsGone = !isEligibleFocusable(container, remembered, optionsRef.current);
+        const active = document.activeElement;
+        const focusWasLost = active === null || active === document.body || active === remembered;
+        if (rememberedIsGone && focusWasLost) {
+            target.focus();
+        }
+    }, [containerRef, optionsRef, sync]);
+    useLayoutEffect(() => {
+        syncAndRepairFocus();
+    });
+    // Media queries can hide an item without any DOM mutation; a viewport change is the cue.
+    useEffect(() => {
+        window.addEventListener("resize", syncAndRepairFocus);
+        return () => window.removeEventListener("resize", syncAndRepairFocus);
+    }, [syncAndRepairFocus]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof MutationObserver === "undefined") {
+            return undefined;
+        }
+        const observer = new MutationObserver(syncAndRepairFocus);
+        // "tabindex" is excluded so the observer does not react to its own writes. "class" and
+        // "style" are included because CSS can hide an item.
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                "disabled",
+                "aria-disabled",
+                "aria-checked",
+                "aria-hidden",
+                "hidden",
+                "class",
+                "style",
+                // Attributes that make an element focusable or not.
+                "href",
+                "contenteditable",
+                "type",
+                "role",
+                TOOLBAR_COMPOSITE_ATTR,
+                TOOLBAR_SKIP_ATTR,
+            ],
+        });
+        return () => observer.disconnect();
+    }, [containerRef, syncAndRepairFocus]);
+    const onFocusCapture = useCallback((event) => {
+        const container = containerRef.current;
+        // Portaled popups bubble React focus events through the toolbar tree.
+        if (!container || !container.contains(event.target)) {
+            return;
+        }
+        rememberedRef.current = event.target;
+        hadFocusRef.current = true;
+        sync();
+    }, [containerRef, sync]);
+    const onBlurCapture = useCallback((event) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const next = event.relatedTarget;
+        const leftToOutside = next instanceof Node && !container.contains(next);
+        // A null relatedTarget with the item still mounted is a click on non-focusable content.
+        const leftToNothing = next === null && event.target.isConnected;
+        if (leftToOutside || leftToNothing) {
+            hadFocusRef.current = false;
+        }
+    }, [containerRef]);
+    const moveTo = useCallback((index) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const stops = getToolbarStops(container, optionsRef.current);
+        const stop = stops.at(index);
+        if (!stop) {
+            return;
+        }
+        getStopFocusTarget(stop, null, optionsRef.current)?.focus();
+    }, [containerRef, optionsRef]);
+    const moveBy = useCallback((delta) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const stops = getToolbarStops(container, optionsRef.current);
+        const current = resolveStop(container, document.activeElement);
+        const index = current ? stops.indexOf(current) : -1;
+        if (index === -1) {
+            moveTo(0);
+            return;
+        }
+        const last = stops.length - 1;
+        const next = optionsRef.current.loop
+            ? (index + delta + stops.length) % stops.length
+            : Math.min(last, Math.max(0, index + delta));
+        moveTo(next);
+    }, [containerRef, moveTo, optionsRef]);
+    const navigate = useMemo(() => makeHorizontalKeyboardNavigation({
+        onFocusPrevious: () => moveBy(-1),
+        onFocusNext: () => moveBy(1),
+        onFocusFirst: () => moveTo(0),
+        onFocusLast: () => moveTo(-1),
+    }), [moveBy, moveTo]);
+    const onKeyDown = useCallback((event) => {
+        const container = containerRef.current;
+        const target = event.target;
+        if (!container || !(target instanceof HTMLElement) || !container.contains(target)) {
+            return;
+        }
+        // A skipped subtree owns its own keyboard handling. While an IME is composing, the
+        // arrows walk its candidate list, so the toolbar keeps its hands off every key.
+        if (event.defaultPrevented ||
+            event.nativeEvent.isComposing ||
+            hasSystemModifier(event) ||
+            isSkipped(container, target)) {
+            return;
+        }
+        // Inside a text input the keys move the caret; a horizontal arrow at the edge of the
+        // text is the way out to the neighbouring item.
+        if (isEditingTarget(target)) {
+            const isEdgeExit = (event.code === "ArrowLeft" || event.code === "ArrowRight") &&
+                isCaretAtEdge(target, event.code);
+            if (!isEdgeExit) {
+                return;
+            }
+        }
+        navigate(event);
+    }, [containerRef, navigate]);
+    return { onKeyDown, onFocusCapture, onBlurCapture };
+}

package/esm/@ui/UiToolbarButton/UiToolbarButton.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { type IUiToolbarItemBaseProps } from "../UiToolbar/toolbarItemProps.js";
+/**
+ * @internal
+ */
+export interface IUiToolbarButtonProps extends IUiToolbarItemBaseProps {
+    label: string;
+    /**
+     * Shown on hover and focus. Use it when the label is not self-explanatory.
+     */
+    tooltip?: ReactNode;
+}
+/**
+ * Label-only toolbar item.
+ *
+ * @internal
+ */
+export declare const UiToolbarButton: import("react").ForwardRefExoticComponent<IUiToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=UiToolbarButton.d.ts.map

package/esm/@ui/UiToolbarButton/UiToolbarButton.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UiToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarButton/UiToolbarButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAKhF;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB;IAClE,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB;AAID;;;;GAIG;AACH,eAAO,MAAM,eAAe,qHAqD1B,CAAC"}

package/esm/@ui/UiToolbarButton/UiToolbarButton.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { forwardRef } from "react";
+import { simplifyText } from "@gooddata/util";
+import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
+import { bem } from "../@utils/bem.js";
+import { UiToolbarItemTooltip } from "../UiToolbar/UiToolbarItemTooltip.js";
+import { useToolbarItemRole } from "./useToolbarItemRole.js";
+const { b, e } = bem("gd-ui-kit-toolbar-button");
+/**
+ * Label-only toolbar item.
+ *
+ * @internal
+ */
+export const UiToolbarButton = forwardRef(function UiToolbarButton({ label, value, isSelected, isDestructive = false, isDisabled, isActive = false, tooltip, onClick, onKeyDown, id, dataId, dataTestId, accessibilityConfig, ariaAttributes, }, ref) {
+    const { isChecked, buttonProps } = useToolbarItemRole({
+        value,
+        isSelected,
+        isDisabled,
+        onClick,
+        onKeyDown,
+    });
+    const testId = dataTestId ?? simplifyText(label);
+    const button = (_jsx("button", { ref: ref, id: id, type: "button", className: b({ isSelected: isChecked, isDestructive, isActive }), ...accessibilityConfigToAttributes(accessibilityConfig), "data-id": dataId, "data-testid": testId, ...buttonProps, ...ariaAttributes, children: _jsx("span", { className: e("label"), children: label }) }));
+    if (tooltip === undefined) {
+        return button;
+    }
+    return (_jsx(UiToolbarItemTooltip, { content: tooltip, isDisabled: isActive, children: button }));
+});

package/esm/@ui/UiToolbarButton/useToolbarItemRole.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { type KeyboardEvent, type MouseEvent } from "react";
+export interface IToolbarItemRoleInput {
+    value?: string;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+/**
+ * True for the keys an enclosing dropdown wrapper reacts to: the activation keys plus the vertical
+ * arrows that open and close its popup.
+ */
+export declare function isPopupKey(event: KeyboardEvent<HTMLElement>): boolean;
+export interface IToolbarItemRoleButtonProps {
+    role?: "radio";
+    "aria-checked"?: boolean;
+    "aria-pressed"?: boolean;
+    "aria-disabled"?: true;
+    "data-value"?: string;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+export interface IToolbarItemRoleResult {
+    isChecked: boolean;
+    isDisabled: boolean;
+    buttonProps: IToolbarItemRoleButtonProps;
+}
+/**
+ * Button attributes of a toolbar item. Inside a segmented control the item is a radio; elsewhere it
+ * is a toggle button when `isSelected` is given.
+ *
+ * Disabled items use `aria-disabled` instead of `disabled` so they stay reachable with arrow keys.
+ * No tabIndex is rendered: a toolbar or a group writes the roving tabindex into the DOM, and an item
+ * rendered through a portal keeps the browser default. React only rewrites the attribute when the
+ * prop changes, so leaving it out is what keeps the DOM writes in place.
+ */
+export declare function useToolbarItemRole({ value, isSelected, isDisabled: isDisabledProp, onClick, onKeyDown, }: IToolbarItemRoleInput): IToolbarItemRoleResult;
+//# sourceMappingURL=useToolbarItemRole.d.ts.map

package/esm/@ui/UiToolbarButton/useToolbarItemRole.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useToolbarItemRole.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarButton/useToolbarItemRole.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAA2B,MAAM,OAAO,CAAC;AAKrF,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,OAAO,CAErE;AAED,MAAM,WAAW,2BAA2B;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,sBAAsB;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,2BAA2B,CAAC;CAC5C;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,SAAS,GACZ,EAAE,qBAAqB,GAAG,sBAAsB,CAwDhD"}

package/esm/@ui/UiToolbarButton/useToolbarItemRole.js ADDED Viewed

@@ -0,0 +1,67 @@
+// (C) 2026 GoodData Corporation
+import { useCallback, useContext } from "react";
+import { isActionKey } from "../../utils/events.js";
+import { UiToolbarSegmentedControlContext } from "../UiToolbarSegmentedControl/context.js";
+/**
+ * True for the keys an enclosing dropdown wrapper reacts to: the activation keys plus the vertical
+ * arrows that open and close its popup.
+ */
+export function isPopupKey(event) {
+    return isActionKey(event) || event.code === "ArrowDown" || event.code === "ArrowUp";
+}
+/**
+ * Button attributes of a toolbar item. Inside a segmented control the item is a radio; elsewhere it
+ * is a toggle button when `isSelected` is given.
+ *
+ * Disabled items use `aria-disabled` instead of `disabled` so they stay reachable with arrow keys.
+ * No tabIndex is rendered: a toolbar or a group writes the roving tabindex into the DOM, and an item
+ * rendered through a portal keeps the browser default. React only rewrites the attribute when the
+ * prop changes, so leaving it out is what keeps the DOM writes in place.
+ */
+export function useToolbarItemRole({ value, isSelected, isDisabled: isDisabledProp, onClick, onKeyDown, }) {
+    const group = useContext(UiToolbarSegmentedControlContext);
+    const isRadio = group !== null;
+    const isChecked = isRadio ? value !== undefined && group.value === value : !!isSelected;
+    const isDisabled = !!isDisabledProp || (group?.isDisabled ?? false);
+    const handleClick = useCallback((event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        // Both run by design: the group owns selection, the item keeps its own click handler for
+        // whatever else the consumer hangs off the same press.
+        if (isRadio && value !== undefined) {
+            group.onChange(value, event);
+        }
+        onClick?.(event);
+    }, [group, isDisabled, isRadio, onClick, value]);
+    // A disabled item uses aria-disabled, so it still receives key events. The keys an enclosing
+    // dropdown wrapper reacts to are swallowed here so it cannot open its popup; horizontal arrows
+    // still bubble to the toolbar. A radio keeps the vertical arrows: they navigate its group.
+    const handleKeyDown = useCallback((event) => {
+        if (isDisabled) {
+            if (isRadio ? isActionKey(event) : isPopupKey(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            return;
+        }
+        onKeyDown?.(event);
+    }, [isDisabled, isRadio, onKeyDown]);
+    // Only defined keys are returned so a spread never clears attributes set before it.
+    const buttonProps = { onClick: handleClick, onKeyDown: handleKeyDown };
+    if (isRadio) {
+        buttonProps.role = "radio";
+        buttonProps["aria-checked"] = isChecked;
+    }
+    else if (isSelected !== undefined) {
+        buttonProps["aria-pressed"] = isSelected;
+    }
+    if (isDisabled) {
+        buttonProps["aria-disabled"] = true;
+    }
+    if (value !== undefined) {
+        buttonProps["data-value"] = value;
+    }
+    return { isChecked, isDisabled, buttonProps };
+}

package/esm/@ui/UiToolbarColorSwatch/UiToolbarColorSwatch.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+/**
+ * @internal
+ */
+export interface IUiToolbarColorSwatchProps {
+    /**
+     * "fill" paints the whole chip. "text" shows a glyph with the colour as a bar beneath it.
+     * @defaultValue "fill"
+     */
+    variant?: "fill" | "text";
+    /**
+     * Any CSS colour.
+     */
+    color?: string;
+    /**
+     * Outline for colours too pale to read against the toolbar.
+     * @defaultValue false
+     */
+    hasBorder?: boolean;
+    /**
+     * No colour is set. Applies to the "fill" variant only.
+     * @defaultValue false
+     */
+    isTransparent?: boolean;
+    /**
+     * Glyph of the "text" variant.
+     * @defaultValue "A"
+     */
+    glyph?: ReactNode;
+}
+/**
+ * 20x20 preview of the colour a toolbar control is set to. Decorative: the owning control carries
+ * the accessible name.
+ *
+ * @internal
+ */
+export declare function UiToolbarColorSwatch({ variant, color, hasBorder, isTransparent, glyph, }: IUiToolbarColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiToolbarColorSwatch.d.ts.map

package/esm/@ui/UiToolbarColorSwatch/UiToolbarColorSwatch.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UiToolbarColorSwatch.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarColorSwatch/UiToolbarColorSwatch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAID;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,OAAgB,EAChB,KAAK,EACL,SAAiB,EACjB,aAAqB,EACrB,KAAW,GACd,EAAE,0BAA0B,2CAoB5B"}

package/esm/@ui/UiToolbarColorSwatch/UiToolbarColorSwatch.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bem } from "../@utils/bem.js";
+const { b, e } = bem("gd-ui-kit-toolbar-color-swatch");
+/**
+ * 20x20 preview of the colour a toolbar control is set to. Decorative: the owning control carries
+ * the accessible name.
+ *
+ * @internal
+ */
+export function UiToolbarColorSwatch({ variant = "fill", color, hasBorder = false, isTransparent = false, glyph = "A", }) {
+    const isTransparentFill = variant === "fill" && isTransparent;
+    return (_jsx("span", { className: b({ variant, hasBorder, isTransparent: isTransparentFill }), "aria-hidden": true, children: variant === "fill" ? (_jsx("span", { className: e("fill"), style: { backgroundColor: isTransparentFill ? undefined : color }, children: isTransparentFill ? _jsx("span", { className: e("transparent") }) : null })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: e("glyph"), children: glyph }), _jsx("span", { className: e("bar"), style: { backgroundColor: color } })] })) }));
+}

package/esm/@ui/UiToolbarDivider/UiToolbarDivider.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Vertical rule that separates groups inside a {@link UiToolbar}.
+ *
+ * @internal
+ */
+export declare function UiToolbarDivider(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiToolbarDivider.d.ts.map

package/esm/@ui/UiToolbarDivider/UiToolbarDivider.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"UiToolbarDivider.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarDivider/UiToolbarDivider.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,wBAAgB,gBAAgB,4CAE/B"}

package/esm/@ui/UiToolbarDivider/UiToolbarDivider.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { bem } from "../@utils/bem.js";
+const { b } = bem("gd-ui-kit-toolbar-divider");
+/**
+ * Vertical rule that separates groups inside a {@link UiToolbar}.
+ *
+ * @internal
+ */
+export function UiToolbarDivider() {
+    return _jsx("div", { className: b(), role: "separator", "aria-orientation": "vertical" });
+}

package/esm/@ui/UiToolbarIconButton/UiToolbarIconButton.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import { type IconType } from "../@types/icon.js";
+import { type SizeMedium, type SizeSmall } from "../@types/size.js";
+import { type IUiToolbarItemBaseProps } from "../UiToolbar/toolbarItemProps.js";
+/**
+ * @internal
+ */
+export interface IUiToolbarIconButtonProps extends IUiToolbarItemBaseProps {
+    /**
+     * Icon name, or a custom node such as {@link UiToolbarColorSwatch}.
+     */
+    icon: IconType | ReactNode;
+    /**
+     * Accessible name. It is also the tooltip text.
+     */
+    label: string;
+    /**
+     * "medium" is 28x28 with a 20px icon. "small" is 14x14 with a 14px icon and is meant for the
+     * side controls of {@link UiToolbarStepper}.
+     * @defaultValue "medium"
+     */
+    size?: SizeSmall | SizeMedium;
+    /**
+     * @defaultValue false
+     */
+    hideTooltip?: boolean;
+}
+/**
+ * Icon-only toolbar item. It shows its label as a tooltip on hover and on keyboard focus.
+ *
+ * @internal
+ */
+export declare const UiToolbarIconButton: import("react").ForwardRefExoticComponent<IUiToolbarIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=UiToolbarIconButton.d.ts.map

package/esm/@ui/UiToolbarIconButton/UiToolbarIconButton.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UiToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarIconButton/UiToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAShF;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,uBAAuB;IACtE;;OAEG;IACH,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAID;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yHA8D/B,CAAC"}

package/esm/@ui/UiToolbarIconButton/UiToolbarIconButton.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { forwardRef } from "react";
+import { simplifyText } from "@gooddata/util";
+import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
+import { bem } from "../@utils/bem.js";
+import { UiIcon } from "../UiIcon/UiIcon.js";
+import { UiToolbarItemTooltip } from "../UiToolbar/UiToolbarItemTooltip.js";
+import { useToolbarItemRole } from "../UiToolbarButton/useToolbarItemRole.js";
+const ICON_SIZE = {
+    small: 14,
+    medium: 20,
+};
+const { b } = bem("gd-ui-kit-toolbar-icon-button");
+/**
+ * Icon-only toolbar item. It shows its label as a tooltip on hover and on keyboard focus.
+ *
+ * @internal
+ */
+export const UiToolbarIconButton = forwardRef(function UiToolbarIconButton({ icon, label, size = "medium", value, isSelected, isDestructive = false, isDisabled, isActive = false, hideTooltip = false, onClick, onKeyDown, id, dataId, dataTestId, accessibilityConfig, ariaAttributes, }, ref) {
+    const { isChecked, buttonProps } = useToolbarItemRole({
+        value,
+        isSelected,
+        isDisabled,
+        onClick,
+        onKeyDown,
+    });
+    const testId = dataTestId ?? simplifyText(label);
+    const button = (_jsx("button", { ref: ref, id: id, type: "button", className: b({ size, isSelected: isChecked, isDestructive, isActive }), ...accessibilityConfigToAttributes(accessibilityConfig), "aria-label": accessibilityConfig?.ariaLabel ?? label, "data-id": dataId, "data-testid": testId, ...buttonProps, ...ariaAttributes, children: typeof icon === "string" ? (_jsx(UiIcon, { type: icon, size: ICON_SIZE[size], layout: "block" })) : (icon) }));
+    if (hideTooltip) {
+        return button;
+    }
+    return (_jsx(UiToolbarItemTooltip, { content: label, isDisabled: isActive, children: button }));
+});

package/esm/@ui/UiToolbarIconSelect/UiToolbarIconSelect.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import { type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
+import { type IconType } from "../@types/icon.js";
+import { type IUiDropdownButtonRenderProps } from "../UiDropdown/types.js";
+/**
+ * @internal
+ */
+export interface IUiToolbarIconSelectProps {
+    /**
+     * Icon name, or a custom node such as {@link UiToolbarColorSwatch}.
+     * @defaultValue a fill colour swatch
+     */
+    icon?: IconType | ReactNode;
+    /**
+     * Accessible name. It is also the tooltip text.
+     */
+    label: string;
+    /**
+     * Held while the popup is on screen. Flips the chevron and keeps the pressed look.
+     * @defaultValue false
+     */
+    isOpen?: boolean;
+    /**
+     * What the trigger opens. Ignored when `ariaAttributes` are given.
+     * @defaultValue "listbox"
+     */
+    popupType?: "listbox" | "menu" | "dialog";
+    /**
+     * Toggle state, exposed as `aria-pressed`.
+     */
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    /**
+     * @defaultValue false
+     */
+    hideTooltip?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    id?: string;
+    dataId?: string;
+    dataTestId?: string;
+    accessibilityConfig?: IAccessibilityConfigBase;
+    /**
+     * Attributes from the `renderButton` callback of {@link UiDropdown}.
+     */
+    ariaAttributes?: IUiDropdownButtonRenderProps["ariaAttributes"];
+}
+/**
+ * Icon-driven dropdown trigger of a toolbar: a colour picker, a style menu, a list.
+ *
+ * @internal
+ */
+export declare const UiToolbarIconSelect: import("react").ForwardRefExoticComponent<IUiToolbarIconSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=UiToolbarIconSelect.d.ts.map

package/esm/@ui/UiToolbarIconSelect/UiToolbarIconSelect.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UiToolbarIconSelect.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarIconSelect/UiToolbarIconSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAO3E;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C;;OAEG;IACH,cAAc,CAAC,EAAE,4BAA4B,CAAC,gBAAgB,CAAC,CAAC;CACnE;AAID;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yHAyD/B,CAAC"}

package/esm/@ui/UiToolbarIconSelect/UiToolbarIconSelect.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { forwardRef } from "react";
+import { simplifyText } from "@gooddata/util";
+import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
+import { bem } from "../@utils/bem.js";
+import { UiIcon } from "../UiIcon/UiIcon.js";
+import { UiToolbarChevron } from "../UiToolbar/UiToolbarChevron.js";
+import { UiToolbarItemTooltip } from "../UiToolbar/UiToolbarItemTooltip.js";
+import { useToolbarItemRole } from "../UiToolbarButton/useToolbarItemRole.js";
+import { UiToolbarColorSwatch } from "../UiToolbarColorSwatch/UiToolbarColorSwatch.js";
+const { b } = bem("gd-ui-kit-toolbar-icon-select");
+/**
+ * Icon-driven dropdown trigger of a toolbar: a colour picker, a style menu, a list.
+ *
+ * @internal
+ */
+export const UiToolbarIconSelect = forwardRef(function UiToolbarIconSelect({ icon = _jsx(UiToolbarColorSwatch, { variant: "fill" }), label, isOpen = false, popupType = "listbox", isSelected, isDisabled, hideTooltip = false, onClick, onKeyDown, id, dataId, dataTestId, accessibilityConfig, ariaAttributes, }, ref) {
+    const { isChecked, buttonProps } = useToolbarItemRole({ isSelected, isDisabled, onClick, onKeyDown });
+    const testId = dataTestId ?? simplifyText(label);
+    const button = (_jsxs("button", { ref: ref, id: id, type: "button", className: b({ isSelected: isChecked, isActive: isOpen }), ...accessibilityConfigToAttributes(accessibilityConfig), "aria-label": accessibilityConfig?.ariaLabel ?? label, "aria-haspopup": accessibilityConfig?.ariaHaspopup ?? popupType, "aria-expanded": accessibilityConfig?.ariaExpanded ?? isOpen, "data-id": dataId, "data-testid": testId, ...buttonProps, ...ariaAttributes, children: [typeof icon === "string" ? (_jsx(UiIcon, { type: icon, size: 20, layout: "block" })) : (icon), _jsx(UiToolbarChevron, { isOpen: isOpen })] }));
+    if (hideTooltip) {
+        return button;
+    }
+    return (_jsx(UiToolbarItemTooltip, { content: label, isDisabled: isOpen, children: button }));
+});

package/esm/@ui/UiToolbarMoreButton/UiToolbarMoreButton.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
+import { type IconType } from "../@types/icon.js";
+import { type IUiDropdownButtonRenderProps } from "../UiDropdown/types.js";
+/**
+ * @internal
+ */
+export interface IUiToolbarMoreButtonProps {
+    /**
+     * Accessible name, for example "More actions". It is also the tooltip text.
+     */
+    label: string;
+    /**
+     * @defaultValue "ellipsis"
+     */
+    icon?: IconType | ReactNode;
+    /**
+     * Held while the menu is on screen.
+     * @defaultValue false
+     */
+    isOpen?: boolean;
+    isDisabled?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    id?: string;
+    dataId?: string;
+    dataTestId?: string;
+    accessibilityConfig?: IAccessibilityConfigBase;
+    /**
+     * Attributes from the `renderButton` callback of {@link UiDropdown}. Without them the trigger
+     * announces a menu popup.
+     */
+    ariaAttributes?: IUiDropdownButtonRenderProps["ariaAttributes"];
+}
+/**
+ * Overflow trigger of a toolbar. Build the menu it opens from {@link UiMenu} in a {@link UiDropdown}.
+ *
+ * @internal
+ */
+export declare const UiToolbarMoreButton: import("react").ForwardRefExoticComponent<IUiToolbarMoreButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=UiToolbarMoreButton.d.ts.map

package/esm/@ui/UiToolbarMoreButton/UiToolbarMoreButton.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UiToolbarMoreButton.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiToolbarMoreButton/UiToolbarMoreButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAG3E;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACtC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C;;;OAGG;IACH,cAAc,CAAC,EAAE,4BAA4B,CAAC,gBAAgB,CAAC,CAAC;CACnE;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yHAc/B,CAAC"}

package/esm/@ui/UiToolbarMoreButton/UiToolbarMoreButton.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { forwardRef } from "react";
+import { UiToolbarIconButton } from "../UiToolbarIconButton/UiToolbarIconButton.js";
+/**
+ * Overflow trigger of a toolbar. Build the menu it opens from {@link UiMenu} in a {@link UiDropdown}.
+ *
+ * @internal
+ */
+export const UiToolbarMoreButton = forwardRef(function UiToolbarMoreButton({ icon = "ellipsis", isOpen = false, ariaAttributes, ...props }, ref) {
+    return (_jsx(UiToolbarIconButton, { ref: ref, icon: icon, isActive: isOpen, ariaAttributes: ariaAttributes ?? { role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen }, ...props }));
+});