@clickhouse/click-ui 0.0.129 → 0.0.131

package/dist/click-ui.es.js

@@ -1785,6 +1785,13 @@ const India = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns:
     /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "indiaFlagClipPath2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "#fff", d: "M0 0h30v20H0z" }) })
   ] })
 ] });
+const Japan = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8004_401)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "white" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15 16C18.3137 16 21 13.3137 21 10C21 6.68629 18.3137 4 15 4C11.6863 4 9 6.68629 9 10C9 13.3137 11.6863 16 15 16Z", fill: "#BC002D" })
+  ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8004_401", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+] });
 const Netherlands = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 20, viewBox: "0 0 30 20", fill: "none", ...props, children: [
   /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#netherlandsFlagClipPath)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "#21468B", d: "M30 0H0v20h30V0Z" }),
@@ -2262,6 +2269,7 @@ const FlagList = {
   gb: GreatBritain,
   ie: Ireland,
   in: India,
+  jp: Japan,
   nl: Netherlands,
   sg: Singapore,
   za: SouthAfrica,
@@ -32359,9 +32367,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 +32383,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 +38784,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 +38806,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

@@ -1802,6 +1802,13 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "indiaFlagClipPath2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "#fff", d: "M0 0h30v20H0z" }) })
     ] })
   ] });
+  const Japan = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8004_401)", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "white" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15 16C18.3137 16 21 13.3137 21 10C21 6.68629 18.3137 4 15 4C11.6863 4 9 6.68629 9 10C9 13.3137 11.6863 16 15 16Z", fill: "#BC002D" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8004_401", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+  ] });
   const Netherlands = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 20, viewBox: "0 0 30 20", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#netherlandsFlagClipPath)", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "#21468B", d: "M30 0H0v20h30V0Z" }),
@@ -2279,6 +2286,7 @@ var __publicField = (obj, key, value) => {
     gb: GreatBritain,
     ie: Ireland,
     in: India,
+    jp: Japan,
     nl: Netherlands,
     sg: Singapore,
     za: SouthAfrica,
@@ -32376,9 +32384,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 +32400,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 +38801,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 +38823,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/dist/components/icons/Flags/Japan.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Japan: (props: React.SVGAttributes<SVGElement>) => React.ReactElement;
+export default Japan;

package/dist/components/icons/Flags/index.d.ts

@@ -1,6 +1,6 @@
 import { SVGAttributes } from "react";
 import { IconSize } from '../../../components/Icon/types';
-export type FlagName = "au" | "br" | "ca" | "de" | "eu" | "gb" | "in" | "ie" | "nl" | "sg" | "sw" | "usa" | "uk" | "za";
+export type FlagName = "au" | "br" | "ca" | "de" | "eu" | "gb" | "in" | "ie" | "jp" | "nl" | "sg" | "sw" | "usa" | "uk" | "za";
 export interface FlagProps extends Omit<SVGAttributes<SVGElement>, "size"> {
     name: FlagName;
     size?: IconSize;
@@ -14,6 +14,7 @@ export declare const FlagList: {
     gb: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     ie: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     in: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    jp: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     nl: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     sg: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     za: (props: SVGAttributes<SVGElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/package.json

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