@cyber-harbour/ui 1.0.44 → 1.0.46

package/dist/index.d.mts

@@ -1,12 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes } from 'react';
+import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme, WebTarget } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
-import { GraphData, NodeObject } from 'react-force-graph-2d';
 
 declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
@@ -59,6 +58,7 @@ type InputSizeStyle = {
     borderRadius: number | string;
     iconSize: number | string;
     height: number | string;
+    lineHeight: number;
 };
 type Theme = {
     mode: 'light' | 'dark';
@@ -216,6 +216,7 @@ type Theme = {
     graph2D: {
         ring: {
             highlightFill: string;
+            selectionFill: string;
         };
         button: {
             stroke: string;
@@ -262,6 +263,7 @@ declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undef
  * @returns The value in rem units as a string (e.g., "1.25rem")
  */
 declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
+declare const remToPx: (remValue: number | string, baseSize?: number) => number;
 /**
  * Recursively converts all pixel values in an object to rem units
  *
@@ -764,13 +766,21 @@ interface RowActionsMenuProps {
 }
 declare const RowActionsMenu: ({ size, disabled, className, positions, align, items, }: RowActionsMenuProps) => react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+type BaseInputProps = {
     error?: boolean;
     append?: any;
     prepend?: any;
     size?: InputSize;
     variant?: InputVariant;
 };
+type InputElementProps = BaseInputProps & InputHTMLAttributes<HTMLInputElement> & {
+    multiline?: false;
+};
+type TextAreaElementProps = BaseInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    multiline: true;
+    autoResize?: boolean;
+};
+type InputProps = InputElementProps | TextAreaElementProps;
 declare const Input: any;
 
 declare const FlexContainer: any;
@@ -828,31 +838,68 @@ type ContainerProps = FabricComponent<{
 }>;
 declare const Container: ({ maxWidth, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
 
+declare const Graph2D: any;
+
+interface Graph2DRef {
+    /**
+     * Масштабирует график так, чтобы все узлы были видны
+     * @param duration Длительность анимации масштабирования в миллисекундах
+     * @param padding Отступ от краев в пикселях
+     */
+    zoomToFit: (duration?: number, padding?: number) => void;
+    /**
+     * Добавляет новые узлы и связи на график
+     * @param newNodes Массив новых узлов для добавления
+     * @param newLinks Массив новых связей для добавления
+     * @param options Опции для настройки поведения при добавлении
+     *   - smoothAppearance: если true, существующие узлы не будут двигаться,
+     *     а новые появятся плавно рядом со связанными узлами
+     *   - transitionDuration: длительность анимации появления новых узлов в миллисекундах
+     */
+    addNodes: (newNodes: NodeObject[], newLinks?: LinkObject[], options?: {
+        smoothAppearance?: boolean;
+        transitionDuration?: number;
+    }) => void;
+    /**
+     * Удаляет узлы и связанные с ними связи из графа
+     * @param nodeIds Массив идентификаторов узлов для удаления
+     */
+    removeNodes: (nodeIds: (string | number)[]) => void;
+}
 interface Graph2DProps {
-    graphData?: GraphData;
-    linkSource?: string;
-    linkTarget?: string;
+    graphData: GraphData;
     loading?: boolean;
-    width?: number;
-    height?: number;
-    config?: {
-        fontSize: number;
-        maxZoom: number;
-        nodeSizeBase: number;
-        nodeAreaFactor: number;
-        textPaddingFactor: number;
-        gridSpacing: number;
-        dotSize: number;
-    };
+    width: number;
+    height: number;
+    buttons?: NodeButton[];
     onNodeClick?: (node: NodeObject) => void;
-    onLinkClick?: (link: NodeObject) => void;
-    onNodeHover?: (node: NodeObject | null) => void;
-    onLinkHover?: (link: NodeObject | null) => void;
     onBackgroundClick?: () => void;
-    onClickLoadNodes?: (node: NodeObject) => void;
+    onNodeHover?: (node: NodeObject | null) => void;
 }
-
-declare const Graph2D: ({ graphData, width, height, linkTarget, linkSource, loading, config, onNodeClick, onNodeHover, onLinkHover, onLinkClick, onBackgroundClick, onClickLoadNodes, }: Graph2DProps) => react_jsx_runtime.JSX.Element;
+interface NodeButton {
+    img: string;
+    hoverImg: string;
+    onClick: (node: NodeObject) => void;
+}
+type GraphData<NodeType = {}, LinkType = {}> = {
+    nodes: NodeObject<NodeType>[];
+    links: LinkObject<NodeType, LinkType>[];
+};
+type NodeObject<NodeType = {}> = NodeType & {
+    id?: string | number;
+    x?: number;
+    y?: number;
+    vx?: number;
+    vy?: number;
+    fx?: number;
+    fy?: number;
+    [others: string]: any;
+};
+type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+    source: string | number | NodeObject<NodeType>;
+    target: string | number | NodeObject<NodeType>;
+    [others: string]: any;
+};
 
 interface FullscreenCardProps {
     children: any;
@@ -866,4 +913,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor, useContextMenuControl };
+export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes } from 'react';
+import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme, WebTarget } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
-import { GraphData, NodeObject } from 'react-force-graph-2d';
 
 declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
@@ -59,6 +58,7 @@ type InputSizeStyle = {
     borderRadius: number | string;
     iconSize: number | string;
     height: number | string;
+    lineHeight: number;
 };
 type Theme = {
     mode: 'light' | 'dark';
@@ -216,6 +216,7 @@ type Theme = {
     graph2D: {
         ring: {
             highlightFill: string;
+            selectionFill: string;
         };
         button: {
             stroke: string;
@@ -262,6 +263,7 @@ declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undef
  * @returns The value in rem units as a string (e.g., "1.25rem")
  */
 declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
+declare const remToPx: (remValue: number | string, baseSize?: number) => number;
 /**
  * Recursively converts all pixel values in an object to rem units
  *
@@ -764,13 +766,21 @@ interface RowActionsMenuProps {
 }
 declare const RowActionsMenu: ({ size, disabled, className, positions, align, items, }: RowActionsMenuProps) => react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+type BaseInputProps = {
     error?: boolean;
     append?: any;
     prepend?: any;
     size?: InputSize;
     variant?: InputVariant;
 };
+type InputElementProps = BaseInputProps & InputHTMLAttributes<HTMLInputElement> & {
+    multiline?: false;
+};
+type TextAreaElementProps = BaseInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    multiline: true;
+    autoResize?: boolean;
+};
+type InputProps = InputElementProps | TextAreaElementProps;
 declare const Input: any;
 
 declare const FlexContainer: any;
@@ -828,31 +838,68 @@ type ContainerProps = FabricComponent<{
 }>;
 declare const Container: ({ maxWidth, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
 
+declare const Graph2D: any;
+
+interface Graph2DRef {
+    /**
+     * Масштабирует график так, чтобы все узлы были видны
+     * @param duration Длительность анимации масштабирования в миллисекундах
+     * @param padding Отступ от краев в пикселях
+     */
+    zoomToFit: (duration?: number, padding?: number) => void;
+    /**
+     * Добавляет новые узлы и связи на график
+     * @param newNodes Массив новых узлов для добавления
+     * @param newLinks Массив новых связей для добавления
+     * @param options Опции для настройки поведения при добавлении
+     *   - smoothAppearance: если true, существующие узлы не будут двигаться,
+     *     а новые появятся плавно рядом со связанными узлами
+     *   - transitionDuration: длительность анимации появления новых узлов в миллисекундах
+     */
+    addNodes: (newNodes: NodeObject[], newLinks?: LinkObject[], options?: {
+        smoothAppearance?: boolean;
+        transitionDuration?: number;
+    }) => void;
+    /**
+     * Удаляет узлы и связанные с ними связи из графа
+     * @param nodeIds Массив идентификаторов узлов для удаления
+     */
+    removeNodes: (nodeIds: (string | number)[]) => void;
+}
 interface Graph2DProps {
-    graphData?: GraphData;
-    linkSource?: string;
-    linkTarget?: string;
+    graphData: GraphData;
     loading?: boolean;
-    width?: number;
-    height?: number;
-    config?: {
-        fontSize: number;
-        maxZoom: number;
-        nodeSizeBase: number;
-        nodeAreaFactor: number;
-        textPaddingFactor: number;
-        gridSpacing: number;
-        dotSize: number;
-    };
+    width: number;
+    height: number;
+    buttons?: NodeButton[];
     onNodeClick?: (node: NodeObject) => void;
-    onLinkClick?: (link: NodeObject) => void;
-    onNodeHover?: (node: NodeObject | null) => void;
-    onLinkHover?: (link: NodeObject | null) => void;
     onBackgroundClick?: () => void;
-    onClickLoadNodes?: (node: NodeObject) => void;
+    onNodeHover?: (node: NodeObject | null) => void;
 }
-
-declare const Graph2D: ({ graphData, width, height, linkTarget, linkSource, loading, config, onNodeClick, onNodeHover, onLinkHover, onLinkClick, onBackgroundClick, onClickLoadNodes, }: Graph2DProps) => react_jsx_runtime.JSX.Element;
+interface NodeButton {
+    img: string;
+    hoverImg: string;
+    onClick: (node: NodeObject) => void;
+}
+type GraphData<NodeType = {}, LinkType = {}> = {
+    nodes: NodeObject<NodeType>[];
+    links: LinkObject<NodeType, LinkType>[];
+};
+type NodeObject<NodeType = {}> = NodeType & {
+    id?: string | number;
+    x?: number;
+    y?: number;
+    vx?: number;
+    vy?: number;
+    fx?: number;
+    fy?: number;
+    [others: string]: any;
+};
+type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+    source: string | number | NodeObject<NodeType>;
+    target: string | number | NodeObject<NodeType>;
+    [others: string]: any;
+};
 
 interface FullscreenCardProps {
     children: any;
@@ -866,4 +913,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor, useContextMenuControl };
+export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };