@sisense/sdk-ui 2.20.0 → 2.22.0

package/dist/packages/sdk-ui/src/domains/widgets/components/common-widget/types.d.ts

@@ -0,0 +1,8 @@
+import type { DistributiveOmit } from '../../../../shared/utils/utility-types/distributive-omit';
+import type { WidgetProps } from '../widget/types';
+/**
+ * Props for the facade widget component.
+ *
+ * @internal
+ */
+export type CommonWidgetProps = DistributiveOmit<WidgetProps, 'id'>;

package/dist/packages/sdk-ui/src/domains/widgets/components/{custom-widget.d.ts → custom-widget/custom-widget.d.ts}

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { CustomWidgetProps } from '../../../props';
+import { CustomWidgetProps } from './types';
 /**
  * Component that renders a custom widget.
  *

package/dist/packages/sdk-ui/src/domains/widgets/components/custom-widget/index.d.ts

@@ -0,0 +1,2 @@
+export * from './custom-widget.js';
+export * from './types.js';

package/dist/packages/sdk-ui/src/domains/widgets/components/custom-widget/types.d.ts

@@ -0,0 +1,71 @@
+import { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
+import { CustomWidgetEventProps, CustomWidgetStyleOptions, GenericDataOptions } from '../../../../types';
+import { WidgetConfig } from '../widget/types';
+/**
+ * Props for the Custom Widget component
+ */
+export interface CustomWidgetProps extends CustomWidgetEventProps {
+    /**
+     * Custom widget type. This is typically the name/ID of the custom widget.
+     *
+     * @category Widget
+     */
+    customWidgetType: string;
+    /**
+     * 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;
+    /**
+     * Filters that will highlight query results
+     *
+     * @category Data
+     */
+    highlights?: Filter[];
+    /**
+     * Configurations for how to interpret and present the data passed to the table
+     *
+     * @category Chart
+     */
+    dataOptions: GenericDataOptions;
+    /**
+     * Style options for the custom widget.
+     *
+     * @category Widget
+     */
+    styleOptions?: CustomWidgetStyleOptions;
+    /**
+     * Widget configuration (e.g. header toolbar menu)
+     *
+     * @category Widget
+     * @internal
+     */
+    config?: WidgetConfig;
+    /**
+     * Title of the widget
+     *
+     * @category Widget
+     */
+    title?: string;
+    /**
+     *  Description of the widget
+     *
+     * @category Widget
+     */
+    description?: string;
+    /**
+     * Specific options for the custom widget.
+     *
+     * @category Widget
+     */
+    customOptions?: Record<string, any>;
+}

package/dist/packages/sdk-ui/src/domains/widgets/components/pivot-table-widget/index.d.ts

@@ -1 +1,2 @@
 export * from './pivot-table-widget.js';
+export * from './types.js';

package/dist/packages/sdk-ui/src/domains/widgets/components/pivot-table-widget/pivot-table-widget.d.ts

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'react';
-import { PivotTableWidgetProps } from '../../../../props';
+import { PivotTableWidgetProps } from './types';
 /**
  * React component extending `PivotTable` to support widget style options.
  *

package/dist/packages/sdk-ui/src/domains/widgets/components/pivot-table-widget/types.d.ts

@@ -0,0 +1,141 @@
+import { ReactNode } from 'react';
+import { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
+import type { CustomDataCellFormatter, CustomHeaderCellFormatter } from '../../../../domains/visualizations/components/pivot-table/formatters/types';
+import { PivotTableDataOptions } from '../../../../domains/visualizations/core/chart-data-options/types';
+import type { PivotTableDataPointEventHandler } from '../../../../props';
+import { PivotTableDrilldownOptions, PivotTableWidgetStyleOptions } from '../../../../types';
+import { WidgetConfig } from '../widget/types';
+/**
+ * Props for the {@link PivotTableWidget} component
+ */
+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;
+    /**
+     * Filters that will highlight query results
+     *
+     * @category Data
+     */
+    highlights?: Filter[];
+    /**
+     * 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;
+    /**
+     * Widget configuration (e.g. header toolbar menu)
+     *
+     * @category Widget
+     * @internal
+     */
+    config?: WidgetConfig;
+    /**
+     * 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;
+    /**
+     * Configuration for the pivot table drilldown
+     *
+     * @category Widget
+     */
+    drilldownOptions?: PivotTableDrilldownOptions;
+    /**
+     * Callback function that is called when the pivot table cell is clicked
+     *
+     * @category Callbacks
+     */
+    onDataPointClick?: PivotTableDataPointEventHandler;
+    /**
+     * Callback function that is called when the pivot table cell is right-clicked
+     *
+     * @category Callbacks
+     */
+    onDataPointContextMenu?: PivotTableDataPointEventHandler;
+    /**
+     * Applies custom styling and behavior to pivot table data cells.
+     *
+     * This formatter function returns formatting objects instead of mutating parameters,
+     * following functional programming principles. Use this single callback to combine
+     * multiple handlers and control the call sequence from outside the pivot.
+     *
+     * @example
+     * ```typescript
+     * const customDataFormatter: CustomDataCellFormatter = (cell, jaqlPanelItem, dataOption, id) => {
+     *   if (cell.value > 1000) {
+     *     return {
+     *       style: { backgroundColor: 'lightgreen' },
+     *       content: `${cell.value} (High)`
+     *     };
+     *   }
+     * };
+     * ```
+     *
+     * @internal
+     */
+    onDataCellFormat?: CustomDataCellFormatter;
+    /**
+     * Applies custom styling and behavior to pivot table row and column headers.
+     *
+     * This formatter function returns formatting objects instead of mutating parameters,
+     * following functional programming principles. Use this single callback to combine
+     * multiple handlers and control the call sequence from outside the pivot.
+     *
+     * @example
+     * ```typescript
+     * const customHeaderFormatter: CustomHeaderCellFormatter = (cell, jaqlPanelItem, dataOption, id) => {
+     *   if (cell.content === 'Total') {
+     *     return {
+     *       style: { fontWeight: 'bold', color: 'blue' },
+     *       className: 'total-header'
+     *     };
+     *   }
+     * };
+     * ```
+     *
+     * @internal
+     */
+    onHeaderCellFormat?: CustomHeaderCellFormatter;
+    /** @internal */
+    onChange?: (props: Partial<PivotTableWidgetProps>) => void;
+}

package/dist/packages/sdk-ui/src/domains/widgets/components/pivot-table-widget/use-with-pivot-table-widget-drilldown.d.ts

@@ -1,6 +1,6 @@
 import { Attribute } from '@sisense/sdk-data';
-import { PivotTableWidgetProps } from '../../../../props.js';
 import { DataOptionLocation, DrilldownSelection } from '../../../../types.js';
+import { PivotTableWidgetProps } from './types';
 type UseWithPivotTableWidgetDrilldownParams = {
     propsToExtend: PivotTableWidgetProps;
     onDrilldownSelectionsChange?: (target: Attribute | DataOptionLocation, selections: DrilldownSelection[]) => void;

package/dist/packages/sdk-ui/src/domains/widgets/components/tabber-buttons-widget/types.d.ts

@@ -1,4 +1,4 @@
-import { CustomWidgetProps } from '../../../../props';
+import { CustomWidgetProps } from '../../../../domains/widgets/components/custom-widget/types';
 /**
  * Configuration options that define style of the various elements of the tabbers buttons widget.
  *

package/dist/packages/sdk-ui/src/domains/widgets/components/table-widget/index.d.ts

@@ -0,0 +1,2 @@
+export * from './table-widget.js';
+export * from './types.js';

package/dist/packages/sdk-ui/src/domains/widgets/components/{table-widget.d.ts → table-widget/table-widget.d.ts}

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'react';
-import { TableWidgetProps } from '../../../props';
+import { TableWidgetProps } from './types';
 /**
  * The TableWidget component extending the Table component to support widget style options.
  *

package/dist/packages/sdk-ui/src/domains/widgets/components/table-widget/types.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
+import { TableDataOptions } from '../../../../domains/visualizations/core/chart-data-options/types';
+import { TableWidgetStyleOptions } from '../../../../types';
+/**
+ * Props for the {@link TableWidget} component
+ *
+ * @internal
+ */
+export interface TableWidgetProps {
+    /**
+     * 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: TableDataOptions;
+    /**
+     * Style options for both the table and widget including the widget header
+     *
+     * @category Widget
+     */
+    styleOptions?: TableWidgetStyleOptions;
+    /**
+     * React nodes to be rendered at the top of component, before the table
+     *
+     * @category Widget
+     */
+    topSlot?: ReactNode;
+    /**
+     * React nodes to be rendered at the bottom of component, after the table
+     *
+     * @category Widget
+     */
+    bottomSlot?: ReactNode;
+    /**
+     * Title of the widget
+     *
+     * @category Widget
+     */
+    title?: string;
+    /**
+     *  Description of the widget
+     *
+     * @category Widget
+     */
+    description?: string;
+}

package/dist/packages/sdk-ui/src/domains/widgets/components/text-widget/index.d.ts

@@ -0,0 +1,2 @@
+export * from './text-widget.js';
+export * from './types.js';

package/dist/packages/sdk-ui/src/domains/widgets/components/{text-widget.d.ts → text-widget/text-widget.d.ts}

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { TextWidgetProps } from '../../../props';
+import { TextWidgetProps } from './types';
 export declare function isTextWidgetProps(props: any): props is TextWidgetProps;
 /**
  * A widget that displays HTML content.

package/dist/packages/sdk-ui/src/domains/widgets/components/text-widget/types.d.ts

@@ -0,0 +1,29 @@
+import type { TextWidgetDataPointEventHandler } from '../../../../props';
+import { TextWidgetStyleOptions } from '../../../../types';
+import { WidgetConfig } from '../widget/types';
+/**
+ * Props for the `TextWidget` component.
+ */
+export interface TextWidgetProps {
+    /**
+     * Style options for the text widget.
+     *
+     * @category Widget
+     */
+    styleOptions: TextWidgetStyleOptions;
+    /**
+     * A callback that allows you to customize what happens when a text widget is clicked.
+     * Since TextWidget doesn't have specific data points, this fires when clicking anywhere on the widget.
+     *
+     * @category Callbacks
+     * @internal
+     */
+    onDataPointClick?: TextWidgetDataPointEventHandler;
+    /**
+     * Widget configuration (e.g. header toolbar menu)
+     *
+     * @category Widget
+     * @internal
+     */
+    config?: WidgetConfig;
+}

package/dist/packages/sdk-ui/src/domains/widgets/components/widget/index.d.ts

@@ -0,0 +1,2 @@
+export * from './widget.js';
+export * from './types.js';

package/dist/packages/sdk-ui/src/domains/widgets/components/widget/types.d.ts

@@ -0,0 +1,45 @@
+import type { BeforeMenuOpenHandler } from '../../../../infra/contexts/menu-provider/types';
+import type { WidgetHeaderConfig } from '../../shared/widget-header/types';
+import type { ChartWidgetProps } from '../chart-widget/types';
+import type { CustomWidgetProps } from '../custom-widget/types';
+import type { PivotTableWidgetProps } from '../pivot-table-widget/types';
+import type { TextWidgetProps } from '../text-widget/types';
+/**
+ * Generic widget configuration (e.g. header menu, toolbar).
+ * Shared across chart, pivot, text, and custom widgets.
+ */
+export type WidgetConfig = {
+    /**
+     * Configurations for the widget header (e.g. toolbar menu items)
+     */
+    header?: WidgetHeaderConfig;
+};
+/**
+ * Type of the widget component.
+ */
+export type WidgetType = 'chart' | 'pivot' | 'text' | 'custom';
+/**
+ * A utility type that combines widget-specific properties (`BaseWidget`)
+ * with a common widget props including corresponding widget type (`Type`).
+ */
+export type WithCommonWidgetProps<BaseWidget, Type extends WidgetType> = BaseWidget & {
+    /**
+     * Unique identifier of the widget within the container component (dashboard)
+     *
+     */
+    readonly id: string;
+    /**
+     * Widget type
+     */
+    widgetType: Type;
+    /**
+     * Optional handler function to process menu options before opening the context menu.
+     *
+     * @internal
+     */
+    onBeforeMenuOpen?: BeforeMenuOpenHandler;
+};
+/**
+ * Props for the widget component within a container component like dashboard.
+ */
+export type WidgetProps = WithCommonWidgetProps<ChartWidgetProps, 'chart'> | WithCommonWidgetProps<PivotTableWidgetProps, 'pivot'> | WithCommonWidgetProps<TextWidgetProps, 'text'> | WithCommonWidgetProps<CustomWidgetProps, 'custom'>;

package/dist/packages/sdk-ui/src/domains/widgets/components/{widget.d.ts → widget/widget.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WidgetProps } from '../../../props';
+import { WidgetProps } from './types';
 /**
  * Facade component that renders a widget within a dashboard based on the widget type.
  *