@sisense/sdk-ui 2.12.0 → 2.14.0

package/dist/packages/sdk-ui/src/chart-options-processor/series-labels.d.ts

@@ -1,19 +1,19 @@
-import { SeriesLabels } from '..';
-export declare const prepareDataLabelsOptions: (seriesLabels?: SeriesLabels) => {
-    animation?: {
-        defer: number;
-    } | undefined;
-    y?: number | undefined;
-    x?: number | undefined;
-    padding?: number | undefined;
-    borderWidth?: number | undefined;
-    borderRadius?: number | undefined;
-    borderColor?: string | undefined;
-    backgroundColor?: string | undefined;
-    style?: import("..").SeriesLabelsTextStyle | undefined;
-    verticalAlign?: "top" | "middle" | "bottom" | undefined;
-    align?: "center" | "left" | "right" | undefined;
-    inside?: boolean | undefined;
-    rotation?: number | undefined;
+import { HighchartsGradientColorObject } from '../utils/gradient';
+import { SeriesLabels, TextStyle } from '..';
+type DataLabelsOptions = {
     enabled: boolean;
+    rotation?: number;
+    inside?: boolean;
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    style?: TextStyle;
+    backgroundColor?: string | HighchartsGradientColorObject;
+    borderColor?: string | HighchartsGradientColorObject;
+    borderRadius?: number;
+    borderWidth?: number;
+    padding?: number;
+    x?: number;
+    y?: number;
 };
+export declare const prepareDataLabelsOptions: (seriesLabels?: SeriesLabels) => DataLabelsOptions;
+export {};

package/dist/packages/sdk-ui/src/chart-options-processor/stack-labels.d.ts

@@ -1,25 +1,21 @@
-import { TotalLabels } from '../types';
-export declare const prepareStackLabels: (totalLabels: TotalLabels) => {
-    textAlign?: "center" | "left" | "right" | undefined;
-    style?: {
-        color?: string | undefined;
-        fontFamily?: string | undefined;
-        fontSize?: string | undefined;
-        fontWeight?: string | undefined;
-        fontStyle?: string | undefined;
-        textOutline?: string | undefined;
-    } | undefined;
-    y?: number | undefined;
-    x?: number | undefined;
-    borderWidth?: number | undefined;
-    borderRadius?: number | undefined;
-    borderColor?: string | undefined;
-    backgroundColor?: string | undefined;
+import { TextStyle, TotalLabels } from '../types';
+import { HighchartsGradientColorObject } from '../utils/gradient';
+type StackLabelsOptions = {
+    enabled: boolean;
+    rotation?: number;
+    align?: 'left' | 'center' | 'right';
+    textAlign?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
     animation?: {
         defer: number;
-    } | undefined;
-    verticalAlign?: "top" | "middle" | "bottom" | undefined;
-    align?: "center" | "left" | "right" | undefined;
-    rotation?: number | undefined;
-    enabled: boolean;
+    };
+    backgroundColor?: string | HighchartsGradientColorObject;
+    borderColor?: string | HighchartsGradientColorObject;
+    borderRadius?: number;
+    borderWidth?: number;
+    style?: TextStyle;
+    x?: number;
+    y?: number;
 };
+export declare const prepareStackLabels: (totalLabels: TotalLabels) => StackLabelsOptions;
+export {};

package/dist/packages/sdk-ui/src/chart-options-processor/style-to-design-options-translator/translate-to-highcharts-options.d.ts

@@ -1,10 +1,12 @@
 import { CartesianChartDataOptionsInternal } from '../../chart-data-options/types';
-import { AreaStyleOptions, BaseAxisStyleOptions, BaseStyleOptions, BoxplotStyleOptions, ChartStyleOptions, ChartType, FunnelStyleOptions, LineStyleOptions, PieStyleOptions, PolarStyleOptions, ScattermapStyleOptions, ScatterStyleOptions, StackableStyleOptions, SunburstStyleOptions, TreemapStyleOptions } from '../../types';
+import { AreaStyleOptions, BaseAxisStyleOptions, BaseStyleOptions, BoxplotStyleOptions, ChartStyleOptions, ChartType, FunnelStyleOptions, LineStyleOptions, PieStyleOptions, PolarStyleOptions, ScattermapStyleOptions, ScatterStyleOptions, SeriesLabels, StackableStyleOptions, SunburstStyleOptions, TreemapStyleOptions } from '../../types';
 import { AreaChartDesignOptions, BaseDesignOptionsType, BoxplotChartDesignOptions, FunnelChartDesignOptions, LineChartDesignOptions, PieChartDesignOptions, PolarChartDesignOptions, ScatterChartDesignOptions, ScattermapChartDesignOptions, StackableChartDesignOptions, SunburstChartDesignOptions, TreemapChartDesignOptions } from '../translations/design-options';
 import { StackType } from '../translations/translations-to-highcharts';
 import { CartesianChartType, SeriesDesignOptions } from '../translations/types';
 export declare const DefaultStackType: StackType;
-export declare const getCartesianChartStyle: (styleOptions: BaseStyleOptions & BaseAxisStyleOptions, shouldHaveY2Axis: boolean) => BaseDesignOptionsType;
+export declare const getCartesianChartStyle: (styleOptions: BaseStyleOptions & BaseAxisStyleOptions & {
+    seriesLabels?: SeriesLabels;
+}, shouldHaveY2Axis: boolean) => BaseDesignOptionsType;
 export declare const getStackableChartDesignOptions: (styleOptions: AreaStyleOptions | StackableStyleOptions, dataOptions: CartesianChartDataOptionsInternal, hasY2Axis: boolean, chartType: CartesianChartType) => StackableChartDesignOptions;
 export declare const getSeriesChartDesignOptions: (chartType: ChartType, styleOptions: ChartStyleOptions) => SeriesDesignOptions;
 export declare const getLineChartDesignOptions: (styleOptions: LineStyleOptions, dataOptions: CartesianChartDataOptionsInternal, hasY2Axis: boolean) => LineChartDesignOptions;

package/dist/packages/sdk-ui/src/chart-options-processor/translations/axis-section.d.ts

@@ -1,4 +1,5 @@
 import { CategoricalXValues } from '../../chart-data/types';
+import { HighchartsGradientColorObject } from '../../utils/gradient';
 import { TextStyle } from './types';
 export type Axis = {
     enabled?: boolean;
@@ -76,10 +77,10 @@ export type AxisSettings = {
 };
 export type StackLabel = {
     style?: TextStyle;
-    borderColor?: string;
+    borderColor?: string | HighchartsGradientColorObject;
     borderRadius?: number;
     borderWidth?: number;
-    backgroundColor?: string;
+    backgroundColor?: string | HighchartsGradientColorObject;
     align?: 'center' | 'left' | 'right';
     textAlign?: 'center' | 'left' | 'right';
     verticalAlign?: 'top' | 'middle' | 'bottom';

package/dist/packages/sdk-ui/src/chart-options-processor/translations/design-options.d.ts

@@ -1,9 +1,9 @@
 import { CalendarDayOfWeek } from '../../chart/restructured-charts/highchart-based-charts/calendar-heatmap-chart/utils';
-import { CalendarHeatmapViewType, Convolution, LegendOptions, LineOptions, ScattermapMarkers, SeriesLabels, SunburstStyleOptions, TotalLabels, TreemapStyleOptions } from '../../types';
+import { CalendarHeatmapSubtype, CalendarHeatmapViewType, Convolution, FunnelSeriesLabels, LegendOptions, LineOptions, PieSeriesLabels, ScattermapMarkers, SeriesLabels, SunburstStyleOptions, TotalLabels, TreemapStyleOptions } from '../../types';
 import { Axis } from './axis-section';
-import { FunnelDirection, FunnelLabels, FunnelSize, FunnelType } from './funnel-plot-options';
+import { FunnelDirection, FunnelSize, FunnelType } from './funnel-plot-options';
 import { Marker } from './marker-section';
-import { PieLabels, PieType } from './pie-plot-options';
+import { PieType } from './pie-plot-options';
 import { ScatterMarkerSize } from './scatter-plot-options';
 import { LineType, StackType } from './translations-to-highcharts';
 import { DesignPerSeries, TextStyle } from './types';
@@ -54,6 +54,7 @@ export type ColumnChartDesignOptions = StackableChartDesignOptions;
 export type CalendarHeatmapChartDesignOptions = BaseDesignOptionsType & {
     width?: number;
     height?: number;
+    subtype: CalendarHeatmapSubtype;
     viewType: CalendarHeatmapViewType;
     cellSize?: number;
     startOfWeek: CalendarDayOfWeek;
@@ -89,14 +90,14 @@ export type PolarChartDesignOptions = CartesianChartDesignOptions & {
 export declare function isPolarChartDesignOptions(options: CartesianChartDesignOptions): options is PolarChartDesignOptions;
 export type PieChartDesignOptions = BaseDesignOptionsType & {
     pieType?: PieType;
-    pieLabels?: PieLabels;
     convolution?: Convolution;
+    seriesLabels?: PieSeriesLabels;
 };
-export type FunnelChartDesignOptions = BaseDesignOptionsType & {
+export type FunnelChartDesignOptions = Omit<BaseDesignOptionsType, 'seriesLabels'> & {
     funnelSize?: FunnelSize;
     funnelType?: FunnelType;
     funnelDirection?: FunnelDirection;
-    funnelLabels?: FunnelLabels;
+    seriesLabels?: FunnelSeriesLabels;
 };
 export type TreemapChartDesignOptions = BaseDesignOptionsType & TreemapStyleOptions;
 export type SunburstChartDesignOptions = BaseDesignOptionsType & SunburstStyleOptions;

package/dist/packages/sdk-ui/src/chart-options-processor/translations/funnel-plot-options.d.ts

@@ -1,16 +1,13 @@
 import { ChartDataOptionsInternal } from '../../chart-data-options/types';
-import { CompleteThemeSettings } from '../../types';
+import { FunnelSeriesLabels } from '../../types';
 import { PlotOptions } from '../chart-options-service';
 import { FunnelChartDesignOptions } from './design-options';
 import { DataLabelsSettings } from './value-label-section';
-export declare const DefaultFunnelLabels: FunnelLabels;
-export type FunnelLabels = {
-    enabled: boolean;
-    showCategories: boolean;
-    showValue: boolean;
-    showPercent: boolean;
-    showDecimals: boolean;
-};
+/**
+ * Default configuration for funnel chart series labels.
+ * Enables all label components (category, value, percentage) by default.
+ */
+export declare const DefaultFunnelSeriesLabels: FunnelSeriesLabels;
 export declare const DefaultFunnelSize: FunnelSize;
 export declare const funnelSizes: readonly ["wide", "regular", "narrow"];
 /** Visual size of the lowest slice (degree of funnel narrowing from highest to lowest slices)*/
@@ -23,13 +20,14 @@ export declare const DefaultFunnelDirection: FunnelDirection;
 export declare const funnelDirections: readonly ["regular", "inverted"];
 /** Direction of Funnel chart narrowing */
 export type FunnelDirection = (typeof funnelDirections)[number];
+/** Funnel-specific data labels settings extending the base data labels configuration. */
+export type FunnelDataLabelsSettings = DataLabelsSettings & {
+    funnelMinimumFontSizeToTextLabel: number;
+};
 export type FunnelOptions = {
     allowPointSelect: boolean;
     cursor: 'pointer';
-    dataLabels: DataLabelsSettings & {
-        funnelMinimumFontSizeToTextLabel: number;
-        formatter?: () => string;
-    };
+    dataLabels: FunnelDataLabelsSettings;
     showInLegend: boolean;
     reversed: boolean;
     neckWidth: string | number;
@@ -37,9 +35,6 @@ export type FunnelOptions = {
     width: string | number;
 };
 export declare const isFunnelReversed: (direction: FunnelDirection) => boolean;
-export declare const seriesDataLabels: (labels: FunnelLabels) => {
-    enabled: boolean;
-};
 export type RenderTo = {
     clientWidth: number;
     clientHeight: number;
@@ -51,4 +46,4 @@ export declare const DEFAULT_SHIFT = 50;
 export declare const funnelWidthPercentage: (renderTo: RenderTo | null) => number;
 export declare const funnelNeckWidth: (widthPercentage: number, funnelSize: FunnelSize) => number;
 export declare const funnelNeckHeight: (type: FunnelType) => number;
-export declare const getFunnelPlotOptions: (funnelDesignOptions: FunnelChartDesignOptions, chartDataOptions: ChartDataOptionsInternal, themeSettings?: CompleteThemeSettings) => PlotOptions;
+export declare const getFunnelPlotOptions: (funnelDesignOptions: FunnelChartDesignOptions, chartDataOptions: ChartDataOptionsInternal) => PlotOptions;

package/dist/packages/sdk-ui/src/chart-options-processor/translations/legend-section.d.ts

@@ -1,4 +1,5 @@
 import type { LegendOptions } from '../../types';
+import { HighchartsGradientColorObject } from '../../utils/gradient';
 import type { TextStyle } from './types';
 export type LegendPosition = 'top' | 'left' | 'right' | 'bottom' | null;
 export type LegendSettings = {
@@ -6,9 +7,9 @@ export type LegendSettings = {
     align?: 'center' | 'left' | 'right';
     verticalAlign?: 'top' | 'middle' | 'bottom';
     borderWidth?: number;
-    borderColor?: string;
+    borderColor?: string | HighchartsGradientColorObject;
     borderRadius?: number;
-    backgroundColor?: string;
+    backgroundColor?: string | HighchartsGradientColorObject;
     margin?: number;
     padding?: number;
     maxHeight?: number;

package/dist/packages/sdk-ui/src/chart-options-processor/translations/pie-plot-options.d.ts

@@ -1,8 +1,8 @@
-import { CompleteThemeSettings } from '../../types';
+import { CompleteThemeSettings, PieSeriesLabels } from '../../types';
 import { ChartDataOptionsInternal } from '../../chart-data-options/types';
 import { PlotOptions } from '../chart-options-service';
 import { DataLabelsSettings } from './value-label-section';
-export declare const DefaultPieLabels: PieLabels;
+export declare const DefaultPieSeriesLabels: PieSeriesLabels;
 export type PieLabels = {
     enabled: boolean;
     showCategories: boolean;
@@ -26,5 +26,5 @@ export type PieOptions = {
     innerSize?: InnerSize;
 };
 type InnerSize = '0%' | '40%' | '80%';
-export declare const getPiePlotOptions: (pieType: "classic" | "donut" | "ring" | undefined, pieLabels: PieLabels | undefined, chartDataOptions: ChartDataOptionsInternal, themeSettings?: CompleteThemeSettings) => PlotOptions;
+export declare const getPiePlotOptions: (pieType: "classic" | "donut" | "ring" | undefined, seriesLabels: PieSeriesLabels | undefined, chartDataOptions: ChartDataOptionsInternal, themeSettings?: CompleteThemeSettings) => PlotOptions;
 export {};

package/dist/packages/sdk-ui/src/chart-options-processor/translations/treemap/treemap-labels.d.ts

@@ -1,6 +1,6 @@
 import Highcharts, { PointLabelObject } from '@sisense/sisense-charts';
 import { CategoricalChartDataOptionsInternal } from '../../../chart-data-options/types';
-import { CompleteThemeSettings } from '../../../types';
+import { CompleteThemeSettings, TreemapSeriesLabels } from '../../../types';
 import { TreemapChartDesignOptions } from '../design-options';
 export declare function prepareTreemapLevels(dataOptions: CategoricalChartDataOptionsInternal, chartDesignOptions: TreemapChartDesignOptions, themeSettings?: CompleteThemeSettings): Highcharts.PlotTreegraphLevelsOptions[];
-export declare function treemapLabelFormatter(this: PointLabelObject): string;
+export declare function prepareTreemapLabelFormatter(level: number, seriesLabels: TreemapSeriesLabels): (this: PointLabelObject) => string;

package/dist/packages/sdk-ui/src/chart-options-processor/translations/value-label-section.d.ts

@@ -1,5 +1,6 @@
 import type { DataLabelsOptions } from '@sisense/sisense-charts';
 import { NumberFormatConfig, SeriesLabels } from '../../types';
+import { HighchartsGradientColorObject } from '../../utils/gradient';
 import { AxisOrientation } from './axis-section';
 import { PolarType } from './design-options';
 import { HighchartsDataPointContext } from './tooltip-utils';
@@ -25,8 +26,8 @@ export type DataLabelsSettings = {
     verticalAlign?: 'bottom' | 'middle' | 'top';
     padding?: number;
     color?: 'contrast' | string;
-    backgroundColor?: string;
-    borderColor?: string;
+    backgroundColor?: string | HighchartsGradientColorObject;
+    borderColor?: string | HighchartsGradientColorObject;
     borderRadius?: number;
     borderWidth?: number;
     animation?: {

package/dist/packages/sdk-ui/src/common/components/menu/context-menu/context-menu.d.ts

@@ -1,4 +1,5 @@
 import { ContextMenuProps } from '../../../../props';
+export declare const CONTEXT_MENU_SELECTED_WITH_DOT_CLASS = "csdk-context-menu-selected-with-dot";
 /**
  * Context menu
  *

package/dist/packages/sdk-ui/src/dashboard/components/editable-layout/helpers.d.ts

@@ -97,6 +97,17 @@ export declare const distributeEqualWidthInRow: (layout: WidgetsPanelLayout, col
  * @internal
  */
 export declare function updateLayoutAfterDragAndDrop(layout: WidgetsPanelLayout, dragData: EditableLayoutDragData, dropData: EditableLayoutDropData): WidgetsPanelColumnLayout;
+/**
+ * Updates the layout based on column change.
+ *
+ * @param layout - The current layout to modify
+ * @param columnCount - The number of columns to update
+ *
+ * @returns A new layout with the columns updated
+ *
+ * @internal
+ */
+export declare function updateColumnsCountInLayout(layout: WidgetsPanelLayout, columnCount: number): WidgetsPanelColumnLayout;
 export declare function getRowHeight(row: WidgetsPanelRow, widgets: WidgetProps[]): number;
 export declare function getRowMaxHeight(row: WidgetsPanelRow): number;
 export declare function getRowMinHeight(row: WidgetsPanelRow): number;

package/dist/packages/sdk-ui/src/dashboard/components/toolbar/edit-toggle.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * Props for the EditToggle component
+ *
+ * @internal
+ */
+export interface EditToggleProps {
+    /**
+     * Whether the edit mode is currently active
+     */
+    isEditMode: boolean;
+    /**
+     * Whether the history is currently enabled
+     */
+    isHistoryEnabled: boolean;
+    /**
+     * Callback function called when the edit toggle button is clicked
+     */
+    onToggleClick: () => void;
+}
+/**
+ * Edit toggle button component for dashboard toolbar.
+ * Displays appropriate icon and tooltip based on edit mode state.
+ */
+export declare const EditToggle: import("react").NamedExoticComponent<EditToggleProps>;

package/dist/packages/sdk-ui/src/dashboard/constants.d.ts

@@ -1,11 +1,11 @@
 import type { DeepRequired } from 'ts-essentials';
 import { DashboardByIdConfig, DashboardConfig, EditModeConfig, WidgetsPanelConfig } from './types';
-export declare const DEFAULT_DASHBOARD_CONFIG: DeepRequired<Omit<DashboardConfig, 'widgetsPanel'> & {
+export declare const DEFAULT_DASHBOARD_CONFIG: DeepRequired<Omit<DashboardConfig, 'widgetsPanel' | 'tabbers'> & {
     widgetsPanel: Omit<WidgetsPanelConfig, 'editMode'> & {
         editMode: Omit<EditModeConfig, 'isEditing'>;
     };
 }>;
-export declare const DEFAULT_DASHBOARD_BY_ID_CONFIG: DeepRequired<Omit<DashboardByIdConfig, 'widgetsPanel'> & {
+export declare const DEFAULT_DASHBOARD_BY_ID_CONFIG: DeepRequired<Omit<DashboardByIdConfig, 'widgetsPanel' | 'tabbers'> & {
     widgetsPanel: Omit<WidgetsPanelConfig, 'editMode'> & {
         editMode: Omit<EditModeConfig, 'isEditing'>;
     };

package/dist/packages/sdk-ui/src/dashboard/dashboard.d.ts

@@ -1,35 +1,5 @@
 /// <reference types="react" />
-import { Filter, FilterRelations } from '@sisense/sdk-data';
 import { DashboardProps } from '../dashboard/types';
-import { WidgetsPanelLayout } from '../models';
-export declare enum DashboardChangeType {
-    /** Dashboard filters have been updated */
-    FILTERS_UPDATE = "FILTERS.UPDATE",
-    /** Filters panel collapsed state changed */
-    UI_FILTERS_PANEL_COLLAPSE = "UI.FILTERS.PANEL.COLLAPSE",
-    /** Widgets panel layout updated */
-    WIDGETS_PANEL_LAYOUT_UPDATE = "WIDGETS_PANEL_LAYOUT.UPDATE",
-    /** Edit mode isEditing changed */
-    WIDGETS_PANEL_LAYOUT_IS_EDITING_CHANGE = "WIDGETS_PANEL.EDIT_MODE.IS_EDITING.CHANGE",
-    /** Widgets deleted from the dashboard */
-    WIDGETS_DELETE = "WIDGETS.DELETE"
-}
-export type DashboardChangeAction = {
-    type: DashboardChangeType.FILTERS_UPDATE;
-    payload: Filter[] | FilterRelations;
-} | {
-    type: DashboardChangeType.UI_FILTERS_PANEL_COLLAPSE;
-    payload: boolean;
-} | {
-    type: DashboardChangeType.WIDGETS_PANEL_LAYOUT_UPDATE;
-    payload: WidgetsPanelLayout;
-} | {
-    type: DashboardChangeType.WIDGETS_PANEL_LAYOUT_IS_EDITING_CHANGE;
-    payload: boolean;
-} | {
-    type: DashboardChangeType.WIDGETS_DELETE;
-    payload: string[];
-};
 /**
  * React component that renders a dashboard whose elements are customizable. It includes internal logic of applying common filters to widgets.
  *

package/dist/packages/sdk-ui/src/dashboard/hooks/use-dashboard-header-toolbar.d.ts

@@ -1,3 +1,4 @@
+import { MenuItemSection } from '../../index';
 /**
  * @internal
  */
@@ -11,14 +12,14 @@ export interface DashboardHeaderToolbarMenuItem {
  * @internal
  */
 export interface UseDashboardHeaderToolbarProps {
-    menuItems: DashboardHeaderToolbarMenuItem[];
+    menuItemSections: MenuItemSection[];
     toolbarComponents?: JSX.Element[];
 }
 /**
  * Hook that returns a toolbar element for dashboard header
  * @internal
  */
-export declare const useDashboardHeaderToolbar: ({ menuItems, toolbarComponents, }: UseDashboardHeaderToolbarProps) => {
+export declare const useDashboardHeaderToolbar: ({ menuItemSections, toolbarComponents, }: UseDashboardHeaderToolbarProps) => {
     toolbar: () => import("react/jsx-runtime").JSX.Element;
 };
 export default useDashboardHeaderToolbar;

package/dist/packages/sdk-ui/src/dashboard/hooks/use-tabber.d.ts

@@ -1,26 +1,41 @@
 import { WidgetPanelLayoutManager } from '../../dashboard/hooks/use-widgets-layout';
-import { TabbersOptions, WidgetsPanelColumnLayout } from '../../models';
-import { WidgetProps } from '../../props';
-import { TabberTab } from '../../types';
+import { WidgetId, WidgetsPanelColumnLayout } from '../../models';
+import { TabberButtonsWidgetProps, WidgetProps } from '../../props';
 /**
  * @internal
  */
 export type UseTabber = ({ widgets, config, }: {
     widgets: WidgetProps[];
-    config?: TabbersOptions | undefined;
+    config?: TabbersConfig | undefined;
 }) => {
     layoutManager: WidgetPanelLayoutManager;
     widgets: WidgetProps[];
 };
 /**
- * @internal
+ * Configuration for a single tab in a tabber widget.
+ */
+export type TabberTabConfig = {
+    /**
+     * Widget IDs from the dashboard to display in the tab.
+     */
+    displayWidgetIds: string[];
+};
+/**
+ * Configuration for a tabber widget.
  */
-export type SingleTabberConfig = {
-    tabs: TabberTab[];
-    activeTab: number;
+export type TabberConfig = {
+    /**
+     * Tabs configuration for the tabber widget.
+     */
+    tabs: TabberTabConfig[];
 };
-export declare const isTabberWidget: (widget: WidgetProps) => boolean;
-export declare const modifyLayout: (tabbersOptions: TabbersOptions, tabberState: Record<string, number>) => (layout: WidgetsPanelColumnLayout) => WidgetsPanelColumnLayout;
+/**
+ * Configuration for tabbers in a dashboard.
+ * It includes separate configuration for each tabber.
+ */
+export type TabbersConfig = Record<WidgetId, TabberConfig>;
+export declare const isTabberButtonsWidget: (widget: WidgetProps) => widget is TabberButtonsWidgetProps;
+export declare const modifyLayout: (tabbersOptions: TabbersConfig, tabberState: Record<string, number>) => (layout: WidgetsPanelColumnLayout) => WidgetsPanelColumnLayout;
 /**
  * Hook that modifies widget properties so it became a tabber widget.
  * Incapsulates logic for updating layout via navigating tabs

package/dist/packages/sdk-ui/src/dashboard/index.d.ts

@@ -3,4 +3,4 @@ export { Dashboard } from './dashboard';
 export { useComposedDashboard, useComposedDashboardInternal, type ComposableDashboardProps, type UseComposedDashboardOptions, type ComposedDashboardResult, } from './use-composed-dashboard';
 export { useDashboardTheme, type DashboardThemeParams } from './use-dashboard-theme';
 export * from './hooks';
-export type { DashboardByIdProps, DashboardProps, DashboardLayoutOptions, DashboardStyleOptions, DashboardConfig, DashboardByIdConfig, WidgetsPanelConfig, EditModeConfig, DashboardFiltersPanelConfig, } from './types';
+export type { DashboardByIdProps, DashboardProps, DashboardLayoutOptions, DashboardStyleOptions, DashboardConfig, DashboardByIdConfig, WidgetsPanelConfig, EditModeConfig, DashboardFiltersPanelConfig, TabbersConfig, TabberConfig, TabberTabConfig, DashboardChangeEvent, DashboardFiltersUpdatedEvent, DashboardFiltersPanelCollapseChangedEvent, DashboardWidgetsPanelLayoutUpdatedEvent, DashboardWidgetsPanelIsEditingChangedEvent, DashboardWidgetsDeletedEvent, } from './types';

package/dist/packages/sdk-ui/src/dashboard/types.d.ts

@@ -1,10 +1,81 @@
 import { ReactNode } from 'react';
 import { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
-import { DashboardChangeAction } from '../dashboard/dashboard';
+import { TabbersConfig } from '../dashboard/hooks/use-tabber';
 import { FiltersPanelConfig } from '../filters/components/filters-panel/types';
-import { DashboardStyleOptions, TabbersOptions, WidgetsOptions, WidgetsPanelLayout } from '../models';
+import { DashboardStyleOptions, WidgetsOptions, WidgetsPanelLayout } from '../models';
 import { WidgetProps } from '../props';
 export type { DashboardStyleOptions, WidgetsPanelColumnLayout, WidgetsPanelLayout, WidgetsPanelCell, WidgetsPanelRow, WidgetsPanelColumn, } from '../models';
+export type { TabbersConfig, TabberConfig, TabberTabConfig } from '../dashboard/hooks/use-tabber';
+/**
+ * Event triggered when dashboard filters are updated.
+ */
+export interface DashboardFiltersUpdatedEvent {
+    /** Event type */
+    type: 'filters/updated';
+    /** New filters or filter relations after the update*/
+    payload: Filter[] | FilterRelations;
+}
+/**
+ * Event triggered when the filters panel collapsed state changes.
+ */
+export interface DashboardFiltersPanelCollapseChangedEvent {
+    /** Event type */
+    type: 'filtersPanel/collapse/changed';
+    /** Is the filters panel collapsed? */
+    payload: boolean;
+}
+/**
+ * Event triggered when the widgets panel layout is updated.
+ *
+ * @remarks
+ * When `config.widgetsPanel.editMode.applyChangesAsBatch.enabled` is `true` (default),
+ * this event is only triggered when the user applies changes (clicks "Apply"),
+ * not during the editing process. When `false`, this event is triggered immediately
+ * after each layout change.
+ */
+export interface DashboardWidgetsPanelLayoutUpdatedEvent {
+    /** Event type */
+    type: 'widgetsPanel/layout/updated';
+    /** The new widgets panel layout */
+    payload: WidgetsPanelLayout;
+}
+/**
+ * Event triggered when the edit mode state changes.
+ */
+export interface DashboardWidgetsPanelIsEditingChangedEvent {
+    /** Event type */
+    type: 'widgetsPanel/editMode/isEditing/changed';
+    /** Is the widgets panel layout in editing state? */
+    payload: boolean;
+}
+/**
+ * Event triggered when widgets are deleted from the dashboard.
+ *
+ * @remarks
+ * When `config.widgetsPanel.editMode.applyChangesAsBatch.enabled` is `true` (default),
+ * this event is only triggered when the user applies changes (clicks "Apply"),
+ * not during the editing process. When `false`, this event is triggered immediately
+ * after widgets are deleted.
+ */
+export interface DashboardWidgetsDeletedEvent {
+    /**
+     * Event type */
+    type: 'widgets/deleted';
+    /** The oids of the widgets deleted */
+    payload: string[];
+}
+/**
+ * Events that can be triggered by the Dashboard component
+ *
+ * @example
+ *
+ * Example of a filters update event:
+ *
+ * ```ts
+ * { type: 'filters/updated', payload: filters }
+ * ```
+ */
+export type DashboardChangeEvent = DashboardFiltersUpdatedEvent | DashboardFiltersPanelCollapseChangedEvent | DashboardWidgetsPanelLayoutUpdatedEvent | DashboardWidgetsPanelIsEditingChangedEvent | DashboardWidgetsDeletedEvent;
 /**
  * Props of the {@link DashboardById} component.
  */
@@ -34,7 +105,7 @@ export interface DashboardContainerProps {
      *
      * @internal
      */
-    onChange?: (action: DashboardChangeAction) => void;
+    onChange?: (event: DashboardChangeEvent) => void;
 }
 /**
  * Dashboard filters panel configuration
@@ -161,6 +232,10 @@ export interface DashboardConfig {
      * Configuration for the widgets panel
      */
     widgetsPanel?: WidgetsPanelConfig;
+    /**
+     * Configuration for tabber widgets in the dashboard
+     */
+    tabbers?: TabbersConfig;
 }
 /**
  * Dashboard configuration
@@ -222,20 +297,17 @@ export interface DashboardProps {
     defaultDataSource?: DataSource;
     /** The options for each of the widgets */
     widgetsOptions?: WidgetsOptions;
-    /**
-     * The Tabber widgets configurations as a single dashboard config
-     *
-     * @internal
-     */
-    tabbersOptions?: TabbersOptions;
     /** The style options for the dashboard */
     styleOptions?: DashboardStyleOptions;
     /**
      * Callback to receive changes
      *
-     * @internal
+     * This callback is invoked when the dashboard state changes, such as filter updates,
+     * layout changes, or widget deletions. See {@link DashboardChangeEvent} for all possible event types.
+     *
+     * @param event The event that occurred
      */
-    onChange?: (action: DashboardChangeAction) => void;
+    onChange?: (event: DashboardChangeEvent) => void;
 }
 /**
  * Props for the Dashboard Header component

package/dist/packages/sdk-ui/src/dashboard/use-composed-dashboard.d.ts

@@ -1,7 +1,7 @@
 import { Filter, FilterRelations } from '@sisense/sdk-data';
 import { WidgetsPanelLayout } from '../models';
 import { DashboardProps } from './types.js';
-export type ComposableDashboardProps = Pick<DashboardProps, 'filters' | 'widgets' | 'widgetsOptions' | 'layoutOptions' | 'tabbersOptions'>;
+export type ComposableDashboardProps = Pick<DashboardProps, 'filters' | 'widgets' | 'widgetsOptions' | 'layoutOptions' | 'config'>;
 export type UseComposedDashboardOptions = {
     /**
      * @internal

package/dist/packages/sdk-ui/src/index.d.ts

@@ -18,6 +18,7 @@ export { TableWidget } from './widgets/table-widget';
 export { PivotTableWidget } from './widgets/pivot-table-widget';
 export { TextWidget } from './widgets/text-widget';
 export { Widget } from './widgets/widget';
+export { TabberButtonsWidget } from './widgets/tabber/tabber-buttons-widget';
 export { ContextMenu } from './common/components/menu/context-menu/context-menu';
 export { DrilldownBreadcrumbs } from './widgets/common/drilldown-breadcrumbs';
 export * from './line-chart';
@@ -105,3 +106,4 @@ export { updateDrilldownSelections } from './widgets/common/use-drilldown-core';
 export { getSelectionTitleMenuItem, getDrilldownMenuItems } from './widgets/hooks/use-drilldown';
 export { DataSchemaBrowser } from './data-browser/data-schema-browser/data-schema-browser';
 export { type TranslationDictionary, PACKAGE_NAMESPACE as translationNamespace, } from './translation/resources';
+export * from './utils/gradient';