@clickhouse/click-ui 0.0.171 → 0.0.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/click-ui.es.js +633 -390
- package/dist/click-ui.umd.js +633 -390
- package/dist/components/Flyout/Flyout.d.ts +1 -1
- package/dist/components/Grid/ColumnResizer.d.ts +21 -3
- package/dist/components/Grid/Header.d.ts +6 -4
- package/dist/components/Grid/types.d.ts +5 -1
- package/dist/components/Grid/useResizingState.d.ts +48 -0
- package/dist/styles/types.d.ts +67 -2
- package/dist/styles/variables.classic.json.d.ts +64 -26
- package/dist/styles/variables.dark.json.d.ts +100 -62
- package/dist/styles/variables.json.d.ts +207 -142
- package/dist/styles/variables.light.json.d.ts +140 -102
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@ export declare const Flyout: {
|
|
|
37
37
|
};
|
|
38
38
|
CodeBlock: ({ statement, language, wrapLines, showLineNumbers, showWrapButton, onCopy, onCopyError, ...props }: FlyoutCodeBlockProps & ElementProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
};
|
|
40
|
-
type FlyoutSizeType = "default" | "narrow" | "wide";
|
|
40
|
+
type FlyoutSizeType = "default" | "narrow" | "wide" | "widest";
|
|
41
41
|
type Strategy = "relative" | "absolute" | "fixed";
|
|
42
42
|
type FlyoutType = "default" | "inline";
|
|
43
43
|
type DialogContentAlignmentType = "start" | "end";
|
|
@@ -1,10 +1,28 @@
|
|
|
1
|
-
import { ColumnResizeFn,
|
|
1
|
+
import { ColumnResizeFn, GetResizerPositionFn } from './types';
|
|
2
|
+
import { ResizingState } from './useResizingState';
|
|
2
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Properties for the ColumnResizer component.
|
|
6
|
+
* @typedef {Object} Props
|
|
7
|
+
* @property {number} height - Height of the resizer.
|
|
8
|
+
* @property {ColumnResizeFn} onColumnResize - Function to handle column resize.
|
|
9
|
+
* @property {number} columnIndex - Index of the column being resized.
|
|
10
|
+
* @property {GetResizerPositionFn} getResizerPosition - Function to get the position of the resizer.
|
|
11
|
+
* @property {number} columnWidth - Initial width of the column.
|
|
12
|
+
* @property {ResizingState} resizingState - State management object for resizing interactions.
|
|
13
|
+
*/
|
|
3
14
|
interface Props {
|
|
4
15
|
height: number;
|
|
5
16
|
onColumnResize: ColumnResizeFn;
|
|
6
17
|
columnIndex: number;
|
|
7
|
-
|
|
18
|
+
getResizerPosition: GetResizerPositionFn;
|
|
19
|
+
columnWidth: number;
|
|
20
|
+
resizingState: ResizingState;
|
|
8
21
|
}
|
|
9
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Component for rendering a column resizer with pointer events and resizing state management.
|
|
24
|
+
* @param {Props} props - Properties passed to the component.
|
|
25
|
+
* @returns {JSX.Element} The ColumnResizer component.
|
|
26
|
+
*/
|
|
27
|
+
declare const ColumnResizer: ({ height, onColumnResize: onColumnResizeProp, columnIndex, getResizerPosition, columnWidth, resizingState, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
28
|
export default ColumnResizer;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { CellProps, ColumnResizeFn,
|
|
1
|
+
import { CellProps, ColumnResizeFn, GetResizerPositionFn, SelectionTypeFn } from './types';
|
|
2
|
+
import { ResizingState } from './useResizingState';
|
|
2
3
|
|
|
3
4
|
interface HeaderProps {
|
|
4
5
|
showRowNumber: boolean;
|
|
@@ -6,16 +7,17 @@ interface HeaderProps {
|
|
|
6
7
|
minColumn: number;
|
|
7
8
|
maxColumn: number;
|
|
8
9
|
height: number;
|
|
9
|
-
|
|
10
|
+
getColumnWidth: (index: number) => number;
|
|
10
11
|
cell: CellProps;
|
|
11
12
|
getSelectionType: SelectionTypeFn;
|
|
12
13
|
columnCount: number;
|
|
13
14
|
onColumnResize: ColumnResizeFn;
|
|
14
15
|
getColumnHorizontalPosition: (columnIndex: number) => number;
|
|
15
16
|
scrolledVertical: boolean;
|
|
16
|
-
|
|
17
|
+
getResizerPosition: GetResizerPositionFn;
|
|
17
18
|
showBorder: boolean;
|
|
18
19
|
scrolledHorizontal: boolean;
|
|
20
|
+
resizingState: ResizingState;
|
|
19
21
|
}
|
|
20
|
-
declare const Header: ({ scrolledVertical, scrolledHorizontal, showRowNumber, rowNumberWidth, minColumn, maxColumn, height,
|
|
22
|
+
declare const Header: ({ scrolledVertical, scrolledHorizontal, showRowNumber, rowNumberWidth, minColumn, maxColumn, height, getColumnWidth, cell, columnCount, getSelectionType, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
23
|
export default Header;
|
|
@@ -138,5 +138,9 @@ export interface GridProps extends Omit<VariableSizeGridProps, "height" | "width
|
|
|
138
138
|
onContextMenu?: MouseEventHandler<HTMLDivElement>;
|
|
139
139
|
forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
|
|
140
140
|
}
|
|
141
|
-
export type
|
|
141
|
+
export type ResizerPosition = {
|
|
142
|
+
left: string;
|
|
143
|
+
top?: string;
|
|
144
|
+
};
|
|
145
|
+
export type GetResizerPositionFn = (clientX: number, width: number, columnIndex: number) => ResizerPosition;
|
|
142
146
|
export {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { ResizerPosition } from './types';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Defines the type for pointer information used in resizing.
|
|
5
|
+
* @typedef {Object} PointerType
|
|
6
|
+
* @property {number} width - The width of the pointer component.
|
|
7
|
+
* @property {number} pointerId - Unique identifier for the pointer from a touch event.
|
|
8
|
+
* @property {number} initialClientX - The initial X coordinate of the pointer when resizing started.
|
|
9
|
+
*/
|
|
10
|
+
export type PointerType = {
|
|
11
|
+
width: number;
|
|
12
|
+
pointerId: number;
|
|
13
|
+
initialClientX: number;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Defines the state and methods used for managing the column resizing.
|
|
17
|
+
* @typedef {Object} ResizingState
|
|
18
|
+
* @property {PointerType | null} pointer - The current pointer data, or null if no pointer is active.
|
|
19
|
+
* @property {(pointer: PointerType | null) => void} setPointer - Setter to update the pointer.
|
|
20
|
+
* @property {(columnIndex: number) => boolean} getIsPressed - Indicates if a resizer for the given column is currently pressed/dragged.
|
|
21
|
+
* @property {(columnIndex: number, pressed: boolean) => void} setIsPressed - Sets the pressed state for a given column.
|
|
22
|
+
* @property {(columnIndex: number) => ResizerPosition} getPosition - Gets the position of the resizer for the specified column.
|
|
23
|
+
* @property {(position: ResizerPosition) => void} setPosition - Updates the position of the resizer.
|
|
24
|
+
* @property {number} lastPressedTimestamp - Timestamp of the last time a column was pressed, used to detect double-clicks.
|
|
25
|
+
*/
|
|
26
|
+
export interface ResizingState {
|
|
27
|
+
pointer: PointerType | null;
|
|
28
|
+
setPointer: (pointer: PointerType | null) => void;
|
|
29
|
+
getIsPressed: (columnIndex: number) => boolean;
|
|
30
|
+
setIsPressed: (columnIndex: number, pressed: boolean) => void;
|
|
31
|
+
getPosition: (columnIndex: number) => ResizerPosition;
|
|
32
|
+
setPosition: (position: ResizerPosition) => void;
|
|
33
|
+
lastPressedTimestamp: number;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* The initial position of the resizer element.
|
|
37
|
+
* @type {ResizerPosition}
|
|
38
|
+
*/
|
|
39
|
+
export declare const initialPosition: {
|
|
40
|
+
left: string;
|
|
41
|
+
top: string;
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Custom hook that provides the state and methods needed to manage a resizing operation on columns.
|
|
45
|
+
* @returns {ResizingState} The resizing state and methods for controlling resizing behavior.
|
|
46
|
+
*/
|
|
47
|
+
declare const useResizingState: () => ResizingState;
|
|
48
|
+
export default useResizingState;
|
package/dist/styles/types.d.ts
CHANGED
|
@@ -2986,12 +2986,32 @@ export interface Theme {
|
|
|
2986
2986
|
"chart": {
|
|
2987
2987
|
"bars": {
|
|
2988
2988
|
"color": {
|
|
2989
|
-
"green": string;
|
|
2990
2989
|
"blue": string;
|
|
2990
|
+
"orange": string;
|
|
2991
|
+
"green": string;
|
|
2991
2992
|
"fuchsia": string;
|
|
2993
|
+
"yellow": string;
|
|
2994
|
+
"violet": string;
|
|
2995
|
+
"babyblue": string;
|
|
2996
|
+
"red": string;
|
|
2997
|
+
"teal": string;
|
|
2998
|
+
"sunrise": string;
|
|
2999
|
+
"slate": string;
|
|
3000
|
+
};
|
|
3001
|
+
};
|
|
3002
|
+
"color": {
|
|
3003
|
+
"default": {
|
|
3004
|
+
"blue": string;
|
|
2992
3005
|
"orange": string;
|
|
3006
|
+
"green": string;
|
|
3007
|
+
"fuchsia": string;
|
|
3008
|
+
"yellow": string;
|
|
2993
3009
|
"violet": string;
|
|
3010
|
+
"babyblue": string;
|
|
3011
|
+
"red": string;
|
|
2994
3012
|
"teal": string;
|
|
3013
|
+
"sunrise": string;
|
|
3014
|
+
"slate": string;
|
|
2995
3015
|
};
|
|
2996
3016
|
};
|
|
2997
3017
|
};
|
|
@@ -3092,12 +3112,32 @@ export interface Theme {
|
|
|
3092
3112
|
};
|
|
3093
3113
|
"chart": {
|
|
3094
3114
|
"bars": {
|
|
3095
|
-
"green": string;
|
|
3096
3115
|
"blue": string;
|
|
3116
|
+
"orange": string;
|
|
3117
|
+
"green": string;
|
|
3097
3118
|
"fuchsia": string;
|
|
3119
|
+
"yellow": string;
|
|
3120
|
+
"violet": string;
|
|
3121
|
+
"babyblue": string;
|
|
3122
|
+
"danger": string;
|
|
3123
|
+
"teal": string;
|
|
3124
|
+
"sunrise": string;
|
|
3125
|
+
"slate": string;
|
|
3126
|
+
"red": string;
|
|
3127
|
+
};
|
|
3128
|
+
"default": {
|
|
3129
|
+
"blue": string;
|
|
3098
3130
|
"orange": string;
|
|
3131
|
+
"green": string;
|
|
3132
|
+
"fuchsia": string;
|
|
3133
|
+
"yellow": string;
|
|
3099
3134
|
"violet": string;
|
|
3135
|
+
"babyblue": string;
|
|
3136
|
+
"danger": string;
|
|
3100
3137
|
"teal": string;
|
|
3138
|
+
"sunrise": string;
|
|
3139
|
+
"slate": string;
|
|
3140
|
+
"red": string;
|
|
3101
3141
|
};
|
|
3102
3142
|
};
|
|
3103
3143
|
"iconButton": {
|
|
@@ -3126,6 +3166,7 @@ export interface Theme {
|
|
|
3126
3166
|
"600": string;
|
|
3127
3167
|
"700": string;
|
|
3128
3168
|
"800": string;
|
|
3169
|
+
"900": string;
|
|
3129
3170
|
"base": string;
|
|
3130
3171
|
};
|
|
3131
3172
|
"neutral": {
|
|
@@ -3275,6 +3316,30 @@ export interface Theme {
|
|
|
3275
3316
|
"850": string;
|
|
3276
3317
|
"900": string;
|
|
3277
3318
|
};
|
|
3319
|
+
"sunrise": {
|
|
3320
|
+
"50": string;
|
|
3321
|
+
"100": string;
|
|
3322
|
+
"200": string;
|
|
3323
|
+
"300": string;
|
|
3324
|
+
"400": string;
|
|
3325
|
+
"500": string;
|
|
3326
|
+
"600": string;
|
|
3327
|
+
"700": string;
|
|
3328
|
+
"800": string;
|
|
3329
|
+
"900": string;
|
|
3330
|
+
};
|
|
3331
|
+
"babyblue": {
|
|
3332
|
+
"50": string;
|
|
3333
|
+
"100": string;
|
|
3334
|
+
"200": string;
|
|
3335
|
+
"300": string;
|
|
3336
|
+
"400": string;
|
|
3337
|
+
"500": string;
|
|
3338
|
+
"600": string;
|
|
3339
|
+
"700": string;
|
|
3340
|
+
"800": string;
|
|
3341
|
+
"900": string;
|
|
3342
|
+
};
|
|
3278
3343
|
};
|
|
3279
3344
|
"sizes": {
|
|
3280
3345
|
"0": string;
|
|
@@ -164,19 +164,19 @@ declare const _default: {
|
|
|
164
164
|
},
|
|
165
165
|
"info": {
|
|
166
166
|
"background": {
|
|
167
|
-
"default": "rgb(
|
|
168
|
-
"hover": "#
|
|
169
|
-
"active": "#
|
|
167
|
+
"default": "rgb(26.3% 49.4% 93.7% / 0.1)",
|
|
168
|
+
"hover": "#D0DFFB",
|
|
169
|
+
"active": "#A1BEF7"
|
|
170
170
|
},
|
|
171
171
|
"text": {
|
|
172
|
-
"default": "#
|
|
173
|
-
"hover": "#
|
|
174
|
-
"active": "#
|
|
172
|
+
"default": "#437EEF",
|
|
173
|
+
"hover": "#437EEF",
|
|
174
|
+
"active": "#437EEF"
|
|
175
175
|
},
|
|
176
176
|
"stroke": {
|
|
177
|
-
"default": "rgb(
|
|
178
|
-
"hover": "#
|
|
179
|
-
"active": "#
|
|
177
|
+
"default": "rgb(26.3% 49.4% 93.7% / 0.1)",
|
|
178
|
+
"hover": "#D0DFFB",
|
|
179
|
+
"active": "#A1BEF7"
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
182
|
}
|
|
@@ -832,12 +832,32 @@ declare const _default: {
|
|
|
832
832
|
"chart": {
|
|
833
833
|
"bars": {
|
|
834
834
|
"color": {
|
|
835
|
-
"
|
|
836
|
-
"
|
|
837
|
-
"
|
|
838
|
-
"
|
|
839
|
-
"
|
|
840
|
-
"
|
|
835
|
+
"blue": "#437EEF",
|
|
836
|
+
"orange": "#FF7729",
|
|
837
|
+
"green": "#00E513",
|
|
838
|
+
"fuchsia": "#FB32C9",
|
|
839
|
+
"yellow": "#eef400",
|
|
840
|
+
"violet": "#BB33FF",
|
|
841
|
+
"babyblue": "#00CBEB",
|
|
842
|
+
"red": "#ff2323",
|
|
843
|
+
"teal": "#089B83",
|
|
844
|
+
"sunrise": "#FFC300",
|
|
845
|
+
"slate": "#9a9ea7"
|
|
846
|
+
}
|
|
847
|
+
},
|
|
848
|
+
"color": {
|
|
849
|
+
"default": {
|
|
850
|
+
"blue": "#437EEF",
|
|
851
|
+
"orange": "#FF7729",
|
|
852
|
+
"green": "#00E513",
|
|
853
|
+
"fuchsia": "#FB32C9",
|
|
854
|
+
"yellow": "#eef400",
|
|
855
|
+
"violet": "#BB33FF",
|
|
856
|
+
"babyblue": "#00CBEB",
|
|
857
|
+
"red": "#ff2323",
|
|
858
|
+
"teal": "#089B83",
|
|
859
|
+
"sunrise": "#FFC300",
|
|
860
|
+
"slate": "#9a9ea7"
|
|
841
861
|
}
|
|
842
862
|
}
|
|
843
863
|
}
|
|
@@ -876,16 +896,16 @@ declare const _default: {
|
|
|
876
896
|
},
|
|
877
897
|
"feedback": {
|
|
878
898
|
"info": {
|
|
879
|
-
"background": "#
|
|
880
|
-
"foreground": "#
|
|
899
|
+
"background": "#E7EFFD",
|
|
900
|
+
"foreground": "#437EEF"
|
|
881
901
|
},
|
|
882
902
|
"success": {
|
|
883
903
|
"background": "#E5FFE8",
|
|
884
|
-
"foreground": "#
|
|
904
|
+
"foreground": "#008A0B"
|
|
885
905
|
},
|
|
886
906
|
"warning": {
|
|
887
|
-
"background": "#
|
|
888
|
-
"foreground": "#
|
|
907
|
+
"background": "#FFE2D1",
|
|
908
|
+
"foreground": "#A33C00"
|
|
889
909
|
},
|
|
890
910
|
"danger": {
|
|
891
911
|
"background": "#ffdddd",
|
|
@@ -899,12 +919,30 @@ declare const _default: {
|
|
|
899
919
|
},
|
|
900
920
|
"chart": {
|
|
901
921
|
"bars": {
|
|
902
|
-
"
|
|
903
|
-
"
|
|
904
|
-
"
|
|
905
|
-
"
|
|
906
|
-
"
|
|
907
|
-
"
|
|
922
|
+
"blue": "#437EEF",
|
|
923
|
+
"orange": "#FF7729",
|
|
924
|
+
"green": "#00E513",
|
|
925
|
+
"fuchsia": "#FB32C9",
|
|
926
|
+
"yellow": "#eef400",
|
|
927
|
+
"violet": "#BB33FF",
|
|
928
|
+
"babyblue": "#00CBEB",
|
|
929
|
+
"teal": "#089B83",
|
|
930
|
+
"sunrise": "#FFC300",
|
|
931
|
+
"slate": "#9a9ea7",
|
|
932
|
+
"red": "#ff2323"
|
|
933
|
+
},
|
|
934
|
+
"default": {
|
|
935
|
+
"blue": "#437EEF",
|
|
936
|
+
"orange": "#FF7729",
|
|
937
|
+
"green": "#00E513",
|
|
938
|
+
"fuchsia": "#FB32C9",
|
|
939
|
+
"yellow": "#eef400",
|
|
940
|
+
"violet": "#BB33FF",
|
|
941
|
+
"babyblue": "#00CBEB",
|
|
942
|
+
"teal": "#089B83",
|
|
943
|
+
"sunrise": "#FFC300",
|
|
944
|
+
"slate": "#9a9ea7",
|
|
945
|
+
"red": "#ff2323"
|
|
908
946
|
}
|
|
909
947
|
},
|
|
910
948
|
"iconButton": {
|