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

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

@@ -1,4 +1,4 @@
 /**
  * @internal
  */
-export 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 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" | "folderSmall" | "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";

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+/**
+ * @internal
+ */
+export interface IUiAddGranteeDialogProps {
+    /** Object title shown in the header — wrapped into `Share "\{title\}"`. */
+    objectTitle: string;
+    /** Current search query. */
+    searchQuery: string;
+    /** Fires when the user edits the search query. */
+    onSearchQueryChange: (next: string) => void;
+    /**
+     * Optional slot rendered between the search input and the bottom divider.
+     * When empty, the screen falls back to a "No user or group selected"
+     * placeholder. Callers typically render a single `UiGranteeRow`
+     * here to preview the grantee they've picked from the search dropdown.
+     */
+    selectedGrantee?: ReactNode;
+    /** Fires when the user clicks the header back-arrow button. */
+    onBack: () => void;
+    /** Fires when the user clicks the header X close button. */
+    onClose: () => void;
+    /** Fires when the user clicks Cancel in the footer. */
+    onCancel: () => void;
+    /** Fires when the user clicks the primary Add button in the footer. */
+    onAdd: () => void;
+    /** When true, the primary Add button is disabled. */
+    isAddDisabled?: boolean;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+/**
+ * Standalone dialog for adding a grantee, opened from the share dialog's
+ * "+ Add" action. Lets the author search for a user or group, preview the
+ * grantee they picked, and confirm adding them with the footer Add button.
+ *
+ * @internal
+ */
+export declare function UiAddGranteeDialog({ objectTitle, searchQuery, onSearchQueryChange, selectedGrantee, onBack, onClose, onCancel, onAdd, isAddDisabled, dataTestId }: IUiAddGranteeDialogProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiAddGranteeDialog/UiAddGranteeDialog.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { commonDialogMessages, olpAddGranteeDialogMessages, olpObjectShareDialogMessages, } from "../../locales.js";
+import { bem } from "../@utils/bem.js";
+import { UiButton } from "../UiButton/UiButton.js";
+import { UiDialogFooter } from "../UiDialogShell/UiDialogFooter.js";
+import { UiDialogHeader } from "../UiDialogShell/UiDialogHeader.js";
+import { UiDialogShell } from "../UiDialogShell/UiDialogShell.js";
+import { UiIconButton } from "../UiIconButton/UiIconButton.js";
+import { UiTextInput } from "../UiTextInput/UiTextInput.js";
+const { b, e } = bem("gd-ui-kit-add-grantee-dialog");
+/**
+ * Standalone dialog for adding a grantee, opened from the share dialog's
+ * "+ Add" action. Lets the author search for a user or group, preview the
+ * grantee they picked, and confirm adding them with the footer Add button.
+ *
+ * @internal
+ */
+export function UiAddGranteeDialog({ objectTitle, searchQuery, onSearchQueryChange, selectedGrantee, onBack, onClose, onCancel, onAdd, isAddDisabled, dataTestId, }) {
+    const intl = useIntl();
+    const dialogTitle = intl.formatMessage(olpObjectShareDialogMessages.title, { title: objectTitle });
+    const backButton = (_jsx(UiIconButton, { icon: "chevronLeft", variant: "tertiary", size: "small", onClick: onBack, accessibilityConfig: { ariaLabel: intl.formatMessage(olpAddGranteeDialogMessages.back) } }));
+    return (_jsxs(UiDialogShell, { dataTestId: dataTestId, children: [
+            _jsx(UiDialogHeader, { title: dialogTitle, titleSize: "large", onClose: onClose, leading: backButton }), _jsxs("div", { className: b(), children: [
+                    _jsx(UiTextInput, { type: "search", value: searchQuery, onChange: onSearchQueryChange, label: intl.formatMessage(olpAddGranteeDialogMessages.userOrGroup), placeholder: intl.formatMessage(olpAddGranteeDialogMessages.searchPlaceholder) }), _jsx("div", { className: e("preview"), children: selectedGrantee ?? (_jsx("span", { className: e("empty-state"), children: intl.formatMessage(olpAddGranteeDialogMessages.emptyState) })) })
+                ] }), _jsxs(UiDialogFooter, { divider: true, children: [
+                    _jsx(UiButton, { label: intl.formatMessage(commonDialogMessages.cancel), variant: "secondary", size: "medium", onClick: onCancel }), _jsx(UiButton, { label: intl.formatMessage(olpAddGranteeDialogMessages.add), variant: "primary", size: "medium", onClick: onAdd, isDisabled: isAddDisabled })
+                ] })
+        ] }));
+}

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

@@ -0,0 +1,40 @@
+import { type IconType } from "../@types/icon.js";
+import { type ThemeColor } from "../@types/themeColors.js";
+/**
+ * @internal
+ */
+export interface IUiAvatarProps {
+    /** Icon rendered inside the circle. */
+    icon: IconType;
+    /** Outer circle size in px. Defaults to 32. */
+    size?: number;
+    /** Background tone of the circle. Defaults to `complementary-2`. */
+    backgroundColor?: ThemeColor;
+    /** Icon tone. Defaults to `complementary-5`. */
+    iconColor?: ThemeColor;
+    /**
+     * Icon size in px. Defaults to `Math.round(size * ICON_TO_AVATAR_RATIO)`,
+     * which mirrors the 14/32 proportion used across the kit's avatars.
+     */
+    iconSize?: number;
+    /**
+     * Accessibility config for the avatar. Provide an `ariaLabel`
+     * when the avatar carries meaning (e.g. a stand-alone "who" indicator).
+     * Use `ariaHidden: true` when the avatar sits next to a visible
+     * name and would only duplicate that name for screen-reader users.
+     */
+    accessibilityConfig?: {
+        ariaLabel?: string;
+        ariaHidden?: boolean;
+    };
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+/**
+ * Circle avatar with a centered icon. Generic small "who" indicator
+ * (grantees, presence, audit log, activity feed, ...). Wrap in a
+ * domain-specific component to pick the right icon + label per kind.
+ *
+ * @internal
+ */
+export declare function UiAvatar({ icon, size, backgroundColor, iconColor, iconSize, accessibilityConfig, dataTestId }: IUiAvatarProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiAvatar/UiAvatar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { bem } from "../@utils/bem.js";
+import { UiIcon } from "../UiIcon/UiIcon.js";
+const { b } = bem("gd-ui-kit-avatar");
+const DEFAULT_SIZE = 32;
+const DEFAULT_BACKGROUND = "complementary-2";
+const DEFAULT_ICON_COLOR = "complementary-5";
+const ICON_TO_AVATAR_RATIO = 0.44;
+/**
+ * Circle avatar with a centered icon. Generic small "who" indicator
+ * (grantees, presence, audit log, activity feed, ...). Wrap in a
+ * domain-specific component to pick the right icon + label per kind.
+ *
+ * @internal
+ */
+export function UiAvatar({ icon, size = DEFAULT_SIZE, backgroundColor = DEFAULT_BACKGROUND, iconColor = DEFAULT_ICON_COLOR, iconSize, accessibilityConfig, dataTestId, }) {
+    const resolvedIconSize = iconSize ?? Math.round(size * ICON_TO_AVATAR_RATIO);
+    return (_jsx("span", { className: b({ background: backgroundColor }), "data-testid": dataTestId, style: { "--gd-avatar-size": `${size}px` }, children: _jsx(UiIcon, { type: icon, size: resolvedIconSize, color: iconColor, accessibilityConfig: accessibilityConfig }) }));
+}

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

@@ -34,6 +34,13 @@ export interface IUiButtonProps {
     accessibilityConfig?: IUiButtonAccessibilityConfig;
     maxWidth?: number;
     tabIndex?: number;
+    /**
+     * When true, the button is focused on mount via the native HTML
+     * `autofocus` 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;
 }
 /**
  * @internal

package/esm/@ui/UiButton/UiButton.js

@@ -11,7 +11,7 @@ const getGeneratedTestId = (label, ariaLabel) => {
 /**
  * @internal
  */
-export const UiButton = forwardRef(({ id, size = "medium", variant = "secondary", tabIndex = 0, label, isDisabled, isSelected, isLoading, disableIconAnimation, iconBefore, iconBeforeSize: iconBeforeSizeProp, iconAfter, iconAfterSize: iconAfterSizeProp, badgeAfter, onClick, onKeyDown, dataId, dataTestId, accessibilityConfig, maxWidth, }, ref) => {
+export const UiButton = forwardRef(({ id, size = "medium", variant = "secondary", tabIndex = 0, label, isDisabled, isSelected, isLoading, disableIconAnimation, iconBefore, iconBeforeSize: iconBeforeSizeProp, iconAfter, iconAfterSize: iconAfterSizeProp, badgeAfter, onClick, onKeyDown, dataId, dataTestId, accessibilityConfig, maxWidth, autoFocus, }, ref) => {
     const iconBeforeSize = iconBeforeSizeProp ?? (size === "small" ? 16 : 18);
     const iconAfterSize = iconAfterSizeProp ?? (size === "small" ? 16 : 18);
     const hasIconBefore = !!iconBefore;
@@ -24,6 +24,6 @@ export const UiButton = forwardRef(({ id, size = "medium", variant = "secondary"
             hasIconBefore,
             hasIconAfter,
             isSelected: isSelected ?? false,
-        }), disabled: isDisabled, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, "data-id": dataId, "data-testid": testId, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, "aria-description": accessibilityConfig?.ariaDescription, "aria-controls": accessibilityConfig?.ariaControls, "aria-haspopup": accessibilityConfig?.ariaHaspopup, role: accessibilityConfig?.role, children: [iconBefore ? (_jsx(UiIcon, { type: iconBefore, size: iconBeforeSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null, _jsx("span", { className: e("text"), style: { maxWidth }, children: label }), badgeAfter !== undefined && typeof badgeAfter === "number" ? (_jsxs("span", { className: e("badge"), children: ["(", badgeAfter, ")"] })) : null, badgeAfter !== undefined && typeof badgeAfter === "string" ? (_jsx("span", { className: e("badge"), children: badgeAfter })) : null, iconAfter ? (_jsx(UiIcon, { type: iconAfter, size: iconAfterSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null] }));
+        }), disabled: isDisabled, tabIndex: tabIndex, autoFocus: autoFocus, onClick: onClick, onKeyDown: onKeyDown, "data-id": dataId, "data-testid": testId, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, "aria-description": accessibilityConfig?.ariaDescription, "aria-controls": accessibilityConfig?.ariaControls, "aria-haspopup": accessibilityConfig?.ariaHaspopup, role: accessibilityConfig?.role, children: [iconBefore ? (_jsx(UiIcon, { type: iconBefore, size: iconBeforeSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null, _jsx("span", { className: e("text"), style: { maxWidth }, children: label }), badgeAfter !== undefined && typeof badgeAfter === "number" ? (_jsxs("span", { className: e("badge"), children: ["(", badgeAfter, ")"] })) : null, badgeAfter !== undefined && typeof badgeAfter === "string" ? (_jsx("span", { className: e("badge"), children: badgeAfter })) : null, iconAfter ? (_jsx(UiIcon, { type: iconAfter, size: iconAfterSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null] }));
 });
 UiButton.displayName = "UiButton";

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

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import { type VariantDanger, type VariantPrimary } from "../@types/variant.js";
+/**
+ * Visual variant of the confirm button.
+ *
+ * @internal
+ */
+export type ConfirmDialogVariant = VariantPrimary | VariantDanger;
+/**
+ * @internal
+ */
+export 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;
+}
+/**
+ * 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): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiConfirmDialog/UiConfirmDialog.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId } from "react";
+import { useIntl } from "react-intl";
+import { commonDialogMessages } from "../../locales.js";
+import { bem } from "../@utils/bem.js";
+import { UiButton } from "../UiButton/UiButton.js";
+import { UiDialogFooter } from "../UiDialogShell/UiDialogFooter.js";
+import { UiDialogHeader } from "../UiDialogShell/UiDialogHeader.js";
+import { UiDialogShell } from "../UiDialogShell/UiDialogShell.js";
+const { b, e } = bem("gd-ui-kit-confirm-dialog");
+/**
+ * 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 function UiConfirmDialog({ title, description, confirmLabel, confirmVariant = "primary", onClose, onCancel, onConfirm, dataTestId, }) {
+    const intl = useIntl();
+    const descriptionId = useId();
+    return (_jsx(UiDialogShell, { width: 420, isModal: true, onClose: onClose, dataTestId: dataTestId, accessibilityConfig: { ariaDescribedBy: descriptionId }, children: _jsxs("div", { className: b(), children: [
+                _jsx(UiDialogHeader, { title: title, onClose: onClose }), _jsx("div", { className: e("body"), id: descriptionId, children: description }), _jsxs(UiDialogFooter, { children: [
+                        _jsx(UiButton, { label: intl.formatMessage(commonDialogMessages.cancel), variant: "secondary", size: "medium", onClick: onCancel, autoFocus: true }), _jsx(UiButton, { label: confirmLabel, variant: confirmVariant, size: "medium", onClick: onConfirm })
+                    ] })
+            ] }) }));
+}

package/esm/@ui/UiDialogShell/UiDialogFooter.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+/**
+ * @internal
+ */
+export 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 AddGranteeDialog want this;
+     * ConfirmDialog does not.
+     */
+    divider?: boolean;
+}
+/**
+ * Dialog footer: right-aligned cluster of action buttons. Optionally renders
+ * a 1px divider above the actions.
+ *
+ * @internal
+ */
+export declare function UiDialogFooter({ children, divider }: IUiDialogFooterProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiDialogShell/UiDialogFooter.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { bem } from "../@utils/bem.js";
+const { b } = bem("gd-ui-kit-dialog-footer");
+/**
+ * Dialog footer: right-aligned cluster of action buttons. Optionally renders
+ * a 1px divider above the actions.
+ *
+ * @internal
+ */
+export function UiDialogFooter({ children, divider = false }) {
+    return _jsx("div", { className: b({ divider }), children: children });
+}

package/esm/@ui/UiDialogShell/UiDialogHeader.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+/**
+ * Title sizing variant.
+ *
+ * @internal
+ */
+export type DialogHeaderTitleSize = "default" | "large";
+/**
+ * @internal
+ */
+export interface IUiDialogHeaderProps {
+    /** Title shown in the header. */
+    title: string;
+    /** Title size — `"default"` = 18/26, `"large"` = 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;
+}
+/**
+ * Dialog header: optional leading slot + title + optional close X.
+ *
+ * @internal
+ */
+export declare function UiDialogHeader({ title, titleSize, onClose, leading }: IUiDialogHeaderProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiDialogShell/UiDialogHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { commonDialogMessages } from "../../locales.js";
+import { bem } from "../@utils/bem.js";
+import { UiIconButton } from "../UiIconButton/UiIconButton.js";
+import { useUiDialogContext } from "./UiDialogShell.js";
+const { b, e } = bem("gd-ui-kit-dialog-header");
+/**
+ * Dialog header: optional leading slot + title + optional close X.
+ *
+ * @internal
+ */
+export function UiDialogHeader({ title, titleSize = "default", onClose, leading }) {
+    const intl = useIntl();
+    const dialogContext = useUiDialogContext();
+    return (_jsxs("div", { className: b(), children: [leading ? _jsx("span", { className: e("leading"), children: leading }) : null, _jsx("h2", { id: dialogContext?.titleId, className: e("title", { size: titleSize }), children: title }), onClose ? (_jsx(UiIconButton, { icon: "cross", variant: "tertiary", size: "small", onClick: onClose, accessibilityConfig: {
+                    ariaLabel: intl.formatMessage(commonDialogMessages.close),
+                } })) : null] }));
+}

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

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+/**
+ * Accessibility config for a dialog. By default the shell wires
+ * `aria-labelledby` to the `UiDialogHeader` title via
+ * context — no config is needed when a header is present. For headerless
+ * dialogs, pass `ariaLabel`; to point at an external title
+ * element, pass `ariaLabelledBy`.
+ *
+ * @internal
+ */
+export interface IUiDialogShellAccessibilityConfig {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+}
+/**
+ * @internal
+ */
+export 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 `onClose`,
+     * and `aria-modal="true"` is set. Leave off for inline
+     * non-blocking dialog cards.
+     */
+    isModal?: boolean;
+    /** Fires when the user dismisses via ESC. Only active when `isModal`. */
+    onClose?: () => void;
+    /**
+     * Accessibility config. Usually unnecessary — when `UiDialogHeader`
+     * is used as a child the shell auto-wires `aria-labelledby` to
+     * the header's title.
+     */
+    accessibilityConfig?: IUiDialogShellAccessibilityConfig;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+interface IUiDialogContext {
+    titleId: string;
+}
+/**
+ * @internal
+ */
+export declare function useUiDialogContext(): IUiDialogContext | null;
+/**
+ * Plain dialog card chrome — 4px radius, soft shadow, complementary-0 fill,
+ * 20px padding. Holds whatever the caller composes inside. Set
+ * `isModal` for blocking dialogs (adds focus trap, autofocus,
+ * return-focus, ESC handling and `aria-modal`).
+ *
+ * @internal
+ */
+export declare function UiDialogShell({ children, width, isModal, onClose, accessibilityConfig, dataTestId }: IUiDialogShellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/@ui/UiDialogShell/UiDialogShell.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { createContext, useContext, useId } from "react";
+import { bem } from "../@utils/bem.js";
+import { UiFocusManager } from "../UiFocusManager/UiFocusManager.js";
+const { b } = bem("gd-ui-kit-dialog-shell");
+const UiDialogContext = createContext(null);
+/**
+ * @internal
+ */
+export function useUiDialogContext() {
+    return useContext(UiDialogContext);
+}
+/**
+ * Plain dialog card chrome — 4px radius, soft shadow, complementary-0 fill,
+ * 20px padding. Holds whatever the caller composes inside. Set
+ * `isModal` for blocking dialogs (adds focus trap, autofocus,
+ * return-focus, ESC handling and `aria-modal`).
+ *
+ * @internal
+ */
+export function UiDialogShell({ children, width = 540, isModal = false, onClose, accessibilityConfig, dataTestId, }) {
+    const titleId = useId();
+    const ariaLabelledBy = accessibilityConfig?.ariaLabelledBy ?? (accessibilityConfig?.ariaLabel ? undefined : titleId);
+    const handleKeyDown = (event) => {
+        if (isModal && event.key === "Escape" && onClose) {
+            event.stopPropagation();
+            onClose();
+        }
+    };
+    const card = (_jsx("div", { className: b(), "data-testid": dataTestId, style: { width }, role: "dialog", "aria-modal": isModal || undefined, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, onKeyDown: handleKeyDown, children: _jsx(UiDialogContext.Provider, { value: { titleId }, children: children }) }));
+    if (!isModal) {
+        return card;
+    }
+    return (_jsx(UiFocusManager, { enableAutofocus: true, enableFocusTrap: true, enableReturnFocusOnUnmount: true, children: card }));
+}

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

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+/**
+ * Which general-access option is currently selected.
+ *
+ * @internal
+ */
+export type GeneralAccessValue = "RESTRICTED" | "WORKSPACE";
+/**
+ * @internal
+ */
+export interface IUiGeneralAccessRadioProps {
+    /** Selected option. */
+    value: GeneralAccessValue;
+    /** Fired when the user picks a different option. */
+    onChange: (value: GeneralAccessValue) => void;
+    /**
+     * Optional slot rendered to the right of the `All workspace members`
+     * row — typically the `UiGranteeRowControls` pair that lets the
+     * author pick labels and the workspace-wide permission level.
+     */
+    workspaceControls?: ReactNode;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+/**
+ * Two-row radio used by the OLP share dialog to choose between restricting
+ * access to the listed grantees and granting access to every workspace
+ * member. Composes `UiRadioRow` for each option.
+ *
+ * @internal
+ */
+export declare function UiGeneralAccessRadio({ value, onChange, workspaceControls, dataTestId }: IUiGeneralAccessRadioProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiGeneralAccessRadio/UiGeneralAccessRadio.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId } from "react";
+import { useIntl } from "react-intl";
+import { olpGeneralAccessMessages } from "../../locales.js";
+import { bem } from "../@utils/bem.js";
+import { UiRadioRow } from "../UiRadioRow/UiRadioRow.js";
+const { b } = bem("gd-ui-kit-general-access-radio");
+/**
+ * Two-row radio used by the OLP share dialog to choose between restricting
+ * access to the listed grantees and granting access to every workspace
+ * member. Composes `UiRadioRow` for each option.
+ *
+ * @internal
+ */
+export function UiGeneralAccessRadio({ value, onChange, workspaceControls, dataTestId, }) {
+    const intl = useIntl();
+    const name = useId();
+    return (_jsxs("div", { className: b(), "data-testid": dataTestId, role: "radiogroup", "aria-label": intl.formatMessage(olpGeneralAccessMessages.groupLabel), children: [
+            _jsx(UiRadioRow, { name: name, value: "RESTRICTED", checked: value === "RESTRICTED", title: intl.formatMessage(olpGeneralAccessMessages.restrictedTitle), description: intl.formatMessage(olpGeneralAccessMessages.restrictedDescription), onChange: () => onChange("RESTRICTED") }), _jsx(UiRadioRow, { name: name, value: "WORKSPACE", checked: value === "WORKSPACE", title: intl.formatMessage(olpGeneralAccessMessages.workspaceTitle), description: intl.formatMessage(olpGeneralAccessMessages.workspaceDescription), onChange: () => onChange("WORKSPACE"), trailing: workspaceControls })
+        ] }));
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Visual variant of a grantee avatar.
+ *
+ * @internal
+ */
+export type GranteeAvatarKind = "user" | "group";
+/**
+ * @internal
+ */
+export interface IUiGranteeAvatarProps {
+    /** Visual kind — drives which silhouette is rendered. */
+    kind: GranteeAvatarKind;
+    /**
+     * When true, the avatar is hidden from assistive tech. Use when the
+     * avatar sits next to a visible name and would only duplicate that name
+     * for screen-reader users (e.g. inside `UiGranteeRow`).
+     */
+    decorative?: boolean;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+/**
+ * 32×32 circle avatar used by the OLP share-dialog grantee list. Thin wrapper
+ * over `UiAvatar` that picks the right silhouette and i18n
+ * accessibility label per grantee kind. Pass `decorative` when
+ * the avatar is paired with a visible name in the same row.
+ *
+ * @internal
+ */
+export declare function UiGranteeAvatar({ kind, decorative, dataTestId }: IUiGranteeAvatarProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiGranteeAvatar/UiGranteeAvatar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useIntl } from "react-intl";
+import { olpGranteeAvatarMessages } from "../../locales.js";
+import { UiAvatar } from "../UiAvatar/UiAvatar.js";
+const ICON_BY_KIND = {
+    user: "user",
+    group: "users",
+};
+/**
+ * 32×32 circle avatar used by the OLP share-dialog grantee list. Thin wrapper
+ * over `UiAvatar` that picks the right silhouette and i18n
+ * accessibility label per grantee kind. Pass `decorative` when
+ * the avatar is paired with a visible name in the same row.
+ *
+ * @internal
+ */
+export function UiGranteeAvatar({ kind, decorative, dataTestId }) {
+    const intl = useIntl();
+    if (decorative) {
+        return (_jsx(UiAvatar, { icon: ICON_BY_KIND[kind], accessibilityConfig: { ariaHidden: true }, dataTestId: dataTestId }));
+    }
+    const ariaLabel = intl.formatMessage(kind === "group" ? olpGranteeAvatarMessages.group : olpGranteeAvatarMessages.user);
+    return _jsx(UiAvatar, { icon: ICON_BY_KIND[kind], accessibilityConfig: { ariaLabel }, dataTestId: dataTestId });
+}

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

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type GranteeAvatarKind } from "../UiGranteeAvatar/UiGranteeAvatar.js";
+/**
+ * @internal
+ */
+export interface IUiGranteeRowProps {
+    /** Visual kind — drives the avatar silhouette. */
+    kind: GranteeAvatarKind;
+    /** Display name shown on the first line. */
+    name: string;
+    /** Optional email subline shown below the name. */
+    email?: string;
+    /** When true, an "Owner" tag is rendered between the text block and the controls slot. */
+    isOwner?: boolean;
+    /** Trailing controls slot — typically the `UiGranteeRowControls` trigger pair. */
+    controls?: ReactNode;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+/**
+ * Grantee row used by the OLP share dialog. Renders avatar + name + optional
+ * email subline + optional "Owner" tag + trailing controls slot.
+ *
+ * @internal
+ */
+export declare function UiGranteeRow({ kind, name, email, isOwner, controls, dataTestId }: IUiGranteeRowProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiGranteeRow/UiGranteeRow.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { olpGranteeRowMessages } from "../../locales.js";
+import { bem } from "../@utils/bem.js";
+import { UiGranteeAvatar } from "../UiGranteeAvatar/UiGranteeAvatar.js";
+import { UiTag } from "../UiTag/UiTag.js";
+const { b, e } = bem("gd-ui-kit-grantee-row");
+/**
+ * Grantee row used by the OLP share dialog. Renders avatar + name + optional
+ * email subline + optional "Owner" tag + trailing controls slot.
+ *
+ * @internal
+ */
+export function UiGranteeRow({ kind, name, email, isOwner, controls, dataTestId }) {
+    const intl = useIntl();
+    return (_jsxs("div", { className: b(), "data-testid": dataTestId, children: [
+            _jsx(UiGranteeAvatar, { kind: kind, decorative: true }), _jsxs("div", { className: e("text"), children: [
+                    _jsx("span", { className: e("name"), title: name, children: name }), email ? (_jsx("span", { className: e("email"), title: email, children: email })) : null] }), isOwner ? (_jsx(UiTag, { label: intl.formatMessage(olpGranteeRowMessages.ownerTag), size: "small", variant: "solid" })) : null, controls] }));
+}