@gravity-ui/querieskit 1.0.4 → 1.2.0

package/build/esm/types/history.d.ts

@@ -1,91 +1,10 @@
-import { ReactNode } from 'react';
-import { RegisteredFormFields } from './forms';
+import { QueryListRow, QueryTimestamp } from './queryList';
 export type QueryStatus = 'completed' | 'failed' | 'aborted' | 'draft' | 'running';
-/** ISO 8601 date string or Unix timestamp in milliseconds. */
-export type QueryHistoryTimestamp = string | number;
-export type HistoryRowRenderProps = {
-    height: number;
-};
-export type QueryHistoryHeader = {
-    header: string;
-} & HistoryRowRenderProps;
-export type BaseHistoryRow = {
-    id: number;
-    title: string;
-    query?: string;
-    href?: string;
-} & HistoryRowRenderProps;
-export type QueryHistoryRow = BaseHistoryRow & {
-    startTime?: QueryHistoryTimestamp;
-    endTime?: QueryHistoryTimestamp;
+export type QueryHistoryRow = QueryListRow & {
+    startTime?: QueryTimestamp;
+    endTime?: QueryTimestamp;
     engine?: string;
     mode?: string;
     isPrivate?: boolean;
     status: QueryStatus;
 };
-export type QueryHistoryItem<T extends BaseHistoryRow = BaseHistoryRow> = QueryHistoryHeader | T;
-export type QueryHistoryRowVariant = 'default' | 'search';
-export type QueryHistoryRowAction<T extends BaseHistoryRow = BaseHistoryRow> = {
-    text: ReactNode;
-    icon?: ReactNode;
-    hidden?: boolean;
-    disabled?: boolean;
-    onClick: (item: T) => void;
-};
-export type QueryHistorySearchConfig = {
-    value?: string;
-    fullSearch?: boolean;
-    hasClear?: boolean;
-    onUpdate: (data: {
-        value: string;
-        fullSearch: boolean;
-    }) => void;
-};
-export type QueryHistoryFilterConfig = {
-    fields?: RegisteredFormFields[];
-    values?: Record<string, any>;
-    initialValues?: Record<string, any>;
-    isChanged?: boolean;
-    onApply?: (values: Record<string, any>) => void;
-    onReset?: () => void;
-};
-export type QueryHistoryEditingConfig<T extends BaseHistoryRow = BaseHistoryRow> = {
-    rowId?: T['id'];
-    onSubmit?: (item: T, title: string) => void;
-    onCancel?: (item: T) => void;
-};
-export type QueryHistoryComparisonConfig<T extends BaseHistoryRow = BaseHistoryRow> = {
-    enabled: boolean;
-    comparedRowIds: T['id'][];
-    onChange: (item: T, selected: boolean) => void;
-    onCancel: () => void;
-    onCompare: () => void;
-};
-type RowFieldKey<T extends BaseHistoryRow> = Exclude<keyof T & string, keyof HistoryRowRenderProps>;
-export type QueryHistoryFieldKey<T extends BaseHistoryRow = BaseHistoryRow> = RowFieldKey<T> | 'duration';
-export type QueryHistoryFieldOption<K extends string = string> = {
-    id: K;
-    title: ReactNode;
-};
-export type QueryHistoryVisibleFieldsConfig<T extends BaseHistoryRow = BaseHistoryRow> = {
-    value: QueryHistoryFieldKey<T>[];
-    fields: QueryHistoryFieldOption<QueryHistoryFieldKey<T>>[];
-    onChange: (value: QueryHistoryFieldKey<T>[]) => void;
-};
-export type QueryHistoryEditingRenderData<T extends BaseHistoryRow = BaseHistoryRow> = {
-    enabled: boolean;
-} & Pick<QueryHistoryEditingConfig<T>, 'onSubmit' | 'onCancel'>;
-export type QueryHistoryRowRenderData<T extends BaseHistoryRow = BaseHistoryRow> = {
-    item: QueryHistoryItem<T>;
-    index: number;
-    isActive: boolean;
-    variant: QueryHistoryRowVariant;
-    comparison?: {
-        enabled: boolean;
-        checked: boolean;
-    };
-    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;
-    actions?: QueryHistoryRowAction<T>[];
-    editing?: QueryHistoryEditingRenderData<T>;
-};
-export {};

package/build/esm/types/history.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["history.ts"],"sourcesContent":["import {ReactNode} from 'react';\nimport {RegisteredFormFields} from './forms';\n\nexport type QueryStatus = 'completed' | 'failed' | 'aborted' | 'draft' | 'running';\n\n/** ISO 8601 date string or Unix timestamp in milliseconds. */\nexport type QueryHistoryTimestamp = string | number;\n\nexport type HistoryRowRenderProps = {height: number};\n\nexport type QueryHistoryHeader = {header: string} & HistoryRowRenderProps;\n\nexport type BaseHistoryRow = {\n    id: number;\n    title: string;\n    query?: string;\n    href?: string;\n} & HistoryRowRenderProps;\n\nexport type QueryHistoryRow = BaseHistoryRow & {\n    startTime?: QueryHistoryTimestamp;\n    endTime?: QueryHistoryTimestamp;\n    engine?: string;\n    mode?: string;\n    isPrivate?: boolean;\n    status: QueryStatus;\n};\n\nexport type QueryHistoryItem<T extends BaseHistoryRow = BaseHistoryRow> = QueryHistoryHeader | T;\n\nexport type QueryHistoryRowVariant = 'default' | 'search';\n\nexport type QueryHistoryRowAction<T extends BaseHistoryRow = BaseHistoryRow> = {\n    text: ReactNode;\n    icon?: ReactNode;\n    hidden?: boolean;\n    disabled?: boolean;\n    onClick: (item: T) => void;\n};\n\nexport type QueryHistorySearchConfig = {\n    value?: string;\n    fullSearch?: boolean;\n    hasClear?: boolean;\n    onUpdate: (data: {value: string; fullSearch: boolean}) => void;\n};\n\nexport type QueryHistoryFilterConfig = {\n    fields?: RegisteredFormFields[];\n    values?: Record<string, any>;\n    initialValues?: Record<string, any>;\n    isChanged?: boolean;\n    onApply?: (values: Record<string, any>) => void;\n    onReset?: () => void;\n};\n\nexport type QueryHistoryEditingConfig<T extends BaseHistoryRow = BaseHistoryRow> = {\n    rowId?: T['id'];\n    onSubmit?: (item: T, title: string) => void;\n    onCancel?: (item: T) => void;\n};\n\nexport type QueryHistoryComparisonConfig<T extends BaseHistoryRow = BaseHistoryRow> = {\n    enabled: boolean;\n    comparedRowIds: T['id'][];\n    onChange: (item: T, selected: boolean) => void;\n    onCancel: () => void;\n    onCompare: () => void;\n};\n\ntype RowFieldKey<T extends BaseHistoryRow> = Exclude<keyof T & string, keyof HistoryRowRenderProps>;\n\nexport type QueryHistoryFieldKey<T extends BaseHistoryRow = BaseHistoryRow> =\n    RowFieldKey<T> | 'duration';\n\nexport type QueryHistoryFieldOption<K extends string = string> = {\n    id: K;\n    title: ReactNode;\n};\n\nexport type QueryHistoryVisibleFieldsConfig<T extends BaseHistoryRow = BaseHistoryRow> = {\n    value: QueryHistoryFieldKey<T>[];\n    fields: QueryHistoryFieldOption<QueryHistoryFieldKey<T>>[];\n    onChange: (value: QueryHistoryFieldKey<T>[]) => void;\n};\n\nexport type QueryHistoryEditingRenderData<T extends BaseHistoryRow = BaseHistoryRow> = {\n    enabled: boolean;\n} & Pick<QueryHistoryEditingConfig<T>, 'onSubmit' | 'onCancel'>;\n\nexport type QueryHistoryRowRenderData<T extends BaseHistoryRow = BaseHistoryRow> = {\n    item: QueryHistoryItem<T>;\n    index: number;\n    isActive: boolean;\n    variant: QueryHistoryRowVariant;\n    comparison?: {\n        enabled: boolean;\n        checked: boolean;\n    };\n    visibleFields?: QueryHistoryVisibleFieldsConfig<T>;\n    actions?: QueryHistoryRowAction<T>[];\n    editing?: QueryHistoryEditingRenderData<T>;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["history.ts"],"sourcesContent":["import {QueryListRow, QueryTimestamp} from './queryList';\n\nexport type QueryStatus = 'completed' | 'failed' | 'aborted' | 'draft' | 'running';\n\nexport type QueryHistoryRow = QueryListRow & {\n    startTime?: QueryTimestamp;\n    endTime?: QueryTimestamp;\n    engine?: string;\n    mode?: string;\n    isPrivate?: boolean;\n    status: QueryStatus;\n};\n"],"mappings":"","ignoreList":[]}

package/build/esm/types/navigation.d.ts

@@ -0,0 +1,149 @@
+import { ReactNode } from 'react';
+import type { LoadPathSuggestions } from './pathEditor';
+export type NavigationLocation = {
+    cluster: string | undefined;
+    path: string | undefined;
+};
+export type NavigationAction<TArg> = {
+    id: string;
+    title: string;
+    content: ReactNode;
+    hidden?: boolean;
+    disabled?: boolean;
+    qa?: string;
+    onClick: (arg: TArg) => void;
+};
+export type NavigationHeaderAction = NavigationAction<NavigationLocation>;
+export type NavigationCluster = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    color?: string;
+    backgroundColor?: string;
+    description?: string;
+};
+export type NavigationItemKind = 'folder' | 'file' | 'table' | 'link' | 'unknown';
+export type NavigationItem = {
+    path: string;
+    title: string;
+    icon?: ReactNode;
+    kind?: NavigationItemKind;
+    targetPathBroken?: boolean;
+    hasChildren?: boolean;
+    disabled?: boolean;
+};
+export type NavigationSortOrder = 'asc' | 'desc';
+export type NavigationItemRowRenderData<T extends NavigationItem = NavigationItem> = {
+    item: T;
+    index: number;
+    isActive: boolean;
+    isParentRow: boolean;
+};
+export type NavigationClusterRowRenderData<T extends NavigationCluster = NavigationCluster> = {
+    cluster: T;
+    index: number;
+    isActive: boolean;
+};
+export type RenderNavigationItem<T extends NavigationItem = NavigationItem> = (data: NavigationItemRowRenderData<T>) => ReactNode;
+export type RenderNavigationCluster<T extends NavigationCluster = NavigationCluster> = (data: NavigationClusterRowRenderData<T>) => ReactNode;
+export type NavigationDetailTabRenderContext = {
+    search: string;
+    onSearchUpdate?: (value: string) => void;
+    searchPlaceholder?: string;
+};
+export type NavigationDetailTab = {
+    id: string;
+    title: string;
+    content?: ReactNode;
+    renderContent?: (ctx: NavigationDetailTabRenderContext) => ReactNode;
+    hidden?: boolean;
+    disabled?: boolean;
+};
+export type NavigationAsyncConfig = {
+    loading?: boolean;
+    loaded?: boolean;
+    errorContent?: ReactNode;
+};
+export type NavigationSchemaSortOrder = 'ascending' | 'descending';
+export type NavigationSchemaColumn = {
+    name: string;
+    type?: string;
+    sortOrder?: NavigationSchemaSortOrder;
+    required?: boolean;
+    [key: string]: unknown;
+};
+export type NavigationSchemaConfig<TColumn extends NavigationSchemaColumn = NavigationSchemaColumn> = NavigationAsyncConfig & {
+    columns: TColumn[];
+};
+export type NavigationCellValue = ReactNode;
+export type NavigationPreviewRow = Record<string, NavigationCellValue>;
+export type NavigationPreviewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> = NavigationAsyncConfig & {
+    columns: string[];
+    rows: TRow[];
+};
+export type NavigationViewRow = NavigationPreviewRow;
+export type NavigationViewSectionAction<TRow extends NavigationViewRow = NavigationViewRow> = NavigationAction<NavigationViewSection<TRow>>;
+export type NavigationViewSection<TRow extends NavigationViewRow = NavigationViewRow> = NavigationAsyncConfig & {
+    id: string;
+    title: ReactNode;
+    columns: string[];
+    rows: TRow[];
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    actions?: Array<NavigationViewSectionAction<TRow>>;
+};
+export type NavigationViewConfig<TRow extends NavigationViewRow = NavigationViewRow> = NavigationAsyncConfig & {
+    sections: Array<NavigationViewSection<TRow>>;
+};
+export type NavigationMetaItem = {
+    name: string;
+    value: NavigationCellValue;
+    [key: string]: unknown;
+};
+export type NavigationMetaGroup<TItem extends NavigationMetaItem = NavigationMetaItem> = {
+    title?: string;
+    items: TItem[];
+};
+export type NavigationMetaConfig<TItem extends NavigationMetaItem = NavigationMetaItem> = NavigationAsyncConfig & {
+    groups: Array<NavigationMetaGroup<TItem>>;
+};
+export type NavigationDetailConfig = {
+    tabs: NavigationDetailTab[];
+    defaultTab?: string;
+    hasSearch?: boolean;
+    searchPlaceholder?: string;
+    actions?: NavigationHeaderAction[];
+    emptyContent?: ReactNode;
+};
+export type ResolveNavigationDetail<T extends NavigationItem = NavigationItem> = (item: T) => NavigationDetailConfig | undefined;
+export type NavigationDetailConfigFactory<T extends NavigationItem = NavigationItem> = (item: T) => NavigationDetailConfig;
+export type NavigationSearchConfig = {
+    value?: string;
+    onUpdate?: (value: string) => void;
+};
+export type NavigationSortConfig = {
+    value?: NavigationSortOrder;
+    onUpdate?: (sort: NavigationSortOrder) => void;
+};
+export type NavigationListStateConfig = {
+    loading?: boolean;
+    error?: boolean | ReactNode;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+};
+export type NavigationHeaderConfig = {
+    actions?: NavigationHeaderAction[];
+    onLoadSuggestions?: LoadPathSuggestions;
+};
+export type NavigationDetailPanelConfig<TItem extends NavigationItem = NavigationItem> = {
+    openedItem?: TItem;
+    onItemOpen?: (item: TItem) => void;
+    onClose?: () => void;
+    resolve?: ResolveNavigationDetail<TItem>;
+    search?: string;
+    onSearchUpdate?: (value: string) => void;
+    activeTab?: string;
+    onTabUpdate?: (tab: string) => void;
+    actions?: NavigationHeaderAction[];
+};

package/build/esm/types/navigation.js

@@ -0,0 +1,2 @@
+export {};
+// #sourceMappingURL=navigation.js.map

package/build/esm/types/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["navigation.ts"],"sourcesContent":["import {ReactNode} from 'react';\nimport type {LoadPathSuggestions} from './pathEditor';\n\nexport type NavigationLocation = {\n    cluster: string | undefined;\n    path: string | undefined;\n};\n\nexport type NavigationAction<TArg> = {\n    id: string;\n    title: string;\n    content: ReactNode;\n    hidden?: boolean;\n    disabled?: boolean;\n    qa?: string;\n    onClick: (arg: TArg) => void;\n};\n\nexport type NavigationHeaderAction = NavigationAction<NavigationLocation>;\n\nexport type NavigationCluster = {\n    id: string;\n    title: string;\n    icon?: ReactNode;\n    color?: string;\n    backgroundColor?: string;\n    description?: string;\n};\n\nexport type NavigationItemKind = 'folder' | 'file' | 'table' | 'link' | 'unknown';\n\nexport type NavigationItem = {\n    path: string;\n    title: string;\n    icon?: ReactNode;\n    kind?: NavigationItemKind;\n    targetPathBroken?: boolean;\n    hasChildren?: boolean;\n    disabled?: boolean;\n};\n\nexport type NavigationSortOrder = 'asc' | 'desc';\n\nexport type NavigationItemRowRenderData<T extends NavigationItem = NavigationItem> = {\n    item: T;\n    index: number;\n    isActive: boolean;\n    isParentRow: boolean;\n};\n\nexport type NavigationClusterRowRenderData<T extends NavigationCluster = NavigationCluster> = {\n    cluster: T;\n    index: number;\n    isActive: boolean;\n};\n\nexport type RenderNavigationItem<T extends NavigationItem = NavigationItem> = (\n    data: NavigationItemRowRenderData<T>,\n) => ReactNode;\n\nexport type RenderNavigationCluster<T extends NavigationCluster = NavigationCluster> = (\n    data: NavigationClusterRowRenderData<T>,\n) => ReactNode;\n\nexport type NavigationDetailTabRenderContext = {\n    search: string;\n    onSearchUpdate?: (value: string) => void;\n    searchPlaceholder?: string;\n};\n\nexport type NavigationDetailTab = {\n    id: string;\n    title: string;\n    content?: ReactNode;\n    renderContent?: (ctx: NavigationDetailTabRenderContext) => ReactNode;\n    hidden?: boolean;\n    disabled?: boolean;\n};\n\nexport type NavigationAsyncConfig = {\n    loading?: boolean;\n    loaded?: boolean;\n    errorContent?: ReactNode;\n};\n\nexport type NavigationSchemaSortOrder = 'ascending' | 'descending';\n\nexport type NavigationSchemaColumn = {\n    name: string;\n    type?: string;\n    sortOrder?: NavigationSchemaSortOrder;\n    required?: boolean;\n    [key: string]: unknown;\n};\n\nexport type NavigationSchemaConfig<\n    TColumn extends NavigationSchemaColumn = NavigationSchemaColumn,\n> = NavigationAsyncConfig & {\n    columns: TColumn[];\n};\n\nexport type NavigationCellValue = ReactNode;\n\nexport type NavigationPreviewRow = Record<string, NavigationCellValue>;\n\nexport type NavigationPreviewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =\n    NavigationAsyncConfig & {\n        columns: string[];\n        rows: TRow[];\n    };\n\nexport type NavigationViewRow = NavigationPreviewRow;\n\nexport type NavigationViewSectionAction<TRow extends NavigationViewRow = NavigationViewRow> =\n    NavigationAction<NavigationViewSection<TRow>>;\n\nexport type NavigationViewSection<TRow extends NavigationViewRow = NavigationViewRow> =\n    NavigationAsyncConfig & {\n        id: string;\n        title: ReactNode;\n        columns: string[];\n        rows: TRow[];\n        expanded?: boolean;\n        defaultExpanded?: boolean;\n        onExpandedChange?: (expanded: boolean) => void;\n        actions?: Array<NavigationViewSectionAction<TRow>>;\n    };\n\nexport type NavigationViewConfig<TRow extends NavigationViewRow = NavigationViewRow> =\n    NavigationAsyncConfig & {\n        sections: Array<NavigationViewSection<TRow>>;\n    };\n\nexport type NavigationMetaItem = {\n    name: string;\n    value: NavigationCellValue;\n    [key: string]: unknown;\n};\n\nexport type NavigationMetaGroup<TItem extends NavigationMetaItem = NavigationMetaItem> = {\n    title?: string;\n    items: TItem[];\n};\n\nexport type NavigationMetaConfig<TItem extends NavigationMetaItem = NavigationMetaItem> =\n    NavigationAsyncConfig & {\n        groups: Array<NavigationMetaGroup<TItem>>;\n    };\n\nexport type NavigationDetailConfig = {\n    tabs: NavigationDetailTab[];\n    defaultTab?: string;\n    hasSearch?: boolean;\n    searchPlaceholder?: string;\n    actions?: NavigationHeaderAction[];\n    emptyContent?: ReactNode;\n};\n\nexport type ResolveNavigationDetail<T extends NavigationItem = NavigationItem> = (\n    item: T,\n) => NavigationDetailConfig | undefined;\n\nexport type NavigationDetailConfigFactory<T extends NavigationItem = NavigationItem> = (\n    item: T,\n) => NavigationDetailConfig;\n\nexport type NavigationSearchConfig = {\n    value?: string;\n    onUpdate?: (value: string) => void;\n};\n\nexport type NavigationSortConfig = {\n    value?: NavigationSortOrder;\n    onUpdate?: (sort: NavigationSortOrder) => void;\n};\n\nexport type NavigationListStateConfig = {\n    loading?: boolean;\n    error?: boolean | ReactNode;\n    hasMore?: boolean;\n    onLoadMore?: () => void;\n};\n\nexport type NavigationHeaderConfig = {\n    actions?: NavigationHeaderAction[];\n    onLoadSuggestions?: LoadPathSuggestions;\n};\n\nexport type NavigationDetailPanelConfig<TItem extends NavigationItem = NavigationItem> = {\n    openedItem?: TItem;\n    onItemOpen?: (item: TItem) => void;\n    onClose?: () => void;\n    resolve?: ResolveNavigationDetail<TItem>;\n    search?: string;\n    onSearchUpdate?: (value: string) => void;\n    activeTab?: string;\n    onTabUpdate?: (tab: string) => void;\n    actions?: NavigationHeaderAction[];\n};\n"],"mappings":"","ignoreList":[]}

package/build/esm/types/pathEditor.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import type { NavigationItemKind } from './navigation';
+export type PathEditorSuggestion = {
+    parentPath: string;
+    childPath: string;
+    path: string;
+    icon?: ReactNode;
+    kind?: NavigationItemKind;
+    targetPathBroken?: boolean;
+};
+export type PathEditorSuggestionFilter = (suggestions: PathEditorSuggestion[]) => PathEditorSuggestion[];
+export type PathEditorEventPayload = {
+    path: string;
+};
+export type LoadPathSuggestionsParams = {
+    path: string;
+    customFilter: PathEditorSuggestionFilter | undefined;
+    cluster: string | undefined;
+};
+export type LoadPathSuggestions = (params: LoadPathSuggestionsParams) => void | Promise<PathEditorSuggestion[]>;

package/build/esm/types/pathEditor.js

@@ -0,0 +1,2 @@
+export {};
+// #sourceMappingURL=pathEditor.js.map

package/build/esm/types/pathEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["pathEditor.ts"],"sourcesContent":["import {ReactNode} from 'react';\nimport type {NavigationItemKind} from './navigation';\n\nexport type PathEditorSuggestion = {\n    parentPath: string;\n    childPath: string;\n    path: string;\n    icon?: ReactNode;\n    kind?: NavigationItemKind;\n    targetPathBroken?: boolean;\n};\n\nexport type PathEditorSuggestionFilter = (\n    suggestions: PathEditorSuggestion[],\n) => PathEditorSuggestion[];\n\nexport type PathEditorEventPayload = {\n    path: string;\n};\n\nexport type LoadPathSuggestionsParams = {\n    path: string;\n    customFilter: PathEditorSuggestionFilter | undefined;\n    cluster: string | undefined;\n};\n\nexport type LoadPathSuggestions = (\n    params: LoadPathSuggestionsParams,\n) => void | Promise<PathEditorSuggestion[]>;\n"],"mappings":"","ignoreList":[]}

package/build/esm/types/queryList.d.ts

@@ -0,0 +1,83 @@
+import { ReactNode } from 'react';
+import { RegisteredFormFields } from './forms';
+/** ISO 8601 date string or Unix timestamp in milliseconds. */
+export type QueryTimestamp = string | number;
+export type QueryListRowRenderProps = {
+    height: number;
+};
+export type QueryListHeader = {
+    header: string;
+} & QueryListRowRenderProps;
+export type QueryListRow = {
+    id: number;
+    title: string;
+    query?: string;
+    href?: string;
+} & QueryListRowRenderProps;
+export type QueryListItem<T extends QueryListRow = QueryListRow> = QueryListHeader | T;
+export type QueryListRowVariant = 'default' | 'search';
+export type QueryListRowAction<T extends QueryListRow = QueryListRow> = {
+    text: ReactNode;
+    icon?: ReactNode;
+    theme?: 'normal' | 'danger';
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick: (item: T) => void;
+};
+export type QueryListSearchConfig = {
+    value?: string;
+    fullSearch?: boolean;
+    hasClear?: boolean;
+    onUpdate: (data: {
+        value: string;
+        fullSearch: boolean;
+    }) => void;
+};
+export type QueryListFilterConfig = {
+    fields?: RegisteredFormFields[];
+    values?: Record<string, any>;
+    initialValues?: Record<string, any>;
+    isChanged?: boolean;
+    onApply?: (values: Record<string, any>) => void;
+    onReset?: () => void;
+};
+export type QueryListEditingConfig<T extends QueryListRow = QueryListRow> = {
+    rowId?: T['id'];
+    onSubmit?: (item: T, title: string) => void;
+    onCancel?: (item: T) => void;
+};
+export type QueryListComparisonConfig<T extends QueryListRow = QueryListRow> = {
+    enabled: boolean;
+    comparedRowIds: T['id'][];
+    onChange: (item: T, selected: boolean) => void;
+    onCancel: () => void;
+    onCompare: () => void;
+};
+type RowFieldKey<T extends QueryListRow> = Exclude<keyof T & string, keyof QueryListRowRenderProps>;
+export type QueryListFieldKey<T extends QueryListRow = QueryListRow> = RowFieldKey<T> | 'duration';
+export type QueryListFieldOption<K extends string = string> = {
+    id: K;
+    title: ReactNode;
+};
+export type QueryListVisibleFieldsConfig<T extends QueryListRow = QueryListRow> = {
+    value: QueryListFieldKey<T>[];
+    fields: QueryListFieldOption<QueryListFieldKey<T>>[];
+    onChange: (value: QueryListFieldKey<T>[]) => void;
+};
+export type QueryListEditingRenderData<T extends QueryListRow = QueryListRow> = {
+    enabled: boolean;
+} & Pick<QueryListEditingConfig<T>, 'onSubmit' | 'onCancel'>;
+export type QueryListRowRenderData<T extends QueryListRow = QueryListRow> = {
+    item: QueryListItem<T>;
+    index: number;
+    isActive: boolean;
+    variant: QueryListRowVariant;
+    comparison?: {
+        enabled: boolean;
+        checked: boolean;
+    };
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    actions?: QueryListRowAction<T>[];
+    editing?: QueryListEditingRenderData<T>;
+};
+export {};

package/build/esm/types/queryList.js

@@ -0,0 +1,2 @@
+export {};
+// #sourceMappingURL=queryList.js.map

package/build/esm/types/queryList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["queryList.ts"],"sourcesContent":["import {ReactNode} from 'react';\nimport {RegisteredFormFields} from './forms';\n\n/** ISO 8601 date string or Unix timestamp in milliseconds. */\nexport type QueryTimestamp = string | number;\n\nexport type QueryListRowRenderProps = {height: number};\n\nexport type QueryListHeader = {header: string} & QueryListRowRenderProps;\n\nexport type QueryListRow = {\n    id: number;\n    title: string;\n    query?: string;\n    href?: string;\n} & QueryListRowRenderProps;\n\nexport type QueryListItem<T extends QueryListRow = QueryListRow> = QueryListHeader | T;\n\nexport type QueryListRowVariant = 'default' | 'search';\n\nexport type QueryListRowAction<T extends QueryListRow = QueryListRow> = {\n    text: ReactNode;\n    icon?: ReactNode;\n    theme?: 'normal' | 'danger';\n    hidden?: boolean;\n    disabled?: boolean;\n    onClick: (item: T) => void;\n};\n\nexport type QueryListSearchConfig = {\n    value?: string;\n    fullSearch?: boolean;\n    hasClear?: boolean;\n    onUpdate: (data: {value: string; fullSearch: boolean}) => void;\n};\n\nexport type QueryListFilterConfig = {\n    fields?: RegisteredFormFields[];\n    values?: Record<string, any>;\n    initialValues?: Record<string, any>;\n    isChanged?: boolean;\n    onApply?: (values: Record<string, any>) => void;\n    onReset?: () => void;\n};\n\nexport type QueryListEditingConfig<T extends QueryListRow = QueryListRow> = {\n    rowId?: T['id'];\n    onSubmit?: (item: T, title: string) => void;\n    onCancel?: (item: T) => void;\n};\n\nexport type QueryListComparisonConfig<T extends QueryListRow = QueryListRow> = {\n    enabled: boolean;\n    comparedRowIds: T['id'][];\n    onChange: (item: T, selected: boolean) => void;\n    onCancel: () => void;\n    onCompare: () => void;\n};\n\ntype RowFieldKey<T extends QueryListRow> = Exclude<keyof T & string, keyof QueryListRowRenderProps>;\n\nexport type QueryListFieldKey<T extends QueryListRow = QueryListRow> = RowFieldKey<T> | 'duration';\n\nexport type QueryListFieldOption<K extends string = string> = {\n    id: K;\n    title: ReactNode;\n};\n\nexport type QueryListVisibleFieldsConfig<T extends QueryListRow = QueryListRow> = {\n    value: QueryListFieldKey<T>[];\n    fields: QueryListFieldOption<QueryListFieldKey<T>>[];\n    onChange: (value: QueryListFieldKey<T>[]) => void;\n};\n\nexport type QueryListEditingRenderData<T extends QueryListRow = QueryListRow> = {\n    enabled: boolean;\n} & Pick<QueryListEditingConfig<T>, 'onSubmit' | 'onCancel'>;\n\nexport type QueryListRowRenderData<T extends QueryListRow = QueryListRow> = {\n    item: QueryListItem<T>;\n    index: number;\n    isActive: boolean;\n    variant: QueryListRowVariant;\n    comparison?: {\n        enabled: boolean;\n        checked: boolean;\n    };\n    visibleFields?: QueryListVisibleFieldsConfig<T>;\n    actions?: QueryListRowAction<T>[];\n    editing?: QueryListEditingRenderData<T>;\n};\n"],"mappings":"","ignoreList":[]}

package/build/esm/types/savedQueries.d.ts

@@ -0,0 +1,6 @@
+import { QueryListRow, QueryTimestamp } from './queryList';
+export type SavedQuery = QueryListRow & {
+    savedAt?: QueryTimestamp;
+    engine?: string;
+    author?: string;
+};

package/build/esm/types/savedQueries.js

@@ -0,0 +1,2 @@
+export {};
+// #sourceMappingURL=savedQueries.js.map

package/build/esm/types/savedQueries.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["savedQueries.ts"],"sourcesContent":["import {QueryListRow, QueryTimestamp} from './queryList';\n\nexport type SavedQuery = QueryListRow & {\n    savedAt?: QueryTimestamp;\n    engine?: string;\n    author?: string;\n};\n"],"mappings":"","ignoreList":[]}

package/build/esm/types/tutorial.d.ts

@@ -1,2 +1,2 @@
-import { BaseHistoryRow } from './history';
-export type TutorialHistoryRow = BaseHistoryRow;
+import { QueryListRow } from './queryList';
+export type TutorialHistoryRow = QueryListRow;

package/build/esm/types/tutorial.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["tutorial.ts"],"sourcesContent":["import {BaseHistoryRow} from './history';\n\nexport type TutorialHistoryRow = BaseHistoryRow;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["tutorial.ts"],"sourcesContent":["import {QueryListRow} from './queryList';\n\nexport type TutorialHistoryRow = QueryListRow;\n"],"mappings":"","ignoreList":[]}

package/build/esm/widgets/DashboardCharts/DashboardCharts.css

@@ -0,0 +1,22 @@
+.qp-dashboard-charts {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 480px;
+  background: var(--g-color-base-background);
+}
+.qp-dashboard-charts__dashboard {
+  min-height: 100%;
+}
+.qp-dashboard-charts__modal {
+  --g-modal-width: calc(100vw - var(--g-spacing-10));
+  --g-modal-max-width: 1200px;
+  --g-modal-height: calc(100vh - var(--g-spacing-10));
+  --g-modal-max-height: 720px;
+  overflow: hidden;
+}
+.qp-dashboard-charts__empty {
+  min-height: 320px;
+  border: 1px dashed var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+/*# sourceMappingURL=DashboardCharts.css.map */

package/build/esm/widgets/DashboardCharts/DashboardCharts.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DashboardCharts.scss"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,YAAA;EACA,iBAAA;EACA,0CAAA;AACJ;AACI;EACI,gBAAA;AACR;AAEI;EACI,kDAAA;EACA,2BAAA;EACA,mDAAA;EACA,2BAAA;EAEA,gBAAA;AADR;AAII;EACI,iBAAA;EACA,8CAAA;EACA,uCAAA;AAFR","file":"DashboardCharts.css","sourcesContent":[".qp-dashboard-charts {\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 480px;\n    background: var(--g-color-base-background);\n\n    &__dashboard {\n        min-height: 100%;\n    }\n\n    &__modal {\n        --g-modal-width: calc(100vw - var(--g-spacing-10));\n        --g-modal-max-width: 1200px;\n        --g-modal-height: calc(100vh - var(--g-spacing-10));\n        --g-modal-max-height: 720px;\n\n        overflow: hidden;\n    }\n\n    &__empty {\n        min-height: 320px;\n        border: 1px dashed var(--g-color-line-generic);\n        border-radius: var(--g-border-radius-m);\n    }\n}\n"],"sourceRoot":""}

package/build/esm/widgets/DashboardCharts/DashboardCharts.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DashboardChartsProps } from './types';
+import './DashboardCharts.scss';
+export declare const DashboardCharts: ({ chartItems: customerChartsItems, defaultLayout, dataSource, emptyTitle, emptyDescription, chartEditorProps, dashboardProps, onItemsChange, onLayoutChange, className, gap, }: DashboardChartsProps) => React.JSX.Element;

package/build/esm/widgets/DashboardCharts/DashboardCharts.js

@@ -0,0 +1,186 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import React, { useCallback, useMemo, useState } from 'react';
+import { Flex, Modal } from '@gravity-ui/uikit';
+import { ChartEditor } from "../../modules";
+import { AddChartButton, Chart, Dashboard } from "../../components";
+import { EmptyDashboardPlaceholder } from "./internal/EmptyDashboardPlaceholder";
+import { CHART_TYPE_ICONS } from "./helpers/chartTypeIcons";
+import i18n from "./i18n";
+import cn from 'bem-cn-lite';
+import "./DashboardCharts.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-dashboard-charts');
+export var DashboardCharts = function DashboardCharts(_ref) {
+  var customerChartsItems = _ref.chartItems,
+    defaultLayout = _ref.defaultLayout,
+    dataSource = _ref.dataSource,
+    emptyTitle = _ref.emptyTitle,
+    emptyDescription = _ref.emptyDescription,
+    chartEditorProps = _ref.chartEditorProps,
+    dashboardProps = _ref.dashboardProps,
+    onItemsChange = _ref.onItemsChange,
+    onLayoutChange = _ref.onLayoutChange,
+    className = _ref.className,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 1 : _ref$gap;
+  var _useState = useState(customerChartsItems !== null && customerChartsItems !== void 0 ? customerChartsItems : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerChartItems = _useState2[0],
+    setInnerChartItems = _useState2[1];
+  var chartItems = customerChartsItems !== null && customerChartsItems !== void 0 ? customerChartsItems : innerChartItems;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draftChart = _useState4[0],
+    setDraftChart = _useState4[1];
+  var allowedCharts = useMemo(function () {
+    return Object.keys(dataSource);
+  }, [dataSource]);
+  var handleChartSelect = function handleChartSelect(chartType) {
+    var chartSeries = dataSource[chartType];
+    if (chartSeries) {
+      var dataIds = Object.keys(chartSeries);
+      setDraftChart({
+        chartSeries: chartSeries,
+        formValues: {
+          dataIds: dataIds.length ? [dataIds[0]] : [],
+          axisType: 'linear'
+        }
+      });
+    }
+  };
+  var handleCancelDraft = function handleCancelDraft() {
+    setDraftChart(null);
+  };
+  var handleSubmitChart = function handleSubmitChart(chart) {
+    var _draftChart$id;
+    if (!draftChart) return;
+    var newChart = {
+      id: (_draftChart$id = draftChart.id) !== null && _draftChart$id !== void 0 ? _draftChart$id : crypto.randomUUID().replace(/-/g, ''),
+      chartData: chart
+    };
+    var actualChartItems = draftChart.id ? chartItems.map(function (ch) {
+      return ch.id === newChart.id ? newChart : ch;
+    }) : [].concat(_toConsumableArray(chartItems), [newChart]);
+    setDraftChart(null);
+    setInnerChartItems(actualChartItems);
+    onItemsChange === null || onItemsChange === void 0 || onItemsChange(actualChartItems);
+  };
+  var handleEditChart = useCallback(function (id, chart) {
+    var _chart$title, _chart$xAxis, _chart$yAxis, _chart$legend, _chart$xAxis2, _chart$xAxis3;
+    var chartType = chart.series.data[0].type;
+    var chartSeries = dataSource[chartType];
+    if (!chartSeries) return;
+    var selectedDataIds = chart.series.data.map(function (s) {
+      return s.seriesId;
+    });
+    setDraftChart({
+      id: id,
+      chartSeries: chartSeries,
+      formValues: {
+        dataIds: selectedDataIds,
+        chartTitle: (_chart$title = chart.title) === null || _chart$title === void 0 ? void 0 : _chart$title.text,
+        xTitle: (_chart$xAxis = chart.xAxis) === null || _chart$xAxis === void 0 || (_chart$xAxis = _chart$xAxis.title) === null || _chart$xAxis === void 0 ? void 0 : _chart$xAxis.text,
+        yTitle: (_chart$yAxis = chart.yAxis) === null || _chart$yAxis === void 0 || (_chart$yAxis = _chart$yAxis[0].title) === null || _chart$yAxis === void 0 ? void 0 : _chart$yAxis.text,
+        showLegend: chart === null || chart === void 0 || (_chart$legend = chart.legend) === null || _chart$legend === void 0 ? void 0 : _chart$legend.enabled,
+        axisType: (_chart$xAxis2 = chart.xAxis) === null || _chart$xAxis2 === void 0 ? void 0 : _chart$xAxis2.type,
+        axisCategories: (_chart$xAxis3 = chart.xAxis) === null || _chart$xAxis3 === void 0 ? void 0 : _chart$xAxis3.categories
+      }
+    });
+  }, [dataSource]);
+  var handleDeleteChart = useCallback(function (id) {
+    var newChartItems = chartItems.filter(function (item) {
+      return item.id !== id;
+    });
+    setInnerChartItems(newChartItems);
+    onItemsChange === null || onItemsChange === void 0 || onItemsChange(newChartItems);
+  }, [chartItems, onItemsChange]);
+  var handleLayoutChange = function handleLayoutChange(patchedLayout) {
+    onLayoutChange === null || onLayoutChange === void 0 || onLayoutChange(patchedLayout);
+  };
+  var dashboardItems = useMemo(function () {
+    return chartItems.map(function (_ref2) {
+      var id = _ref2.id,
+        chartData = _ref2.chartData;
+      return {
+        id: id,
+        content: /*#__PURE__*/_jsx(Chart, {
+          data: chartData,
+          controlsVisibility: "hover",
+          onPencilEdit: function onPencilEdit() {
+            return handleEditChart(id, chartData);
+          },
+          actions: [{
+            text: i18n('action_delete-chart'),
+            onClick: function onClick() {
+              return handleDeleteChart(id);
+            }
+          }]
+        }, id)
+      };
+    });
+  }, [chartItems, handleEditChart, handleDeleteChart]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(Flex, {
+      as: "section",
+      direction: "column",
+      width: "100%",
+      height: "100%",
+      gap: gap,
+      className: block(null, className),
+      children: [/*#__PURE__*/_jsx(AddChartButton, {
+        text: i18n('action_add-chart'),
+        options: allowedCharts.map(function (chartType) {
+          return {
+            value: chartType,
+            text: chartType,
+            icon: CHART_TYPE_ICONS[chartType]
+          };
+        }),
+        onSelect: handleChartSelect,
+        disabled: allowedCharts.length === 0
+      }), chartItems.length > 0 ? /*#__PURE__*/_jsx(Dashboard, _objectSpread({
+        items: dashboardItems,
+        defaultLayout: defaultLayout,
+        onLayoutChange: handleLayoutChange,
+        className: block('dashboard')
+      }, dashboardProps)) : /*#__PURE__*/_jsx(EmptyDashboardPlaceholder, {
+        emptyTitle: emptyTitle,
+        emptyDescription: emptyDescription
+      })]
+    }), /*#__PURE__*/_jsx(Modal, {
+      open: Boolean(draftChart),
+      onOpenChange: function onOpenChange(open) {
+        if (!open) {
+          setDraftChart(null);
+        }
+      },
+      contentOverflow: "auto",
+      contentClassName: block('modal'),
+      children: draftChart && /*#__PURE__*/_jsx(ChartEditor, _objectSpread({
+        chartSeriesMap: draftChart.chartSeries,
+        formValues: draftChart.formValues,
+        onSubmit: handleSubmitChart,
+        onCancel: handleCancelDraft,
+        axisVariants: ['linear', 'datetime', 'logarithmic'],
+        formProps: {
+          labels: {
+            submitLabel: draftChart.id ? i18n('action_save-chart') : i18n('action_add-chart')
+          }
+        }
+      }, chartEditorProps))
+    })]
+  });
+};
+// #sourceMappingURL=DashboardCharts.js.map