@sisense/sdk-ui 2.1.0 → 2.1.1

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/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/types.d.ts

@@ -3,7 +3,7 @@ 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';
+export type { DashboardStyleOptions, WidgetsPanelColumnLayout, WidgetsPanelLayout, WidgetsPanelCell, WidgetsPanelRow, WidgetsPanelColumn, } from '../models';
 /**
  * Props of the {@link DashboardById} component.
  */
@@ -87,6 +87,12 @@ export interface DashboardConfig {
          * If not specified, the default value is `false`.
          */
         responsive?: boolean;
+        /**
+         * If true will render editable layout.
+         *
+         * @internal
+         */
+        editMode?: boolean;
     };
 }
 /**

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;
     };

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

@@ -44,7 +44,7 @@ export { usePlugins } from './plugins-provider/plugins-provider';
 export { extractDimensionsAndMeasures, useExecutePluginQuery, } from './plugins-provider/use-execute-plugin-query';
 export { getThemeSettingsByOid } from './themes/theme-loader';
 export { getDefaultThemeSettings } from './theme-provider/default-theme-settings';
-export { useGetDashboardModel, useGetDashboardModels, useDashboardModel, getDashboardModel, getDashboardModels, useGetWidgetModel, getWidgetModel, translateToDashboardResponse, translateToDashboardsResponse, useGetHierarchyModels, getHierarchyModels, translateFiltersAndRelationsToDto, type DashboardModel, type GetDashboardModelParams, type GetDashboardModelsParams, type DashboardModelState, type DashboardModelLoadingState, type DashboardModelSuccessState, type DashboardModelErrorState, type DashboardModelsState, type DashboardModelsLoadingState, type DashboardModelsSuccessState, type DashboardModelsErrorState, type WidgetModel, type WidgetDataOptions, type WidgetModelState, type WidgetModelLoadingState, type WidgetModelErrorState, type WidgetModelSuccessState, type GetWidgetModelParams, type GetDashboardModelOptions, type GetDashboardModelsOptions, type WidgetsPanelColumnLayout, type WidgetsPanelLayout, type WidgetId, type WidgetsOptions, type CommonFiltersOptions, type CommonFiltersApplyMode, type FiltersIgnoringRules, type HierarchyModel, type Hierarchy, type HierarchyId, type GetHierarchyModelsParams, type HierarchyModelsState, type HierarchyModelsLoadingState, type HierarchyModelsErrorState, type HierarchyModelsSuccessState, UseDashboardModelActionType, } from './models';
+export { useGetDashboardModel, useGetDashboardModels, useDashboardModel, getDashboardModel, getDashboardModels, useGetWidgetModel, getWidgetModel, translateToDashboardResponse, translateToDashboardsResponse, useGetHierarchyModels, getHierarchyModels, translateFiltersAndRelationsToDto, type DashboardModel, type GetDashboardModelParams, type GetDashboardModelsParams, type DashboardModelState, type DashboardModelLoadingState, type DashboardModelSuccessState, type DashboardModelErrorState, type DashboardModelsState, type DashboardModelsLoadingState, type DashboardModelsSuccessState, type DashboardModelsErrorState, type WidgetModel, type WidgetDataOptions, type WidgetModelState, type WidgetModelLoadingState, type WidgetModelErrorState, type WidgetModelSuccessState, type GetWidgetModelParams, type GetDashboardModelOptions, type GetDashboardModelsOptions, type WidgetsPanelColumnLayout, type WidgetsPanelLayout, type WidgetsPanelColumn, type WidgetsPanelRow, type WidgetsPanelCell, type WidgetId, type WidgetsOptions, type CommonFiltersOptions, type CommonFiltersApplyMode, type FiltersIgnoringRules, type HierarchyModel, type Hierarchy, type HierarchyId, type GetHierarchyModelsParams, type HierarchyModelsState, type HierarchyModelsLoadingState, type HierarchyModelsErrorState, type HierarchyModelsSuccessState, UseDashboardModelActionType, } from './models';
 /**
  * Utility functions to translate a Fusion widget model from and to other widget data structures
  *

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

@@ -2,25 +2,37 @@ import { CommonFiltersOptions } from '../../common-filters/types';
 import { ColorPaletteTheme, TabberConfig } from '../../types';
 export type { CommonFiltersOptions, CommonFiltersApplyMode, FiltersIgnoringRules, } from '../../common-filters/types';
 /**
- * Column layout of dashboard widgets
+ * Part of Dashboard layout, which describes how widgets are arranged in a cell
+ */
+export interface WidgetsPanelCell {
+    widthPercentage: number;
+    /**
+     * @privateRemarks
+     * This value appears to be overwritten by the widget's height property.
+     * Marking as optional and internal for now.
+     * @internal
+     */
+    height?: number | string;
+    widgetId: string;
+}
+/**
+ * Part of Dashboard layout, which describes how widgets are arranged in a row
+ */
+export interface WidgetsPanelRow {
+    cells: WidgetsPanelCell[];
+}
+/**
+ * Part of Dashboard layout, which describes how widgets are arranged in a column
+ */
+export interface WidgetsPanelColumn {
+    widthPercentage: number;
+    rows: WidgetsPanelRow[];
+}
+/**
+ * Dashboard layout, which describes how widgets are arranged in the dashboard
  */
 export interface WidgetsPanelColumnLayout {
-    columns: {
-        widthPercentage: number;
-        rows: {
-            cells: {
-                widthPercentage: number;
-                /**
-                 * @privateRemarks
-                 * This value appears to be overwritten by the widget's height property.
-                 * Marking as optional and internal for now.
-                 * @internal
-                 */
-                height?: number | string;
-                widgetId: string;
-            }[];
-        }[];
-    }[];
+    columns: WidgetsPanelColumn[];
 }
 /**
  * Layout of dashboard widgets panel, which is a union of different layout algorithms

package/dist/packages/sdk-ui/src/theme-provider/default-theme-settings.d.ts

@@ -1,6 +1,9 @@
 import { CompleteThemeSettings } from '../types';
 export declare const DEFAULT_DIVIDER_COLOR = "#F2F2F2";
 export declare const DEFAULT_DIVIDER_WIDTH = 4;
+export declare const DEFAULT_DASHBOARD_BORDER_COLOR = "#D5D5D5";
+export declare const DEFAULT_DASHBOARD_BORDER_WIDTH = 1;
+export declare const DEFAULT_FILTER_PANEL_BORDER_COLOR = "#DADADA";
 export declare const DEFAULT_TITLE_FONT_SIZE = 15;
 /**
  * Returns default theme settings, which can be used as base for custom theme options.

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

@@ -944,6 +944,8 @@ export type DashboardThemeSettings = {
     backgroundColor?: string;
     dividerLineWidth?: number;
     dividerLineColor?: string;
+    borderWidth?: number;
+    borderColor?: string;
 };
 /**
  * Filter theme settings
@@ -954,6 +956,18 @@ export type FilterThemeSettings = {
         titleColor?: string;
         /** Background color */
         backgroundColor?: string;
+        /**
+         * Border color
+         *
+         * @internal
+         * */
+        borderColor?: string;
+        /**
+         * Border width
+         *
+         * @internal
+         * */
+        borderWidth?: number;
     };
 };
 /**