@sisense/sdk-ui 2.1.0 → 2.2.0

package/dist/packages/sdk-ui/src/api/rest-api.d.ts

@@ -33,6 +33,7 @@ export declare class RestApi {
         }[] | undefined;
         layout?: import("./types/dashboard-dto").LayoutDto | undefined;
         style?: import("./types/dashboard-dto").DashboardStyleDto | undefined;
+        settings?: import("./types/dashboard-dto").DashboardSettings | undefined;
     } & import("../utils/utility-types").AnyObject)[]>;
     /**
      * Get a specific dashboard

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

@@ -41,6 +41,12 @@ export type DashboardStyleDto = {
     paletteId?: string;
 };
 export declare const isCascadingFilterDto: (filter: FilterDto | CascadingFilterDto) => filter is CascadingFilterDto;
+export type DashboardSettings = {
+    autoUpdateOnFiltersChange?: boolean;
+    useAcceleration?: boolean;
+    aiAssistantEnabled?: boolean;
+    managedByTool?: string;
+};
 /**
  * @internal
  */
@@ -56,5 +62,6 @@ export type DashboardDto = {
     }[];
     layout?: LayoutDto;
     style?: DashboardStyleDto;
+    settings?: DashboardSettings;
 } & AnyObject;
 export {};

package/dist/packages/sdk-ui/src/common/hooks/use-state-with-history.d.ts

@@ -0,0 +1,64 @@
+interface UseStateWithHistoryOptions<T> {
+    /**
+     * Maximum number of history entries to store
+     * @default 10
+     */
+    capacity?: number;
+    /**
+     * Initial history entries
+     * @default []
+     */
+    initialHistory?: T[];
+}
+interface StateWithHistoryResult<T> {
+    /** Current state value */
+    state: T;
+    /** All history entries */
+    history: T[];
+    /** Index of the current state in history */
+    currentIndex: number;
+    /** Set state and add to history */
+    setState: (value: T | ((prev: T) => T)) => void;
+    /** Go back to the previous state in history */
+    undo: () => void;
+    /** Go forward to the next state in history */
+    redo: () => void;
+    /** Whether there's a previous state to go back to */
+    canUndo: boolean;
+    /** Whether there's a next state to go forward to */
+    canRedo: boolean;
+    /** Go to a specific point in history by index */
+    goTo: (index: number) => void;
+    /** Clear all history except current state */
+    clearHistory: () => void;
+}
+/**
+ * A hook that provides state management with history tracking for undo/redo functionality.
+ *
+ * @param initialState - The initial state value
+ * @param options - Configuration options for history management
+ * @returns An object containing the current state, history, and methods to navigate through history
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   state,
+ *   setState,
+ *   undo,
+ *   redo,
+ *   canUndo,
+ *   canRedo
+ * } = useStateWithHistory({ count: 0 });
+ *
+ * // Update state
+ * setState({ count: state.count + 1 });
+ *
+ * // Undo last action if possible
+ * if (canUndo) undo();
+ *
+ * // Redo last undone action if possible
+ * if (canRedo) redo();
+ * ```
+ */
+export declare function useStateWithHistory<T>(initialState: T, options?: UseStateWithHistoryOptions<T>): StateWithHistoryResult<T>;
+export {};

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

@@ -9,7 +9,7 @@ export interface ContentPanelProps {
     /**
      * An object defining how the widgets should be laid out.
      */
-    layout?: WidgetsPanelLayout;
+    layout: WidgetsPanelLayout;
     /**
      * If true adjust layout based on available width of content panel.
      *

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

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

package/dist/packages/sdk-ui/src/dashboard/components/editable-layout/components/cell-drop-overlay.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Props for the CellDropOverlay component
+ *
+ * @internal
+ */
+type CellDropOverlayProps = {
+    /**
+     * The unique identifier for the cell drop overlay
+     */
+    id: string;
+    /**
+     * The ID of the widget related to the cell drop overlay
+     */
+    widgetId: string;
+    /**
+     * The index of the column the widget is in
+     */
+    columnIndex: number;
+    /**
+     * The index of the row the widget is in
+     */
+    rowIndex: number;
+    /**
+     * Whether to disable the side zones
+     */
+    disableSideZones?: boolean;
+};
+/**
+ * Renders a cell drop overlay component that displays a replace zone and side zones for drag and drop operations.
+ *
+ * @internal
+ */
+export declare const CellDropOverlay: ({ id, widgetId, columnIndex, rowIndex, disableSideZones, }: CellDropOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+/**
+ * The orientation of the draggable line
+ */
+type DraggableLineOrientation = 'vertical' | 'horizontal';
+/**
+ * Props for the DraggableLine component
+ */
+type DraggableLineProps = {
+    /**
+     * The unique identifier for the draggable line
+     */
+    id: string;
+    /**
+     * The orientation of the draggable line
+     */
+    orientation?: DraggableLineOrientation;
+};
+/**
+ * Renders a draggable line component that can be used to resize columns or rows
+ *
+ * @internal
+ */
+export declare const DraggableLine: ({ id, orientation }: DraggableLineProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/sdk-ui/src/dashboard/components/editable-layout/components/draggable-widget-wrapper.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { EditableLayoutDragData } from '../../../../dashboard/components/editable-layout/types';
+/**
+ * Props for the DraggableWidgetWrapper component
+ *
+ * @internal
+ */
+type DraggableWidgetWrapperProps = {
+    /**
+     * The unique identifier for the draggable widget wrapper
+     */
+    id: string;
+    /**
+     * The data for the draggable widget wrapper
+     */
+    data: EditableLayoutDragData;
+    /**
+     * The child elements to render inside the wrapper
+     */
+    children: React.ReactNode;
+};
+/**
+ * Renders a draggable widget wrapper component that allows for drag and drop operations.
+ *
+ * @internal
+ */
+export declare const DraggableWidgetWrapper: ({ id, data, children }: DraggableWidgetWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { EditableLayoutDropData } from '../../../../dashboard/components/editable-layout/types';
+/**
+ * Props for the DroppableZone component
+ *
+ * @internal
+ */
+type DroppableZoneProps = {
+    /**
+     * The unique identifier for the droppable zone
+     */
+    id: string;
+    /**
+     * The data for the droppable zone
+     */
+    data: EditableLayoutDropData;
+};
+/**
+ * Renders a droppable zone component that allows drop operations.
+ *
+ * @internal
+ */
+export declare const DroppableZone: ({ id, data }: DroppableZoneProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the ResizableColumns component
+ *
+ * @internal
+ */
+interface ResizableColumnsProps {
+    /**
+     * The child elements to render inside the resizable columns
+     */
+    children: ReactNode;
+    /**
+     * The widths of the columns (in percentage)
+     */
+    widths: number[];
+    /**
+     * The minimum width of the columns (in percentage)
+     */
+    minColWidth: number;
+    /**
+     * The callback function to call when the widths change
+     */
+    onWidthsChange: (widths: number[]) => void;
+}
+/**
+ * Renders a resizable columns component that allows for column resizing.
+ *
+ * @internal
+ */
+export declare const ResizableColumns: ({ children, widths, minColWidth, onWidthsChange, }: ResizableColumnsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the ResizableRow component
+ *
+ * @internal
+ */
+type ResizableRowProps = {
+    /**
+     * The child elements to render inside the resizable row
+     */
+    children: ReactNode;
+    /**
+     * The unique identifier
+     */
+    id: string;
+    /**
+     * The height of the resizable row
+     */
+    height: number;
+    /**
+     * The minimum height of the resizable row
+     */
+    minHeight: number;
+    /**
+     * The maximum height of the resizable row
+     */
+    maxHeight: number;
+    /**
+     * The callback function to call when the height changes
+     */
+    onHeightChange: (height: number) => void;
+};
+/**
+ * Renders a resizable row component that allows for row resizing.
+ *
+ * @internal
+ */
+export declare const ResizableRow: ({ children, id, height, minHeight, maxHeight, onHeightChange, }: ResizableRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/sdk-ui/src/dashboard/components/editable-layout/components/row-drop-overlay.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Props for the RowDropOverlay component
+ *
+ * @internal
+ */
+type RowDropOverlayProps = {
+    /**
+     * The unique identifier
+     */
+    id: string;
+    /**
+     * Referring to the column index
+     */
+    columnIndex: number;
+    /**
+     * Referring to the row index
+     */
+    rowIndex?: number;
+    /**
+     * Whether is referring to the last row (different styling)
+     */
+    isLastRow?: boolean;
+};
+/**
+ * Renders a row drop overlay component that allows for drop operations.
+ *
+ * @internal
+ */
+export declare const RowDropOverlay: ({ id, columnIndex, rowIndex, isLastRow }: RowDropOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+export declare const RESIZE_LINE_SIZE = 4;
+export declare const MIN_COL_WIDTH_PERCENTAGE = 10;
+export declare const MIN_CELL_WIDTH_PERCENTAGE = 5;
+export declare const MIN_ROW_HEIGHT = 60;
+export declare const MAX_ROW_HEIGHT = 1500;
+export declare const WIDGET_HEADER_HEIGHT = 32;
+export declare const Z_INDEX_RESIZE_OVERLAY = 100;
+export declare const Z_INDEX_RESIZE_LINE = 101;
+export declare const Z_INDEX_CELL_DROPZONE = 102;
+export declare const Z_INDEX_ROW_DROPZONE = 103;
+export declare const Z_INDEX_ACTIVE_DRAGGABLE = 104;

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

@@ -0,0 +1,28 @@
+import { WidgetsPanelLayout } from '../../../models';
+import { WidgetProps } from '../../../props';
+/**
+ * Props for the {@link EditableLayout} component.
+ *
+ * @internal
+ */
+export interface EditableLayoutProps {
+    /**
+     * An object defining how the widgets should be laid out.
+     */
+    layout: WidgetsPanelLayout;
+    /**
+     * A list of widget props to render.
+     */
+    widgets: WidgetProps[];
+    /**
+     * A callback function that is called when the layout changes.
+     */
+    onLayoutChange?: (layout: WidgetsPanelLayout) => void;
+}
+/**
+ * A React used to render a layout of widgets that can resize and rearrange their positions using drag-and-drop.
+ *
+ * @param props - {@link EditableLayoutProps}
+ * @internal
+ */
+export declare const EditableLayout: ({ layout, widgets, onLayoutChange }: EditableLayoutProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { WidgetsPanelColumn, WidgetsPanelColumnLayout, WidgetsPanelLayout } from '../../../models';
+import { EditableLayoutDropData, EditableLayoutDragData } from './types';
+/**
+ * Updates the height of all cells in a specific row within a column layout.
+ *
+ * @param layout - The current layout to modify
+ * @param height - The new height to set for the cells
+ * @param columnIndex - The index of the column containing the row to update
+ * @param rowIndex - The index of the row to update
+ *
+ * @returns A new layout with updated cell heights
+ *
+ * @internal
+ */
+export declare function updateRowHeight(layout: WidgetsPanelColumnLayout, height: number, columnIndex: number, rowIndex: number): {
+    columns: WidgetsPanelColumn[];
+};
+/**
+ * Updates the width percentages of columns or cells within a layout.
+ *
+ * @param layout - The current layout to modify
+ * @param widths - Array of width percentages to apply
+ * @param parentColumnIndex - Optional index of the parent column when updating cell widths
+ * @param parentRowIndex - Optional index of the parent row when updating cell widths
+ *
+ * @returns A new layout with updated width percentages
+ *
+ * @internal
+ */
+export declare function updateLayoutWidths(layout: WidgetsPanelLayout, widths: number[], parentColumnIndex?: number, parentRowIndex?: number): WidgetsPanelColumnLayout;
+/**
+ * Updates the layout based on drag and drop operations.
+ *
+ * @param layout - The current layout to modify
+ * @param dragData - Data about the dragged widget
+ * @param dropData - Data about the drop target and operation type
+ *
+ * @returns A new layout reflecting the drag and drop operation
+ *
+ * @internal
+ */
+export declare function updateLayoutAfterDragAndDrop(layout: WidgetsPanelLayout, dragData: EditableLayoutDragData, dropData: EditableLayoutDropData): WidgetsPanelColumnLayout;

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

@@ -0,0 +1,78 @@
+/**
+ * The type of drop operation
+ *
+ * @internal
+ */
+export declare enum DropType {
+    /**
+     * Place the cell aside another cell to the left
+     */
+    PLACE_LEFT = "PLACE_LEFT",
+    /**
+     * Place the cell aside another cell to the right
+     */
+    PLACE_RIGHT = "PLACE_RIGHT",
+    /**
+     * Swap the position of two cells
+     */
+    SWAP = "SWAP",
+    /**
+     * Move the cell to a new row
+     */
+    NEW_ROW = "NEW_ROW"
+}
+/**
+ * Data about the dragged cell
+ *
+ * @internal
+ */
+export type EditableLayoutDragData = {
+    /**
+     * The unique identifier of the widget
+     */
+    widgetId: string;
+    /**
+     * The column index
+     */
+    columnIndex: number;
+    /**
+     * The row index
+     */
+    rowIndex: number;
+};
+/**
+ * Data about the drop target
+ *
+ * @internal
+ */
+export type EditableLayoutDropData = {
+    /**
+     * The type of drop operation
+     */
+    type: DropType.PLACE_LEFT | DropType.PLACE_RIGHT | DropType.SWAP;
+    /**
+     * The unique identifier of the widget
+     */
+    widgetId: string;
+    /**
+     * The column index
+     */
+    columnIndex: number;
+    /**
+     * The row index
+     */
+    rowIndex: number;
+} | {
+    /**
+     * The type of drop operation
+     */
+    type: DropType.NEW_ROW;
+    /**
+     * The column index
+     */
+    columnIndex: number;
+    /**
+     * The row index
+     */
+    rowIndex?: number;
+};

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

@@ -0,0 +1,5 @@
+import { EditableLayoutDragData, EditableLayoutDropData } from '../../../dashboard/components/editable-layout/types';
+import { DragStartEvent } from '@dnd-kit/core';
+export declare const isEditableLayoutDragData: (data: any | undefined) => data is EditableLayoutDragData;
+export declare const isEditableLayoutDropData: (data: any) => data is EditableLayoutDropData;
+export declare const getDraggingWidgetId: (event: DragStartEvent) => string | null;

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

@@ -1,6 +1,4 @@
 import type { DeepRequired } from 'ts-essentials';
 import { DashboardByIdConfig, DashboardConfig } from './types';
-export declare const DASHBOARD_DIVIDER_COLOR = "#d5d5d5";
-export declare const DASHBOARD_DIVIDER_WIDTH = 1;
 export declare const DEFAULT_DASHBOARD_CONFIG: DeepRequired<DashboardConfig>;
 export declare const DEFAULT_DASHBOARD_BY_ID_CONFIG: DeepRequired<DashboardByIdConfig>;

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

@@ -1,11 +1,14 @@
 /// <reference types="react" />
 import { DashboardProps } from '../dashboard/types';
 import { Filter, FilterRelations } from '@sisense/sdk-data';
+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"
+    UI_FILTERS_PANEL_COLLAPSE = "UI.FILTERS.PANEL.COLLAPSE",
+    /** Widgets panel layout updated */
+    WIDGETS_PANEL_LAYOUT_UPDATE = "WIDGETS_PANEL_LAYOUT.UPDATE"
 }
 export type DashboardChangeAction = {
     type: DashboardChangeType.FILTERS_UPDATE;
@@ -13,6 +16,9 @@ export type DashboardChangeAction = {
 } | {
     type: DashboardChangeType.UI_FILTERS_PANEL_COLLAPSE;
     payload: boolean;
+} | {
+    type: DashboardChangeType.WIDGETS_PANEL_LAYOUT_UPDATE;
+    payload: WidgetsPanelLayout;
 };
 /**
  * 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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface DashboardHeaderToolbarMenuItem {
+    title: string;
+    icon?: JSX.Element;
+    ariaLabel?: string;
+    onClick: () => void;
+}
+export interface UseDashboardHeaderToolbarProps {
+    menuItems: DashboardHeaderToolbarMenuItem[];
+}
+/**
+ * Hook that returns a toolbar element for dashboard header
+ */
+export declare const useDashboardHeaderToolbar: ({ menuItems }: UseDashboardHeaderToolbarProps) => {
+    toolbar: () => import("react/jsx-runtime").JSX.Element;
+};
+export default useDashboardHeaderToolbar;

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

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { WidgetsPanelLayout } from '../../models';
+/**
+ * Props for the useEditModeToolbar hook
+ */
+export interface UseEditModeToolbarProps {
+    /**
+     * Initial layout to track history for
+     */
+    initialLayout: WidgetsPanelLayout;
+    /**
+     * Optional callback when layout is applied
+     */
+    onApply?: (layout: WidgetsPanelLayout) => void;
+    /**
+     * Optional callback when edit is canceled
+     */
+    onCancel?: () => void;
+    /**
+     * Maximum number of history entries to store
+     * @default 20
+     */
+    historyCapacity?: number;
+}
+/**
+ * Return type for the useEditModeToolbar hook
+ */
+export interface UseEditModeToolbarResult {
+    /**
+     * Current layout state
+     */
+    layout: WidgetsPanelLayout;
+    /**
+     * Function to update layout state and track in history
+     */
+    setLayout: (layout: WidgetsPanelLayout | ((prev: WidgetsPanelLayout) => WidgetsPanelLayout)) => void;
+    /**
+     * Whether there are unsaved changes
+     */
+    hasChanges: boolean;
+    /**
+     * Toolbar component with undo, redo, cancel, apply buttons
+     */
+    toolbar: () => JSX.Element;
+}
+/**
+ * Hook that provides layout state management with history tracking and a toolbar with undo/redo/cancel/apply buttons
+ *
+ * @param props Configuration options for the toolbar
+ * @returns Layout state and toolbar component
+ */
+export declare function useEditModeToolbar({ initialLayout, onApply, onCancel, historyCapacity, }: UseEditModeToolbarProps): UseEditModeToolbarResult;

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

@@ -3,7 +3,8 @@ import { WidgetProps } from '../props';
 import { DashboardChangeAction } from '../dashboard/dashboard';
 import { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';
 import { FiltersPanelConfig } from '../filters/components/filters-panel/types';
-export type { DashboardStyleOptions, WidgetsPanelColumnLayout } from '../models';
+import { ReactNode } from 'react';
+export type { DashboardStyleOptions, WidgetsPanelColumnLayout, WidgetsPanelLayout, WidgetsPanelCell, WidgetsPanelRow, WidgetsPanelColumn, } from '../models';
 /**
  * Props of the {@link DashboardById} component.
  */
@@ -87,6 +88,12 @@ export interface DashboardConfig {
          * If not specified, the default value is `false`.
          */
         responsive?: boolean;
+        /**
+         * If true will .
+         *
+         * @internal
+         */
+        editMode?: boolean;
     };
 }
 /**
@@ -164,4 +171,5 @@ export interface DashboardProps {
  */
 export interface DashboardHeaderProps {
     title: string;
+    toolbar?: () => ReactNode;
 }

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

@@ -17,6 +17,8 @@ export declare const useDashboardThemeInternal: ({ styleOptions }: DashboardThem
             backgroundColor: string;
             dividerLineWidth: number;
             dividerLineColor: string;
+            borderWidth: number;
+            borderColor: string;
         };
         palette?: import("..").ColorPaletteTheme | undefined;
     };
@@ -34,6 +36,8 @@ export declare const useDashboardTheme: (args_0: DashboardThemeParams) => {
             backgroundColor: string;
             dividerLineWidth: number;
             dividerLineColor: string;
+            borderWidth: number;
+            borderColor: string;
         };
         palette?: import("..").ColorPaletteTheme | undefined;
     };