@gooddata/sdk-ui-ext 10.18.0-alpha.30 → 10.18.0-alpha.32

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

@@ -41,7 +41,7 @@ import { LocalIdRef } from '@gooddata/sdk-model';
 import { ObjRef } from '@gooddata/sdk-model';
 import { OnError } from '@gooddata/sdk-ui';
 import { default as React_2 } from 'react';
-import { RefObject } from 'react';
+import { UiSkeleton } from '@gooddata/sdk-ui-kit';
 import { UseCancelablePromiseStatus } from '@gooddata/sdk-ui';
 import { WithIntlProps } from 'react-intl';
 import { WrappedComponentProps } from 'react-intl';
@@ -129,10 +129,59 @@ export declare type DataSourcePermission = "USE" | "MANAGE";
  */
 export declare type DataSourcePermissionSubject = "user" | "userGroup";
 
+/**
+ * Default implementation of the Notification component.
+ *
+ * @public
+ */
+export declare function DefaultNotification({ notification, markNotificationAsRead, onNotificationClick, }: INotificationComponentProps): React_2.JSX.Element;
+
+/**
+ * Default implementation of the NotificationSkeletonItem component.
+ *
+ * @public
+ */
+export declare const DefaultNotificationSkeletonItem: typeof UiSkeleton;
+
+/**
+ * Default implementation of the NotificationsList component.
+ *
+ * @public
+ */
+export declare function DefaultNotificationsList({ Notification, NotificationsListEmptyState, NotificationsListErrorState, NotificationSkeletonItem, activeView, status, error, activeNotifications, markNotificationAsRead, onNotificationClick, hasNextPage, loadNextPage, itemHeight, itemsGap, itemPadding, skeletonItemsCount, maxListHeight, }: INotificationsListComponentProps): React_2.JSX.Element;
+
+/**
+ * Default implementation of the NotificationsListEmptyState component.
+ *
+ * @public
+ */
+export declare function DefaultNotificationsListEmptyState({ activeView, }: INotificationsListEmptyStateComponentProps): React_2.JSX.Element;
+
+/**
+ * Default implementation of the NotificationsListErrorState component.
+ *
+ * @public
+ */
+export declare function DefaultNotificationsListErrorState({ error }: INotificationsListErrorStateComponentProps): React_2.JSX.Element;
+
+/**
+ * Default implementation of the NotificationsPanel component.
+ *
+ * @public
+ */
+export declare function DefaultNotificationsPanel({ NotificationsPanelHeader, NotificationsList, NotificationsListEmptyState, NotificationsListErrorState, Notification, NotificationSkeletonItem, activeView, changeActiveView, markNotificationAsRead, markAllNotificationsAsRead, unreadNotificationsCount, hasUnreadNotifications, activeNotifications, onNotificationClick, status, error, loadNextPage, hasNextPage, itemHeight, itemsGap, itemPadding, skeletonItemsCount, maxListHeight, }: INotificationsPanelComponentProps): React_2.JSX.Element;
+
 /**
  * @internal
  */
-export declare function DefaultOpenNotificationsPanelButton({ buttonRef, isNotificationPanelOpen, toggleNotificationPanel, hasUnreadNotifications, }: IOpenNotificationsPanelButtonComponentProps): React_2.JSX.Element;
+export declare function DefaultNotificationsPanelButton({ buttonRef, isNotificationPanelOpen, toggleNotificationPanel, hasUnreadNotifications, }: INotificationsPanelButtonComponentProps): React_2.JSX.Element;
+
+/**
+ * Default implementation of the notifications panel header.
+ *
+ * @public
+ */
+export declare function DefaultNotificationsPanelHeader({ activeView, changeActiveView, markAllNotificationsAsRead, hasUnreadNotifications, unreadNotificationsCount, }: INotificationsPanelHeaderComponentProps): React_2.JSX.Element;
 
 /**
  * @internal
@@ -540,78 +589,291 @@ export declare interface ILayoutDescriptor {
 }
 
 /**
- * @alpha
+ * Props for the Notification component.
+ *
+ * @public
  */
 export declare interface INotificationComponentProps {
+    /**
+     * Notification to display.
+     */
     notification: INotification;
-    markAsRead: (id: string) => void;
+    /**
+     * Function to mark notification as read.
+     */
+    markNotificationAsRead: (id: string) => void;
+    /**
+     * Function to handle notification click.
+     */
     onNotificationClick: (notification: INotification) => void;
 }
 
 /**
- * @alpha
+ * Props for the NotificationSkeletonItem component.
+ *
+ * @public
+ */
+export declare interface INotificationSkeletonItemComponentProps {
+    /**
+     * Height of the skeleton item in pixels.
+     */
+    itemHeight: number;
+}
+
+/**
+ * Props for the NotificationsList component.
+ *
+ * @public
  */
 export declare interface INotificationsListComponentProps {
+    /**
+     * Component to render when the notifications list is empty.
+     */
     NotificationsListEmptyState: React_2.ComponentType<INotificationsListEmptyStateComponentProps>;
+    /**
+     * Component to render when the notifications list is in error state.
+     */
     NotificationsListErrorState: React_2.ComponentType<INotificationsListErrorStateComponentProps>;
+    /**
+     * Component to render each notification.
+     */
     Notification: React_2.ComponentType<INotificationComponentProps>;
+    /**
+     * Component to render each skeleton item.
+     */
+    NotificationSkeletonItem: React_2.ComponentType<INotificationSkeletonItemComponentProps>;
+    /**
+     * Active view of the notifications list.
+     */
     activeView: INotificationsPanelView;
+    /**
+     * Status of the notifications list.
+     */
     status: UseCancelablePromiseStatus;
+    /**
+     * Error to display.
+     */
     error?: GoodDataSdkError;
-    notifications?: INotification[];
+    /**
+     * Loaded notifications relevant to the active view.
+     */
+    activeNotifications?: INotification[];
+    /**
+     * Callback function to mark notification as read.
+     */
     markNotificationAsRead: (notificationId: string) => Promise<void>;
+    /**
+     * Callback function to handle notification click.
+     */
     onNotificationClick: (notification: INotification) => void;
+    /**
+     * Whether there is a next page of notifications.
+     */
     hasNextPage: boolean;
+    /**
+     * Load next page of notifications.
+     */
     loadNextPage: () => void;
+    /**
+     * Height of the notification item in pixels.
+     */
+    itemHeight: number;
+    /**
+     * Gap between notification items in pixels.
+     */
+    itemsGap: number;
+    /**
+     * Padding of the notification item (from left/right) in pixels.
+     */
+    itemPadding: number;
+    /**
+     * Number of skeleton items to render when loading notifications.
+     */
+    skeletonItemsCount: number;
+    /**
+     * Maximum height of the notifications list in pixels.
+     */
+    maxListHeight?: number;
 }
 
 /**
- * @alpha
+ * Props for the NotificationsListEmptyState component.
+ *
+ * @public
  */
 export declare interface INotificationsListEmptyStateComponentProps {
+    /**
+     * Active view of the notifications list.
+     */
     activeView: INotificationsPanelView;
 }
 
 /**
- * @alpha
+ * Props for the NotificationsListErrorState component.
+ *
+ * @public
  */
 export declare interface INotificationsListErrorStateComponentProps {
+    /**
+     * Error to display.
+     */
     error?: GoodDataSdkError;
 }
 
 /**
- * @alpha
+ * OpenNotificationsPanelButton component props.
+ *
+ * @public
+ */
+export declare interface INotificationsPanelButtonComponentProps {
+    /**
+     * Ref to the button element - is required for proper alignment of the notification panel.
+     */
+    buttonRef: React_2.RefObject<HTMLButtonElement>;
+    /**
+     * Opens the notification panel.
+     */
+    openNotificationPanel: () => void;
+    /**
+     * Closes the notification panel.
+     */
+    closeNotificationPanel: () => void;
+    /**
+     * Toggles the notification panel.
+     */
+    toggleNotificationPanel: () => void;
+    /**
+     * Indicates whether the notification panel is open.
+     */
+    isNotificationPanelOpen: boolean;
+    /**
+     * Indicates whether there are unread notifications.
+     */
+    hasUnreadNotifications: boolean;
+}
+
+/**
+ * NotificationsPanel component props.
+ *
+ * @public
  */
 export declare interface INotificationsPanelComponentProps {
+    /**
+     * Custom notifications panel header component.
+     */
     NotificationsPanelHeader: React_2.ComponentType<INotificationsPanelHeaderComponentProps>;
+    /**
+     * Custom notifications list component.
+     */
     NotificationsList: React_2.ComponentType<INotificationsListComponentProps>;
+    /**
+     * Custom notifications list empty state component.
+     */
     NotificationsListEmptyState: React_2.ComponentType<INotificationsListEmptyStateComponentProps>;
+    /**
+     * Custom notifications list error state component.
+     */
     NotificationsListErrorState: React_2.ComponentType<INotificationsListErrorStateComponentProps>;
+    /**
+     * Custom notification component.
+     */
     Notification: React_2.ComponentType<INotificationComponentProps>;
+    /**
+     * Custom notification skeleton item component.
+     */
+    NotificationSkeletonItem: React_2.ComponentType<INotificationSkeletonItemComponentProps>;
+    /**
+     * The callback to toggle the notifications panel.
+     */
     toggleNotificationsPanel: () => void;
+    /**
+     * The callback to open the notifications panel.
+     */
     openNotificationsPanel: () => void;
+    /**
+     * The callback to close the notifications panel.
+     */
     closeNotificationsPanel: () => void;
+    /**
+     * The currently active view of the notifications panel.
+     */
     activeView: INotificationsPanelView;
+    /**
+     * The callback to change the active view of the notifications panel.
+     */
     changeActiveView: (view: INotificationsPanelView) => void;
+    /**
+     * The callback to mark a notification as read.
+     */
     markNotificationAsRead: (notificationId: string) => Promise<void>;
+    /**
+     * The callback to mark all notifications as read.
+     */
     markAllNotificationsAsRead: () => Promise<void>;
+    /**
+     * The number of unread notifications.
+     */
     unreadNotificationsCount: number;
+    /**
+     * Indicates if there are unread notifications.
+     */
+    hasUnreadNotifications: boolean;
+    /**
+     * Loaded notifications, relevant for the currently active view.
+     */
     activeNotifications: INotification[];
+    /**
+     * The callback to handle a notification click.
+     */
     onNotificationClick: (notification: INotification) => void;
+    /**
+     * The status of the notifications loading.
+     */
     status: UseCancelablePromiseStatus;
+    /**
+     * The error that occurred while loading notifications.
+     */
     error?: GoodDataSdkError;
+    /**
+     * The callback to load the next page of notifications.
+     */
     loadNextPage: () => void;
+    /**
+     * Indicates if there is a next page of notifications.
+     */
     hasNextPage: boolean;
+    /**
+     * The height of the notification item in pixels.
+     */
+    itemHeight: number;
+    /**
+     * Gap between notification items in pixels.
+     */
+    itemsGap: number;
+    /**
+     * Padding of the notification item (from left/right) in pixels.
+     */
+    itemPadding: number;
+    /**
+     * Number of skeleton items to render when loading notifications.
+     */
+    skeletonItemsCount: number;
+    /**
+     * Maximum height of the notifications list in pixels.
+     */
+    maxListHeight?: number;
 }
 
 /**
- * @alpha
+ * @public
  */
 export declare interface INotificationsPanelCustomComponentsProps {
     /**
      * Custom open notifications panel button component.
+     *
+     * - Required if renderInline is not enabled.
      */
-    OpenNotificationsPanelButton: React_2.ComponentType<IOpenNotificationsPanelButtonComponentProps>;
+    NotificationsPanelButton?: React_2.ComponentType<INotificationsPanelButtonComponentProps>;
     /**
      * Custom notifications panel component.
      */
@@ -636,10 +898,16 @@ export declare interface INotificationsPanelCustomComponentsProps {
      * Custom notification component.
      */
     Notification?: React_2.ComponentType<INotificationComponentProps>;
+    /**
+     * Custom notification skeleton item component.
+     */
+    NotificationSkeletonItem?: React_2.ComponentType<INotificationSkeletonItemComponentProps>;
 }
 
 /**
- * @alpha
+ * Props for the NotificationsPanelHeader component.
+ *
+ * @public
  */
 export declare interface INotificationsPanelHeaderComponentProps {
     /**
@@ -661,43 +929,98 @@ export declare interface INotificationsPanelHeaderComponentProps {
     /**
      * The callback to mark all notifications as read.
      */
-    markAllAsRead: () => void;
+    markAllNotificationsAsRead: () => void;
 }
 
 /**
- * @alpha
+ * @public
  */
 export declare interface INotificationsPanelProps extends INotificationsPanelCustomComponentsProps {
+    /**
+     * Locale to use.
+     */
+    locale?: ILocale;
     /**
      * Backend to use.
+     *
+     * - If not defined, the backend from the BackendProvider context will be used.
      */
     backend?: IAnalyticalBackend;
     /**
      * Workspace ID to use.
+     *
+     * - If not defined, the workspace ID from the WorkspaceProvider context will be used.
+     * - If workspace is not defined and there is no WorkspaceProvider, notifications will be loaded from all workspaces.
      */
     workspace?: string;
+    /**
+     * Enable inline rendering of the notifications panel
+     *
+     * - Default: false
+     * - If enabled, NotificationsPanelButton won't be rendered, and NotificationsPanel won't be rendered inside modal
+     * - This is useful when you want to render notifications panel in a custom modal.
+     */
+    renderInline?: boolean;
     /**
      * Refresh interval in milliseconds.
-     * Default is 10 minutes.
-     * If set to 0, notifications will not be refreshed automatically.
+     *
+     * - Default: 600000 (10 minutes)
+     * - If set to 0, notifications won't be refreshed automatically.
      */
     refreshInterval?: number;
     /**
-     * Locale to use.
+     * Number of notifications to load per page.
+     *
+     * - Default: 50
      */
-    locale?: ILocale;
+    itemsPerPage?: number;
     /**
-     * Render notifications panel inline (without button + clicking on it).
+     * Number of skeleton items to render when loading notifications.
+     *
+     * - Default: 5
      */
-    renderInline?: boolean;
+    skeletonItemsCount?: number;
     /**
-     * Handler for notification click.
+     * Height of the item in notifications list in pixels.
+     *
+     * - Default: 52
      */
-    onNotificationClick: (notification: INotification) => void;
+    itemHeight?: number;
+    /**
+     * Optionally override max width of the notifications panel.
+     *
+     * - Does not have effect when renderInline is true - inline rendering always fills the parent container.
+     */
+    maxWidth?: number | string;
+    /**
+     * Maximum height of the notifications list in pixels.
+     *
+     * - Default: 527
+     * - Does not have effect when renderInline is true - inline rendering always fills the parent container.
+     */
+    maxListHeight?: number;
+    /**
+     * Gap between notification items in the list in pixels.
+     *
+     * - Default: 10
+     */
+    itemsGap?: number;
+    /**
+     * Padding of the notification item (from left and right) in pixels.
+     *
+     * - Default: 15
+     */
+    itemPadding?: number;
+    /**
+     * Callback for notification click.
+     */
+    onNotificationClick?: (notification: INotification) => void;
 }
 
 /**
- * @alpha
+ * View mode of the notifications panel.
+ *
+ * @public
  */
 export declare type INotificationsPanelView = "all" | "unread";
 
@@ -739,36 +1062,6 @@ export declare class InsightView extends React_2.Component<IInsightViewProps> {
     render(): React_2.JSX.Element;
 }
 
-/**
- * @alpha
- */
-export declare interface IOpenNotificationsPanelButtonComponentProps {
-    /**
-     * Ref to the button element - is required for proper alignment of the notification panel.
-     */
-    buttonRef: RefObject<HTMLElement | null>;
-    /**
-     * Opens the notification panel.
-     */
-    openNotificationPanel: () => void;
-    /**
-     * Closes the notification panel.
-     */
-    closeNotificationPanel: () => void;
-    /**
-     * Toggles the notification panel.
-     */
-    toggleNotificationPanel: () => void;
-    /**
-     * Indicates whether the notification panel is open.
-     */
-    isNotificationPanelOpen: boolean;
-    /**
-     * Indicates whether there are unread notifications.
-     */
-    hasUnreadNotifications: boolean;
-}
-
 /**
  * Type-guard testing whether the provided object is an instance of {@link IDrillDownDefinition}.
  * @beta
@@ -821,6 +1114,33 @@ export declare type ISizeInfoDefault = ISizeInfo & {
     default: number;
 };
 
+/**
+ * Hook for fetching all and unread notifications.
+ *
+ * @public
+ */
+export declare interface IUseNotificationsProps {
+    /**
+     * Workspace to fetch notifications from.
+     *
+     * - If not provided, the workspace from WorkspaceProvider is used.
+     * - If not provided and there is no WorkspaceProvider, notifications will be loaded from all workspaces.
+     */
+    workspace?: string;
+    /**
+     * Backend to fetch notifications from.
+     */
+    backend?: IAnalyticalBackend;
+    /**
+     * Refresh interval in milliseconds.
+     */
+    refreshInterval: number;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage: number;
+}
+
 /**
  * @internal
  */
@@ -922,7 +1242,7 @@ export declare type LayoutType = "fluid";
 export declare const MIN_VISUALIZATION_WIDTH = 2;
 
 /**
- * @alpha
+ * @public
  */
 export declare function NotificationsPanel(props: INotificationsPanelProps): React_2.JSX.Element;
 
@@ -989,6 +1309,27 @@ export declare type TelemetryEvent = "multiple-users-deleted" | "multiple-groups
  */
 export declare type TrackEventCallback = (event: TelemetryEvent) => void;
 
+/**
+ * @public
+ */
+export declare function useNotifications({ workspace, refreshInterval, itemsPerPage }: IUseNotificationsProps): {
+    notifications: INotification[];
+    notificationsStatus: "error" | "loading" | "pending" | "success";
+    notificationsError: GoodDataSdkError;
+    notificationsHasNextPage: boolean;
+    notificationsLoadNextPage: () => void;
+    notificationsReset: () => void;
+    unreadNotifications: INotification[];
+    unreadNotificationsStatus: "error" | "loading" | "pending" | "success";
+    unreadNotificationsError: GoodDataSdkError;
+    unreadNotificationsHasNextPage: boolean;
+    unreadNotificationsLoadNextPage: () => void;
+    unreadNotificationsReset: () => void;
+    unreadNotificationsCount: number;
+    markNotificationAsRead: (notificationId: string) => Promise<void>;
+    markAllNotificationsAsRead: () => Promise<void>;
+};
+
 /**
  * @internal
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-ext",
-  "version": "10.18.0-alpha.30",
+  "version": "10.18.0-alpha.32",
   "description": "GoodData.UI SDK - Extensions",
   "repository": {
     "type": "git",
@@ -35,7 +35,6 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@tanstack/react-virtual": "^3.11.1",
     "classnames": "^2.3.1",
     "codemirror": "^5.54.0",
     "date-fns": "^2.22.1",
@@ -48,6 +47,7 @@
     "lru-cache": "^10.0.1",
     "react-intl": "^6.4.1",
     "react-lines-ellipsis": "^0.15.0",
+    "react-loading-skeleton": "^3.4.0",
     "react-measure": "^2.5.2",
     "react-select": "^5.7.3",
     "react-select-async-paginate": "^0.7.3",
@@ -55,19 +55,19 @@
     "ts-invariant": "^0.7.5",
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
-    "@gooddata/sdk-backend-base": "10.18.0-alpha.30",
-    "@gooddata/sdk-backend-spi": "10.18.0-alpha.30",
-    "@gooddata/sdk-embedding": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui": "10.18.0-alpha.30",
-    "@gooddata/sdk-model": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-charts": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-filters": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-geo": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-kit": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-pivot": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-vis-commons": "10.18.0-alpha.30",
-    "@gooddata/sdk-ui-theme-provider": "10.18.0-alpha.30",
-    "@gooddata/util": "10.18.0-alpha.30"
+    "@gooddata/sdk-backend-base": "10.18.0-alpha.32",
+    "@gooddata/sdk-backend-spi": "10.18.0-alpha.32",
+    "@gooddata/sdk-embedding": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui": "10.18.0-alpha.32",
+    "@gooddata/sdk-model": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-charts": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-filters": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-geo": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-kit": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-pivot": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-theme-provider": "10.18.0-alpha.32",
+    "@gooddata/sdk-ui-vis-commons": "10.18.0-alpha.32",
+    "@gooddata/util": "10.18.0-alpha.32"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -124,9 +124,9 @@
     "@types/json-stable-stringify": "^1.0.32",
     "@types/codemirror": "^5.60.7",
     "@types/js-yaml": "^4.0.9",
-    "@gooddata/i18n-toolkit": "10.18.0-alpha.30",
-    "@gooddata/sdk-backend-mockingbird": "10.18.0-alpha.30",
-    "@gooddata/reference-workspace": "10.18.0-alpha.30"
+    "@gooddata/i18n-toolkit": "10.18.0-alpha.32",
+    "@gooddata/sdk-backend-mockingbird": "10.18.0-alpha.32",
+    "@gooddata/reference-workspace": "10.18.0-alpha.32"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage *.log styles/css tsconfig.tsbuildinfo",

package/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanel.scss

@@ -1,7 +1,10 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 
 .gd-ui-ext-notifications-panel {
     font-family: var(--gd-font-family);
+    font-size: 12px;
+    line-height: 14px;
+
     background-color: var(--gd-palette-complementary-0);
 
     box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
@@ -16,8 +19,3 @@
 
     overflow: hidden;
 }
-
-.gd-ui-ext-notifications-panel-overlay {
-    width: 370px;
-    max-height: 560px;
-}