@clickhouse/click-ui 0.0.128 → 0.0.130
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 +38 -10
- package/dist/click-ui.umd.js +38 -10
- package/dist/components/BigStat/BigStat.d.ts +3 -3
- package/dist/components/Logos/Microsoft.d.ts +3 -0
- package/dist/components/Logos/types.d.ts +1 -1
- package/dist/components/Pagination/Pagination.d.ts +2 -1
- package/dist/components/Tooltip/Tooltip.d.ts +2 -1
- package/package.json +1 -1
package/dist/click-ui.es.js
CHANGED
|
@@ -2615,6 +2615,12 @@ const Metabase = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { widt
|
|
|
2615
2615
|
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { opacity: "0.2", d: "M43.0456 53.0913C45.1635 53.0913 46.8803 51.347 46.8803 49.1953C46.8803 47.0436 45.1635 45.2993 43.0456 45.2993C40.9278 45.2993 39.2109 47.0436 39.2109 49.1953C39.2109 51.347 40.9278 53.0913 43.0456 53.0913Z", fill: "#509EE3" }),
|
|
2616
2616
|
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M53.7829 53.0913C55.9008 53.0913 57.6176 51.347 57.6176 49.1953C57.6176 47.0436 55.9008 45.2993 53.7829 45.2993C51.6651 45.2993 49.9482 47.0436 49.9482 49.1953C49.9482 51.347 51.6651 53.0913 53.7829 53.0913Z", fill: "#509EE3" })
|
|
2617
2617
|
] });
|
|
2618
|
+
const Microsoft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2619
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 6.43506H29.7824V30.7829H5.43457V6.43506Z", fill: "#F35325" }),
|
|
2620
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 6.43506H56.5656V30.7829H32.2178V6.43506Z", fill: "#81BC06" }),
|
|
2621
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 33.2173H29.7824V57.5651H5.43457V33.2173Z", fill: "#05A6F0" }),
|
|
2622
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 33.2173H56.5656V57.5651H32.2178V33.2173Z", fill: "#FFBA08" })
|
|
2623
|
+
] });
|
|
2618
2624
|
const MongoDb = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2619
2625
|
/* @__PURE__ */ jsxRuntimeExports.jsx("g", { clipPath: "url(#clip0_3281_13740)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M37.5006 7.10975C34.8146 3.93331 32.5016 0.707252 32.029 0.0372239C31.9793 -0.0124079 31.9047 -0.0124079 31.8549 0.0372239C31.3824 0.707252 29.0694 3.93331 26.3833 7.10975C3.32793 36.4172 30.0145 56.1957 30.0145 56.1957L30.2383 56.3444C30.4373 59.397 30.9347 63.7893 30.9347 63.7893H31.9295H32.9244C32.9244 63.7893 33.4218 59.4216 33.6208 56.3444L33.8446 56.1708C33.8695 56.1708 60.5561 36.4172 37.5006 7.10975ZM31.9295 55.749C31.9295 55.749 30.7357 54.7315 30.4124 54.2102V54.1607L31.8549 22.2475C31.8549 22.1482 32.0042 22.1482 32.0042 22.2475L33.4467 54.1607V54.2102C33.1233 54.7315 31.9295 55.749 31.9295 55.749Z", fill: "#00ED64" }) }),
|
|
2620
2626
|
/* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_3281_13740", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "29.8833", height: "64", fill: "white", transform: "translate(17)" }) }) })
|
|
@@ -2818,6 +2824,7 @@ const LogosLight = {
|
|
|
2818
2824
|
kafka: KafkaLight,
|
|
2819
2825
|
kubenetes: Kubenetes,
|
|
2820
2826
|
metabase: Metabase,
|
|
2827
|
+
microsoft: Microsoft,
|
|
2821
2828
|
mongodb: MongoDb,
|
|
2822
2829
|
mysql: MySQL,
|
|
2823
2830
|
nodejs: NodeJs,
|
|
@@ -2932,6 +2939,7 @@ const LogosDark = {
|
|
|
2932
2939
|
kafka: KafkaDark,
|
|
2933
2940
|
kubenetes: Kubenetes,
|
|
2934
2941
|
metabase: Metabase,
|
|
2942
|
+
microsoft: Microsoft,
|
|
2935
2943
|
mongodb: MongoDb,
|
|
2936
2944
|
mysql: MySQL,
|
|
2937
2945
|
nodejs: NodeJs,
|
|
@@ -9738,8 +9746,9 @@ const BigStat = ({
|
|
|
9738
9746
|
size: size2,
|
|
9739
9747
|
spacing = "sm",
|
|
9740
9748
|
state = "default",
|
|
9741
|
-
title = "Title"
|
|
9742
|
-
|
|
9749
|
+
title = "Title",
|
|
9750
|
+
...props
|
|
9751
|
+
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
|
|
9743
9752
|
/* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
|
|
9744
9753
|
/* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
|
|
9745
9754
|
] });
|
|
@@ -32350,9 +32359,11 @@ const Pagination = ({
|
|
|
32350
32359
|
onPrevPageClick,
|
|
32351
32360
|
onPageNumberFocus,
|
|
32352
32361
|
onPageNumberBlur,
|
|
32362
|
+
disableNextButton,
|
|
32353
32363
|
...props
|
|
32354
32364
|
}) => {
|
|
32355
32365
|
const hasRowCount = ["number", "string"].includes(typeof rowCount);
|
|
32366
|
+
const inputRef = useRef(null);
|
|
32356
32367
|
const formatNumber = (value) => {
|
|
32357
32368
|
return new Intl.NumberFormat("en").format(value);
|
|
32358
32369
|
};
|
|
@@ -32364,38 +32375,51 @@ const Pagination = ({
|
|
|
32364
32375
|
}
|
|
32365
32376
|
};
|
|
32366
32377
|
const onChange = (value) => {
|
|
32367
|
-
|
|
32378
|
+
var _a;
|
|
32379
|
+
const valueToNumber = Number(value);
|
|
32380
|
+
if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled)) {
|
|
32381
|
+
return;
|
|
32382
|
+
}
|
|
32383
|
+
onChangeProp(valueToNumber);
|
|
32368
32384
|
};
|
|
32369
32385
|
const onPageSizeChange = (value) => {
|
|
32370
32386
|
if (typeof onPageSizeChangeProp === "function") {
|
|
32371
32387
|
onPageSizeChangeProp(Number(value));
|
|
32372
32388
|
}
|
|
32373
32389
|
};
|
|
32390
|
+
const leftButtonDisabled = currentPage <= 1;
|
|
32391
|
+
const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
|
|
32374
32392
|
const onPrevClick = useCallback((e) => {
|
|
32393
|
+
if (leftButtonDisabled) {
|
|
32394
|
+
return;
|
|
32395
|
+
}
|
|
32375
32396
|
onChangeProp(currentPage - 1);
|
|
32376
32397
|
if (typeof onPrevPageClick === "function") {
|
|
32377
32398
|
onPrevPageClick(e);
|
|
32378
32399
|
}
|
|
32379
|
-
}, [currentPage, onChangeProp, onPrevPageClick]);
|
|
32400
|
+
}, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
|
|
32380
32401
|
const onNextClick = useCallback((e) => {
|
|
32402
|
+
if (rightButtonDisabled) {
|
|
32403
|
+
return;
|
|
32404
|
+
}
|
|
32381
32405
|
onChangeProp(currentPage + 1);
|
|
32382
32406
|
if (typeof onNextPageClick === "function") {
|
|
32383
32407
|
onNextPageClick(e);
|
|
32384
32408
|
}
|
|
32385
|
-
}, [currentPage, onChangeProp, onNextPageClick]);
|
|
32409
|
+
}, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
|
|
32386
32410
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
|
|
32387
32411
|
hasRowCount && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
|
|
32388
32412
|
typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
|
|
32389
32413
|
" rows"
|
|
32390
32414
|
] }),
|
|
32391
32415
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
|
|
32392
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled:
|
|
32393
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur }) }),
|
|
32416
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
|
|
32417
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
|
|
32394
32418
|
!!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
|
|
32395
32419
|
"of ",
|
|
32396
32420
|
formatNumber(totalPages)
|
|
32397
32421
|
] }),
|
|
32398
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled:
|
|
32422
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
|
|
32399
32423
|
] }),
|
|
32400
32424
|
maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(CustomSelect, { as: Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
|
|
32401
32425
|
/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
|
|
@@ -38752,13 +38776,16 @@ Tooltip.Trigger = TooltipTrigger;
|
|
|
38752
38776
|
const RadixTooltipContent = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
|
|
38753
38777
|
componentId: "sc-ymqkp1-0"
|
|
38754
38778
|
})(["display:flex;align-items:flex-start;", ""], ({
|
|
38755
|
-
theme: theme2
|
|
38779
|
+
theme: theme2,
|
|
38780
|
+
$maxWidth
|
|
38756
38781
|
}) => `
|
|
38757
38782
|
padding: ${theme2.click.tooltip.space.y} ${theme2.click.tooltip.space.x};
|
|
38758
38783
|
color: ${theme2.click.tooltip.color.label.default};
|
|
38759
38784
|
background: ${theme2.click.tooltip.color.background.default};
|
|
38760
38785
|
border-radius: ${theme2.click.tooltip.radii.all};
|
|
38761
38786
|
font: ${theme2.click.tooltip.typography.label.default};
|
|
38787
|
+
white-space: pre-wrap;
|
|
38788
|
+
${$maxWidth && `max-width: ${$maxWidth}`};
|
|
38762
38789
|
`);
|
|
38763
38790
|
const Arrow = styled.svg.withConfig({
|
|
38764
38791
|
componentId: "sc-ymqkp1-1"
|
|
@@ -38771,9 +38798,10 @@ const TooltipContent = ({
|
|
|
38771
38798
|
showArrow,
|
|
38772
38799
|
children,
|
|
38773
38800
|
sideOffset = 6,
|
|
38801
|
+
maxWidth,
|
|
38774
38802
|
...props
|
|
38775
38803
|
}) => {
|
|
38776
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, ...props, children: [
|
|
38804
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
|
|
38777
38805
|
showArrow && /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow, { as: $a093c7e1ec25a057$export$21b07c8f274aebd5, width: 20, height: 8 }),
|
|
38778
38806
|
children
|
|
38779
38807
|
] }) });
|
package/dist/click-ui.umd.js
CHANGED
|
@@ -2632,6 +2632,12 @@ var __publicField = (obj, key, value) => {
|
|
|
2632
2632
|
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { opacity: "0.2", d: "M43.0456 53.0913C45.1635 53.0913 46.8803 51.347 46.8803 49.1953C46.8803 47.0436 45.1635 45.2993 43.0456 45.2993C40.9278 45.2993 39.2109 47.0436 39.2109 49.1953C39.2109 51.347 40.9278 53.0913 43.0456 53.0913Z", fill: "#509EE3" }),
|
|
2633
2633
|
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M53.7829 53.0913C55.9008 53.0913 57.6176 51.347 57.6176 49.1953C57.6176 47.0436 55.9008 45.2993 53.7829 45.2993C51.6651 45.2993 49.9482 47.0436 49.9482 49.1953C49.9482 51.347 51.6651 53.0913 53.7829 53.0913Z", fill: "#509EE3" })
|
|
2634
2634
|
] });
|
|
2635
|
+
const Microsoft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2636
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 6.43506H29.7824V30.7829H5.43457V6.43506Z", fill: "#F35325" }),
|
|
2637
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 6.43506H56.5656V30.7829H32.2178V6.43506Z", fill: "#81BC06" }),
|
|
2638
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.43457 33.2173H29.7824V57.5651H5.43457V33.2173Z", fill: "#05A6F0" }),
|
|
2639
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M32.2178 33.2173H56.5656V57.5651H32.2178V33.2173Z", fill: "#FFBA08" })
|
|
2640
|
+
] });
|
|
2635
2641
|
const MongoDb = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2636
2642
|
/* @__PURE__ */ jsxRuntimeExports.jsx("g", { clipPath: "url(#clip0_3281_13740)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M37.5006 7.10975C34.8146 3.93331 32.5016 0.707252 32.029 0.0372239C31.9793 -0.0124079 31.9047 -0.0124079 31.8549 0.0372239C31.3824 0.707252 29.0694 3.93331 26.3833 7.10975C3.32793 36.4172 30.0145 56.1957 30.0145 56.1957L30.2383 56.3444C30.4373 59.397 30.9347 63.7893 30.9347 63.7893H31.9295H32.9244C32.9244 63.7893 33.4218 59.4216 33.6208 56.3444L33.8446 56.1708C33.8695 56.1708 60.5561 36.4172 37.5006 7.10975ZM31.9295 55.749C31.9295 55.749 30.7357 54.7315 30.4124 54.2102V54.1607L31.8549 22.2475C31.8549 22.1482 32.0042 22.1482 32.0042 22.2475L33.4467 54.1607V54.2102C33.1233 54.7315 31.9295 55.749 31.9295 55.749Z", fill: "#00ED64" }) }),
|
|
2637
2643
|
/* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_3281_13740", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "29.8833", height: "64", fill: "white", transform: "translate(17)" }) }) })
|
|
@@ -2835,6 +2841,7 @@ var __publicField = (obj, key, value) => {
|
|
|
2835
2841
|
kafka: KafkaLight,
|
|
2836
2842
|
kubenetes: Kubenetes,
|
|
2837
2843
|
metabase: Metabase,
|
|
2844
|
+
microsoft: Microsoft,
|
|
2838
2845
|
mongodb: MongoDb,
|
|
2839
2846
|
mysql: MySQL,
|
|
2840
2847
|
nodejs: NodeJs,
|
|
@@ -2949,6 +2956,7 @@ var __publicField = (obj, key, value) => {
|
|
|
2949
2956
|
kafka: KafkaDark,
|
|
2950
2957
|
kubenetes: Kubenetes,
|
|
2951
2958
|
metabase: Metabase,
|
|
2959
|
+
microsoft: Microsoft,
|
|
2952
2960
|
mongodb: MongoDb,
|
|
2953
2961
|
mysql: MySQL,
|
|
2954
2962
|
nodejs: NodeJs,
|
|
@@ -9755,8 +9763,9 @@ var __publicField = (obj, key, value) => {
|
|
|
9755
9763
|
size: size2,
|
|
9756
9764
|
spacing = "sm",
|
|
9757
9765
|
state = "default",
|
|
9758
|
-
title = "Title"
|
|
9759
|
-
|
|
9766
|
+
title = "Title",
|
|
9767
|
+
...props
|
|
9768
|
+
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
|
|
9760
9769
|
/* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
|
|
9761
9770
|
/* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
|
|
9762
9771
|
] });
|
|
@@ -32367,9 +32376,11 @@ var __publicField = (obj, key, value) => {
|
|
|
32367
32376
|
onPrevPageClick,
|
|
32368
32377
|
onPageNumberFocus,
|
|
32369
32378
|
onPageNumberBlur,
|
|
32379
|
+
disableNextButton,
|
|
32370
32380
|
...props
|
|
32371
32381
|
}) => {
|
|
32372
32382
|
const hasRowCount = ["number", "string"].includes(typeof rowCount);
|
|
32383
|
+
const inputRef = React.useRef(null);
|
|
32373
32384
|
const formatNumber = (value) => {
|
|
32374
32385
|
return new Intl.NumberFormat("en").format(value);
|
|
32375
32386
|
};
|
|
@@ -32381,38 +32392,51 @@ var __publicField = (obj, key, value) => {
|
|
|
32381
32392
|
}
|
|
32382
32393
|
};
|
|
32383
32394
|
const onChange = (value) => {
|
|
32384
|
-
|
|
32395
|
+
var _a;
|
|
32396
|
+
const valueToNumber = Number(value);
|
|
32397
|
+
if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled)) {
|
|
32398
|
+
return;
|
|
32399
|
+
}
|
|
32400
|
+
onChangeProp(valueToNumber);
|
|
32385
32401
|
};
|
|
32386
32402
|
const onPageSizeChange = (value) => {
|
|
32387
32403
|
if (typeof onPageSizeChangeProp === "function") {
|
|
32388
32404
|
onPageSizeChangeProp(Number(value));
|
|
32389
32405
|
}
|
|
32390
32406
|
};
|
|
32407
|
+
const leftButtonDisabled = currentPage <= 1;
|
|
32408
|
+
const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
|
|
32391
32409
|
const onPrevClick = React.useCallback((e) => {
|
|
32410
|
+
if (leftButtonDisabled) {
|
|
32411
|
+
return;
|
|
32412
|
+
}
|
|
32392
32413
|
onChangeProp(currentPage - 1);
|
|
32393
32414
|
if (typeof onPrevPageClick === "function") {
|
|
32394
32415
|
onPrevPageClick(e);
|
|
32395
32416
|
}
|
|
32396
|
-
}, [currentPage, onChangeProp, onPrevPageClick]);
|
|
32417
|
+
}, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
|
|
32397
32418
|
const onNextClick = React.useCallback((e) => {
|
|
32419
|
+
if (rightButtonDisabled) {
|
|
32420
|
+
return;
|
|
32421
|
+
}
|
|
32398
32422
|
onChangeProp(currentPage + 1);
|
|
32399
32423
|
if (typeof onNextPageClick === "function") {
|
|
32400
32424
|
onNextPageClick(e);
|
|
32401
32425
|
}
|
|
32402
|
-
}, [currentPage, onChangeProp, onNextPageClick]);
|
|
32426
|
+
}, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
|
|
32403
32427
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
|
|
32404
32428
|
hasRowCount && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
|
|
32405
32429
|
typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
|
|
32406
32430
|
" rows"
|
|
32407
32431
|
] }),
|
|
32408
32432
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
|
|
32409
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled:
|
|
32410
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur }) }),
|
|
32433
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
|
|
32434
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
|
|
32411
32435
|
!!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
|
|
32412
32436
|
"of ",
|
|
32413
32437
|
formatNumber(totalPages)
|
|
32414
32438
|
] }),
|
|
32415
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled:
|
|
32439
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
|
|
32416
32440
|
] }),
|
|
32417
32441
|
maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(CustomSelect, { as: Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
|
|
32418
32442
|
/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
|
|
@@ -38769,13 +38793,16 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
38769
38793
|
const RadixTooltipContent = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
|
|
38770
38794
|
componentId: "sc-ymqkp1-0"
|
|
38771
38795
|
})(["display:flex;align-items:flex-start;", ""], ({
|
|
38772
|
-
theme: theme2
|
|
38796
|
+
theme: theme2,
|
|
38797
|
+
$maxWidth
|
|
38773
38798
|
}) => `
|
|
38774
38799
|
padding: ${theme2.click.tooltip.space.y} ${theme2.click.tooltip.space.x};
|
|
38775
38800
|
color: ${theme2.click.tooltip.color.label.default};
|
|
38776
38801
|
background: ${theme2.click.tooltip.color.background.default};
|
|
38777
38802
|
border-radius: ${theme2.click.tooltip.radii.all};
|
|
38778
38803
|
font: ${theme2.click.tooltip.typography.label.default};
|
|
38804
|
+
white-space: pre-wrap;
|
|
38805
|
+
${$maxWidth && `max-width: ${$maxWidth}`};
|
|
38779
38806
|
`);
|
|
38780
38807
|
const Arrow = styled.svg.withConfig({
|
|
38781
38808
|
componentId: "sc-ymqkp1-1"
|
|
@@ -38788,9 +38815,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
38788
38815
|
showArrow,
|
|
38789
38816
|
children,
|
|
38790
38817
|
sideOffset = 6,
|
|
38818
|
+
maxWidth,
|
|
38791
38819
|
...props
|
|
38792
38820
|
}) => {
|
|
38793
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, ...props, children: [
|
|
38821
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
|
|
38794
38822
|
showArrow && /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow, { as: $a093c7e1ec25a057$export$21b07c8f274aebd5, width: 20, height: 8 }),
|
|
38795
38823
|
children
|
|
38796
38824
|
] }) });
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
2
|
export type bigStatOrder = "titleTop" | "titleBottom";
|
|
3
3
|
export type bigStatSize = "sm" | "lg";
|
|
4
4
|
export type bigStatSpacing = "sm" | "lg";
|
|
5
5
|
export type bigStatState = "default" | "muted";
|
|
6
|
-
export interface BigStatProps {
|
|
6
|
+
export interface BigStatProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
7
7
|
fillWidth?: boolean;
|
|
8
8
|
maxWidth?: string;
|
|
9
9
|
height?: string;
|
|
@@ -14,4 +14,4 @@ export interface BigStatProps {
|
|
|
14
14
|
state?: bigStatState;
|
|
15
15
|
title: React.ReactNode;
|
|
16
16
|
}
|
|
17
|
-
export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";
|
|
1
|
+
export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "microsoft" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";
|
|
@@ -12,5 +12,6 @@ export interface PaginationProps extends Omit<ContainerProps<"div">, "children"
|
|
|
12
12
|
onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;
|
|
13
13
|
onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;
|
|
14
14
|
onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;
|
|
15
|
+
disableNextButton?: boolean;
|
|
15
16
|
}
|
|
16
|
-
export declare const Pagination: ({ totalPages, currentPage, maxRowsPerPageList, rowCount, onChange: onChangeProp, onPageSizeChange: onPageSizeChangeProp, pageSize, fillWidth, gap, justifyContent, onNextPageClick, onPrevPageClick, onPageNumberFocus, onPageNumberBlur, ...props }: PaginationProps) => ReactElement;
|
|
17
|
+
export declare const Pagination: ({ totalPages, currentPage, maxRowsPerPageList, rowCount, onChange: onChangeProp, onPageSizeChange: onPageSizeChangeProp, pageSize, fillWidth, gap, justifyContent, onNextPageClick, onPrevPageClick, onPageNumberFocus, onPageNumberBlur, disableNextButton, ...props }: PaginationProps) => ReactElement;
|
|
@@ -10,11 +10,12 @@ export declare const Tooltip: {
|
|
|
10
10
|
displayName: string;
|
|
11
11
|
};
|
|
12
12
|
Content: {
|
|
13
|
-
({ showArrow, children, sideOffset, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
({ showArrow, children, sideOffset, maxWidth, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
displayName: string;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
|
|
18
18
|
showArrow?: boolean;
|
|
19
|
+
maxWidth?: string;
|
|
19
20
|
}
|
|
20
21
|
export {};
|