@clickhouse/click-ui 0.0.132 → 0.0.133

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:", ";}}", ""], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.background.default, ({
   theme: theme2
@@ -10069,14 +10069,24 @@ const Wrapper$a = styled.div.withConfig({
 }) => theme2.click.card.secondary.color.background.hover, LinkText, LinkArrow, ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.hover, ({
+  $disabled,
   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);
+}) => $disabled && `
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    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,
@@ -10106,7 +10116,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:", ";}", " ", ""], ({
   theme: theme2
 }) => theme2.click.card.primary.color.background.default, ({
   theme: theme2
@@ -10136,20 +10146,28 @@ const Wrapper$9 = styled.div.withConfig({
 }) => theme2.click.button.basic.color.primary.stroke.active, ({
   theme: theme2
 }) => theme2.click.button.basic.color.primary.stroke.active, ({
+  $disabled,
   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, ({
+}) => $disabled && `
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    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};` : "");
@@ -31372,6 +31390,7 @@ const Grid = forwardRef(({
   onMouseMove: onMouseMoveProp,
   showBorder = false,
   onCopy: onCopyProp,
+  onCopyCallback,
   onContextMenu: onContextMenuProp,
   forwardedGridRef,
   ...props
@@ -31383,8 +31402,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 +31412,9 @@ const Grid = forwardRef(({
         columnCount,
         outerRef
       });
-      isCopied = true;
+      if (onCopyCallback) {
+        onCopyCallback(true);
+      }
       if (showToast) {
         createToast({
           title: "Copied successfully",
@@ -31404,6 +31424,9 @@ const Grid = forwardRef(({
       }
     } catch (e) {
       console.error(e);
+      if (onCopyCallback) {
+        onCopyCallback(false);
+      }
       if (showToast) {
         createToast({
           title: "Failed to copy",
@@ -31411,11 +31434,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

package/dist/click-ui.umd.js

@@ -10068,7 +10068,7 @@ var __publicField = (obj, key, value) => {
   })([""]);
   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:", ";}}", ""], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.background.default, ({
     theme: theme2
@@ -10086,14 +10086,24 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.card.secondary.color.background.hover, LinkText, LinkArrow, ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.hover, ({
+    $disabled,
     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);
+  }) => $disabled && `
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    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,
@@ -10123,7 +10133,7 @@ var __publicField = (obj, key, value) => {
   };
   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:", ";}", " ", ""], ({
     theme: theme2
   }) => theme2.click.card.primary.color.background.default, ({
     theme: theme2
@@ -10153,20 +10163,28 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.button.basic.color.primary.stroke.active, ({
     theme: theme2
   }) => theme2.click.button.basic.color.primary.stroke.active, ({
+    $disabled,
     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, ({
+  }) => $disabled && `
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    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};` : "");
@@ -31389,6 +31407,7 @@ var __publicField = (obj, key, value) => {
     onMouseMove: onMouseMoveProp,
     showBorder = false,
     onCopy: onCopyProp,
+    onCopyCallback,
     onContextMenu: onContextMenuProp,
     forwardedGridRef,
     ...props
@@ -31400,8 +31419,7 @@ var __publicField = (obj, key, value) => {
     const [selection, setSelection] = React.useState(selectionProp ?? {
       type: "empty"
     });
-    const onCopy = React.useCallback(async () => {
-      let isCopied = false;
+    const defaultOnCopy = React.useCallback(async () => {
       try {
         await copyGridElements({
           cell,
@@ -31411,7 +31429,9 @@ var __publicField = (obj, key, value) => {
           columnCount,
           outerRef
         });
-        isCopied = true;
+        if (onCopyCallback) {
+          onCopyCallback(true);
+        }
         if (showToast) {
           createToast({
             title: "Copied successfully",
@@ -31421,6 +31441,9 @@ var __publicField = (obj, key, value) => {
         }
       } catch (e) {
         console.error(e);
+        if (onCopyCallback) {
+          onCopyCallback(false);
+        }
         if (showToast) {
           createToast({
             title: "Failed to copy",
@@ -31428,11 +31451,17 @@ var __publicField = (obj, key, value) => {
             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 = React.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

package/dist/components/Grid/types.d.ts

@@ -130,7 +130,8 @@ export interface GridProps extends Omit<VariableSizeGridProps, "height" | "width
     onMouseDown?: MouseEventHandler<HTMLDivElement>;
     onMouseMove?: MouseEventHandler<HTMLDivElement>;
     showBorder?: boolean;
-    onCopy?: (isCopied: boolean) => void | Promise<void>;
+    onCopy?: (selection: SelectedRegion, focus: SelectionFocus) => void | Promise<void>;
+    onCopyCallback?: (copied: boolean) => void;
     onContextMenu?: MouseEventHandler<HTMLDivElement>;
     forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
 }

package/dist/components/types.d.ts

@@ -46,7 +46,7 @@ export type { VerticalStepperProps, VerticalStepProps, } from "./VerticalStepper
 export type { CardHorizontalProps } from "./CardHorizontal/CardHorizontal";
 export type { CardPromotionProps } from "./CardPromotion/CardPromotion";
 export type { ProgressBarProps } from "./ProgressBar/ProgressBar";
-export type { GridProps, CellProps, SelectedRegion, SelectionFocus, SelectionAction, GridContextMenuItemProps, } from "./Grid/types";
+export type { GridProps, CellProps, SelectedRegion, SelectionFocus, SelectionAction, GridContextMenuItemProps, Rectangle } from "./Grid/types";
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";
 export type Orientation = "horizontal" | "vertical";

package/package.json

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