@sisense/sdk-ui 1.11.0 → 1.12.0

package/dist/api/types/dashboard-dto.d.ts

@@ -5,7 +5,7 @@ import { AnyObject } from '../../utils/utility-types';
 export type Layout = {
     columns: {
         width: number;
-        cells: {
+        cells?: {
             subcells: {
                 width: number;
                 elements: {
@@ -28,6 +28,7 @@ export type CascadingFilterDto = {
     instanceid?: string;
     disabled?: boolean;
 };
+export declare const isCascadingFilterDto: (filter: FilterDto | CascadingFilterDto) => filter is CascadingFilterDto;
 export type DashboardDto = {
     oid: string;
     title: string;

package/dist/app/client-application.d.ts

@@ -43,6 +43,7 @@ export type AppConfig = {
     };
     /**
      * Query limit (max rows count that will be fetched in query)
+     *
      * @default 20000
      */
     queryLimit?: number;

package/dist/chart/helpers/use-chart-renderer-props.d.ts

@@ -19,6 +19,7 @@ type UnpreparedInternalChartProps = {
 };
 /**
  * Prepares the props for the chart renderer.
+ *
  * @param internalProps - unprepared internal chart props.
  * @returns Chart renderer props or null if the chart props is not ready yet
  * @internal

package/dist/chart-options-processor/translations/funnel-plot-options.d.ts

@@ -1,5 +1,6 @@
 import { PlotOptions } from '../chart-options-service';
 import { ValueLabelSettings } from './value-label-section';
+import { CompleteThemeSettings } from '../../types';
 import { FunnelChartDesignOptions } from './design-options';
 import { ChartDataOptionsInternal } from '../../chart-data-options/types';
 export declare const DefaultFunnelLabels: FunnelLabels;
@@ -50,4 +51,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) => PlotOptions;
+export declare const getFunnelPlotOptions: (funnelDesignOptions: FunnelChartDesignOptions, chartDataOptions: ChartDataOptionsInternal, themeSettings?: CompleteThemeSettings) => PlotOptions;

package/dist/chart-options-processor/translations/pie-plot-options.d.ts

@@ -1,6 +1,7 @@
 import { PlotOptions } from '../chart-options-service';
 import { ValueLabelSettings } from './value-label-section';
 import { ChartDataOptionsInternal } from '../../chart-data-options/types';
+import { CompleteThemeSettings } from '../../types';
 export declare const DefaultPieLabels: PieLabels;
 export type PieLabels = {
     enabled: boolean;
@@ -25,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) => PlotOptions;
+export declare const getPiePlotOptions: (pieType: "classic" | "donut" | "ring" | undefined, pieLabels: PieLabels | undefined, chartDataOptions: ChartDataOptionsInternal, themeSettings?: CompleteThemeSettings) => PlotOptions;
 export {};

package/dist/common/components/loading-indicator.d.ts

@@ -89,27 +89,40 @@ export declare const LoadingIndicator: ({ themeSettings, onCancel, }: {
                 borderGradient: [string, string] | null;
                 borderRadius: string;
                 hover: {
-                    backgroundColor: string;
                     textColor: string;
+                    backgroundColor: string;
                 };
                 loadingGradient: [string, string];
                 gap: string;
             };
             clickableMessages: {
-                backgroundColor: string;
                 textColor: string;
+                backgroundColor: string;
                 border: string | false;
+                borderGradient: [string, string] | null;
                 hover: {
                     textColor: string;
                     backgroundColor: string;
                 };
             };
+            dataTopics: {
+                backgroundColor: string;
+                items: {
+                    textColor: string;
+                    backgroundColor: string;
+                };
+            };
             icons: {
                 color: string;
-                hover: {
-                    color: string;
+                feedbackIcons: {
+                    hoverColor: string;
                 };
             };
+            tooltips: {
+                backgroundColor: string;
+                textColor: string;
+                boxShadow: string;
+            };
         };
     } | undefined;
     onCancel?: (() => void) | undefined;

package/dist/common/hooks/use-fetch.d.ts

@@ -15,8 +15,8 @@ export type RequestConfig = {
 /**
  * The result of the `useFetch` hook.
  * Return value of the `useQuery` hook from `@tanstack/react-query`.
- * @link https://tanstack.com/query/v4/docs/framework/react/reference/useQuery
  *
+ * @link https://tanstack.com/query/v4/docs/framework/react/reference/useQuery
  * @template TData - The type of the data returned by the fetch request
  * @template TError - The type of the error returned by the fetch request
  */

package/dist/common/hooks/use-has-changed.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook that returns if a value from the previous render has changed.
+ *
+ * @param value - Value for the current render.
+ * @param propNames - Names of keys to compare.
+ * @param [compare] - Optional comparison function
+ * @returns Has the value changed or not.
+ */
+export declare function useHasChanged<T>(value: T, propNames: Array<keyof T>, compare?: (value: T, prev: T) => boolean): boolean;

package/dist/common/hooks/use-should-load.d.ts

@@ -0,0 +1,12 @@
+import { ClientApplication } from '../../app/client-application.js';
+/**
+ * Hook that generates a function for testing whether or not load
+ *  should be performed for this render
+ *
+ * @param params - the component or hook params object
+ * @param isParamsChanged - have the params changed from previous invocation
+ * @returns generated render checking function
+ */
+export declare function useShouldLoad<T extends {
+    enabled?: boolean;
+}>({ enabled }: T, isParamsChanged: boolean): (app: ClientApplication | undefined, force?: boolean) => app is ClientApplication;

package/dist/dashboard/components/content-panel.d.ts

@@ -0,0 +1,41 @@
+import { Layout, WidgetModel } from '../../models';
+/**
+ * Props for the {@link ContentPanel} component.
+ *
+ * @internal
+ */
+export interface ContentPanelProps {
+    /**
+     * An object defining how the widgets should be laid out.
+     */
+    layout: Layout;
+    /**
+     * A list of widget models to render.
+     */
+    widgets: WidgetModel[];
+}
+/**
+ * A React component used for rendering a layout of widgets.
+ *
+ * @example
+ * Example of using the component with the useGetDashboardModel hook:
+ * ```tsx
+ * const { dashboard, isLoading, isError } = useGetDashboardModel({
+ *   dashboardOid: 'dashboard-oid',
+ *   includeWidgets: true,
+ * });
+ *
+ * const { layout, widgets } = dashboard;
+ * if (!layout || !widgets) return null;
+ *
+ * return (
+ *   <ContentPanel
+ *     layout={layout}
+ *     widgets={widgets}
+ *   />
+ * );
+ * ```
+ * @param props - {@link ContentPanelProps}
+ * @internal
+ */
+export declare const ContentPanel: ({ layout, widgets }: ContentPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/dashboard/components/dashboard-container.d.ts

@@ -0,0 +1,2 @@
+import { DashboardLayoutProps } from '../../dashboard/types';
+export declare const DashboardContainer: ({ title, layout, widgets, filters, onFiltersChange, }: DashboardLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/dashboard/components/dashboard-header.d.ts

@@ -0,0 +1,2 @@
+import { DashboardHeaderProps } from '../../dashboard/types';
+export declare const DashboardHeader: ({ title }: DashboardHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/dashboard/components/plugin-service.d.ts

@@ -0,0 +1,21 @@
+import { WidgetModel } from '../../models';
+import { CompleteThemeSettings } from '../../types';
+/**
+ * @internal
+ */
+export type ReactWidgetPlugin<P = {}> = {
+    name: string;
+    Plugin: any;
+    createChartProps(w: WidgetModel, themeSettings: CompleteThemeSettings): P;
+};
+/**
+ * POC - singleton plugin store. A widget from a Fusion dashboard can use this
+ * store to look up and render a chart from a third-party plugin that matches its type.
+ *
+ * @internal
+ */
+export declare class PluginService {
+    static pluginMap: Map<string, ReactWidgetPlugin<{}>>;
+    static get(pluginType: string): ReactWidgetPlugin | undefined;
+    static register(pluginType: string, plugin: ReactWidgetPlugin): void;
+}

package/dist/dashboard/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DASHBOARD_DIVIDER_COLOR = "#d5d5d5";
+export declare const DASHBOARD_DIVIDER_WIDTH = 1;

package/dist/dashboard/dashboard-by-id.d.ts

@@ -0,0 +1,7 @@
+import { DashboardByIdProps } from './types';
+/**
+ * React component that renders a dashboard created in Sisense Fusion Embed
+ *
+ * @internal
+ */
+export declare const DashboardById: ({ dashboardOid }: DashboardByIdProps) => import("react/jsx-runtime").JSX.Element;

package/dist/dashboard/dashboard.d.ts

@@ -0,0 +1,8 @@
+import { DashboardProps } from '../dashboard/types';
+/**
+ * React component that renders a dashboard
+ * Include inside logic of applying common filters to widgets
+ *
+ * @internal
+ */
+export declare const Dashboard: ({ title, layout, widgets, filters }: DashboardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/dashboard/types.d.ts

@@ -0,0 +1,41 @@
+import { Layout, WidgetModel } from '../models';
+import { Filter } from '@sisense/sdk-data';
+/**
+ * Props for the DashboardById component
+ *
+ * @internal
+ */
+export interface DashboardByIdProps {
+    dashboardOid: string;
+}
+/**
+ * Props for the DashboardLayout component
+ *
+ * @internal
+ */
+export interface DashboardLayoutProps {
+    title: string;
+    layout: Layout;
+    widgets: WidgetModel[];
+    filters: Filter[];
+    onFiltersChange: (filters: Filter[]) => void;
+}
+/**
+ * Props for the Dashboard component
+ *
+ * @internal
+ */
+export interface DashboardProps {
+    title: string;
+    layout: Layout;
+    widgets: WidgetModel[];
+    filters: Filter[];
+}
+/**
+ * Props for the Dashboard Header component
+ *
+ * @internal
+ */
+export interface DashboardHeaderProps {
+    title: string;
+}

package/dist/dashboard/utils.d.ts

@@ -0,0 +1,5 @@
+import { Filter } from '@sisense/sdk-data';
+import { WidgetModel } from '../models';
+export declare function isSupportedWidgetTypeByDashboard(widgetType: string): boolean;
+export declare function addFiltersToWidget(widget: WidgetModel, filters: Filter[]): WidgetModel;
+export declare const getDividerStyle: (color: string, width: number) => string;

package/dist/dynamic-size-container/dynamic-size-container.d.ts

@@ -24,7 +24,15 @@ export type DynamicSizeContainerProps = {
  * (3) Then the container's size is used.
  * (4) Otherwise the "defaultSize" is used.
  *
+ * Component Structure:
+ * The component layout consists of multiple layers to address different requirements:
+ * - Container layer: The top `div` that handles inheriting the parent size.
+ * - Content layer: The middle `div` that represents the actual content size.
+ * - Detached content layer: The bottom `div` that detaches the internal content (using "absolute" positioning) from the layout to prevent the parent layout from being constrained by its content size.
  *
+ * Limitations:
+ * - It is not possible to determine if a parent element has no size to inherit or if its size has been explicitly set to "0px".
+ *   Therefore, the default size will be applied when the parent element's size is set to "0px".
  *
  * @param {DynamicSizeContainerProps} props - DynamicSizeContainer properties.
  * @returns {JSX.Element} The DynamicSizeContainer component.

package/dist/filters/components/common/date-range-field-button.d.ts

@@ -1,14 +1,11 @@
-import { CompleteThemeSettings } from '../../../types';
 import { type FunctionComponent, type ButtonHTMLAttributes } from 'react';
-type Variant = 'white' | 'grey';
+import { Themable } from '../../../theme-provider/types';
+export type Variant = 'white' | 'grey';
 type InputProps = {
     variant?: Variant;
     label?: string;
     isActive?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-type ThemeMixin = {
-    theme: CompleteThemeSettings;
-};
-export type DateRangeFieldButtonProps = InputProps & ThemeMixin;
+export type DateRangeFieldButtonProps = InputProps & Themable;
 export declare const DateRangeFieldButton: FunctionComponent<DateRangeFieldButtonProps>;
 export {};

package/dist/filters/components/date-filter/date-filter/date-filter.d.ts

@@ -27,6 +27,21 @@ export type DateRangeFilterProps = {
      * Whether this is a dependent filter.
      */
     isDependent?: boolean;
+    /**
+     * The variant of the date range field button.
+     * To be compatible with the old DateRangeFilterTile.
+     *
+     * TODO: Remove this prop when the old DateRangeFilterTile is deprecated.
+     * @internal
+     * @default 'grey'
+     */
+    variant?: 'white' | 'grey';
+    /**
+     * Whether the filter is disabled.
+     *
+     * @internal
+     */
+    disabled?: boolean;
 };
 /**
  * Date Filter component for filtering data by date range.

package/dist/filters/components/date-filter/date-range-filter-tile/date-range-filter-display.d.ts

@@ -0,0 +1,6 @@
+import { DateRangeFilter } from '@sisense/sdk-data';
+type DateRangeFilterDisplayProps = {
+    filter: DateRangeFilter;
+};
+export declare const DateRangeFilterDisplay: (props: DateRangeFilterDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/filters/components/date-filter/date-range-filter-tile/date-range-filter-tile.d.ts

@@ -41,6 +41,12 @@ export interface DateRangeFilterTileProps {
      * List of filters this filter is dependent on.
      */
     parentFilters?: Filter[];
+    /**
+     * Whether to display the filter as a tiled version.
+     * @default false
+     * @internal
+     */
+    tiled?: boolean;
 }
 /**
  * Date Range Filter Tile component for filtering data by date range.

package/dist/filters/components/date-filter/date-range-filter-tile/editable-date-range-filter.d.ts

@@ -0,0 +1,14 @@
+import { DateRangeFilter } from '@sisense/sdk-data';
+import type { DateRangeFilterTileProps } from './date-range-filter-tile';
+import { DateLimits } from './use-date-limits';
+type EditableDateRangeFilterProps = DateRangeFilterTileProps & {
+    filter: DateRangeFilter;
+    dateLimits: Required<DateLimits>;
+    isOldDateRangeFilterTile?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Editable Date Range Filter component for filtering data by date range.
+ */
+export declare const EditableDateRangeFilter: (props: EditableDateRangeFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/filters/components/date-filter/date-range-filter-tile/use-date-limits.d.ts

@@ -1,7 +1,6 @@
 import { DataSource, Filter, LevelAttribute } from '@sisense/sdk-data';
-type DateLimits = {
+export type DateLimits = {
     minDate?: string;
     maxDate?: string;
 };
 export declare const useDateLimits: (userLimits: DateLimits, attribute: LevelAttribute, dataSource?: DataSource, parentFilters?: Filter[]) => Required<DateLimits> | null;
-export {};

package/dist/filters/components/date-filter/relative-date-filter-tile/relative-date-filter.d.ts

@@ -19,8 +19,8 @@ export interface RelativeDateFilterProps {
  */
 export declare const RelativeDateFilter: FunctionComponent<RelativeDateFilterProps>;
 export declare const DATE_OPS_MAP: {
-    [x: string]: string;
+    readonly [x: string]: "dateFilter.last" | "dateFilter.next";
 };
 export declare const DATE_LEVELS_MAP: {
-    [x: string]: string;
+    readonly [x: string]: "dateFilter.days" | "dateFilter.weeks" | "dateFilter.months" | "dateFilter.quarters" | "dateFilter.years";
 };

package/dist/filters/components/icons/arrow-icon.d.ts

@@ -0,0 +1,6 @@
+import { Themable } from '../../../theme-provider/types';
+import type { SVGProps } from 'react';
+export declare const ArrowIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height' | 'fill' | 'onClick'> & {
+    direction: 'left' | 'right';
+    disabled?: boolean;
+} & Themable) => import("react/jsx-runtime").JSX.Element;

package/dist/filters/components/icons/double-arrow-icon.d.ts

@@ -0,0 +1,6 @@
+import { Themable } from '../../../theme-provider/types';
+import type { SVGProps } from 'react';
+export declare const DoubleArrowIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height' | 'fill' | 'onClick'> & {
+    direction: 'left' | 'right';
+    disabled?: boolean;
+} & Themable) => import("react/jsx-runtime").JSX.Element;

package/dist/highcharts-memorized.d.ts

@@ -3,5 +3,5 @@ import { HighchartsOptionsInternal } from './chart-options-processor/chart-optio
 type HighchartsReactMemoizedProps = {
     options: HighchartsOptionsInternal;
 };
-export declare const HighchartsReactMemoized: import("react").MemoExoticComponent<({ options }: HighchartsReactMemoizedProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const HighchartsReactMemoized: import("react").NamedExoticComponent<HighchartsReactMemoizedProps>;
 export {};