@sisense/sdk-ui 1.8.0 → 1.9.0

package/dist/line-chart.d.ts

@@ -16,8 +16,8 @@ import { LineChartProps } from './props';
  *
  * Additional Line Chart examples:
  *
- * - [Curved Line Chart](https://csdk-playground.sisense.com/?example=charts%2Fline-chart-spline)
- * - [Styled Line Chart](https://csdk-playground.sisense.com/?example=charts%2Fline-chart-styled)
+ * - [Curved Line Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts%2Fline-chart-spline)
+ * - [Styled Line Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts%2Fline-chart-styled)
  *
  * @param props - Line chart properties
  * @returns Line Chart component

package/dist/models/dashboard/translate-dashboard.d.ts

@@ -1,3 +1,4 @@
-import { type DashboardDto } from '../../api/types/dashboard-dto';
-import { type DashboardModel } from './types';
+import type { DashboardDto, Layout as SisenseLayout } from '../../api/types/dashboard-dto';
+import type { Layout, DashboardModel } from './types';
+export declare const translateLayout: (layout: SisenseLayout) => Layout;
 export declare function translateDashboard({ oid, title, datasource, widgets, layout, }: DashboardDto): DashboardModel;

package/dist/models/dashboard/types.d.ts

@@ -1,20 +1,18 @@
 import { type DataSource } from '@sisense/sdk-data';
 import { WidgetModel } from '../widget/widget-model';
 /** @internal */
-export type Layout = {
+export interface Layout {
     columns: {
-        width: number;
+        widthPercentage: number;
         cells: {
             subcells: {
-                width: number;
-                elements: {
-                    height: number | string;
-                    widgetId: string;
-                }[];
+                widthPercentage: number;
+                height: number | string;
+                widgetId: string;
             }[];
         }[];
     }[];
-};
+}
 export type DashboardModel = {
     oid: string;
     title: string;

package/dist/models/widget/use-get-widget-model.d.ts

@@ -84,7 +84,7 @@ export type WidgetModelSuccessState = {
  *
  * Additional `useGetWidgetModel` examples:
  *
- * - [Modify Chart Type](https://csdk-playground.sisense.com/?example=fusion-assets%2Fuse-get-widget-model-change-chart-type)
+ * - [Modify Chart Type](https://www.sisense.com/platform/compose-sdk/playground/?example=fusion-assets%2Fuse-get-widget-model-change-chart-type)
  *
  * @param params - Parameters of the widget to be retrieved
  * @returns Widget load state that contains the status of the execution, the result widget model, or the error if one has occurred

package/dist/models/widget/widget-model.d.ts

@@ -1,13 +1,13 @@
 import { Filter } from '@sisense/sdk-data';
-import { ChartDataOptions, TableDataOptions } from '../../chart-data-options/types';
+import { ChartDataOptions, PivotTableDataOptions, TableDataOptions } from '../../chart-data-options/types';
 import { Panel, WidgetDto, WidgetType } from '../../dashboard-widget/types';
-import { ChartProps, ChartWidgetProps, TableProps, TableWidgetProps } from '../../props';
-import { ExecuteQueryParams } from '../../query-execution';
+import { ChartProps, ChartWidgetProps, PivotTableProps, TableProps, TableWidgetProps, PivotTableWidgetProps } from '../../props';
+import { ExecutePivotQueryParams, ExecuteQueryParams } from '../../query-execution';
 import { ChartType, DrilldownOptions, ChartStyleOptions, TableStyleOptions, CompleteThemeSettings } from '../../types';
 /**
  * Widget data options.
  */
-export type WidgetDataOptions = ChartDataOptions | TableDataOptions;
+export type WidgetDataOptions = ChartDataOptions | TableDataOptions | PivotTableDataOptions;
 /**
  * Model of Sisense widget defined in the abstractions of Compose SDK.
  *
@@ -80,11 +80,26 @@ export declare class WidgetModel {
      * ```tsx
      * const {data, isLoading, isError} = useExecuteQuery(widget.getExecuteQueryParams());
      * ```
+     *
+     * Note: this method is not supported for getting pivot query.
+     * Use {@link getExecutePivotQueryParams} instead for getting query parameters for the pivot widget.
      */
     getExecuteQueryParams(): ExecuteQueryParams;
+    /**
+     * Returns the parameters to be used for executing a query for the pivot widget.
+     *
+     * @example
+     * ```tsx
+     * const {data, isLoading, isError} = useExecutePivotQuery(widget.getExecutePivotQueryParams());
+     * ```
+     *
+     * Note: this method is supported only for getting pivot query.
+     * Use {@link getExecuteQueryParams} instead for getting query parameters for non-pivot widgets.
+     */
+    getExecutePivotQueryParams(): ExecutePivotQueryParams;
     /**
      * Returns the props to be used for rendering a chart.
-  
+     *
      * @example
      * ```tsx
      * <Chart {...widget.getChartProps()} />
@@ -92,6 +107,7 @@ export declare class WidgetModel {
      *
      * Note: this method is not supported for tabular widgets.
      * Use {@link getTableProps} instead for getting props for the <Table> component.
+     * Use {@link getPivotTableProps} instead for getting props for the <PivotTable> component.
      */
     getChartProps(): ChartProps;
     /**
@@ -102,10 +118,24 @@ export declare class WidgetModel {
      * <Table {...widget.getTableProps()} />
      * ```
      *
-     * Note: this method is not supported for chart widgets.
+     * Note: this method is not supported for chart and pivot widgets.
      * Use {@link getChartProps} instead for getting props for the <Chart> component.
+     * Use {@link getPivotTableProps} instead for getting props for the <PivotTable> component.
      */
     getTableProps(): TableProps;
+    /**
+     * Returns the props to be used for rendering a pivot table.
+     *
+     * @example
+     * ```tsx
+     * <PivotTable {...widget.getPivotTableProps()} />
+     * ```
+     *
+     * Note: this method is not supported for chart or table widgets.
+     * Use {@link getChartProps} instead for getting props for the <Chart> component.
+     * Use {@link getTableProps} instead for getting props for the <Table> component.
+     */
+    getPivotTableProps(): PivotTableProps;
     /**
      * Returns the props to be used for rendering a chart widget.
      *
@@ -130,4 +160,18 @@ export declare class WidgetModel {
      * @internal
      */
     getTableWidgetProps(): TableWidgetProps;
+    /**
+     * Returns the props to be used for rendering a pivot table widget.
+     *
+     * @example
+     * ```tsx
+     * <PivotTableWidget {...widget.getPivotTableWidgetProps()} />
+     * ```
+  
+     * Note: this method is not supported for chart or table widgets.
+     * Use {@link getChartWidgetProps} instead for getting props for the <ChartWidget> component.
+     * Use {@link getTableWidgetProps} instead for getting props for the <TableWidget> component.
+     * @internal
+     */
+    getPivotTableWidgetProps(): PivotTableWidgetProps;
 }

package/dist/pie-chart.d.ts

@@ -17,8 +17,8 @@ import { PieChartProps } from './props';
  *
  * Additional Pie Chart examples:
  *
- * - [Donut Pie Chart](https://csdk-playground.sisense.com/?example=charts%2Fpie-chart-donut)
- * - [Ring Pie Chart](https://csdk-playground.sisense.com/?example=charts%2Fpie-chart-ring)
+ * - [Donut Pie Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts%2Fpie-chart-donut)
+ * - [Ring Pie Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts%2Fpie-chart-ring)
  *
  * @param props - Pie chart properties
  * @returns Pie Chart component

package/dist/pivot-table/helpers/prepare-pivot-styling-props.d.ts

@@ -0,0 +1,20 @@
+import { CompleteThemeSettings, PivotTableStyleOptions } from '../../types';
+export declare function preparePivotStylingProps(styleOptions?: PivotTableStyleOptions, themeSettings?: CompleteThemeSettings): {
+    fontFamily: string | undefined;
+    textColor: string | undefined;
+    backgroundColor: string | undefined;
+    borderColor: string;
+    fillColor: string | undefined;
+    additionalFillColor: string | undefined;
+    fillOptions: {
+        alternatingRows: boolean | undefined;
+        alternatingColumns: boolean | undefined;
+        columnsHeaders: boolean | undefined;
+        rowMembers: boolean | undefined;
+        totals: boolean | undefined;
+    };
+    rowHeight: number | undefined;
+    isAutoHeight: boolean;
+    navigationPrimaryColor: string | undefined;
+    navigationSecondaryColor: string | undefined;
+};

package/dist/pivot-table/sorting-utils.d.ts

@@ -1,56 +1,12 @@
-/**
- * This file contain sorting functionality ported from the existing Analytics.
- * It directly works with pivot JAQL to apply sorting.
- *
- * It will be fully refactored soon by using a different approach of applying sorting on Pivot internal data options.
- */
-import { JaqlRequest, type SortingSettingsChangePayload } from '@sisense/sdk-pivot-client';
-export declare function normalizeJaqlSorting(jaql: JaqlRequest): {
-    metadata: (import("@sisense/sdk-pivot-client").JaqlPanel | {
-        jaql: {
-            sortDetails: {
-                initialized: boolean;
-                field: any;
-                dir: any;
-                measurePath: null;
-                sortingLastDimension: any;
-            };
-            title: string;
-            dim: string;
-            datatype: string;
-            sort?: string | null | undefined;
-            type?: string | undefined;
-            table?: string | undefined;
-            column?: string | undefined;
-        };
-        panel: string;
-        field?: {
-            id?: string | undefined;
-            index?: number | undefined;
-        } | undefined;
-        disabled?: boolean | undefined;
-        hierarchies?: string[] | undefined;
-        format?: {
-            subtotal?: boolean | undefined;
-            width?: number | undefined;
-            databars?: boolean | undefined;
-            color?: {
-                type: string;
-                color?: string | undefined;
-                conditions?: {
-                    color: string;
-                    operator: string;
-                    expression: string | Record<string, any>;
-                }[] | undefined;
-            } | undefined;
-        } | undefined;
-    })[];
-    datasource?: import("@sisense/sdk-pivot-client/dist/data-load/types").JaqlDatasource | undefined;
-    queryGuid?: string | undefined;
-    grandTotals?: {
-        title: string;
-        columns?: boolean | undefined;
-        rows?: boolean | undefined;
-    } | null | undefined;
+import { type SortingSettingsChangePayload } from '@sisense/sdk-pivot-client';
+import { PivotTableDataOptionsInternal } from '..';
+import type { SortDirection, PivotRowsSort } from '../types';
+export type PivotRowsSortCriteria = {
+    rowIndex: number;
+    sort: PivotRowsSort | null;
 };
-export declare function prepareSortedJaql(jaql: JaqlRequest, { type, settings, sortDetails, isSingleRowTree }: SortingSettingsChangePayload): JaqlRequest;
+export type PivotSortCriteria = {
+    rows: PivotRowsSortCriteria[];
+};
+export declare function normalizePivotSort(sortType: SortDirection | PivotRowsSort): PivotRowsSort;
+export declare function preparePivotRowsSortCriteriaList({ type, settings, sortDetails }: SortingSettingsChangePayload, dataOptionsInternal: PivotTableDataOptionsInternal): PivotRowsSortCriteria[];

package/dist/pivot-table/use-get-pivot-table-query.d.ts

@@ -1,11 +1,19 @@
-import { PivotTableProps } from '../props';
 import { type JaqlRequest } from '@sisense/sdk-pivot-client';
+import type { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
+import { ExecutePivotQueryParams } from '../query-execution';
+import { PivotTableDataOptionsInternal } from '../chart-data-options/types';
+export declare const getPivotQueryOptions: (dataOptions: PivotTableDataOptionsInternal) => Pick<ExecutePivotQueryParams, 'rows' | 'columns' | 'values' | 'grandTotals'>;
 /**
  * A hook that returns the JAQL request object from pivot table props.
  *
  * @internal
  */
-export declare const useGetPivotTableQuery: ({ dataSet, dataOptions, filters }: PivotTableProps) => {
+export declare const useGetPivotTableQuery: ({ dataSet, dataOptionsInternal, filters, refreshCounter, }: {
+    dataSet?: DataSource | undefined;
+    dataOptionsInternal: PivotTableDataOptionsInternal;
+    filters?: Filter[] | FilterRelations | undefined;
+    refreshCounter?: number | undefined;
+}) => {
     isLoading: boolean;
     isSuccess: boolean;
     isError: boolean;

package/dist/pivot-table/use-pivot-table-data-options-internal.d.ts

@@ -0,0 +1,15 @@
+import { PivotTableDataOptions, PivotTableDataOptionsInternal } from '../chart-data-options/types.js';
+import { PivotSortCriteria } from './sorting-utils.js';
+type UsePivotTableDataOptionsInternalResult = {
+    dataOptionsInternal: PivotTableDataOptionsInternal;
+    updateSort: (sortCriteria: PivotSortCriteria) => void;
+};
+/**
+ * A hook that returns the JAQL request object from pivot table props.
+ *
+ * @internal
+ */
+export declare const usePivotTableDataOptionsInternal: ({ dataOptions, }: {
+    dataOptions: PivotTableDataOptions;
+}) => UsePivotTableDataOptionsInternalResult;
+export {};

package/dist/polar-chart.d.ts

@@ -16,8 +16,8 @@ import { PolarChartProps } from './props';
  *
  * Additional Polar Chart examples:
  *
- * - [Area Polar Chart](https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart-area)
- * - [Line Polar Chart](https://csdk-playground.sisense.com/?example=charts%2Fpolar-chart-line)
+ * - [Area Polar Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts%2Fpolar-chart-area)
+ * - [Line Polar Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts%2Fpolar-chart-line)
  *
  * @param props - Polar chart properties
  * @returns Polar Chart component

package/dist/props.d.ts

@@ -1,5 +1,5 @@
 import { Attribute, Filter, Measure, DataSource, Data, QueryResultData, FilterRelations } from '@sisense/sdk-data';
-import { ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ThemeSettings, PolarStyleOptions, PieStyleOptions, StackableStyleOptions, LineStyleOptions, AreaStyleOptions, FunnelStyleOptions, ScatterStyleOptions, ChartStyleOptions, ChartType, IndicatorStyleOptions, DrilldownOptions, TableStyleOptions, ThemeOid, TreemapStyleOptions, CustomDrilldownResult, MenuPosition, MenuItemSection, SunburstStyleOptions, ChartWidgetStyleOptions, TableWidgetStyleOptions, DashboardWidgetStyleOptions, BoxplotStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, DataPoint, ScatterDataPoint, AreamapDataPoint, BoxplotDataPoint, ChartDataPoints, ScattermapDataPoint, PivotTableStyleOptions } from './types';
+import { ChartDataOptions, CartesianChartDataOptions, CategoricalChartDataOptions, ThemeSettings, PolarStyleOptions, PieStyleOptions, StackableStyleOptions, LineStyleOptions, AreaStyleOptions, FunnelStyleOptions, ScatterStyleOptions, ChartStyleOptions, ChartType, IndicatorStyleOptions, DrilldownOptions, TableStyleOptions, ThemeOid, TreemapStyleOptions, CustomDrilldownResult, MenuPosition, MenuItemSection, SunburstStyleOptions, ChartWidgetStyleOptions, TableWidgetStyleOptions, DashboardWidgetStyleOptions, BoxplotStyleOptions, ScattermapStyleOptions, AreamapStyleOptions, DataPoint, ScatterDataPoint, AreamapDataPoint, BoxplotDataPoint, ChartDataPoints, ScattermapDataPoint, PivotTableStyleOptions, PivotTableWidgetStyleOptions } from './types';
 import { HighchartsOptions } from './chart-options-processor/chart-options-service';
 import { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import { IndicatorChartDataOptions, BoxplotChartCustomDataOptions, BoxplotChartDataOptions, ScatterChartDataOptions, TableDataOptions, ScattermapChartDataOptions, AreamapChartDataOptions, PivotTableDataOptions } from './chart-data-options/types';
@@ -958,6 +958,65 @@ export interface TableWidgetProps {
      */
     description?: string;
 }
+/**
+ * Props for the {@link PivotTableWidget} component
+ *
+ * @internal
+ */
+export interface PivotTableWidgetProps {
+    /**
+     * Data source the query is run against - e.g. `Sample ECommerce`
+     *
+     * If not specified, the query will use the `defaultDataSource` specified in the parent Sisense Context.
+     *
+     * @category Data
+     */
+    dataSource?: DataSource;
+    /**
+     * Filters that will slice query results
+     *
+     * @category Data
+     */
+    filters?: Filter[] | FilterRelations;
+    /**
+     * Configurations for how to interpret and present the data passed to the table
+     *
+     * @category Chart
+     */
+    dataOptions: PivotTableDataOptions;
+    /**
+     * Style options for both the table and widget including the widget header
+     *
+     * @category Widget
+     */
+    styleOptions?: PivotTableWidgetStyleOptions;
+    /**
+     * React nodes to be rendered at the top of component, before the table
+     *
+     * @category Widget
+     * @internal
+     */
+    topSlot?: ReactNode;
+    /**
+     * React nodes to be rendered at the bottom of component, after the table
+     *
+     * @category Widget
+     * @internal
+     */
+    bottomSlot?: ReactNode;
+    /**
+     * Title of the widget
+     *
+     * @category Widget
+     */
+    title?: string;
+    /**
+     *  Description of the widget
+     *
+     * @category Widget
+     */
+    description?: string;
+}
 /**
  * Props for {@link ExecuteQueryByWidgetId} component.
  *

package/dist/query-execution/use-execute-query.d.ts

@@ -17,7 +17,7 @@ import { ExecuteQueryParams, ExecuteQueryResult } from './types';
  *
  * Additional `useExecuteQuery()` examples:
  *
- * - [Query with Sorting](https://csdk-playground.sisense.com/?example=queries%2Fuse-execute-query-sorting)
+ * - [Query with Sorting](https://www.sisense.com/platform/compose-sdk/playground/?example=queries%2Fuse-execute-query-sorting)
  * - [Take Control of Your Data Visualizations]( https://www.sisense.com/blog/take-control-of-your-data-visualizations/) blog post with examples of using the hook to fetch data to display in third-party charts.
  *
  * @param params - Parameters of the query

package/dist/scatter-chart.d.ts

@@ -22,7 +22,7 @@ import { ScatterChartProps } from './props';
  *
  * Additional Scatter Chart examples:
  *
- * - [Bubble Scatter Chart](https://csdk-playground.sisense.com/?example=charts/scatter-chart-bubble)
+ * - [Bubble Scatter Chart](https://www.sisense.com/platform/compose-sdk/playground/?example=charts/scatter-chart-bubble)
  *
  * @param props - Scatter chart properties
  * @returns Scatter Chart component

package/dist/theme-provider/default-theme-settings.d.ts

@@ -0,0 +1,9 @@
+import { CompleteThemeSettings } from '../types';
+/**
+ * Returns default theme settings, which can be used as base for custom theme options.
+ *
+ * @param isDarkMode - Boolean value whether to get theme settings for dark mode
+ * @returns Theme settings object
+ * @internal
+ */
+export declare const getDefaultThemeSettings: (isDarkMode?: boolean) => CompleteThemeSettings;

package/dist/theme-provider/types.d.ts

@@ -0,0 +1,7 @@
+import { CompleteThemeSettings } from '../types';
+/**
+ * Themable interface for styled components that require theme settings.
+ */
+export type Themable = {
+    theme: CompleteThemeSettings;
+};

package/dist/translation/resources/en.d.ts

@@ -29,7 +29,9 @@ export declare const translation: {
         };
         widgetModel: {
             tabularWidgetNotSupported: string;
-            onlyTabularWidgetsSupported: string;
+            pivotWidgetNotSupported: string;
+            onlyTableWidgetSupported: string;
+            onlyPivotWidgetSupported: string;
         };
         unknownFilterInFilterRelations: string;
         filterRelationsNotSupported: string;

package/dist/translation/resources/index.d.ts

@@ -33,7 +33,9 @@ export declare const resources: {
             };
             widgetModel: {
                 tabularWidgetNotSupported: string;
-                onlyTabularWidgetsSupported: string;
+                pivotWidgetNotSupported: string;
+                onlyTableWidgetSupported: string;
+                onlyPivotWidgetSupported: string;
             };
             unknownFilterInFilterRelations: string;
             filterRelationsNotSupported: string;
@@ -119,7 +121,9 @@ export declare const resources: {
             };
             widgetModel: {
                 tabularWidgetNotSupported: string;
-                onlyTabularWidgetsSupported: string;
+                pivotWidgetNotSupported: string;
+                onlyTableWidgetSupported: string;
+                onlyPivotWidgetSupported: string;
             };
             unknownFilterInFilterRelations: string;
             filterRelationsNotSupported: string;

package/dist/types.d.ts

@@ -328,6 +328,14 @@ export interface PivotTableStyleOptions {
      * Boolean flag whether to apply background color to alternate columns
      */
     alternatingColumnsColor?: boolean;
+    /**
+     * Boolean flag whether to fill row members cells with background color
+     */
+    membersColor?: boolean;
+    /**
+     * Boolean flag whether to fill totals and subtotals cells with background color
+     */
+    totalsColor?: boolean;
     /**
      * Number of rows per page
      *
@@ -356,6 +364,10 @@ export interface PivotTableStyleOptions {
      * Boolean flag whether the height of the component should be automatically adjusted to fit the content
      */
     isAutoHeight?: boolean;
+    /**
+     * Manual height of each row (default is 25px)
+     */
+    rowHeight?: number;
 }
 /**
  * Common part of IndicatorStyleOptions for all types of indicator
@@ -561,7 +573,9 @@ export interface ThemeSettings {
     typography?: {
         /** Font family name to style component text */
         fontFamily?: string;
+        /** Primary text color */
         primaryTextColor?: string;
+        /** Secondary text color */
         secondaryTextColor?: string;
     };
     /** General theme settings */
@@ -575,6 +589,155 @@ export interface ThemeSettings {
         /** Hover color for primary buttons */
         primaryButtonHoverColor?: string;
     };
+    /**
+     * Theme settings specific to the AI Chatbot component
+     *
+     * @internal
+     */
+    aiChat?: {
+        /** Background color of the chatbot */
+        backgroundColor?: string;
+        /** Text color of the chatbot */
+        primaryTextColor?: string;
+        /** Secondary text color of the chatbot */
+        secondaryTextColor?: string;
+        /** Primary font size for text in the chatbot */
+        primaryFontSize?: [fontSize: string, lineHeight: string];
+        /** Border of the chatbot */
+        border?: false | string;
+        /** Border radius of the chatbot */
+        borderRadius?: false | string;
+        /** Settings for the main chat body */
+        body?: {
+            /** Left padding of the chat body */
+            paddingLeft?: string;
+            /** Right padding of the chat body */
+            paddingRight?: string;
+            /** Top padding of the chat body */
+            paddingTop?: string;
+            /** Bottom padding of the chat body */
+            paddingBottom?: string;
+            /** Gap size between each message in the chat body */
+            gapBetweenMessages?: string;
+        };
+        /** Settings for the chat footer */
+        footer?: {
+            /** Left padding of the chat footer */
+            paddingLeft?: string;
+            /** Right padding of the chat footer */
+            paddingRight?: string;
+            /** Top padding of the chat footer */
+            paddingTop?: string;
+            /** Bottom padding of the chat footer */
+            paddingBottom?: string;
+        };
+        /** Settings for user chat messages */
+        userMessages?: {
+            /** Background color of user chat messages */
+            backgroundColor?: string;
+        };
+        /** Settings for system chat messages */
+        systemMessages?: {
+            /** Background color of system chat messages */
+            backgroundColor?: string;
+        };
+        /** Settings for the chatbot input */
+        input?: {
+            /** Background color of the input */
+            backgroundColor?: string;
+            /** Settings to be applied on input focus */
+            focus?: {
+                /** Outline color of the input */
+                outlineColor?: string;
+            };
+        };
+        /** Settings for the chatbot header */
+        header?: {
+            /** Background color of the chatbot header */
+            backgroundColor?: string;
+            /** Text color of the chatbot header */
+            textColor?: string;
+        };
+        /** Settings for chatbot dropup */
+        dropup?: {
+            /** Background color of the dropup */
+            backgroundColor?: string;
+            /** Box shadow of the dropup */
+            boxShadow?: string;
+            /** Border radius of the dropup */
+            borderRadius?: string;
+            /** Settings for the section headers of the dropup */
+            headers?: {
+                /** Text color of headers */
+                textColor?: string;
+                /** Settings to be applied on hover of the headers */
+                hover?: {
+                    /** Background color of headers on hover */
+                    backgroundColor?: string;
+                };
+            };
+            /** Settings for the dropup items */
+            items?: {
+                /** Text color of the dropup items */
+                textColor?: string;
+                /** Settings to be applied on hover of dropup items */
+                hover?: {
+                    /** Background color of dropup items on hover */
+                    backgroundColor?: string;
+                };
+            };
+        };
+        /** Settings for the chatbot suggestions */
+        suggestions?: {
+            /** Text color of the chatbot suggestions */
+            textColor?: string;
+            /** Background color of the chatbot suggestions */
+            backgroundColor?: string;
+            /** Border of the chatbot suggestions */
+            border?: string;
+            /** 2-color gradient to be applied on the border */
+            borderGradient?: [string, string] | null;
+            /** Border radius of the chatbot suggestions */
+            borderRadius?: string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Background color of the chatbot suggestions on hover */
+                backgroundColor?: string;
+                /** Text color of the chatbot suggestions on hover */
+                textColor?: string;
+            };
+            /** 2-color gradient to be applied on suggestions loading animation */
+            loadingGradient?: [string, string];
+            /** Gap size between each suggestion item */
+            gap?: string;
+        };
+        /** Settings for the chatbot clickable messages */
+        clickableMessages?: {
+            /** Background color of the chatbot clickable messages */
+            backgroundColor?: string;
+            /** Text color of the chatbot clickable messages */
+            textColor?: string;
+            /** Border of the chatbot clickable messages */
+            border?: false | string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Text color of the chatbot clickable messages on hover */
+                textColor?: string;
+                /** Background color of the chatbot clickable messages on hover */
+                backgroundColor?: string;
+            };
+        };
+        /** Settings for the chatbot icons */
+        icons?: {
+            /** Color of the chatbot icons */
+            color?: string;
+            /** Setting to be applied on hover */
+            hover?: {
+                /** Color of the chatbot icons on hover */
+                color?: string;
+            };
+        };
+    };
 }
 /**
  * Complete set of theme settings defining the look and feel of components.
@@ -649,11 +812,17 @@ export interface DashboardWidgetStyleOptions extends WidgetStyleOptions {
 /** Style settings defining the look and feel of ChartWidget */
 export type ChartWidgetStyleOptions = ChartStyleOptions & WidgetStyleOptions;
 /**
- * Style settings defining the look and feel of TableWidget}
+ * Style settings defining the look and feel of TableWidget
  *
  * @internal
  */
 export type TableWidgetStyleOptions = TableStyleOptions & WidgetStyleOptions;
+/**
+ * Style settings defining the look and feel of TableWidget
+ *
+ * @internal
+ */
+export type PivotTableWidgetStyleOptions = PivotTableStyleOptions & WidgetStyleOptions;
 /**
  * Runs type guard check for ThemeOid.
  *