@gooddata/sdk-ui-kit 11.39.0-alpha.1 → 11.39.0-alpha.3

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

@@ -478,6 +478,13 @@ export declare const ConfirmDialog: NamedExoticComponent<IConfirmDialogBaseProps
  */
 export declare const ConfirmDialogBase: NamedExoticComponent<IConfirmDialogBaseProps>;
 
+/**
+ * Visual variant of the confirm button.
+ *
+ * @internal
+ */
+export declare type ConfirmDialogVariant = VariantPrimary | VariantDanger;
+
 /**
  * @internal
  */
@@ -832,6 +839,13 @@ export declare const DialogBase: NamedExoticComponent<IDialogBaseProps>;
  */
 export declare function DialogCloseButton(props: IDialogCloseButtonProps): JSX.Element;
 
+/**
+ * Title sizing variant.
+ *
+ * @internal
+ */
+export declare type DialogHeaderTitleSize = "default" | "large";
+
 /**
  * @internal
  */
@@ -2570,7 +2584,7 @@ export declare function IconTreeMap({ className, width, height, color, ariaHidde
 /**
  * @internal
  */
-export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin";
+export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin";
 
 /**
  * @internal
@@ -6482,6 +6496,13 @@ export declare interface IUiButtonProps {
     accessibilityConfig?: IUiButtonAccessibilityConfig;
     maxWidth?: number;
     tabIndex?: number;
+    /**
+     * When true, the button is focused on mount via the native HTML
+     * <code>autofocus</code> attribute. Use sparingly — best fit is the safest
+     * action in a confirmation dialog so accidental Enter presses cancel
+     * rather than confirm a destructive action.
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -6617,6 +6638,28 @@ export declare interface IUiComboboxState {
     creatable: boolean;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiConfirmDialogProps {
+    /** Dialog title rendered inside the header. */
+    title: string;
+    /** Body content — typically a sentence or two of description. */
+    description: ReactNode;
+    /** Label for the confirm button — e.g. "Confirm", "Remove", "Transfer". */
+    confirmLabel: string;
+    /** Visual variant of the confirm button. */
+    confirmVariant?: ConfirmDialogVariant;
+    /** Fires when the user clicks the header X close button. */
+    onClose: () => void;
+    /** Fires when the user clicks the footer Cancel button. */
+    onCancel: () => void;
+    /** Fires when the user clicks the footer confirm button. */
+    onConfirm: () => void;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -6672,6 +6715,76 @@ export declare interface IUiDateProps {
     allowRelative?: boolean;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiDialogFooterProps {
+    /** Right-aligned cluster of footer controls (typically Cancel + primary). */
+    children: ReactNode;
+    /**
+     * When true, draws a 1px complementary-3 divider above the footer and adds
+     * matching top padding. ObjectShareDialog and AddGranteeScreen want this;
+     * ConfirmDialog does not.
+     */
+    divider?: boolean;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiDialogHeaderProps {
+    /** Title shown in the header. */
+    title: string;
+    /** Title size — <code>"default"</code> = 18/26, <code>"large"</code> = 20/26. */
+    titleSize?: DialogHeaderTitleSize;
+    /** Fires when the user clicks the X close button. Omit to hide the X. */
+    onClose?: () => void;
+    /** Optional leading slot rendered before the title (e.g. a back button). */
+    leading?: ReactNode;
+}
+
+/**
+ * Accessibility config for a dialog. By default the shell wires
+ * <code>aria-labelledby</code> to the <code>UiDialogHeader</code> title via
+ * context — no config is needed when a header is present. For headerless
+ * dialogs, pass <code>ariaLabel</code>; to point at an external title
+ * element, pass <code>ariaLabelledBy</code>.
+ *
+ * @internal
+ */
+export declare interface IUiDialogShellAccessibilityConfig {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiDialogShellProps {
+    /** Header / body / footer composed by the caller. */
+    children: ReactNode;
+    /** Dialog width in px. Defaults to 540. */
+    width?: number;
+    /**
+     * When true, the dialog acts as a modal: focus is trapped inside,
+     * autofocus + return-focus-on-unmount apply, ESC fires <code>onClose</code>,
+     * and <code>aria-modal="true"</code> is set. Leave off for inline
+     * non-blocking dialog cards.
+     */
+    isModal?: boolean;
+    /** Fires when the user dismisses via ESC. Only active when <code>isModal</code>. */
+    onClose?: () => void;
+    /**
+     * Accessibility config. Usually unnecessary — when <code>UiDialogHeader</code>
+     * is used as a child the shell auto-wires <code>aria-labelledby</code> to
+     * the header's title.
+     */
+    accessibilityConfig?: IUiDialogShellAccessibilityConfig;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -7542,6 +7655,16 @@ export declare interface IUiReturnFocusOnUnmountOptions {
     focusVisible?: boolean;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiSectionHeadingProps {
+    /** Section label rendered in 11px upper-case complementary-6. */
+    label: string;
+    /** Optional action rendered after the rule (e.g. a link or button). */
+    action?: ReactNode;
+}
+
 /**
  * @internal
  */
@@ -9366,6 +9489,16 @@ export declare function UiComboboxPopup({ style, className, children, ...htmlPro
 /** @internal */
 export declare type UiComboboxPopupProps = HTMLAttributes<HTMLDivElement>;
 
+/**
+ * Compact modal confirm dialog used by the OLP share flow for actions that
+ * need explicit user confirmation (granting workspace access, restricting
+ * access, removing a grantee, transferring ownership). Always modal — focus
+ * is trapped inside, autofocus + return-focus apply, and ESC fires onClose.
+ *
+ * @internal
+ */
+export declare function UiConfirmDialog({ title, description, confirmLabel, confirmVariant, onClose, onCancel, onConfirm, dataTestId }: IUiConfirmDialogProps): JSX.Element;
+
 /**
  * Generic chip-shaped dropdown trigger primitive. One source of truth for filter-bar chip
  * visuals; consumed by both attribute filter chips and parameter chips.
@@ -9388,6 +9521,31 @@ export declare function UiCopyButton({ label, clipboardContent, successMessage,
  */
 export declare function UiDate({ date, locale, relativeThresholdMs, absoluteOptions, allowRelative }: IUiDateProps): JSX.Element;
 
+/**
+ * Dialog footer: right-aligned cluster of action buttons. Optionally renders
+ * a 1px divider above the actions.
+ *
+ * @internal
+ */
+export declare function UiDialogFooter({ children, divider }: IUiDialogFooterProps): JSX.Element;
+
+/**
+ * Dialog header: optional leading slot + title + optional close X.
+ *
+ * @internal
+ */
+export declare function UiDialogHeader({ title, titleSize, onClose, leading }: IUiDialogHeaderProps): JSX.Element;
+
+/**
+ * Plain dialog card chrome — 4px radius, soft shadow, complementary-0 fill,
+ * 20px padding. Holds whatever the caller composes inside. Set
+ * <code>isModal</code> for blocking dialogs (adds focus trap, autofocus,
+ * return-focus, ESC handling and <code>aria-modal</code>).
+ *
+ * @internal
+ */
+export declare function UiDialogShell({ children, width, isModal, onClose, accessibilityConfig, dataTestId }: IUiDialogShellProps): JSX.Element;
+
 /**
  * @internal
  */
@@ -9590,6 +9748,15 @@ export declare function UiReturnFocusOnUnmount({ children, ...options }: IUiRetu
  */
 export declare function UiSearchResultsAnnouncement({ totalResults, resultValues, announcementDelay }: ISearchResultsAnnouncementProps): JSX.Element;
 
+/**
+ * "LABEL ────── action" pattern used by dialog sections (e.g. SHARED WITH +
+ * Add link). The horizontal rule fills the space between the label and the
+ * trailing action.
+ *
+ * @internal
+ */
+export declare function UiSectionHeading({ label, action }: IUiSectionHeadingProps): JSX.Element;
+
 /**
  * @internal
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.39.0-alpha.1",
+  "version": "11.39.0-alpha.3",
   "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.39.0-alpha.1",
-    "@gooddata/sdk-ui": "11.39.0-alpha.1",
-    "@gooddata/sdk-model": "11.39.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.39.0-alpha.1",
-    "@gooddata/util": "11.39.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.39.0-alpha.3",
+    "@gooddata/sdk-model": "11.39.0-alpha.3",
+    "@gooddata/sdk-ui": "11.39.0-alpha.3",
+    "@gooddata/util": "11.39.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "11.39.0-alpha.3"
   },
   "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/eslint-config": "11.39.0-alpha.1",
-    "@gooddata/oxlint-config": "11.39.0-alpha.1",
-    "@gooddata/reference-workspace": "11.39.0-alpha.1",
-    "@gooddata/stylelint-config": "11.39.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.39.0-alpha.1"
+    "@gooddata/eslint-config": "11.39.0-alpha.3",
+    "@gooddata/oxlint-config": "11.39.0-alpha.3",
+    "@gooddata/reference-workspace": "11.39.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "11.39.0-alpha.3",
+    "@gooddata/stylelint-config": "11.39.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiConfirmDialog/UiConfirmDialog.scss

@@ -0,0 +1,13 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-confirm-dialog {
+    display: flex;
+    flex-direction: column;
+
+    &__body {
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--gd-palette-complementary-7);
+        margin-bottom: var(--gd-spacing-20px);
+    }
+}

package/src/@ui/UiDialogShell/UiDialogShell.scss

@@ -0,0 +1,57 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-dialog-shell {
+    display: flex;
+    flex-direction: column;
+    padding: var(--gd-spacing-20px);
+    background-color: var(--gd-palette-complementary-0);
+    font-family: var(--gd-font-family);
+    border-radius: var(--gd-modal-borderRadius);
+    box-shadow: 0 2px 8px var(--gd-shadow-color);
+}
+
+.gd-ui-kit-dialog-header {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-15px);
+    margin-bottom: var(--gd-spacing-20px);
+
+    &__leading {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    &__title {
+        flex: 1 1 auto;
+        min-width: 0;
+        margin: 0;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &--size-default {
+            font-size: 18px;
+            line-height: 26px;
+        }
+
+        &--size-large {
+            font-size: 20px;
+            line-height: 26px;
+        }
+    }
+}
+
+.gd-ui-kit-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--gd-spacing-10px);
+
+    &--divider {
+        margin-top: var(--gd-spacing-15px);
+        padding-top: var(--gd-spacing-15px);
+        border-top: 1px solid var(--gd-palette-complementary-3);
+    }
+}

package/src/@ui/UiSectionHeading/UiSectionHeading.scss

@@ -0,0 +1,29 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-section-heading {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-15px);
+    font-family: var(--gd-font-family);
+
+    &__label {
+        font-size: 11px;
+        line-height: 23px;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--gd-palette-complementary-6);
+        flex-shrink: 0;
+    }
+
+    &__rule {
+        flex: 1 1 auto;
+        height: 1px;
+        background-color: var(--gd-palette-complementary-3);
+    }
+
+    &__action {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+    }
+}

package/src/@ui/index.scss

@@ -30,3 +30,6 @@
 @use "./UiBreadcrumb/UiBreadcrumb.scss";
 @use "./UiInlineTextGenerator/UiInlineTextGenerator.scss";
 @use "./UiErrorPage/UiErrorPage.scss";
+@use "./UiSectionHeading/UiSectionHeading.scss";
+@use "./UiDialogShell/UiDialogShell.scss";
+@use "./UiConfirmDialog/UiConfirmDialog.scss";

package/styles/css/main.css

@@ -3319,6 +3319,93 @@
   line-height: 23px;
 }
 
+.gd-ui-kit-section-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-15px);
+  font-family: var(--gd-font-family);
+}
+.gd-ui-kit-section-heading__label {
+  font-size: 11px;
+  line-height: 23px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--gd-palette-complementary-6);
+  flex-shrink: 0;
+}
+.gd-ui-kit-section-heading__rule {
+  flex: 1 1 auto;
+  height: 1px;
+  background-color: var(--gd-palette-complementary-3);
+}
+.gd-ui-kit-section-heading__action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.gd-ui-kit-dialog-shell {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gd-spacing-20px);
+  background-color: var(--gd-palette-complementary-0);
+  font-family: var(--gd-font-family);
+  border-radius: var(--gd-modal-borderRadius);
+  box-shadow: 0 2px 8px var(--gd-shadow-color);
+}
+
+.gd-ui-kit-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-15px);
+  margin-bottom: var(--gd-spacing-20px);
+}
+.gd-ui-kit-dialog-header__leading {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.gd-ui-kit-dialog-header__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-dialog-header__title--size-default {
+  font-size: 18px;
+  line-height: 26px;
+}
+.gd-ui-kit-dialog-header__title--size-large {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.gd-ui-kit-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-dialog-footer--divider {
+  margin-top: var(--gd-spacing-15px);
+  padding-top: var(--gd-spacing-15px);
+  border-top: 1px solid var(--gd-palette-complementary-3);
+}
+
+.gd-ui-kit-confirm-dialog {
+  display: flex;
+  flex-direction: column;
+}
+.gd-ui-kit-confirm-dialog__body {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-7);
+  margin-bottom: var(--gd-spacing-20px);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;