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

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

@@ -83,6 +83,7 @@ import { OffsetOptions } from '@floating-ui/react';
 import { OnError } from '@gooddata/sdk-ui';
 import { OnLoadingChanged } from '@gooddata/sdk-ui';
 import { Placement } from '@floating-ui/react';
+import { PrimitiveType } from 'react-intl';
 import { PropsWithChildren } from 'react';
 import { PropsWithoutRef } from 'react';
 import { Provider } from 'react';
@@ -1054,6 +1055,7 @@ export declare class FlexDimensions extends Component<IFlexDimensionsProps, IFle
     };
     private wrapperRef;
     private readonly throttledUpdateSize;
+    private readonly resizeObserver;
     constructor(props: IFlexDimensionsProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -8416,6 +8418,105 @@ export declare interface IUiTextInputProps {
     dataTestId?: string;
 }
 
+/**
+ * A toast as the container renders it. Internal — not part of the public API.
+ *
+ * @internal
+ */
+export declare interface IUiToast {
+    id: string;
+    kind: UiToastKind;
+    /** Resolved display text (already passed through `formatMessage` if needed). */
+    text: string;
+    sticky: boolean;
+    durationMs: number;
+    action?: IUiToastAction;
+    accessibilityConfig?: IUiToastAccessibilityConfig;
+    onDismiss?: () => void;
+}
+
+/**
+ * Optional per-toast accessibility overrides. The container is a polite live
+ * region by default; `error` and `warning` toasts upgrade to assertive
+ * `role="alert"` unless overridden here.
+ *
+ * @internal
+ */
+export declare interface IUiToastAccessibilityConfig extends Pick<IAccessibilityConfigBase, "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "role"> {
+    ariaLive?: "off" | "polite" | "assertive";
+    /**
+     * Accessible name for the close button. Defaults to the localized
+     * "Close" — pass a context-specific string (e.g. "Dismiss the
+     * 'access updated' notification") when a generic label isn't
+     * descriptive enough for screen-reader users.
+     */
+    closeButtonLabel?: string;
+}
+
+/**
+ * Optional inline action rendered next to the toast text (e.g. "Undo").
+ *
+ * @internal
+ */
+export declare interface IUiToastAction {
+    /** Visible label on the action button. */
+    label: string;
+    /** Fired when the action is activated. */
+    onClick: () => void;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiToastItemProps {
+    toast: IUiToast;
+    /** Fired when the user dismisses (close X or action click). */
+    onClose: (id: string) => void;
+}
+
+/**
+ * Options accepted by `useUiToast`'s `add*` methods (and the generic `add`).
+ *
+ * @internal
+ */
+export declare interface IUiToastOptions {
+    /**
+     * Caller-supplied id. When omitted a stable id is generated. Use to
+     * dedupe or to remove a specific toast programmatically.
+     */
+    id?: string;
+    /**
+     * Skip auto-dismiss — the toast stays until the user closes it or
+     * `remove(id)` is called. Defaults to `false`.
+     */
+    sticky?: boolean;
+    /**
+     * Auto-dismiss delay in milliseconds. Ignored when `sticky` is true.
+     * Defaults to 4000 ms.
+     */
+    durationMs?: number;
+    /** Optional inline action rendered next to the message. */
+    action?: IUiToastAction;
+    /**
+     * Optional intl interpolation values used when `message` is a string —
+     * exposed primarily so the kind-specific `add*` helpers can forward
+     * intl values supplied alongside a `MessageDescriptor`.
+     */
+    values?: UiToastIntlValues;
+    /** Fires once when the toast is dismissed (auto or user). */
+    onDismiss?: () => void;
+    /** Per-toast accessibility overrides. */
+    accessibilityConfig?: IUiToastAccessibilityConfig;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiToastsContainerProps {
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -8699,6 +8800,25 @@ export declare interface IUseToastMessageType {
     removeAllMessages: () => void;
 }
 
+/**
+ * Public hook surface. Each `add*` returns the toast id, which callers can
+ * pass to `remove` to dismiss it programmatically.
+ *
+ * @internal
+ */
+export declare interface IUseUiToastResult {
+    addSuccess: (message: UiToastMessage, options?: IUiToastOptions) => string;
+    addInfo: (message: UiToastMessage, options?: IUiToastOptions) => string;
+    addWarning: (message: UiToastMessage, options?: IUiToastOptions) => string;
+    addError: (message: UiToastMessage, options?: IUiToastOptions) => string;
+    /** Generic add — provide your own `kind`. */
+    add: (kind: UiToastKind, message: UiToastMessage, options?: IUiToastOptions) => string;
+    /** Dismiss a single toast by id. No-op if no toast with that id is showing. */
+    remove: (id: string) => void;
+    /** Dismiss all currently showing toasts. */
+    removeAll: () => void;
+}
+
 /**
  * @internal
  */
@@ -10480,6 +10600,70 @@ export declare function UiTags({ tags, tagOptions, addLabel, nameLabel, cancelLa
  */
 export declare function UiTextInput({ type, value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled, autoFocus, dataTestId }: IUiTextInputProps): JSX.Element;
 
+/**
+ * Interpolation values accepted by `react-intl`'s `formatMessage`, **narrowed
+ * to plain primitives** for toast use. Toast text is plain text by contract,
+ * so React-element interpolation values (`<b>name</b>`) are intentionally
+ * disallowed — `formatMessage` would otherwise return `ReactNode[]` which our
+ * downstream `text: string` would have to stringify, producing
+ * `"[object Object]"` for any element. Reject at compile time instead.
+ *
+ * @internal
+ */
+export declare type UiToastIntlValues = Record<string, PrimitiveType>;
+
+/**
+ * Presentational single-toast component. Most consumers use
+ * `UiToastsContainer` (which reads queued toasts from the provider), but
+ * this can be rendered directly for static demos or one-off composition.
+ *
+ * @internal
+ */
+export declare function UiToastItem({ toast, onClose }: IUiToastItemProps): ReactNode;
+
+/**
+ * Severity / visual kind of a toast.
+ *
+ * @internal
+ */
+export declare type UiToastKind = "success" | "info" | "warning" | "error";
+
+/**
+ * Toast text content. Either a plain string or an `intl` message descriptor
+ * with optional interpolation values.
+ *
+ * @internal
+ */
+export declare type UiToastMessage = string | {
+    descriptor: MessageDescriptor;
+    values?: UiToastIntlValues;
+};
+
+/**
+ * Mount once near the root of your app. Provides the toast queue + dismiss
+ * timers consumed by `useUiToast` and `UiToastsContainer`. Nesting is safe
+ * — only the outermost `<UiToastsContainer>` renders any visible toasts.
+ *
+ * Known limitation: if a root provider with in-flight toasts is **re-parented**
+ * under a new outer provider mid-flight (e.g. the app rearranges its tree),
+ * the inner instance's queue and timers don't migrate to the parent. Mount
+ * the provider once at the stable app root to avoid this.
+ *
+ * @internal
+ */
+export declare function UiToastProvider({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+
+/**
+ * Renders the list of toasts queued by `useUiToast`. Mount once near the app
+ * root, inside a `UiToastProvider`. Nested containers render nothing — only
+ * the outermost one is visible, preserving the topmost-only behaviour.
+ *
+ * @internal
+ */
+export declare function UiToastsContainer({ dataTestId }: IUiToastsContainerProps): ReactNode;
+
 /**
  * @internal
  */
@@ -10951,6 +11135,16 @@ export declare const useUiTabOutHandlerConnectors: <T extends HTMLElement = HTML
  */
 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>;
 
+/**
+ * Consumer hook. Resolves the toast message via the **caller's**
+ * `useIntl()` so a consumer rendered under a nested `IntlProvider` formats
+ * `MessageDescriptor` content with that subtree's locale, not the
+ * provider's. Throws when called outside a `UiToastProvider`.
+ *
+ * @internal
+ */
+export declare function useUiToast(): IUseUiToastResult;
+
 /**
  * @internal
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.40.0-alpha.3",
+  "version": "11.40.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.40.0-alpha.3",
-    "@gooddata/sdk-ui": "11.40.0-alpha.3",
-    "@gooddata/sdk-model": "11.40.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.3",
-    "@gooddata/util": "11.40.0-alpha.3"
+    "@gooddata/sdk-backend-spi": "11.40.0-alpha.5",
+    "@gooddata/sdk-model": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui": "11.40.0-alpha.5",
+    "@gooddata/util": "11.40.0-alpha.5",
+    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.5"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -116,9 +116,9 @@
     "happy-dom": "18.0.1",
     "kefir": "^3.8.8",
     "npm-run-all": "^4.1.5",
-    "oxfmt": "0.45.0",
-    "oxlint": "^1.43.0",
-    "oxlint-tsgolint": "0.11.4",
+    "oxfmt": "0.52.0",
+    "oxlint": "1.51.0",
+    "oxlint-tsgolint": "0.15.0",
     "raf": "3.4.1",
     "react": "19.1.1",
     "react-dom": "19.1.1",
@@ -126,13 +126,13 @@
     "stylelint": "^16.26.1",
     "svgo": "^2.8.0",
     "typescript": "5.9.3",
-    "vitest": "4.1.0",
+    "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.40.0-alpha.3",
-    "@gooddata/oxlint-config": "11.40.0-alpha.3",
-    "@gooddata/reference-workspace": "11.40.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.3",
-    "@gooddata/stylelint-config": "11.40.0-alpha.3"
+    "@gooddata/oxlint-config": "11.40.0-alpha.5",
+    "@gooddata/eslint-config": "11.40.0-alpha.5",
+    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.5",
+    "@gooddata/reference-workspace": "11.40.0-alpha.5",
+    "@gooddata/stylelint-config": "11.40.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiToast/UiToast.scss

@@ -0,0 +1,114 @@
+// (C) 2026 GoodData Corporation
+
+// `UiToast` reuses the existing `--gd-toastMessage-{variant}-*` theme variables
+// (registered in sdk-ui-theme-provider, defaulted in defaultTheme.scss) so it
+// matches the look of the legacy `<Message>` overlay and any theme overrides
+// without introducing new theme tokens. Each kind maps to one of the four
+// theme variants — note that `info` maps to the legacy `information` set.
+
+@mixin kind-vars($variant) {
+    --local-text-color: var(--gd-toastMessage-#{$variant}-textColor);
+    --local-background-color: var(--gd-toastMessage-#{$variant}-backgroundColor);
+    --local-border-color: var(--gd-toastMessage-#{$variant}-borderColor);
+    --local-border-width: var(--gd-toastMessage-#{$variant}-borderWidth);
+    --local-border-radius: var(--gd-toastMessage-#{$variant}-borderRadius);
+    --local-close-color: var(--gd-toastMessage-#{$variant}-closeButtonColor);
+    --local-link-color: var(--gd-toastMessage-#{$variant}-linkButtonColor);
+}
+
+.gd-ui-kit-toast {
+    position: fixed;
+    left: 50%;
+    top: var(--gd-spacing-20px);
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--gd-spacing-10px);
+    z-index: 9000;
+    pointer-events: none;
+    max-width: 620px;
+    width: 90%;
+
+    &__item {
+        pointer-events: auto;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--gd-spacing-10px);
+        padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+        max-width: 100%;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: left;
+        color: var(--local-text-color);
+        background-color: var(--local-background-color);
+        border-style: solid;
+        border-color: var(--local-border-color);
+        border-width: var(--local-border-width);
+        border-radius: var(--local-border-radius);
+        box-shadow: 0 4px 4px 0 var(--gd-shadow-color);
+
+        &--kind-success {
+            @include kind-vars(success);
+        }
+
+        &--kind-info {
+            @include kind-vars(information);
+        }
+
+        &--kind-warning {
+            @include kind-vars(warning);
+        }
+
+        &--kind-error {
+            @include kind-vars(error);
+        }
+    }
+
+    &__body {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    &__action {
+        flex-shrink: 0;
+        border: none;
+        background: transparent;
+        padding: 0;
+        font: inherit;
+        color: var(--local-link-color);
+        cursor: pointer;
+        text-decoration: underline;
+        opacity: 0.85;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--gd-palette-primary-focus);
+            outline-offset: 2px;
+        }
+    }
+
+    &__close {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        color: var(--local-close-color);
+        opacity: 0.85;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--gd-palette-primary-focus);
+            outline-offset: 2px;
+        }
+    }
+}

package/src/@ui/index.scss

@@ -46,6 +46,7 @@
 @use "./UiLabelsPicker/UiLabelsPicker.scss";
 @use "./UiPermissionMenu/UiPermissionMenu.scss";
 @use "./UiGranteeRowControls/UiGranteeRowControls.scss";
+@use "./UiToast/UiToast.scss";
 
 // `--gd-font-family` is a `:root` variable only; there is no global `body` font
 // declaration. Apply it once to every kit root so standalone components don't

package/styles/css/main.css

@@ -3824,6 +3824,115 @@
   flex-shrink: 0;
 }
 
+.gd-ui-kit-toast {
+  position: fixed;
+  left: 50%;
+  top: var(--gd-spacing-20px);
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  z-index: 9000;
+  pointer-events: none;
+  max-width: 620px;
+  width: 90%;
+}
+.gd-ui-kit-toast__item {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  color: var(--local-text-color);
+  background-color: var(--local-background-color);
+  border-style: solid;
+  border-color: var(--local-border-color);
+  border-width: var(--local-border-width);
+  border-radius: var(--local-border-radius);
+  box-shadow: 0 4px 4px 0 var(--gd-shadow-color);
+}
+.gd-ui-kit-toast__item--kind-success {
+  --local-text-color: var(--gd-toastMessage-success-textColor);
+  --local-background-color: var(--gd-toastMessage-success-backgroundColor);
+  --local-border-color: var(--gd-toastMessage-success-borderColor);
+  --local-border-width: var(--gd-toastMessage-success-borderWidth);
+  --local-border-radius: var(--gd-toastMessage-success-borderRadius);
+  --local-close-color: var(--gd-toastMessage-success-closeButtonColor);
+  --local-link-color: var(--gd-toastMessage-success-linkButtonColor);
+}
+.gd-ui-kit-toast__item--kind-info {
+  --local-text-color: var(--gd-toastMessage-information-textColor);
+  --local-background-color: var(--gd-toastMessage-information-backgroundColor);
+  --local-border-color: var(--gd-toastMessage-information-borderColor);
+  --local-border-width: var(--gd-toastMessage-information-borderWidth);
+  --local-border-radius: var(--gd-toastMessage-information-borderRadius);
+  --local-close-color: var(--gd-toastMessage-information-closeButtonColor);
+  --local-link-color: var(--gd-toastMessage-information-linkButtonColor);
+}
+.gd-ui-kit-toast__item--kind-warning {
+  --local-text-color: var(--gd-toastMessage-warning-textColor);
+  --local-background-color: var(--gd-toastMessage-warning-backgroundColor);
+  --local-border-color: var(--gd-toastMessage-warning-borderColor);
+  --local-border-width: var(--gd-toastMessage-warning-borderWidth);
+  --local-border-radius: var(--gd-toastMessage-warning-borderRadius);
+  --local-close-color: var(--gd-toastMessage-warning-closeButtonColor);
+  --local-link-color: var(--gd-toastMessage-warning-linkButtonColor);
+}
+.gd-ui-kit-toast__item--kind-error {
+  --local-text-color: var(--gd-toastMessage-error-textColor);
+  --local-background-color: var(--gd-toastMessage-error-backgroundColor);
+  --local-border-color: var(--gd-toastMessage-error-borderColor);
+  --local-border-width: var(--gd-toastMessage-error-borderWidth);
+  --local-border-radius: var(--gd-toastMessage-error-borderRadius);
+  --local-close-color: var(--gd-toastMessage-error-closeButtonColor);
+  --local-link-color: var(--gd-toastMessage-error-linkButtonColor);
+}
+.gd-ui-kit-toast__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.gd-ui-kit-toast__action {
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  color: var(--local-link-color);
+  cursor: pointer;
+  text-decoration: underline;
+  opacity: 0.85;
+}
+.gd-ui-kit-toast__action:hover {
+  opacity: 1;
+}
+.gd-ui-kit-toast__action:focus-visible {
+  outline: 2px solid var(--gd-palette-primary-focus);
+  outline-offset: 2px;
+}
+.gd-ui-kit-toast__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--local-close-color);
+  opacity: 0.85;
+}
+.gd-ui-kit-toast__close:hover {
+  opacity: 1;
+}
+.gd-ui-kit-toast__close:focus-visible {
+  outline: 2px solid var(--gd-palette-primary-focus);
+  outline-offset: 2px;
+}
+
 [class^=gd-ui-kit-],
 [class*=" gd-ui-kit-"] {
   font-family: var(--gd-font-family);