@gooddata/sdk-ui-kit 11.30.0-alpha.3 → 11.30.0-alpha.5

package/esm/Dialog/CsvDelimiterPicker.js

@@ -1,52 +1,67 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2026 GoodData Corporation
-import { useIntl } from "react-intl";
+import { useEffect, useState } from "react";
+import cx from "classnames";
+import { defineMessages, useIntl } from "react-intl";
 import { CSV_DELIMITER_PRESETS, } from "@gooddata/sdk-model";
+import { ValidationContextStore, createInvalidDatapoint, createInvalidNode, useValidationContextValue, } from "@gooddata/sdk-ui";
+import { UiDropdown } from "../@ui/UiDropdown/UiDropdown.js";
 import { UiMenu } from "../@ui/UiMenu/UiMenu.js";
-import { Dropdown } from "../Dropdown/Dropdown.js";
 import { DropdownButton } from "../Dropdown/DropdownButton.js";
 import { Input } from "../Form/Input.js";
 import { useIdPrefixed } from "../utils/useId.js";
 const DEFAULT_MENU_MIN_WIDTH = 260;
+const messages = defineMessages({
+    optionComma: { id: "csvDelimiterPicker.option.comma" },
+    optionSemicolon: { id: "csvDelimiterPicker.option.semicolon" },
+    optionPipe: { id: "csvDelimiterPicker.option.pipe" },
+    optionTab: { id: "csvDelimiterPicker.option.tab" },
+    optionCustom: { id: "csvDelimiterPicker.option.custom" },
+    customInput: { id: "csvDelimiterPicker.customInput" },
+    menuLabel: { id: "csvDelimiterPicker.menuLabel" },
+    errorPrefix: { id: "csvDelimiterPicker.validation.errorPrefix" },
+    validationSingleCharacter: { id: "csvDelimiterPicker.validation.singleCharacter" },
+    validationUnsupported: { id: "csvDelimiterPicker.validation.unsupported" },
+});
 const getPresetLabels = (intl) => ({
-    comma: intl.formatMessage({
-        id: "csvDelimiterPicker.option.comma",
-        defaultMessage: "Comma",
-    }),
-    semicolon: intl.formatMessage({
-        id: "csvDelimiterPicker.option.semicolon",
-        defaultMessage: "Semicolon",
-    }),
-    pipe: intl.formatMessage({
-        id: "csvDelimiterPicker.option.pipe",
-        defaultMessage: "Pipe",
-    }),
-    tab: intl.formatMessage({
-        id: "csvDelimiterPicker.option.tab",
-        defaultMessage: "Tab",
-    }),
-    custom: intl.formatMessage({
-        id: "csvDelimiterPicker.option.custom",
-        defaultMessage: "Custom",
-    }),
+    comma: intl.formatMessage(messages.optionComma),
+    semicolon: intl.formatMessage(messages.optionSemicolon),
+    pipe: intl.formatMessage(messages.optionPipe),
+    tab: intl.formatMessage(messages.optionTab),
+    custom: intl.formatMessage(messages.optionCustom),
 });
-const getMenuItems = (presetLabels) => [
-    ...CSV_DELIMITER_PRESETS.map((item) => ({
-        type: "interactive",
-        id: item.id,
-        stringTitle: presetLabels[item.id],
-        iconRight: (_jsxs("span", { className: "gd-csv-delimiter-picker-preview", "aria-hidden": "true", children: ["(",
-                _jsx("span", { className: "gd-csv-delimiter-picker-preview-char", children: item.previewSymbol }),
-                ")"] })),
-        data: item.id,
-    })),
-    {
+const getMenuItems = (presetLabels) => {
+    const items = [];
+    let id;
+    for (id in CSV_DELIMITER_PRESETS) {
+        items.push({
+            type: "interactive",
+            id,
+            stringTitle: presetLabels[id],
+            data: id,
+        });
+    }
+    items.push({
         type: "interactive",
         id: "custom",
         stringTitle: presetLabels.custom,
         data: "custom",
-    },
-];
+    });
+    return items;
+};
+const getButtonLabel = (presetLabels, selectedPreset) => {
+    const label = presetLabels[selectedPreset];
+    const preset = selectedPreset === "custom" ? undefined : CSV_DELIMITER_PRESETS[selectedPreset];
+    return preset ? `${label} (${preset.previewSymbol})` : label;
+};
+function CsvDelimiterMenuItem({ item, isFocused }) {
+    const preset = item.data === "custom" ? undefined : CSV_DELIMITER_PRESETS[item.data];
+    return (_jsx("div", { className: cx("gd-ui-kit-menu__item", {
+            "gd-ui-kit-menu__item--isFocused": isFocused,
+            "gd-ui-kit-menu__item--isSelected": !!item.isSelected,
+        }), children: _jsxs("span", { className: "gd-csv-delimiter-picker-label", children: [
+                _jsx("span", { children: item.stringTitle }), preset ? (_jsxs("span", { className: "gd-csv-delimiter-picker-preview", "aria-hidden": "true", children: [" (", _jsx("span", { className: "gd-csv-delimiter-picker-preview-char", children: preset.previewSymbol }), ")"] })) : null] }) }));
+}
 /**
  * Reusable CSV delimiter preset picker with dropdown, custom input, and validation.
  *
@@ -55,46 +70,68 @@ const getMenuItems = (presetLabels) => [
  *
  * @internal
  */
-export function CsvDelimiterPicker({ value, onChange, validationError, label, onEnterKeyPress, }) {
+export function CsvDelimiterPicker({ value, onChange, validationError, label, onEnterKeyPress, layout = "column", }) {
     const intl = useIntl();
     const { selectedPreset, customDelimiter } = value;
-    const labelId = useIdPrefixed("csv-delimiter-label");
-    const menuId = useIdPrefixed("csv-delimiter-menu");
+    const buttonId = useIdPrefixed("csv-delimiter-button");
+    const errorId = useIdPrefixed("csv-delimiter-error");
+    const [isCustomInputDirty, setIsCustomInputDirty] = useState(false);
+    const showInlineError = Boolean(validationError) && isCustomInputDirty;
+    const errorPrefix = intl.formatMessage(messages.errorPrefix);
+    const validationErrorMessage = validationError
+        ? validationError === "singleCharacter"
+            ? intl.formatMessage(messages.validationSingleCharacter)
+            : intl.formatMessage(messages.validationUnsupported)
+        : undefined;
+    const validationContextValue = useValidationContextValue(createInvalidNode());
+    const { setInvalidDatapoints } = validationContextValue;
+    // Sync validation errors to ValidationContextStore so the submit button
+    // in ConfirmDialogBase always announces them via aria-describedby —
+    // when the user focuses the submit button, they should hear why the form
+    // can't be submitted, regardless of whether the input is dirty yet.
+    useEffect(() => {
+        setInvalidDatapoints(() => validationErrorMessage
+            ? [
+                createInvalidDatapoint({
+                    id: errorId,
+                    message: `${errorPrefix} ${validationErrorMessage}`,
+                }),
+            ]
+            : []);
+    }, [validationErrorMessage, errorPrefix, errorId, setInvalidDatapoints]);
     const presetLabels = getPresetLabels(intl);
     const menuItems = getMenuItems(presetLabels);
-    const customInputLabel = intl.formatMessage({
-        id: "csvDelimiterPicker.customInput",
-        defaultMessage: "Custom CSV delimiter",
-    });
-    const menuAriaLabel = intl.formatMessage({
-        id: "csvDelimiterPicker.menuLabel",
-        defaultMessage: "CSV delimiter",
-    });
-    return (_jsxs(_Fragment, { children: [label ? _jsx("h4", { id: labelId, children: label }) : null, _jsx(Dropdown, { fullscreenOnMobile: false, renderButton: ({ isOpen, toggleDropdown }) => (_jsx(DropdownButton, { className: "s-csv-delimiter-dropdown", value: presetLabels[selectedPreset], isOpen: isOpen, onClick: toggleDropdown, accessibilityConfig: {
-                        ...(label ? { ariaLabelledBy: labelId } : {}),
-                        popupType: "listbox",
-                        ariaExpanded: isOpen,
-                        ...(isOpen ? { ariaControls: menuId } : {}),
-                    }, isFullWidth: true })), renderBody: ({ closeDropdown }) => (_jsx(UiMenu, { items: menuItems.map((item) => ({
-                        ...item,
-                        isSelected: selectedPreset === item.data,
-                    })), itemDataTestId: (item) => `s-csv-delimiter-${item.id}`, onSelect: (item) => {
-                        onChange({ selectedPreset: item.data, customDelimiter });
-                    }, onClose: closeDropdown, shouldCloseOnSelect: true, ariaAttributes: {
-                        "aria-label": menuAriaLabel,
-                        id: menuId,
-                    }, minWidth: DEFAULT_MENU_MIN_WIDTH })), autofocusOnOpen: true }), selectedPreset === "custom" ? (_jsxs("div", { className: "gd-csv-delimiter-picker-custom-field", children: [
-                    _jsx(Input, { className: "gd-csv-delimiter-picker-custom-input s-csv-delimiter-custom-input", value: customDelimiter, onChange: (value) => onChange({ selectedPreset, customDelimiter: String(value) }), hasError: Boolean(validationError), autofocus: true, onEnterKeyPress: onEnterKeyPress, accessibilityConfig: {
-                            ariaLabel: customInputLabel,
-                            ariaInvalid: Boolean(validationError),
-                        } }), validationError ? (_jsx("div", { className: "gd-csv-delimiter-picker-error", children: validationError === "singleCharacter"
-                            ? intl.formatMessage({
-                                id: "csvDelimiterPicker.validation.singleCharacter",
-                                defaultMessage: "Use a single character",
-                            })
-                            : intl.formatMessage({
-                                id: "csvDelimiterPicker.validation.unsupported",
-                                defaultMessage: "This character isn't supported",
-                            }) })) : null] })) : null] }));
+    const customInputLabel = intl.formatMessage(messages.customInput);
+    const menuAriaLabel = intl.formatMessage(messages.menuLabel);
+    return (_jsxs(ValidationContextStore, { value: validationContextValue, children: [label ? _jsx("label", { htmlFor: buttonId, children: label }) : null, _jsxs("div", { className: cx("gd-csv-delimiter-picker-controls", {
+                    "gd-csv-delimiter-picker-controls--column": layout === "column",
+                    "gd-csv-delimiter-picker-controls--row": layout === "row",
+                }), children: [_jsx(UiDropdown, { renderButton: ({ isOpen, toggleDropdown, ref, dropdownId }) => (_jsx(DropdownButton, { id: buttonId, className: "s-csv-delimiter-dropdown", value: getButtonLabel(presetLabels, selectedPreset), isOpen: isOpen, onClick: toggleDropdown, buttonRef: ref, dropdownId: dropdownId, accessibilityConfig: {
+                                ...(label ? {} : { ariaLabel: menuAriaLabel }),
+                                popupType: "listbox",
+                            }, isFullWidth: layout === "column" })), renderBody: ({ closeDropdown, ariaAttributes }) => (_jsx(UiMenu, { items: menuItems.map((item) => ({
+                                ...item,
+                                isSelected: selectedPreset === item.data,
+                            })), itemDataTestId: (item) => `s-csv-delimiter-${item.id}`, onSelect: (item) => {
+                                setIsCustomInputDirty(false);
+                                onChange({ selectedPreset: item.data, customDelimiter });
+                            }, onClose: closeDropdown, shouldCloseOnSelect: true, InteractiveItem: CsvDelimiterMenuItem, ariaAttributes: {
+                                ...ariaAttributes,
+                                "aria-label": menuAriaLabel,
+                            }, minWidth: DEFAULT_MENU_MIN_WIDTH })), autofocusOnOpen: true, fullWidthButton: layout === "column", closeOnEscape: true, accessibilityConfig: {
+                            triggerRole: "button",
+                            popupRole: "listbox",
+                        } }), selectedPreset === "custom" ? (_jsxs("div", { className: "gd-csv-delimiter-picker-custom-field", children: [
+                            _jsx(Input, { className: "gd-csv-delimiter-picker-custom-input s-csv-delimiter-custom-input", isSmall: true, value: customDelimiter, onChange: (value) => {
+                                    setIsCustomInputDirty(true);
+                                    onChange({ selectedPreset, customDelimiter: String(value) });
+                                }, hasError: showInlineError, autocomplete: "off", onEnterKeyPress: onEnterKeyPress, accessibilityConfig: {
+                                    ariaLabel: customInputLabel,
+                                    ariaInvalid: showInlineError,
+                                    ariaDescribedBy: showInlineError ? errorId : undefined,
+                                } }), validationErrorMessage ? (_jsxs("div", { id: errorId, className: cx("gd-csv-delimiter-picker-error", {
+                                    "sr-only": !showInlineError,
+                                }), children: [errorPrefix, " ", validationErrorMessage] })) : null] })) : null] })
+        ] }));
 }
 //# sourceMappingURL=CsvDelimiterPicker.js.map

package/esm/Dialog/CsvDelimiterPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CsvDelimiterPicker.js","sourceRoot":"","sources":["../../src/Dialog/CsvDelimiterPicker.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAEhC,OAAO,EAAkB,OAAO,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EACH,qBAAqB,GAGxB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAInC,MAAM,eAAe,GAAG,CAAC,IAAe,EAAE,EAAE,CAAC,CAAC;IAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC;QACtB,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,OAAO;KAC1B,CAAC;IACF,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;QAC1B,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,WAAW;KAC9B,CAAC;IACF,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC;QACrB,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,MAAM;KACzB,CAAC;IACF,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC;QACpB,EAAE,EAAE,+BAA+B;QACnC,cAAc,EAAE,KAAK;KACxB,CAAC;IACF,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC;QACvB,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,QAAQ;KAC3B,CAAC;CACL,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CACjB,YAAgD,EACF,EAAE,CAAC;IACjD,GAAG,qBAAqB,CAAC,GAAG,CACxB,CAAC,IAAI,EAAgD,EAAE,CAAC,CAAC;QACrD,IAAI,EAAE,aAAa;QACnB,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAClC,SAAS,EAAE,CACP,gBAAM,SAAS,EAAC,iCAAiC,iBAAa,MAAM;gBAC/D,eAAM,SAAS,EAAC,sCAAsC,YAAE,IAAI,CAAC,aAAa,GAAQ;uBAChF,CACV;QACD,IAAI,EAAE,IAAI,CAAC,EAAE;KAChB,CAAC,CACL;IACD;QACI,IAAI,EAAE,aAAa;QACnB,EAAE,EAAE,QAAQ;QACZ,WAAW,EAAE,YAAY,CAAC,MAAM;QAChC,IAAI,EAAE,QAAQ;KACjB;CACJ,CAAC;AA0BF;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,KAAK,EACL,eAAe,GACQ,EAAE;IACzB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAElD,MAAM,OAAO,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAE7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC;QACxC,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,sBAAsB;KACzC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACrC,EAAE,EAAE,8BAA8B;QAClC,cAAc,EAAE,eAAe;KAClC,CAAC,CAAC;IAEH,OAAO,CACH,8BACK,KAAK,CAAC,CAAC,CAAC,aAAI,EAAE,EAAE,OAAO,YAAG,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC7C,KAAC,QAAQ,IACL,kBAAkB,EAAE,KAAK,EACzB,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAC1C,KAAC,cAAc,IACX,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,YAAY,CAAC,cAAc,CAAC,EACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,mBAAmB,EAAE;wBACjB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;wBAC7C,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,MAAM;wBACpB,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;qBAC9C,EACD,WAAW,SACb,CACL,EACD,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAC/B,KAAC,MAAM,IACH,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBAC5B,GAAG,IAAI;wBACP,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC,IAAI;qBAC3C,CAAC,CAAC,EACH,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,mBAAmB,IAAI,CAAC,EAAE,EAAE,EACtD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;wBAChB,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;oBAAA,CAC5D,EACD,OAAO,EAAE,aAAa,EACtB,mBAAmB,QACnB,cAAc,EAAE;wBACZ,YAAY,EAAE,aAAa;wBAC3B,EAAE,EAAE,MAAM;qBACb,EACD,QAAQ,EAAE,sBAAsB,GAClC,CACL,EACD,eAAe,SACjB,EAED,cAAc,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,eAAK,SAAS,EAAC,sCAAsC;oBACjD,KAAC,KAAK,IACF,SAAS,EAAC,mEAAmE,EAC7E,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,EACjF,QAAQ,EAAE,OAAO,CAAC,eAAe,CAAC,EAClC,SAAS,QACT,eAAe,EAAE,eAAe,EAChC,mBAAmB,EAAE;4BACjB,SAAS,EAAE,gBAAgB;4BAC3B,WAAW,EAAE,OAAO,CAAC,eAAe,CAAC;yBACxC,GACH,EACD,eAAe,CAAC,CAAC,CAAC,CACf,cAAK,SAAS,EAAC,+BAA+B,YACzC,eAAe,KAAK,iBAAiB;4BAClC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;gCACf,EAAE,EAAE,+CAA+C;gCACnD,cAAc,EAAE,wBAAwB;6BAC3C,CAAC;4BACJ,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;gCACf,EAAE,EAAE,2CAA2C;gCAC/C,cAAc,EAAE,gCAAgC;6BACnD,CAAC,GACN,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC,CAAC,CAAC,IAAI,IACT,CACN,CAAC;AAAA,CACL"}
+{"version":3,"file":"CsvDelimiterPicker.js","sourceRoot":"","sources":["../../src/Dialog/CsvDelimiterPicker.tsx"],"names":[],"mappings":"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"}

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

@@ -554,7 +554,7 @@ export declare function createTemplates(formatMessage: (descriptor: {
  *
  * @internal
  */
-export declare function CsvDelimiterPicker({ value, onChange, validationError, label, onEnterKeyPress }: ICsvDelimiterPickerProps): JSX.Element;
+export declare function CsvDelimiterPicker({ value, onChange, validationError, label, onEnterKeyPress, layout }: ICsvDelimiterPickerProps): JSX.Element;
 
 /**
  * Base currency preset definitions.
@@ -745,7 +745,7 @@ export declare function DefaultUiTabsContainer<TTabProps extends Record<any, any
 /**
  * @internal
  */
-export declare function DefaultUiTabsTab<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject>({ tab, isSelected, onSelect, isFocused }: IUiTabComponentProps<"Tab", TTabProps, TTabActionProps>): JSX.Element;
+export declare function DefaultUiTabsTab<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject>({ tab, isSelected, onSelect, onDoubleClick, isFocused }: IUiTabComponentProps<"Tab", TTabProps, TTabActionProps>): JSX.Element;
 
 /**
  * @internal
@@ -2611,10 +2611,16 @@ export declare interface ICsvDelimiterPickerProps {
     onChange: (value: ICsvDelimiterPickerValue) => void;
     /** Validation error to display below the custom input. */
     validationError?: CsvDelimiterValidationError;
-    /** If provided, renders an h4 label above the dropdown. */
+    /** If provided, renders a label above the dropdown. */
     label?: string;
     /** Called when Enter is pressed in the custom input. */
     onEnterKeyPress?: () => void;
+    /**
+     * Layout direction for the dropdown and custom input.
+     * - `"column"` (default): dropdown takes full width, custom input stacks below.
+     * - `"row"`: dropdown auto-sizes, custom input sits beside it.
+     */
+    layout?: "row" | "column";
 }
 
 /**
@@ -7385,6 +7391,7 @@ export declare interface IUiPopoverProps {
  */
 export declare interface IUiReturnFocusOnUnmountOptions {
     returnFocusTo?: string | RefObject<HTMLElement | null> | (() => HTMLElement | null);
+    focusVisible?: boolean;
 }
 
 /**
@@ -7538,6 +7545,7 @@ export declare type IUiTabComponents<TTabProps extends Record<any, any> = EmptyO
         tab: IUiTab<TTabProps, TTabActionProps>;
         isSelected: boolean;
         onSelect: () => void;
+        onDoubleClick?: () => void;
         /**
          * Whether this tab is the currently focused tab in keyboard navigation.
          * When true, the tab button and its actions button become tabbable (tabIndex=0).
@@ -7578,7 +7586,7 @@ export declare type IUiTabComponents<TTabProps extends Record<any, any> = EmptyO
 /**
  * @internal
  */
-export declare type IUiTabContext<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject> = Pick<IUiTabsProps<TTabProps, TTabActionProps>, "tabs" | "selectedTabId" | "onTabSelect" | "size" | "accessibilityConfig" | "maxLabelLength" | "disableBottomBorder"> & {
+export declare type IUiTabContext<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject> = Pick<IUiTabsProps<TTabProps, TTabActionProps>, "tabs" | "selectedTabId" | "onTabSelect" | "onTabDoubleClick" | "size" | "accessibilityConfig" | "maxLabelLength" | "disableBottomBorder"> & {
     isOverflowing: boolean;
     containerRef: RefCallback<Element>;
     onActionTriggered: (context: IUiTabActionEventContext<TTabProps, TTabActionProps>) => void;
@@ -7599,6 +7607,7 @@ export declare type IUiTabsProps<TTabProps extends Record<any, any> = EmptyObjec
     tabs: IUiTab<TTabProps, TTabActionProps>[];
     selectedTabId: string;
     onTabSelect: (tab: IUiTab<TTabProps, TTabActionProps>) => void;
+    onTabDoubleClick?: (tab: IUiTab<TTabProps, TTabActionProps>) => void;
     size?: SizeSmall | SizeMedium | SizeLarge;
     maxLabelLength?: number;
     accessibilityConfig?: IUiTabsAccessibilityConfig;
@@ -9911,7 +9920,7 @@ export declare const useUiFocusTrapConnectors: <T extends HTMLElement = HTMLElem
 /**
  * @internal
  */
-export declare const useUiReturnFocusOnUnmountConnectors: <T extends HTMLElement = HTMLElement>({ returnFocusTo, }?: IUiReturnFocusOnUnmountOptions) => IUiFocusHelperConnectors<T>;
+export declare const useUiReturnFocusOnUnmountConnectors: <T extends HTMLElement = HTMLElement>({ returnFocusTo, focusVisible, }?: IUiReturnFocusOnUnmountOptions) => IUiFocusHelperConnectors<T>;
 
 /**
  * @internal
@@ -9921,7 +9930,7 @@ export declare const useUiTabOutHandlerConnectors: <T extends HTMLElement = HTML
 /**
  * @internal
  */
-export declare function useUiTabsContextStoreValue<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject>({ tabs, selectedTabId, onTabSelect, size, maxLabelLength, accessibilityConfig: accessibilityConfigProp, disableBottomBorder, Container, Tab, TabValue, TabActions, TabActionsButton, AllTabs, AllTabsButton }: IUiTabsProps<TTabProps, TTabActionProps>): IUiTabContext<TTabProps, TTabActionProps>;
+export declare function useUiTabsContextStoreValue<TTabProps extends Record<any, any> = EmptyObject, TTabActionProps extends Record<any, any> = EmptyObject>({ tabs, selectedTabId, onTabSelect, onTabDoubleClick, size, maxLabelLength, accessibilityConfig: accessibilityConfigProp, disableBottomBorder, Container, Tab, TabValue, TabActions, TabActionsButton, AllTabs, AllTabsButton }: IUiTabsProps<TTabProps, TTabActionProps>): IUiTabContext<TTabProps, TTabActionProps>;
 
 /**
  * @internal

package/package.json

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

package/styles/css/csvDelimiterPicker.css

@@ -1,7 +1,13 @@
+.gd-csv-delimiter-picker-label {
+  white-space: nowrap;
+}
+
+.gd-csv-delimiter-picker-preview-char {
+  font-family: menlo, monaco, consolas, "Courier New", monospace;
+  font-weight: 400;
+}
+
 .gd-csv-delimiter-picker-preview {
-  display: inline-flex;
-  min-width: 28px;
-  justify-content: flex-end;
   color: var(--gd-palette-complementary-6);
   opacity: 0;
   visibility: hidden;
@@ -14,11 +20,27 @@
   visibility: visible;
 }
 
+.gd-csv-delimiter-picker-controls {
+  display: flex;
+  gap: 10px;
+}
+.gd-csv-delimiter-picker-controls--column {
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 260px;
+}
+.gd-csv-delimiter-picker-controls--row {
+  flex-direction: row;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
 .gd-csv-delimiter-picker-error {
   margin-top: 6px;
   color: var(--gd-message-error-textColor);
   font-size: 12px;
   line-height: 16px;
+  overflow-wrap: break-word;
 }
 
 /*# sourceMappingURL=csvDelimiterPicker.css.map */

package/styles/css/csvDelimiterPicker.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/csvDelimiterPicker.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,YACI;;;AAIR;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;EACA;EACA","file":"csvDelimiterPicker.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/csvDelimiterPicker.scss"],"names":[],"mappings":"AAEA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA,YACI;;;AAIR;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA","file":"csvDelimiterPicker.css"}

package/styles/css/main.css

@@ -5527,10 +5527,16 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   background: var(--gd-palette-primary-base, #14b2e2);
 }
 
+.gd-csv-delimiter-picker-label {
+  white-space: nowrap;
+}
+
+.gd-csv-delimiter-picker-preview-char {
+  font-family: menlo, monaco, consolas, "Courier New", monospace;
+  font-weight: 400;
+}
+
 .gd-csv-delimiter-picker-preview {
-  display: inline-flex;
-  min-width: 28px;
-  justify-content: flex-end;
   color: var(--gd-palette-complementary-6);
   opacity: 0;
   visibility: hidden;
@@ -5543,11 +5549,27 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   visibility: visible;
 }
 
+.gd-csv-delimiter-picker-controls {
+  display: flex;
+  gap: 10px;
+}
+.gd-csv-delimiter-picker-controls--column {
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 260px;
+}
+.gd-csv-delimiter-picker-controls--row {
+  flex-direction: row;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
 .gd-csv-delimiter-picker-error {
   margin-top: 6px;
   color: var(--gd-message-error-textColor);
   font-size: 12px;
   line-height: 16px;
+  overflow-wrap: break-word;
 }
 
 /* ==========================================================================