@clickhouse/click-ui 0.0.129 → 0.0.130

package/dist/click-ui.es.js

@@ -32359,9 +32359,11 @@ const Pagination = ({
   onPrevPageClick,
   onPageNumberFocus,
   onPageNumberBlur,
+  disableNextButton,
   ...props
 }) => {
   const hasRowCount = ["number", "string"].includes(typeof rowCount);
+  const inputRef = useRef(null);
   const formatNumber = (value) => {
     return new Intl.NumberFormat("en").format(value);
   };
@@ -32373,38 +32375,51 @@ const Pagination = ({
     }
   };
   const onChange = (value) => {
-    onChangeProp(Number(value));
+    var _a;
+    const valueToNumber = Number(value);
+    if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled)) {
+      return;
+    }
+    onChangeProp(valueToNumber);
   };
   const onPageSizeChange = (value) => {
     if (typeof onPageSizeChangeProp === "function") {
       onPageSizeChangeProp(Number(value));
     }
   };
+  const leftButtonDisabled = currentPage <= 1;
+  const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onPrevClick = useCallback((e) => {
+    if (leftButtonDisabled) {
+      return;
+    }
     onChangeProp(currentPage - 1);
     if (typeof onPrevPageClick === "function") {
       onPrevPageClick(e);
     }
-  }, [currentPage, onChangeProp, onPrevPageClick]);
+  }, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
   const onNextClick = useCallback((e) => {
+    if (rightButtonDisabled) {
+      return;
+    }
     onChangeProp(currentPage + 1);
     if (typeof onNextPageClick === "function") {
       onNextPageClick(e);
     }
-  }, [currentPage, onChangeProp, onNextPageClick]);
+  }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
     hasRowCount && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
       typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
       " rows"
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: currentPage === 1, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__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 }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
+      /* @__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 }) }),
       !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         formatNumber(totalPages)
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: !!totalPages && currentPage === totalPages, onClick: onNextClick, "data-testid": "next-btn" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
     ] }),
     maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(CustomSelect, { as: Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
@@ -38761,13 +38776,16 @@ Tooltip.Trigger = TooltipTrigger;
 const RadixTooltipContent = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-ymqkp1-0"
 })(["display:flex;align-items:flex-start;", ""], ({
-  theme: theme2
+  theme: theme2,
+  $maxWidth
 }) => `
     padding: ${theme2.click.tooltip.space.y} ${theme2.click.tooltip.space.x};
     color: ${theme2.click.tooltip.color.label.default};
     background: ${theme2.click.tooltip.color.background.default};
     border-radius: ${theme2.click.tooltip.radii.all};
     font: ${theme2.click.tooltip.typography.label.default};
+    white-space: pre-wrap;
+    ${$maxWidth && `max-width: ${$maxWidth}`};
   `);
 const Arrow = styled.svg.withConfig({
   componentId: "sc-ymqkp1-1"
@@ -38780,9 +38798,10 @@ const TooltipContent = ({
   showArrow,
   children,
   sideOffset = 6,
+  maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
     showArrow && /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow, { as: $a093c7e1ec25a057$export$21b07c8f274aebd5, width: 20, height: 8 }),
     children
   ] }) });

package/dist/click-ui.umd.js

@@ -32376,9 +32376,11 @@ var __publicField = (obj, key, value) => {
     onPrevPageClick,
     onPageNumberFocus,
     onPageNumberBlur,
+    disableNextButton,
     ...props
   }) => {
     const hasRowCount = ["number", "string"].includes(typeof rowCount);
+    const inputRef = React.useRef(null);
     const formatNumber = (value) => {
       return new Intl.NumberFormat("en").format(value);
     };
@@ -32390,38 +32392,51 @@ var __publicField = (obj, key, value) => {
       }
     };
     const onChange = (value) => {
-      onChangeProp(Number(value));
+      var _a;
+      const valueToNumber = Number(value);
+      if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled)) {
+        return;
+      }
+      onChangeProp(valueToNumber);
     };
     const onPageSizeChange = (value) => {
       if (typeof onPageSizeChangeProp === "function") {
         onPageSizeChangeProp(Number(value));
       }
     };
+    const leftButtonDisabled = currentPage <= 1;
+    const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
     const onPrevClick = React.useCallback((e) => {
+      if (leftButtonDisabled) {
+        return;
+      }
       onChangeProp(currentPage - 1);
       if (typeof onPrevPageClick === "function") {
         onPrevPageClick(e);
       }
-    }, [currentPage, onChangeProp, onPrevPageClick]);
+    }, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
     const onNextClick = React.useCallback((e) => {
+      if (rightButtonDisabled) {
+        return;
+      }
       onChangeProp(currentPage + 1);
       if (typeof onNextPageClick === "function") {
         onNextPageClick(e);
       }
-    }, [currentPage, onChangeProp, onNextPageClick]);
+    }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
       hasRowCount && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
         " rows"
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: currentPage === 1, onClick: onPrevClick, "data-testid": "prev-btn" }),
-        /* @__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 }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
+        /* @__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 }) }),
         !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
           "of ",
           formatNumber(totalPages)
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: !!totalPages && currentPage === totalPages, onClick: onNextClick, "data-testid": "next-btn" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
       ] }),
       maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(CustomSelect, { as: Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
@@ -38778,13 +38793,16 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const RadixTooltipContent = styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-ymqkp1-0"
   })(["display:flex;align-items:flex-start;", ""], ({
-    theme: theme2
+    theme: theme2,
+    $maxWidth
   }) => `
     padding: ${theme2.click.tooltip.space.y} ${theme2.click.tooltip.space.x};
     color: ${theme2.click.tooltip.color.label.default};
     background: ${theme2.click.tooltip.color.background.default};
     border-radius: ${theme2.click.tooltip.radii.all};
     font: ${theme2.click.tooltip.typography.label.default};
+    white-space: pre-wrap;
+    ${$maxWidth && `max-width: ${$maxWidth}`};
   `);
   const Arrow = styled.svg.withConfig({
     componentId: "sc-ymqkp1-1"
@@ -38797,9 +38815,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     showArrow,
     children,
     sideOffset = 6,
+    maxWidth,
     ...props
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, ...props, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
       showArrow && /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow, { as: $a093c7e1ec25a057$export$21b07c8f274aebd5, width: 20, height: 8 }),
       children
     ] }) });

package/dist/components/Pagination/Pagination.d.ts

@@ -12,5 +12,6 @@ export interface PaginationProps extends Omit<ContainerProps<"div">, "children"
     onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;
     onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;
     onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;
+    disableNextButton?: boolean;
 }
-export declare const Pagination: ({ totalPages, currentPage, maxRowsPerPageList, rowCount, onChange: onChangeProp, onPageSizeChange: onPageSizeChangeProp, pageSize, fillWidth, gap, justifyContent, onNextPageClick, onPrevPageClick, onPageNumberFocus, onPageNumberBlur, ...props }: PaginationProps) => ReactElement;
+export declare const Pagination: ({ totalPages, currentPage, maxRowsPerPageList, rowCount, onChange: onChangeProp, onPageSizeChange: onPageSizeChangeProp, pageSize, fillWidth, gap, justifyContent, onNextPageClick, onPrevPageClick, onPageNumberFocus, onPageNumberBlur, disableNextButton, ...props }: PaginationProps) => ReactElement;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -10,11 +10,12 @@ export declare const Tooltip: {
         displayName: string;
     };
     Content: {
-        ({ showArrow, children, sideOffset, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showArrow, children, sideOffset, maxWidth, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
 interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
     showArrow?: boolean;
+    maxWidth?: string;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.129",
+  "version": "0.0.130",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",