@clickhouse/click-ui 0.0.132 → 0.0.134

package/dist/click-ui.es.js

@@ -10051,7 +10051,7 @@ const LinkArrow = styled(ArrowContainer).withConfig({
 })([""]);
 const Wrapper$a = styled.div.withConfig({
   componentId: "sc-1drx130-7"
-})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ";}}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:", ";color:", ";border:1px solid ", ";cursor:not-allowed;", ",", "{color:", ";}}"], ({
+})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.background.default, ({
   theme: theme2
@@ -10070,13 +10070,17 @@ const Wrapper$a = styled.div.withConfig({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.hover, ({
   theme: theme2
-}) => theme2.click.card.secondary.color.background.disabled, ({
-  theme: theme2
-}) => theme2.click.card.secondary.color.title.disabled, ({
-  theme: theme2
-}) => theme2.click.card.secondary.color.stroke.disabled, LinkText, LinkArrow, ({
-  theme: theme2
-}) => theme2.click.card.secondary.color.link.disabled);
+}) => `
+      background-color: ${theme2.click.card.secondary.color.background.disabled};
+      color: ${theme2.click.card.secondary.color.title.disabled};
+      border: 1px solid ${theme2.click.card.secondary.color.stroke.disabled};
+      cursor: not-allowed;
+
+      ${LinkText},
+      ${LinkArrow} {
+        color: ${theme2.click.card.secondary.color.link.disabled};
+      }
+    `);
 const CardSecondary = ({
   title,
   icon,
@@ -10089,7 +10093,7 @@ const CardSecondary = ({
   infoText,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { $disabled: disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "lg", "area-hidden": "" }),
@@ -10106,7 +10110,7 @@ const CardSecondary = ({
 };
 const Wrapper$9 = styled.div.withConfig({
   componentId: "sc-2dguvi-0"
-})(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ";}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:", ";color:", ";border:1px solid ", ";cursor:not-allowed;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}", ""], ({
+})(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
   theme: theme2
 }) => theme2.click.card.primary.color.background.default, ({
   theme: theme2
@@ -10137,19 +10141,20 @@ const Wrapper$9 = styled.div.withConfig({
   theme: theme2
 }) => theme2.click.button.basic.color.primary.stroke.active, ({
   theme: theme2
-}) => theme2.click.card.primary.color.background.disabled, ({
-  theme: theme2
-}) => theme2.click.card.primary.color.title.disabled, ({
-  theme: theme2
-}) => theme2.click.card.primary.color.stroke.disabled, ({
-  theme: theme2
-}) => theme2.click.button.basic.color.primary.background.disabled, ({
-  theme: theme2
-}) => theme2.click.button.basic.color.primary.stroke.disabled, ({
-  theme: theme2
-}) => theme2.click.button.basic.color.primary.background.disabled, ({
-  theme: theme2
-}) => theme2.click.button.basic.color.primary.stroke.disabled, ({
+}) => `
+    background-color: ${theme2.click.card.primary.color.background.disabled};
+    color: ${theme2.click.card.primary.color.title.disabled};
+    border: 1px solid ${theme2.click.card.primary.color.stroke.disabled};
+    cursor: not-allowed;
+
+    button {
+      background-color: ${theme2.click.button.basic.color.primary.background.disabled};
+      border-color: ${theme2.click.button.basic.color.primary.stroke.disabled};
+      &:active {
+        background-color: ${theme2.click.button.basic.color.primary.background.disabled};
+        border-color: ${theme2.click.button.basic.color.primary.stroke.disabled};
+      }
+    }`, ({
   $isSelected,
   theme: theme2
 }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
@@ -10208,7 +10213,7 @@ const CardPrimary = ({
     }
   };
   const Component2 = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$9, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, $disabled: disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$9, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
     (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
       icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
@@ -31372,6 +31377,7 @@ const Grid = forwardRef(({
   onMouseMove: onMouseMoveProp,
   showBorder = false,
   onCopy: onCopyProp,
+  onCopyCallback,
   onContextMenu: onContextMenuProp,
   forwardedGridRef,
   ...props
@@ -31383,8 +31389,7 @@ const Grid = forwardRef(({
   const [selection, setSelection] = useState(selectionProp ?? {
     type: "empty"
   });
-  const onCopy = useCallback(async () => {
-    let isCopied = false;
+  const defaultOnCopy = useCallback(async () => {
     try {
       await copyGridElements({
         cell,
@@ -31394,7 +31399,9 @@ const Grid = forwardRef(({
         columnCount,
         outerRef
       });
-      isCopied = true;
+      if (onCopyCallback) {
+        onCopyCallback(true);
+      }
       if (showToast) {
         createToast({
           title: "Copied successfully",
@@ -31404,6 +31411,9 @@ const Grid = forwardRef(({
       }
     } catch (e) {
       console.error(e);
+      if (onCopyCallback) {
+        onCopyCallback(false);
+      }
       if (showToast) {
         createToast({
           title: "Failed to copy",
@@ -31411,11 +31421,17 @@ const Grid = forwardRef(({
           type: "danger"
         });
       }
-      if (typeof onCopyProp === "function") {
-        onCopyProp(isCopied);
-      }
     }
-  }, [cell, columnCount, focus, focusProp, onCopyProp, rowCount, selection, showToast]);
+  }, [cell, columnCount, focus, focusProp, rowCount, selection, showToast, onCopyCallback]);
+  const customOnCopy = useMemo(() => {
+    const result = async () => {
+      if (onCopyProp) {
+        await onCopyProp(selection, focus);
+      }
+    };
+    return result;
+  }, [onCopyProp, selection, focus]);
+  const onCopy = typeof onCopyProp === "function" ? customOnCopy : defaultOnCopy;
   const defaultMenuOptions = [{
     label: "Copy",
     onSelect: onCopy
@@ -31453,7 +31469,7 @@ const Grid = forwardRef(({
       onFocusChangeProp(row, column);
     }
   }, [onFocusChangeProp, focusProp]);
-  const rowNumberWidth = (rowCount.toString().length + 2) * 8 + 3;
+  const rowNumberWidth = ((rowStart + rowCount).toString().length + 2) * 8 + 3;
   const {
     getColumnHorizontalPosition,
     onColumnResize,
@@ -32375,17 +32391,24 @@ const Pagination = ({
   const formatNumber = (value) => {
     return new Intl.NumberFormat("en").format(value);
   };
+  const leftButtonDisabled = currentPage <= 1;
+  const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onKeyDown = (e) => {
-    if (e.key === "ArrowUp" || e.key === "ArrowRight") {
+    var _a;
+    const isInputEnabled = !((_a = inputRef.current) == null ? void 0 : _a.disabled);
+    if ((e.key === "ArrowUp" || e.key === "ArrowRight") && isInputEnabled && !rightButtonDisabled) {
       onChangeProp(currentPage + 1);
-    } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
-      onChangeProp(currentPage - 1);
+    } else if ((e.key === "ArrowDown" || e.key === "ArrowLeft") && isInputEnabled && !leftButtonDisabled) {
+      const newPage = currentPage - 1;
+      if (newPage > 0) {
+        onChangeProp(newPage);
+      }
     }
   };
   const onChange = (value) => {
     var _a;
     const valueToNumber = Number(value);
-    if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled)) {
+    if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled) || (typeof totalPages !== "undefined" ? valueToNumber > totalPages : false)) {
       return;
     }
     onChangeProp(valueToNumber);
@@ -32395,8 +32418,6 @@ const Pagination = ({
       onPageSizeChangeProp(Number(value));
     }
   };
-  const leftButtonDisabled = currentPage <= 1;
-  const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onPrevClick = useCallback((e) => {
     if (leftButtonDisabled) {
       return;
@@ -37047,14 +37068,15 @@ const SidebarNavigationItem = forwardRef(({
   icon,
   selected,
   iconDir,
+  disabled,
   type = "main",
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children: label }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children: label }) });
 });
 const SidebarItemWrapper = styled.div.withConfig({
   componentId: "sc-1rz759l-0"
-})(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;cursor:pointer;", ' a{color:inherit;text-decoration:none;&:active{color:inherit;}}&:hover [data-trigger-icon],[data-open="true"][data-trigger-icon]{visibility:visible;}'], ({
+})(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;", ""], ({
   theme: theme2,
   $collapsible = false,
   $level,
@@ -37067,26 +37089,53 @@ const SidebarItemWrapper = styled.div.withConfig({
     font: ${theme2.click.sidebar.navigation[itemType].typography.default};
     background-color: ${theme2.click.sidebar[$type].navigation[itemType].color.background.default};
     color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.default};
+    span a {
+      color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.default};
+    cursor: pointer;
+      text-decoration: none;
+    }
+    cursor: pointer;
+    pointer-events: all;
+
     &:hover, &:focus {
       font: ${theme2.click.sidebar.navigation[itemType].typography.hover};
       background-color: ${theme2.click.sidebar[$type].navigation[itemType].color.background.hover};
       color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.hover};
+      pointer-events: auto;
     }
 
-    &:active, &[data-selected="true"]  {
+    &:active, &[data-selected="true"] {
       font: ${theme2.click.sidebar.navigation[itemType].typography.active};
       background-color: ${theme2.click.sidebar[$type].navigation[itemType].color.background.active};
       color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.active};
+      pointer-events: all;
     }
+
+    &[aria-disabled=true],
+    &[aria-disabled=true]:hover,
+    &[aria-disabled=true]:focus,
+    &[aria-disabled=true]:active,
+    &[aria-disabled=true]:focus-within,
+    &[aria-disabled=true][data-selected="true"] {
+
+      color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.disabled};
+      pointer-events: none;
+
+      span a {
+        color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.disabled};
+        cursor: not-allowed;
+        text-decoration: none;
+      }
+      cursor: not-allowed;
+    }
+
     @media (max-width: 640px) {
       gap: ${theme2.click.sidebar.navigation[itemType].mobile.space.gap};
       padding: ${theme2.click.sidebar.navigation[itemType].mobile.space.y} ${theme2.click.sidebar.navigation[itemType].mobile.space.right} ${theme2.click.sidebar.navigation[itemType].mobile.space.y} ${$collapsible ? theme2.click.sidebar.navigation[itemType].mobile.space.left : theme2.click.image.sm.size.width};
       font: ${theme2.click.sidebar.navigation[itemType].mobile.typography.default};
-
       &:hover, &:focus {
         font: ${theme2.click.sidebar.navigation[itemType].mobile.typography.hover};
       }
-
       &:active, &[data-selected="true"] {
         font: ${theme2.click.sidebar.navigation[itemType].mobile.typography.active};
       }
@@ -41066,10 +41115,12 @@ const click$3 = {
               "default": "#f6f7fa",
               hover: "#ffffff",
               active: "#ffffff",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#e4e2e9"
+              "default": "#e4e2e9",
+              disabled: "#a0a0a0"
             }
           },
           background: {
@@ -41140,13 +41191,6 @@ const click$3 = {
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
@@ -41161,6 +41205,13 @@ const click$3 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -42379,10 +42430,12 @@ const click$2 = {
               "default": "#ffffff",
               hover: "#ffffff",
               active: "#ffffff",
-              muted: "#b3b6bd"
+              muted: "#b3b6bd",
+              disabled: "#808080"
             },
             icon: {
-              "default": "#b3b6bd"
+              "default": "#b3b6bd",
+              disabled: "#808080"
             }
           }
         },
@@ -42397,11 +42450,13 @@ const click$2 = {
           color: {
             text: {
               "default": "#b3b6bd",
+              disabled: "#808080",
               hover: "#ffffff",
               active: "#ffffff"
             },
             background: {
               "default": "rgba(0,0,0,0)",
+              disabled: "rgba(0,0,0,0)",
               hover: "lch(19.1 0 0)",
               active: "rgba(0,0,0,0)"
             }
@@ -42437,23 +42492,19 @@ const click$2 = {
               "default": "#ffffff",
               hover: "#ffffff",
               active: "#ffffff",
-              muted: "#b3b6bd"
+              muted: "#b3b6bd",
+              disabled: "#808080"
             },
             icon: {
-              "default": "#b3b6bd"
+              "default": "#b3b6bd",
+              disabled: "#808080"
             }
           }
         },
-        title: {
-          color: {
-            "default": "#b3b6bd",
-            hover: "#b3b6bd",
-            active: "#b3b6bd"
-          }
-        },
         subItem: {
           color: {
             text: {
+              disabled: "#808080",
               "default": "#b3b6bd",
               hover: "#ffffff",
               active: "#ffffff"
@@ -42465,6 +42516,13 @@ const click$2 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#b3b6bd",
+            hover: "#b3b6bd",
+            active: "#b3b6bd"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -43838,10 +43896,12 @@ const click$1 = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -43856,13 +43916,19 @@ const click$1 = {
           color: {
             text: {
               "default": "#696e79",
+              disabled: "#a0a0a0",
               hover: "#161517",
               active: "#161517"
             },
             background: {
               "default": "rgba(0,0,0,0)",
+              disabled: "rgba(0,0,0,0)",
               hover: "lch(91.6 1.1 266 / 0.6)",
               active: "rgba(0,0,0,0)"
+            },
+            icon: {
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -43896,23 +43962,18 @@ const click$1 = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
               "default": "#696e79"
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
+              disabled: "#a0a0a0",
               "default": "#696e79",
               hover: "#161517",
               active: "#161517"
@@ -43924,6 +43985,13 @@ const click$1 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -46212,10 +46280,12 @@ const click = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -46230,13 +46300,19 @@ const click = {
           color: {
             text: {
               "default": "#696e79",
+              disabled: "#a0a0a0",
               hover: "#161517",
               active: "#161517"
             },
             background: {
               "default": "rgba(0,0,0,0)",
+              disabled: "rgba(0,0,0,0)",
               hover: "lch(91.6 1.1 266 / 0.6)",
               active: "rgba(0,0,0,0)"
+            },
+            icon: {
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -46270,23 +46346,19 @@ const click = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
+              disabled: "#a0a0a0",
               "default": "#696e79",
               hover: "#161517",
               active: "#161517"
@@ -46298,6 +46370,13 @@ const click = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {