@devtron-labs/devtron-fe-common-lib 1.20.5-pre-8 → 1.20.5-pre-10

package/dist/Shared/Components/ActionMenu/types.d.ts

@@ -37,6 +37,9 @@ export type ActionMenuItemType<T extends string | number = string | number> = Om
     startIcon?: ActionMenuItemIconType;
     /** Defines the item to be displayed at the end of the menu item. */
     trailingItem?: TrailingItemType;
+    /** Prevents the menu from closing when the item is clicked. */
+    doNotCloseMenuOnClick?: boolean;
+    dataAttributesId?: number;
 } & ConditionalActionMenuComponentType;
 export type ActionMenuOptionType<T extends string | number> = {
     /**

package/dist/Shared/Components/ActionMenu/useActionMenu.hook.d.ts

@@ -64,7 +64,7 @@ export declare const useActionMenu: <T extends string | number>({ id, position,
         itemRef?: string;
         results?: number;
         unselectable?: "on" | "off";
-        inputMode?: "search" | "text" | "none" | "url" | "tel" | "email" | "numeric" | "decimal";
+        inputMode?: "search" | "text" | "none" | "url" | "decimal" | "tel" | "email" | "numeric";
         "aria-activedescendant"?: string;
         "aria-atomic"?: boolean | "true" | "false";
         "aria-autocomplete"?: "none" | "list" | "inline" | "both";

package/dist/Shared/Components/Backdrop/Backdrop.d.ts

@@ -1,3 +1,3 @@
 import { BackdropProps } from './types';
-declare const Backdrop: ({ children, onEscape, onClick, hasClearBackground, onBackdropMount, deactivateFocusOnEscape, initialFocus, }: BackdropProps) => import('react').ReactPortal;
+declare const Backdrop: ({ children, onEscape, onClick, hasClearBackground, onBackdropMount, deactivateFocusOnEscape, initialFocus, returnFocusOnDeactivate, }: BackdropProps) => import('react').ReactPortal;
 export default Backdrop;

package/dist/Shared/Components/Backdrop/types.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { DTFocusTrapType } from '../DTFocusTrap';
-export interface BackdropProps extends Pick<DTFocusTrapType, 'deactivateFocusOnEscape' | 'initialFocus' | 'onEscape'> {
+export interface BackdropProps extends Pick<DTFocusTrapType, 'deactivateFocusOnEscape' | 'initialFocus' | 'onEscape' | 'returnFocusOnDeactivate'> {
     /**
      * The content to be rendered within the backdrop component.
      */

package/dist/Shared/Components/Badge/utils.d.ts

@@ -1,7 +1,8 @@
-import { IconBaseColorType } from '../../types';
+import { IconBaseColorType, IconBaseSizeType } from '../../types';
 import { BadgeProps } from './types';
 export declare const getClassNameAccToVariant: (variant: BadgeProps["variant"]) => {
     styles: string;
     iconColor: IconBaseColorType;
 };
 export declare const getClassNameAccToSize: (size: BadgeProps["size"]) => "fs-11 lh-16 px-4 py-1" | "fs-12 lh-16 px-6 py-2" | "fs-13 lh-20 px-6 py-2";
+export declare const COMPONENT_SIZE_TO_ICON_SIZE_MAP: Record<BadgeProps['size'], IconBaseSizeType>;

package/dist/Shared/Components/Charts/Chart.component.d.ts

@@ -0,0 +1,102 @@
+import { ChartProps } from './types';
+/**
+ * A versatile Chart component that renders different types of charts using Chart.js.
+ * Supports area charts, pie charts, stacked bar charts (vertical/horizontal), and line charts.
+ *
+ * The component automatically adapts to theme changes and provides consistent styling
+ * across all chart types. Colors are provided by the user through the CHART_COLORS constant
+ * or custom color tokens.
+ *
+ * @example
+ * ```tsx
+ * [Area Chart Example]
+ * <Chart
+ *   id="quarterly-growth"
+ *   type="area"
+ *   xAxisLabels={['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023']}
+ *   datasets={[{
+ *     datasetName: 'Revenue Growth (%)',
+ *     yAxisValues: [15.2, 18.7, 22.3, 19.8],
+ *     backgroundColor: 'LavenderPurple300'
+ *   }]}
+ * />
+ *
+ * [Pie Chart Example]
+ * <Chart
+ *   id="technology-adoption"
+ *   type="pie"
+ *   xAxisLabels={['React', 'Vue.js', 'Angular']}
+ *   datasets={{
+ *     datasetName: 'Adoption Rate (%)',
+ *     yAxisValues: [45.2, 28.7, 35.4],
+ *     backgroundColor: ['SkyBlue300', 'AquaTeal400', 'LavenderPurple300']
+ *   }}
+ * />
+ *
+ * [Line Chart Example (non-stacked, non-filled)]
+ * <Chart
+ *   id="traffic-trends"
+ *   type="line"
+ *   xAxisLabels={['Jan', 'Feb', 'Mar', 'Apr']}
+ *   datasets={[{
+ *     datasetName: 'Website Traffic',
+ *     yAxisValues: [120, 190, 300, 500],
+ *     borderColor: 'SkyBlue500'
+ *   }]}
+ * />
+ *
+ * [Stacked Bar Chart Example]
+ * <Chart
+ *   id="team-allocation"
+ *   type="stackedBar"
+ *   xAxisLabels={['Q1', 'Q2', 'Q3', 'Q4']}
+ *   datasets={[
+ *     {
+ *       datasetName: 'Frontend',
+ *       yAxisValues: [120, 150, 180, 200],
+ *       backgroundColor: 'SkyBlue600'
+ *     },
+ *     {
+ *       datasetName: 'Backend',
+ *       yAxisValues: [80, 100, 120, 140],
+ *       backgroundColor: 'AquaTeal600'
+ *     }
+ *   ]}
+ * />
+ * ```
+ *
+ * @param id - Unique identifier for the chart canvas element
+ * @param type - Chart type: 'area', 'pie', 'stackedBar', 'stackedBarHorizontal', or 'line'
+ * @param xAxisLabels - Array of labels for the x-axis (or categories for pie charts)
+ * @param datasets - Chart data: array of datasets for most charts, single dataset object for pie charts
+ *
+ * @performance
+ * **Memoization Recommendations:**
+ * - `xAxisLabels`: Should be memoized with useMemo() if derived from complex calculations
+ * - `datasets`: Should be memoized with useMemo() as it contains arrays and objects that cause re-renders
+ * - Avoid passing inline objects or arrays directly to these props
+ *
+ * @example
+ * ```tsx
+ * [Good: Memoized props prevent unnecessary re-renders]
+ * const labels = useMemo(() => quarters.map(q => `Q${q}`), [quarters])
+ * const chartDatasets = useMemo(() => [
+ *   {
+ *     datasetName: 'Revenue',
+ *     yAxisValues: revenueData,
+ *     backgroundColor: 'LavenderPurple300'
+ *   }
+ * ], [revenueData])
+ *
+ * return <Chart id="revenue-chart" type="area" xAxisLabels={labels} datasets={chartDatasets} />
+ * ```
+ *
+ * @notes
+ * - Chart automatically re-renders when theme changes (light/dark mode)
+ * - Line charts are rendered as non-stacked and non-filled by default
+ * - Pie charts expect a single dataset object instead of an array
+ * - Colors should reference CHART_COLORS tokens for consistency
+ * - Component destroys and recreates Chart.js instance on prop changes for optimal performance
+ */
+declare const Chart: (props: ChartProps) => JSX.Element;
+export default Chart;

package/dist/Shared/Components/Charts/constants.d.ts

@@ -0,0 +1,9 @@
+import { AppThemeType } from '../../Providers';
+import { ChartColorKey } from './types';
+export declare const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>>;
+export declare const CHART_GRID_LINES_COLORS: Record<AppThemeType, string>;
+export declare const CHART_AXIS_COLORS: Record<AppThemeType, string>;
+export declare const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string>;
+export declare const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string>;
+export declare const LINE_DASH: number[];
+export declare const MAX_BAR_THICKNESS = 96;

package/dist/Shared/Components/Charts/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Chart } from './Chart.component';
+export { CHART_COLORS } from './constants';
+export type { ChartColorKey, ChartProps, ChartType, ReferenceLineConfigType, SimpleDataset, SimpleDatasetForPie, } from './types';
+export { chartColorGenerator } from './utils';

package/dist/Shared/Components/Charts/plugins.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'chart.js';
+import { AppThemeType } from '../../Providers';
+import { ReferenceLineConfigType } from './types';
+export declare const drawReferenceLine: (config: ReferenceLineConfigType, id: string, appTheme: AppThemeType) => Plugin;

package/dist/Shared/Components/Charts/types.d.ts

@@ -0,0 +1,114 @@
+import { ReactNode } from 'react';
+import { TooltipOptions, TooltipPositionerFunction } from 'chart.js';
+import { TooltipProps } from '../../../Common/Tooltip';
+import { AppThemeType } from '../../Providers';
+import { Never } from '../../types';
+export type ChartType = 'area' | 'pie' | 'stackedBar' | 'stackedBarHorizontal' | 'line';
+export type ColorTokensType = 'DeepPlum' | 'Magenta' | 'Slate' | 'Lavender' | 'SkyBlue' | 'AquaTeal' | 'LimeGreen' | 'CoralRed' | 'GoldenYellow' | 'CharcoalGray' | 'Gray';
+export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type ChartColorKey = `${ColorTokensType}${VariantsType}`;
+export type ChartTypeWithoutPie = Exclude<ChartType, 'pie'>;
+interface BaseSimpleDataset {
+    datasetName: string;
+    yAxisValues: number[];
+}
+export interface SimpleDataset extends BaseSimpleDataset {
+    color: ChartColorKey;
+    isClickable?: boolean;
+}
+export interface SimpleDatasetForLineAndArea extends Omit<SimpleDataset, 'isClickable'> {
+    isDashed?: boolean;
+}
+export interface SimpleDatasetForPie extends BaseSimpleDataset {
+    colors: Array<ChartColorKey>;
+    isClickable?: boolean[];
+}
+export interface ReferenceLineConfigType {
+    strokeWidth?: number;
+    color?: ChartColorKey;
+    value: number;
+}
+type XYAxisMax = {
+    xAxisMax?: number;
+    yAxisMax?: number;
+    /**
+     * Optional reference lines to draw across the chart
+     */
+    referenceLines?: ReferenceLineConfigType[];
+};
+type OnChartClickHandler = (datasetName: string, value: number) => void;
+export type TypeAndDatasetsType = ({
+    type: 'pie';
+    /**
+     * Needs to be memoized
+     */
+    datasets: SimpleDatasetForPie;
+    onChartClick?: OnChartClickHandler;
+    yScaleTickFormat?: never;
+} & Never<XYAxisMax>) | ({
+    type: 'line';
+    datasets: SimpleDatasetForLineAndArea[];
+    onChartClick?: never;
+    yScaleTickFormat?: (value: number) => string;
+} & XYAxisMax) | ({
+    type: 'area';
+    datasets: SimpleDatasetForLineAndArea;
+    onChartClick?: never;
+    yScaleTickFormat?: (value: number) => string;
+} & XYAxisMax) | ({
+    type: Exclude<ChartType, 'pie' | 'line' | 'area'>;
+    datasets: SimpleDataset[];
+    onChartClick?: OnChartClickHandler;
+    yScaleTickFormat?: (value: number) => string;
+} & XYAxisMax);
+export type ChartProps = {
+    id: string;
+    /**
+     * The x-axis labels. Needs to be memoized
+     */
+    xAxisLabels: string[];
+    /**
+     * Hide the x and y axis and grid lines
+     * @default false
+     */
+    hideAxis?: boolean;
+    hideXAxisLabels?: boolean;
+    tooltipConfig?: {
+        getTooltipContent?: (args: Parameters<TooltipOptions['external']>[0]) => ReactNode;
+        /**
+         * @default 'top'
+         */
+        placement?: TooltipProps['placement'];
+    };
+    /** A title for x axis */
+    xScaleTitle?: string;
+    /** A title for y axis */
+    yScaleTitle?: string;
+} & TypeAndDatasetsType;
+export type TransformDatasetProps = {
+    appTheme: AppThemeType;
+} & ({
+    type: 'pie';
+    dataset: SimpleDatasetForPie;
+} | {
+    type: 'line' | 'area';
+    dataset: SimpleDatasetForLineAndArea;
+} | {
+    type: Exclude<ChartType, 'pie' | 'line' | 'area'>;
+    dataset: SimpleDataset;
+});
+export type GetBackgroundAndBorderColorProps = TransformDatasetProps;
+export type TransformDataForChartProps = {
+    appTheme: AppThemeType;
+} & TypeAndDatasetsType;
+export interface GetDefaultOptionsParams {
+    chartProps: ChartProps;
+    appTheme: AppThemeType;
+    externalTooltipHandler: TooltipOptions['external'];
+}
+declare module 'chart.js' {
+    interface TooltipPositionerMap {
+        barElementCenterPositioner: TooltipPositionerFunction<'bar'>;
+    }
+}
+export {};

package/dist/Shared/Components/Charts/utils.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { Chart, ChartDataset, ChartOptions, ChartType as ChartJSChartType, Point, TooltipOptions } from 'chart.js';
+import { AppThemeType } from '../../Providers';
+import { ChartType, GetDefaultOptionsParams, TransformDataForChartProps } from './types';
+export declare const getLegendsLabelConfig: (type: ChartType, appTheme: AppThemeType) => {
+    usePointStyle: false;
+    boxHeight: number;
+    generateLabels: (chart: Chart<"line">) => {
+        fillStyle: string;
+        strokeStyle: string;
+        lineDash: number[];
+        lineWidth: number;
+        text: string;
+        borderRadius?: number | import('chart.js').BorderRadius;
+        datasetIndex?: number;
+        index?: number;
+        fontColor?: import('chart.js').Color;
+        hidden?: boolean;
+        lineCap?: CanvasLineCap;
+        lineDashOffset?: number;
+        lineJoin?: CanvasLineJoin;
+        pointStyle?: import('chart.js').PointStyle;
+        rotation?: number;
+        textAlign?: import('chart.js').TextAlign;
+    }[];
+    color: string;
+    font: {
+        family: string;
+        size: number;
+        lineHeight: string;
+        weight: number;
+    };
+} | {
+    usePointStyle: true;
+    boxHeight: number;
+    boxWidth: number;
+    pointStyle: "rectRounded";
+    color: string;
+    font: {
+        family: string;
+        size: number;
+        lineHeight: string;
+        weight: number;
+    };
+};
+export declare const getChartJSType: (type: ChartType) => ChartJSChartType;
+export declare const getDefaultOptions: ({ chartProps, appTheme, externalTooltipHandler, }: GetDefaultOptionsParams) => ChartOptions;
+export declare const transformDataForChart: (props: TransformDataForChartProps) => (ChartDataset<"line"> | {
+    backgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    borderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    pointBackgroundColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    pointBorderColor?: string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern> | ((ctx: import('chart.js').ScriptableContext<"line">, options: import('chart.js/dist/types/basic').AnyObject) => import('chart.js').Color) | readonly (string | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasGradient> | import('chart.js/dist/types/utils')._DeepPartialObject<CanvasPattern>)[];
+    label: string;
+    data: number[];
+} | {
+    backgroundColor: string[];
+    hoverBackgroundColor: string[];
+    borderColor: string;
+    label: string;
+    data: number[];
+} | {
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    borderColor: string;
+    label: string;
+    data: number[];
+})[];
+export declare function chartColorGenerator(): Generator<"DeepPlum500" | "DeepPlum300" | "DeepPlum100" | "DeepPlum50" | "DeepPlum600" | "DeepPlum400" | "DeepPlum200" | "DeepPlum700" | "DeepPlum800" | "DeepPlum900" | "DeepPlum950" | "Magenta500" | "Magenta300" | "Magenta100" | "Magenta50" | "Magenta600" | "Magenta400" | "Magenta200" | "Magenta700" | "Magenta800" | "Magenta900" | "Magenta950" | "Slate500" | "Slate300" | "Slate100" | "Slate50" | "Slate600" | "Slate400" | "Slate200" | "Slate700" | "Slate800" | "Slate900" | "Slate950" | "Lavender500" | "Lavender300" | "Lavender100" | "Lavender50" | "Lavender600" | "Lavender400" | "Lavender200" | "Lavender700" | "Lavender800" | "Lavender900" | "Lavender950" | "SkyBlue500" | "SkyBlue300" | "SkyBlue100" | "SkyBlue50" | "SkyBlue600" | "SkyBlue400" | "SkyBlue200" | "SkyBlue700" | "SkyBlue800" | "SkyBlue900" | "SkyBlue950" | "AquaTeal500" | "AquaTeal300" | "AquaTeal100" | "AquaTeal50" | "AquaTeal600" | "AquaTeal400" | "AquaTeal200" | "AquaTeal700" | "AquaTeal800" | "AquaTeal900" | "AquaTeal950" | "LimeGreen500" | "LimeGreen300" | "LimeGreen100" | "LimeGreen50" | "LimeGreen600" | "LimeGreen400" | "LimeGreen200" | "LimeGreen700" | "LimeGreen800" | "LimeGreen900" | "LimeGreen950" | "CoralRed500" | "CoralRed300" | "CoralRed100" | "CoralRed50" | "CoralRed600" | "CoralRed400" | "CoralRed200" | "CoralRed700" | "CoralRed800" | "CoralRed900" | "CoralRed950" | "GoldenYellow500" | "GoldenYellow300" | "GoldenYellow100" | "GoldenYellow50" | "GoldenYellow600" | "GoldenYellow400" | "GoldenYellow200" | "GoldenYellow700" | "GoldenYellow800" | "GoldenYellow900" | "GoldenYellow950" | "CharcoalGray500" | "CharcoalGray300" | "CharcoalGray100" | "CharcoalGray50" | "CharcoalGray600" | "CharcoalGray400" | "CharcoalGray200" | "CharcoalGray700" | "CharcoalGray800" | "CharcoalGray900" | "CharcoalGray950" | "Gray500" | "Gray300" | "Gray100" | "Gray50" | "Gray600" | "Gray400" | "Gray200" | "Gray700" | "Gray800" | "Gray900" | "Gray950", void, unknown>;
+export declare const buildChartTooltipFromContext: ({ title, body, labelColors: labelColorsProp, }: Pick<Parameters<TooltipOptions["external"]>[0]["tooltip"], "title" | "body" | "labelColors">) => ReactNode;
+export declare const distanceBetweenPoints: (pt1: Point, pt2: Point) => number;

package/dist/Shared/Components/ClusterStatusIcon/ClusterStatusIcon.d.ts

@@ -0,0 +1,3 @@
+import { ClusterStatusIconProps } from './types';
+declare const ClusterStatusIcon: ({ clusterStatus, isVirtualCluster }: ClusterStatusIconProps) => JSX.Element;
+export default ClusterStatusIcon;

package/dist/Shared/Components/ClusterStatusIcon/index.d.ts

@@ -0,0 +1 @@
+export { default as ClusterStatusIcon } from './ClusterStatusIcon';

package/dist/Shared/Components/ClusterStatusIcon/types.d.ts

@@ -0,0 +1,5 @@
+import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
+export interface ClusterStatusIconProps {
+    clusterStatus: ClusterStatusType;
+    isVirtualCluster: boolean;
+}

package/dist/Shared/Components/ClusterStatusIcon/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClusterStatusType } from '../../../Pages/ResourceBrowser';
+export declare const getBulletColorAccToStatus: (status: ClusterStatusType) => "bcg-5" | "bcr-5" | "bcy-5";

package/dist/Shared/Components/ContextSwitcher/ContextSwitcher.d.ts

@@ -1,2 +1,2 @@
 import { ContextSwitcherTypes } from './types';
-export declare const ContextSwitcher: ({ inputId, options, inputValue, onInputChange, isLoading, value, onChange, placeholder, filterOption, formatOptionLabel, optionListError, reloadOptionList, classNamePrefix, resource, }: ContextSwitcherTypes) => JSX.Element;
+export declare const ContextSwitcher: ({ inputId, options, inputValue, onInputChange, isLoading, value, onChange, placeholder, filterOption, formatOptionLabel, optionListError, reloadOptionList, classNamePrefix, }: ContextSwitcherTypes) => JSX.Element;

package/dist/Shared/Components/ContextSwitcher/types.d.ts

@@ -3,7 +3,6 @@ import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker';
 export interface ContextSwitcherTypes extends Pick<SelectPickerProps, 'placeholder' | 'onChange' | 'value' | 'isLoading' | 'onInputChange' | 'inputValue' | 'inputId' | 'formatOptionLabel' | 'filterOption' | 'optionListError' | 'reloadOptionList' | 'classNamePrefix'> {
     options: GroupBase<SelectPickerOptionType<string | number>>[];
     isAppDataAvailable?: boolean;
-    resource: 'Cluster' | 'Release' | 'Tenant' | 'Application' | 'Job' | 'Application Group' | 'Chart Store';
 }
 export interface RecentlyVisitedOptions extends SelectPickerOptionType<number> {
     isDisabled?: boolean;

package/dist/Shared/Components/DTFocusTrap/DTFocusTrap.d.ts

@@ -4,5 +4,5 @@ export declare const useFocusTrapControl: () => {
     disableFocusTrap: typeof noop;
     resumeFocusTrap: typeof noop;
 };
-declare const DTFocusTrap: ({ onEscape, deactivateFocusOnEscape, children, initialFocus, }: DTFocusTrapType) => JSX.Element;
+declare const DTFocusTrap: ({ onEscape, deactivateFocusOnEscape, children, initialFocus, returnFocusOnDeactivate, }: DTFocusTrapType) => JSX.Element;
 export default DTFocusTrap;

package/dist/Shared/Components/DTFocusTrap/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Props as FocusTrapProps } from 'focus-trap-react';
 type FocusTargetValue = HTMLElement | SVGElement | string;
 type FocusTargetValueOrFalse = FocusTargetValue | false;
 /**
@@ -7,7 +8,7 @@ type FocusTargetValueOrFalse = FocusTargetValue | false;
  * an opt-out, or a function that returns a DOM node or `false`.
  */
 type FocusTargetOrFalse = FocusTargetValueOrFalse | (() => FocusTargetValueOrFalse);
-export interface DTFocusTrapType {
+export interface DTFocusTrapType extends Pick<FocusTrapProps['focusTrapOptions'], 'returnFocusOnDeactivate'> {
     /**
      * Callback function that gets triggered when the Escape key is pressed. \
      * Should be wrapped in useCallback to prevent unnecessary re-renders.

package/dist/Shared/Components/ExportToCsv/ExportToCsv.d.ts

@@ -0,0 +1,3 @@
+import { ExportToCsvProps } from './types';
+declare const ExportToCsv: <HeaderItemType extends string>({ apiPromise, fileName, triggerElementConfig, disabled, modalConfig, headers, downloadRequestId, }: ExportToCsvProps<HeaderItemType>) => JSX.Element;
+export default ExportToCsv;

package/dist/Shared/Components/ExportToCsv/ExportToCsvDialog.d.ts

@@ -0,0 +1,3 @@
+import { ExportToCsvDialogProps } from './types';
+declare const ExportToCsvDialog: ({ exportDataError, isLoading, initiateDownload, handleCancelRequest, }: ExportToCsvDialogProps) => JSX.Element;
+export default ExportToCsvDialog;

package/dist/Shared/Components/ExportToCsv/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExportToCsv } from './ExportToCsv';
+export * from './types';

package/dist/Shared/Components/ExportToCsv/types.d.ts

@@ -0,0 +1,64 @@
+import { ServerErrors } from '../../../Common/ServerError';
+import { APIOptions } from '../../../Common/Types';
+import { ButtonProps } from '../Button';
+type TriggerElementConfigType = {
+    buttonProps: ButtonProps;
+    showOnlyIcon?: boolean;
+    customButton?: never;
+    isExternalTrigger?: false;
+} | {
+    customButton: {
+        content: JSX.Element;
+        className: string;
+    };
+    buttonProps?: never;
+    showOnlyIcon?: false;
+    isExternalTrigger?: false;
+} | {
+    isExternalTrigger: true;
+    showOnlyIcon?: false;
+    buttonProps?: never;
+    customButton?: never;
+} | {
+    showOnlyIcon: true;
+    buttonProps?: never;
+    customButton?: never;
+    isExternalTrigger?: false;
+};
+export interface ExportToCsvProps<HeaderItemKeyType extends string> {
+    headers: {
+        label: string;
+        key: HeaderItemKeyType;
+    }[];
+    apiPromise: ({ signal, }: Pick<APIOptions, 'signal'>) => Promise<Record<HeaderItemKeyType, string | number | boolean>[]>;
+    fileName: string;
+    /**
+     * If nothing given will render a Button with "Export CSV" text
+     */
+    triggerElementConfig?: TriggerElementConfigType;
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If not given would show default dialog
+     */
+    modalConfig?: {
+        hideDialog: false;
+        renderCustomModal?: (proceedWithDownload: (shouldProceed: boolean) => void) => JSX.Element;
+    } | {
+        hideDialog: true;
+        renderCustomModal?: never;
+    };
+    /**
+     * If given, would trigger export on when this changes and has some value
+     */
+    downloadRequestId?: string | number;
+}
+export interface ExportToCsvDialogProps {
+    isLoading: boolean;
+    exportDataError: ServerErrors;
+    initiateDownload: () => void;
+    handleCancelRequest: () => void;
+}
+export {};

package/dist/Shared/Components/FeatureDescription/types.d.ts

@@ -31,7 +31,7 @@ type FeatureDescriptionModalWithTabsConfig = {
     imageStyles?: never;
 };
 export type FeatureDescriptionModalProps = {
-    title: string;
+    title: React.ReactNode;
     closeModalText?: string;
     closeModal?: () => void;
 } & ((BaseFeatureDescriptionModalProps & {

package/dist/Shared/Components/FramerComponents/index.d.ts

@@ -1,2 +1,2 @@
-import { animate, AnimatePresence, motion, useAnimationControls, useMotionTemplate, useMotionValue } from 'framer-motion';
-export { animate, AnimatePresence, motion, useAnimationControls, useMotionTemplate, useMotionValue };
+import { animate, AnimatePresence, motion, useAnimation, useAnimationControls, useMotionTemplate, useMotionValue } from 'framer-motion';
+export { animate, AnimatePresence, motion, useAnimation, useAnimationControls, useMotionTemplate, useMotionValue };

package/dist/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.d.ts

@@ -1,3 +1,4 @@
+import { ButtonComponentType } from '../Button';
 import { GenericSectionErrorStateProps } from './types';
-declare const GenericSectionErrorState: ({ reload, withBorder, title, subTitle, description, buttonText, rootClassName, useInfoIcon, progressingProps, }: GenericSectionErrorStateProps) => JSX.Element;
+declare const GenericSectionErrorState: <T extends ButtonComponentType = ButtonComponentType.button>({ reload, buttonProps, customIcon, withBorder, title, subTitle, description, buttonText, rootClassName, useInfoIcon, progressingProps, }: GenericSectionErrorStateProps<T>) => JSX.Element;
 export default GenericSectionErrorState;

package/dist/Shared/Components/GenericSectionErrorState/types.d.ts

@@ -1,10 +1,7 @@
 import { ReactNode } from 'react';
+import { ButtonComponentType, ButtonProps } from '../Button';
 import { IconsProps } from '../Icon';
-export type GenericSectionErrorStateProps = {
-    /**
-     * Handler for reloading the section
-     */
-    reload?: () => void;
+export type GenericSectionErrorStateProps<ButtonType extends ButtonComponentType = ButtonComponentType.button> = {
     /**
      * If true, border is added to the section
      *
@@ -37,6 +34,7 @@ export type GenericSectionErrorStateProps = {
      */
     progressingProps: Omit<IconsProps, 'name'>;
     useInfoIcon?: false;
+    customIcon?: never;
 } | {
     progressingProps?: never;
     /**
@@ -45,7 +43,25 @@ export type GenericSectionErrorStateProps = {
      * @default false
      */
     useInfoIcon: true;
+    customIcon?: never;
+} | {
+    progressingProps?: never;
+    useInfoIcon?: never;
+    customIcon?: never;
 } | {
+    customIcon: JSX.Element;
     progressingProps?: never;
     useInfoIcon?: never;
+}) & ({
+    /**
+     * Handler for reloading the section
+     */
+    reload: () => void;
+    buttonProps?: never;
+} | {
+    reload?: never;
+    buttonProps: ButtonProps<ButtonType>;
+} | {
+    reload?: never;
+    buttonProps?: never;
 });

package/dist/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.d.ts

@@ -1,3 +1,3 @@
 import { HeaderWithCreateButtonProps } from './types';
-export declare const HeaderWithCreateButton: ({ headerName, additionalHeaderInfo }: HeaderWithCreateButtonProps) => JSX.Element;
+export declare const HeaderWithCreateButton: ({ isJobView }: HeaderWithCreateButtonProps) => JSX.Element;
 export default HeaderWithCreateButton;

package/dist/Shared/Components/Header/HeaderWithCreateButton/types.d.ts

@@ -1,8 +1,6 @@
 import { ActionMenuProps } from '../../ActionMenu';
-import { PageHeaderType } from '../types';
 export interface HeaderWithCreateButtonProps {
-    headerName: string;
-    additionalHeaderInfo: PageHeaderType['additionalHeaderInfo'];
+    isJobView?: boolean;
 }
 export declare enum CreateActionMenuItems {
     CUSTOM_APP = "create-custom-app",

package/dist/Shared/Components/Header/PageHeader.d.ts

@@ -1,3 +1,3 @@
 import { PageHeaderType } from './types';
-declare const PageHeader: ({ headerName, headerImage, additionalHeaderInfo, showTabs, renderHeaderTabs, isBreadcrumbs, breadCrumbs, renderActionButtons, onClose, tippyProps, }: PageHeaderType) => JSX.Element;
+declare const PageHeader: ({ headerName, headerImage, additionalHeaderInfo, showTabs, renderHeaderTabs, isBreadcrumbs, breadCrumbs, renderActionButtons, onClose, tippyProps, closeIcon, }: PageHeaderType) => JSX.Element;
 export default PageHeader;

package/dist/Shared/Components/Header/types.d.ts

@@ -17,8 +17,10 @@ export interface PageHeaderType {
         TippyIcon?: React.FunctionComponent<any>;
         tippyMessage?: string;
         onClickTippyButton?: () => void;
+        tippyHeader?: string;
     };
     onClose?: () => void;
+    closeIcon?: JSX.Element;
 }
 export interface ServerInfo {
     currentVersion: string;