@clickhouse/click-ui 0.0.131 → 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
@@ -36469,6 +36498,8 @@ const InternalSelect = ({
   sortable = false,
   placeholder = "Select an option",
   multiple,
+  checkbox,
+  selectLabel,
   showSearch = false,
   container,
   ...props
@@ -36635,7 +36666,10 @@ const InternalSelect = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(FormElementContainer, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectPopoverRoot, { open: open2, onOpenChange, modal: true, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledSelectTrigger, { id: id ?? defaultId, $error: !!error2, disabled, "data-testid": "select-trigger", children: [
-          isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
+          isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: checkbox && selectLabel ? {
+            label: selectLabel,
+            value: selectLabel
+          } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "sort", size: "sm" })
         ] }),
         form && /* @__PURE__ */ jsxRuntimeExports.jsx(HiddenSelectElement, { multiple, name: name2, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
@@ -36657,8 +36691,16 @@ const InternalSelect = ({
               return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroup, { ...groupProps, children: itemList.map(({
                 label: label2,
                 ...itemProps
-              }, itemIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`)) }, `select-${id}-group-${index2}`);
+              }, itemIndex) => {
+                if (checkbox) {
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                }
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+              }) }, `select-${id}-group-${index2}`);
             } else {
+              if (checkbox) {
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...props2 }, `select-${id}-item-${index2}`);
+              }
               return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...props2 }, `select-${id}-item-${index2}`);
             }
           }) : children }) }),
@@ -36744,6 +36786,70 @@ const SelectItem = forwardRef(({
   ] });
 });
 SelectItem.displayName = "Select.Item";
+const MultiSelectCheckboxItem = forwardRef(({
+  disabled = false,
+  children,
+  icon,
+  iconDir = "end",
+  label,
+  onMouseOver: onMouseOverProp,
+  onSelect: onSelectProp,
+  separator,
+  value = "",
+  ...props
+}, forwardedRef) => {
+  const {
+    highlighted,
+    updateHighlighted,
+    isHidden,
+    selectedValues,
+    onSelect
+  } = useOption();
+  const onSelectValue = () => {
+    if (!disabled) {
+      onSelect(value);
+      if (typeof onSelectProp == "function") {
+        onSelectProp(value);
+      }
+    }
+  };
+  const onMouseOver = (e) => {
+    if (onMouseOverProp) {
+      onMouseOverProp(e);
+    }
+    if (!disabled) {
+      updateHighlighted(value);
+    }
+  };
+  if (isHidden(value)) {
+    return null;
+  }
+  const isChecked = selectedValues.includes(value);
+  const onChange = () => {
+    onSelect(value);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
+      icon && iconDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+        display: "flex",
+        justifyContent: "center"
+      }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+        label
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+        display: "flex",
+        justifyContent: "center"
+      }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+        children
+      ] }), onClick: onChange }),
+      icon && iconDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
+      !icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
+    ] }),
+    separator && /* @__PURE__ */ jsxRuntimeExports.jsx(Separator$1, { size: "sm" })
+  ] });
+});
+MultiSelectCheckboxItem.displayName = "Select.Item";
 const Select = ({
   value: valueProp,
   defaultValue,
@@ -36836,6 +36942,52 @@ const MultiSelect = ({
 };
 MultiSelect.Group = SelectGroup;
 MultiSelect.Item = SelectItem;
+const CheckboxMultiSelect = ({
+  value: valueProp,
+  defaultValue,
+  onSelect: onSelectProp,
+  options,
+  children,
+  onOpenChange: onOpenChangeProp,
+  selectLabel,
+  ...props
+}) => {
+  const [selectedValues, setSelectedValues] = useState(valueProp ?? defaultValue ?? []);
+  const [open2, setOpen] = useState(false);
+  const onOpenChange = useCallback((open22) => {
+    setOpen(open22);
+    if (typeof onOpenChangeProp === "function") {
+      onOpenChangeProp(open22);
+    }
+  }, [onOpenChangeProp]);
+  useEffect(() => {
+    setSelectedValues(valueProp ?? []);
+  }, [valueProp]);
+  const onChange = useCallback((values, type) => {
+    setSelectedValues(values);
+    if (typeof onSelectProp === "function") {
+      onSelectProp(values, type);
+    }
+  }, [onSelectProp]);
+  const onSelect = useCallback((value, type) => {
+    let newValues = [];
+    if (selectedValues.includes(value)) {
+      newValues = selectedValues.filter((currentValue) => currentValue !== value);
+    } else {
+      newValues = [...selectedValues, value];
+    }
+    onChange(newValues, type);
+  }, [onChange, selectedValues]);
+  const conditionalProps = {};
+  if (options) {
+    conditionalProps.options = options;
+  } else {
+    conditionalProps.children = children;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalSelect, { onChange, value: selectedValues, open: open2, onOpenChange, onSelect, checkbox: true, selectLabel, ...conditionalProps, ...props });
+};
+CheckboxMultiSelect.Group = SelectGroup;
+CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
 const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
 const $89eedd556c436f6a$var$ORIENTATIONS = [
   "horizontal",
@@ -47628,6 +47780,7 @@ export {
   CardPromotion,
   CardSecondary,
   Checkbox,
+  CheckboxMultiSelect,
   ClickUIProvider,
   CodeBlock,
   ConfirmationDialog,

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
@@ -36486,6 +36515,8 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     sortable = false,
     placeholder = "Select an option",
     multiple,
+    checkbox,
+    selectLabel,
     showSearch = false,
     container,
     ...props
@@ -36652,7 +36683,10 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       /* @__PURE__ */ jsxRuntimeExports.jsxs(FormElementContainer, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectPopoverRoot, { open: open2, onOpenChange, modal: true, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledSelectTrigger, { id: id ?? defaultId, $error: !!error2, disabled, "data-testid": "select-trigger", children: [
-            isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
+            isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SingleSelectValue, { valueNode: checkbox && selectLabel ? {
+              label: selectLabel,
+              value: selectLabel
+            } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "sort", size: "sm" })
           ] }),
           form && /* @__PURE__ */ jsxRuntimeExports.jsx(HiddenSelectElement, { multiple, name: name2, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
@@ -36674,8 +36708,16 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectGroup, { ...groupProps, children: itemList.map(({
                   label: label2,
                   ...itemProps
-                }, itemIndex) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`)) }, `select-${id}-group-${index2}`);
+                }, itemIndex) => {
+                  if (checkbox) {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                  }
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                }) }, `select-${id}-group-${index2}`);
               } else {
+                if (checkbox) {
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectCheckboxItem, { ...props2 }, `select-${id}-item-${index2}`);
+                }
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { ...props2 }, `select-${id}-item-${index2}`);
               }
             }) : children }) }),
@@ -36761,6 +36803,70 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     ] });
   });
   SelectItem.displayName = "Select.Item";
+  const MultiSelectCheckboxItem = React.forwardRef(({
+    disabled = false,
+    children,
+    icon,
+    iconDir = "end",
+    label,
+    onMouseOver: onMouseOverProp,
+    onSelect: onSelectProp,
+    separator,
+    value = "",
+    ...props
+  }, forwardedRef) => {
+    const {
+      highlighted,
+      updateHighlighted,
+      isHidden,
+      selectedValues,
+      onSelect
+    } = useOption();
+    const onSelectValue = () => {
+      if (!disabled) {
+        onSelect(value);
+        if (typeof onSelectProp == "function") {
+          onSelectProp(value);
+        }
+      }
+    };
+    const onMouseOver = (e) => {
+      if (onMouseOverProp) {
+        onMouseOverProp(e);
+      }
+      if (!disabled) {
+        updateHighlighted(value);
+      }
+    };
+    if (isHidden(value)) {
+      return null;
+    }
+    const isChecked = selectedValues.includes(value);
+    const onChange = () => {
+      onSelect(value);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
+        icon && iconDir === "start" && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "center"
+        }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+          label
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "center"
+        }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "sm" }),
+          children
+        ] }), onClick: onChange }),
+        icon && iconDir === "end" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
+        !icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
+      ] }),
+      separator && /* @__PURE__ */ jsxRuntimeExports.jsx(Separator$1, { size: "sm" })
+    ] });
+  });
+  MultiSelectCheckboxItem.displayName = "Select.Item";
   const Select = ({
     value: valueProp,
     defaultValue,
@@ -36853,6 +36959,52 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   MultiSelect.Group = SelectGroup;
   MultiSelect.Item = SelectItem;
+  const CheckboxMultiSelect = ({
+    value: valueProp,
+    defaultValue,
+    onSelect: onSelectProp,
+    options: options2,
+    children,
+    onOpenChange: onOpenChangeProp,
+    selectLabel,
+    ...props
+  }) => {
+    const [selectedValues, setSelectedValues] = React.useState(valueProp ?? defaultValue ?? []);
+    const [open2, setOpen] = React.useState(false);
+    const onOpenChange = React.useCallback((open22) => {
+      setOpen(open22);
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(open22);
+      }
+    }, [onOpenChangeProp]);
+    React.useEffect(() => {
+      setSelectedValues(valueProp ?? []);
+    }, [valueProp]);
+    const onChange = React.useCallback((values, type) => {
+      setSelectedValues(values);
+      if (typeof onSelectProp === "function") {
+        onSelectProp(values, type);
+      }
+    }, [onSelectProp]);
+    const onSelect = React.useCallback((value, type) => {
+      let newValues = [];
+      if (selectedValues.includes(value)) {
+        newValues = selectedValues.filter((currentValue) => currentValue !== value);
+      } else {
+        newValues = [...selectedValues, value];
+      }
+      onChange(newValues, type);
+    }, [onChange, selectedValues]);
+    const conditionalProps = {};
+    if (options2) {
+      conditionalProps.options = options2;
+    } else {
+      conditionalProps.children = children;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalSelect, { onChange, value: selectedValues, open: open2, onOpenChange, onSelect, checkbox: true, selectLabel, ...conditionalProps, ...props });
+  };
+  CheckboxMultiSelect.Group = SelectGroup;
+  CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
   const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
   const $89eedd556c436f6a$var$ORIENTATIONS = [
     "horizontal",
@@ -47644,6 +47796,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.CardPromotion = CardPromotion;
   exports2.CardSecondary = CardSecondary;
   exports2.Checkbox = Checkbox;
+  exports2.CheckboxMultiSelect = CheckboxMultiSelect;
   exports2.ClickUIProvider = ClickUIProvider;
   exports2.CodeBlock = CodeBlock;
   exports2.ConfirmationDialog = ConfirmationDialog;

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/Select/CheckboxMultiSelect.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MultiSelectProps } from "..";
+export interface CheckboxMultiSelectProps extends MultiSelectProps {
+    selectLabel?: string;
+}
+export declare const CheckboxMultiSelect: {
+    ({ value: valueProp, defaultValue, onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, selectLabel, ...props }: CheckboxMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+    Group: import("react").ForwardRefExoticComponent<import("./common/types").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("./common/types").SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Select/common/InternalSelect.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from "./types";
-export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, checkbox, selectLabel, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MultiSelectCheckboxItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/common/types.d.ts

@@ -60,6 +60,8 @@ interface InternalSelectProps extends PopoverProps, Omit<HTMLAttributes<HTMLDivE
     sortable?: boolean;
     onSelect: (value: string, type?: SelectionType) => void;
     multiple?: boolean;
+    checkbox?: boolean;
+    selectLabel?: string;
     placeholder?: string;
     showSearch?: boolean;
     customText?: string;

package/dist/components/index.d.ts

@@ -41,6 +41,7 @@ export { RadioGroup } from "./RadioGroup/RadioGroup";
 export { SearchField } from "./Input/SearchField";
 export { Select } from "./Select/SingleSelect";
 export { MultiSelect } from "./Select/MultiSelect";
+export { CheckboxMultiSelect } from "./Select/CheckboxMultiSelect";
 export { default as Separator } from "./Separator/Separator";
 export { SidebarNavigationItem } from "./SidebarNavigationItem/SidebarNavigationItem";
 export { SidebarCollapsibleItem } from "./SidebarCollapsibleItem/SidebarCollapsibleItem";

package/dist/components/types.d.ts

@@ -32,6 +32,7 @@ export type { Menu, SplitButtonProps } from "./SplitButton/SplitButton";
 export type { ToastProps } from "./Toast/Toast";
 export type { SelectOptionListItem } from "./Select/common/types";
 export type { MultiSelectProps } from "./Select/MultiSelect";
+export type { CheckboxMultiSelectProps } from "./Select/CheckboxMultiSelect";
 export type { PanelProps } from "./Panel/Panel";
 export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from "./Flyout/Flyout";
 export type { DialogContentProps } from "./Dialog/Dialog";
@@ -45,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.131",
+  "version": "0.0.133",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",