@clickhouse/click-ui 0.0.220 → 0.0.221

package/dist/click-ui.bundled.es.js

@@ -11421,15 +11421,16 @@ const Wrapper$5 = pt(FormRoot).withConfig({
 const Checkbox = ({
   id,
   label,
-  variant,
+  variant = "default",
   disabled,
-  orientation,
-  dir,
+  orientation = "horizontal",
+  dir = "end",
+  checked,
   ...delegated
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+  return /* @__PURE__ */ jsxs(Wrapper$5, { $orientation: orientation, $dir: dir, children: [
+    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
@@ -11437,7 +11438,7 @@ const CheckInput = pt($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-1sck1ja-1"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
   theme: theme2,
-  variant = "default"
+  variant
 }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
@@ -11449,7 +11450,8 @@ const CheckInput = pt($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
     &:hover {
       background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
-    &[data-state="checked"] {
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
       border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
       background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
@@ -11457,7 +11459,8 @@ const CheckInput = pt($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
       background: ${theme2.click.checkbox.color.background.disabled};
       border-color: ${theme2.click.checkbox.color.stroke.disabled};
       cursor: not-allowed;
-      &[data-state="checked"] {
+      &[data-state="checked"],
+      &[data-state="indeterminate"] {
         background: ${theme2.click.checkbox.color.background.disabled};
         border-color: ${theme2.click.checkbox.color.stroke.disabled};
       }
@@ -40786,8 +40789,9 @@ const Thead = ({
   onSelectAll,
   actionsList,
   onSort: onSortProp,
-  hasRows,
-  size: size2
+  size: size2,
+  rows,
+  selectedIds
 }) => {
   const onSort = (header, headerIndex) => () => {
     if (typeof onSortProp === "function" && header.isSortable) {
@@ -40801,7 +40805,7 @@ const Thead = ({
       actionsList.length > 0 && /* @__PURE__ */ jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
     ] }),
     /* @__PURE__ */ jsx(StyledThead, { children: /* @__PURE__ */ jsxs("tr", { children: [
-      isSelectable && /* @__PURE__ */ jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+      isSelectable && /* @__PURE__ */ jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
       headers.map(({
         width,
         ...headerProps
@@ -40957,7 +40961,7 @@ const TableBodyRow = ({
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
   return /* @__PURE__ */ jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
-    isSelectable && /* @__PURE__ */ jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect }) }),
+    isSelectable && /* @__PURE__ */ jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
     items.map(({
       label,
       ...cellProps
@@ -41009,19 +41013,10 @@ const Table = forwardRef(({
 }, ref) => {
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
-  const onSelectAll = (checked) => {
-    if (typeof onSelect === "function") {
-      const ids = checked ? rows.map((row, index2) => ({
-        item: row,
-        index: index2
-      })) : [];
-      onSelect(ids);
-    }
-  };
   const onRowSelect = (id) => (checked) => {
     if (typeof onSelect == "function") {
       const selectedItems = rows.flatMap((row, index2) => {
-        if (id === row.id && checked || selectedIds.includes(id) && id !== row.id) {
+        if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
           return {
             item: row,
             index: index2
@@ -41041,9 +41036,9 @@ const Table = forwardRef(({
     actionsList.push("editAction");
   }
   return /* @__PURE__ */ jsxs(TableOuterContainer, { children: [
-    hasRows && showHeader && /* @__PURE__ */ jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsx(Checkbox, { label: "Select All", checked: selectedIds.length === rows.length, onCheckedChange: onSelectAll }) }),
+    hasRows && showHeader && /* @__PURE__ */ jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
     /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsxs(StyledTable, { ref, ...props, children: [
-      showHeader && /* @__PURE__ */ jsx(Thead, { headers, isSelectable, onSelectAll, actionsList, onSort, hasRows, size: size2 }),
+      showHeader && /* @__PURE__ */ jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size: size2, rows, selectedIds }),
       /* @__PURE__ */ jsxs(Tbody, { children: [
         (loading || !hasRows) && /* @__PURE__ */ jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size: size2 }),
         rows.map(({
@@ -41061,6 +41056,56 @@ const Table = forwardRef(({
     ] }) })
   ] });
 });
+const SelectAllCheckbox = ({
+  rows,
+  selectedIds,
+  onCheckedChange,
+  ...checkboxProps
+}) => {
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const {
+    checked,
+    disabled
+  } = useMemo(() => {
+    let areAllChecked = true;
+    let maybeIndeterminate = false;
+    let disabled2 = true;
+    for (const row of rows) {
+      if (row.isDisabled || row.isDeleted) {
+        continue;
+      } else {
+        disabled2 = false;
+      }
+      if (selectedIdSet.has(row.id)) {
+        maybeIndeterminate = "indeterminate";
+      } else {
+        areAllChecked = false;
+      }
+    }
+    return {
+      checked: disabled2 ? false : areAllChecked || maybeIndeterminate,
+      disabled: disabled2
+    };
+  }, [rows, selectedIdSet]);
+  const handleCheckedChange = (checked2) => {
+    if (typeof onCheckedChange !== "function") {
+      return;
+    }
+    const newSelectedRows = rows.reduce((acc, row, index2) => {
+      const isDisabled = row.isDisabled || row.isDeleted;
+      const shouldBeSelected = checked2 ? !isDisabled || selectedIdSet.has(row.id) : isDisabled && selectedIdSet.has(row.id);
+      if (shouldBeSelected) {
+        acc.push({
+          item: row,
+          index: index2
+        });
+      }
+      return acc;
+    }, []);
+    onCheckedChange(newSelectedRows);
+  };
+  return /* @__PURE__ */ jsx(Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
+};
 const StyledTable = pt.table.withConfig({
   componentId: "sc-1q458rb-19"
 })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);

package/dist/click-ui.bundled.umd.js

@@ -11437,15 +11437,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const Checkbox = ({
     id,
     label,
-    variant,
+    variant = "default",
     disabled,
-    orientation,
-    dir,
+    orientation = "horizontal",
+    dir = "end",
+    checked,
     ...delegated
   }) => {
     const defaultId = React.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { $orientation: orientation, $dir: dir, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
       label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
@@ -11453,7 +11454,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     componentId: "sc-1sck1ja-1"
   })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
     theme: theme2,
-    variant = "default"
+    variant
   }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
@@ -11465,7 +11466,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     &:hover {
       background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
-    &[data-state="checked"] {
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
       border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
       background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
@@ -11473,7 +11475,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       background: ${theme2.click.checkbox.color.background.disabled};
       border-color: ${theme2.click.checkbox.color.stroke.disabled};
       cursor: not-allowed;
-      &[data-state="checked"] {
+      &[data-state="checked"],
+      &[data-state="indeterminate"] {
         background: ${theme2.click.checkbox.color.background.disabled};
         border-color: ${theme2.click.checkbox.color.stroke.disabled};
       }
@@ -40802,8 +40805,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     onSelectAll,
     actionsList,
     onSort: onSortProp,
-    hasRows,
-    size: size2
+    size: size2,
+    rows,
+    selectedIds
   }) => {
     const onSort = (header, headerIndex) => () => {
       if (typeof onSortProp === "function" && header.isSortable) {
@@ -40817,7 +40821,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(StyledThead, { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        isSelectable && /* @__PURE__ */ jsxRuntime.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+        isSelectable && /* @__PURE__ */ jsxRuntime.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
         headers.map(({
           width,
           ...headerProps
@@ -40973,7 +40977,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const isDeletable = typeof onDelete === "function";
     const isEditable = typeof onEdit === "function";
     return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
-      isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect }) }),
+      isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
       items.map(({
         label,
         ...cellProps
@@ -41025,19 +41029,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }, ref) => {
     const isDeletable = typeof onDelete === "function";
     const isEditable = typeof onEdit === "function";
-    const onSelectAll = (checked) => {
-      if (typeof onSelect === "function") {
-        const ids = checked ? rows.map((row, index2) => ({
-          item: row,
-          index: index2
-        })) : [];
-        onSelect(ids);
-      }
-    };
     const onRowSelect = (id) => (checked) => {
       if (typeof onSelect == "function") {
         const selectedItems = rows.flatMap((row, index2) => {
-          if (id === row.id && checked || selectedIds.includes(id) && id !== row.id) {
+          if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
             return {
               item: row,
               index: index2
@@ -41057,9 +41052,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       actionsList.push("editAction");
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(TableOuterContainer, { children: [
-      hasRows && showHeader && /* @__PURE__ */ jsxRuntime.jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { label: "Select All", checked: selectedIds.length === rows.length, onCheckedChange: onSelectAll }) }),
+      hasRows && showHeader && /* @__PURE__ */ jsxRuntime.jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTable, { ref, ...props, children: [
-        showHeader && /* @__PURE__ */ jsxRuntime.jsx(Thead, { headers, isSelectable, onSelectAll, actionsList, onSort, hasRows, size: size2 }),
+        showHeader && /* @__PURE__ */ jsxRuntime.jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size: size2, rows, selectedIds }),
         /* @__PURE__ */ jsxRuntime.jsxs(Tbody, { children: [
           (loading || !hasRows) && /* @__PURE__ */ jsxRuntime.jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size: size2 }),
           rows.map(({
@@ -41077,6 +41072,56 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] }) })
     ] });
   });
+  const SelectAllCheckbox = ({
+    rows,
+    selectedIds,
+    onCheckedChange,
+    ...checkboxProps
+  }) => {
+    const selectedIdSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
+    const {
+      checked,
+      disabled
+    } = React.useMemo(() => {
+      let areAllChecked = true;
+      let maybeIndeterminate = false;
+      let disabled2 = true;
+      for (const row of rows) {
+        if (row.isDisabled || row.isDeleted) {
+          continue;
+        } else {
+          disabled2 = false;
+        }
+        if (selectedIdSet.has(row.id)) {
+          maybeIndeterminate = "indeterminate";
+        } else {
+          areAllChecked = false;
+        }
+      }
+      return {
+        checked: disabled2 ? false : areAllChecked || maybeIndeterminate,
+        disabled: disabled2
+      };
+    }, [rows, selectedIdSet]);
+    const handleCheckedChange = (checked2) => {
+      if (typeof onCheckedChange !== "function") {
+        return;
+      }
+      const newSelectedRows = rows.reduce((acc, row, index2) => {
+        const isDisabled = row.isDisabled || row.isDeleted;
+        const shouldBeSelected = checked2 ? !isDisabled || selectedIdSet.has(row.id) : isDisabled && selectedIdSet.has(row.id);
+        if (shouldBeSelected) {
+          acc.push({
+            item: row,
+            index: index2
+          });
+        }
+        return acc;
+      }, []);
+      onCheckedChange(newSelectedRows);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
+  };
   const StyledTable = pt.table.withConfig({
     componentId: "sc-1q458rb-19"
   })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);

package/dist/click-ui.es.js

@@ -10225,15 +10225,16 @@ const Wrapper$5 = styled(FormRoot).withConfig({
 const Checkbox = ({
   id,
   label,
-  variant,
+  variant = "default",
   disabled,
-  orientation,
-  dir,
+  orientation = "horizontal",
+  dir = "end",
+  checked,
   ...delegated
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+  return /* @__PURE__ */ jsxs(Wrapper$5, { $orientation: orientation, $dir: dir, children: [
+    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
@@ -10241,7 +10242,7 @@ const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig(
   componentId: "sc-1sck1ja-1"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
   theme: theme2,
-  variant = "default"
+  variant
 }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
@@ -10253,7 +10254,8 @@ const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig(
     &:hover {
       background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
-    &[data-state="checked"] {
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
       border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
       background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
@@ -10261,7 +10263,8 @@ const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig(
       background: ${theme2.click.checkbox.color.background.disabled};
       border-color: ${theme2.click.checkbox.color.stroke.disabled};
       cursor: not-allowed;
-      &[data-state="checked"] {
+      &[data-state="checked"],
+      &[data-state="indeterminate"] {
         background: ${theme2.click.checkbox.color.background.disabled};
         border-color: ${theme2.click.checkbox.color.stroke.disabled};
       }
@@ -39618,8 +39621,9 @@ const Thead = ({
   onSelectAll,
   actionsList,
   onSort: onSortProp,
-  hasRows,
-  size: size2
+  size: size2,
+  rows,
+  selectedIds
 }) => {
   const onSort = (header, headerIndex) => () => {
     if (typeof onSortProp === "function" && header.isSortable) {
@@ -39633,7 +39637,7 @@ const Thead = ({
       actionsList.length > 0 && /* @__PURE__ */ jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
     ] }),
     /* @__PURE__ */ jsx(StyledThead, { children: /* @__PURE__ */ jsxs("tr", { children: [
-      isSelectable && /* @__PURE__ */ jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+      isSelectable && /* @__PURE__ */ jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
       headers.map(({
         width,
         ...headerProps
@@ -39789,7 +39793,7 @@ const TableBodyRow = ({
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
   return /* @__PURE__ */ jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
-    isSelectable && /* @__PURE__ */ jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect }) }),
+    isSelectable && /* @__PURE__ */ jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
     items.map(({
       label,
       ...cellProps
@@ -39841,19 +39845,10 @@ const Table = forwardRef(({
 }, ref) => {
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
-  const onSelectAll = (checked) => {
-    if (typeof onSelect === "function") {
-      const ids = checked ? rows.map((row, index2) => ({
-        item: row,
-        index: index2
-      })) : [];
-      onSelect(ids);
-    }
-  };
   const onRowSelect = (id) => (checked) => {
     if (typeof onSelect == "function") {
       const selectedItems = rows.flatMap((row, index2) => {
-        if (id === row.id && checked || selectedIds.includes(id) && id !== row.id) {
+        if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
           return {
             item: row,
             index: index2
@@ -39873,9 +39868,9 @@ const Table = forwardRef(({
     actionsList.push("editAction");
   }
   return /* @__PURE__ */ jsxs(TableOuterContainer, { children: [
-    hasRows && showHeader && /* @__PURE__ */ jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsx(Checkbox, { label: "Select All", checked: selectedIds.length === rows.length, onCheckedChange: onSelectAll }) }),
+    hasRows && showHeader && /* @__PURE__ */ jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
     /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsxs(StyledTable, { ref, ...props, children: [
-      showHeader && /* @__PURE__ */ jsx(Thead, { headers, isSelectable, onSelectAll, actionsList, onSort, hasRows, size: size2 }),
+      showHeader && /* @__PURE__ */ jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size: size2, rows, selectedIds }),
       /* @__PURE__ */ jsxs(Tbody, { children: [
         (loading || !hasRows) && /* @__PURE__ */ jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size: size2 }),
         rows.map(({
@@ -39893,6 +39888,56 @@ const Table = forwardRef(({
     ] }) })
   ] });
 });
+const SelectAllCheckbox = ({
+  rows,
+  selectedIds,
+  onCheckedChange,
+  ...checkboxProps
+}) => {
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const {
+    checked,
+    disabled
+  } = useMemo(() => {
+    let areAllChecked = true;
+    let maybeIndeterminate = false;
+    let disabled2 = true;
+    for (const row of rows) {
+      if (row.isDisabled || row.isDeleted) {
+        continue;
+      } else {
+        disabled2 = false;
+      }
+      if (selectedIdSet.has(row.id)) {
+        maybeIndeterminate = "indeterminate";
+      } else {
+        areAllChecked = false;
+      }
+    }
+    return {
+      checked: disabled2 ? false : areAllChecked || maybeIndeterminate,
+      disabled: disabled2
+    };
+  }, [rows, selectedIdSet]);
+  const handleCheckedChange = (checked2) => {
+    if (typeof onCheckedChange !== "function") {
+      return;
+    }
+    const newSelectedRows = rows.reduce((acc, row, index2) => {
+      const isDisabled = row.isDisabled || row.isDeleted;
+      const shouldBeSelected = checked2 ? !isDisabled || selectedIdSet.has(row.id) : isDisabled && selectedIdSet.has(row.id);
+      if (shouldBeSelected) {
+        acc.push({
+          item: row,
+          index: index2
+        });
+      }
+      return acc;
+    }, []);
+    onCheckedChange(newSelectedRows);
+  };
+  return /* @__PURE__ */ jsx(Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
+};
 const StyledTable = styled.table.withConfig({
   componentId: "sc-1q458rb-19"
 })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);

package/dist/click-ui.umd.js

@@ -10240,15 +10240,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const Checkbox = ({
     id,
     label,
-    variant,
+    variant = "default",
     disabled,
-    orientation,
-    dir,
+    orientation = "horizontal",
+    dir = "end",
+    checked,
     ...delegated
   }) => {
     const defaultId = React.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { $orientation: orientation, $dir: dir, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
       label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
@@ -10256,7 +10257,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     componentId: "sc-1sck1ja-1"
   })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
     theme: theme2,
-    variant = "default"
+    variant
   }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
@@ -10268,7 +10269,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     &:hover {
       background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
-    &[data-state="checked"] {
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
       border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
       background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
@@ -10276,7 +10278,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       background: ${theme2.click.checkbox.color.background.disabled};
       border-color: ${theme2.click.checkbox.color.stroke.disabled};
       cursor: not-allowed;
-      &[data-state="checked"] {
+      &[data-state="checked"],
+      &[data-state="indeterminate"] {
         background: ${theme2.click.checkbox.color.background.disabled};
         border-color: ${theme2.click.checkbox.color.stroke.disabled};
       }
@@ -39633,8 +39636,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     onSelectAll,
     actionsList,
     onSort: onSortProp,
-    hasRows,
-    size: size2
+    size: size2,
+    rows,
+    selectedIds
   }) => {
     const onSort = (header, headerIndex) => () => {
       if (typeof onSortProp === "function" && header.isSortable) {
@@ -39648,7 +39652,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(StyledThead, { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        isSelectable && /* @__PURE__ */ jsxRuntime.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+        isSelectable && /* @__PURE__ */ jsxRuntime.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
         headers.map(({
           width,
           ...headerProps
@@ -39804,7 +39808,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const isDeletable = typeof onDelete === "function";
     const isEditable = typeof onEdit === "function";
     return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
-      isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect }) }),
+      isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectData, { $size: size2, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
       items.map(({
         label,
         ...cellProps
@@ -39856,19 +39860,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }, ref) => {
     const isDeletable = typeof onDelete === "function";
     const isEditable = typeof onEdit === "function";
-    const onSelectAll = (checked) => {
-      if (typeof onSelect === "function") {
-        const ids = checked ? rows.map((row, index2) => ({
-          item: row,
-          index: index2
-        })) : [];
-        onSelect(ids);
-      }
-    };
     const onRowSelect = (id) => (checked) => {
       if (typeof onSelect == "function") {
         const selectedItems = rows.flatMap((row, index2) => {
-          if (id === row.id && checked || selectedIds.includes(id) && id !== row.id) {
+          if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
             return {
               item: row,
               index: index2
@@ -39888,9 +39883,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       actionsList.push("editAction");
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(TableOuterContainer, { children: [
-      hasRows && showHeader && /* @__PURE__ */ jsxRuntime.jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { label: "Select All", checked: selectedIds.length === rows.length, onCheckedChange: onSelectAll }) }),
+      hasRows && showHeader && /* @__PURE__ */ jsxRuntime.jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTable, { ref, ...props, children: [
-        showHeader && /* @__PURE__ */ jsxRuntime.jsx(Thead, { headers, isSelectable, onSelectAll, actionsList, onSort, hasRows, size: size2 }),
+        showHeader && /* @__PURE__ */ jsxRuntime.jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size: size2, rows, selectedIds }),
         /* @__PURE__ */ jsxRuntime.jsxs(Tbody, { children: [
           (loading || !hasRows) && /* @__PURE__ */ jsxRuntime.jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size: size2 }),
           rows.map(({
@@ -39908,6 +39903,56 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] }) })
     ] });
   });
+  const SelectAllCheckbox = ({
+    rows,
+    selectedIds,
+    onCheckedChange,
+    ...checkboxProps
+  }) => {
+    const selectedIdSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
+    const {
+      checked,
+      disabled
+    } = React.useMemo(() => {
+      let areAllChecked = true;
+      let maybeIndeterminate = false;
+      let disabled2 = true;
+      for (const row of rows) {
+        if (row.isDisabled || row.isDeleted) {
+          continue;
+        } else {
+          disabled2 = false;
+        }
+        if (selectedIdSet.has(row.id)) {
+          maybeIndeterminate = "indeterminate";
+        } else {
+          areAllChecked = false;
+        }
+      }
+      return {
+        checked: disabled2 ? false : areAllChecked || maybeIndeterminate,
+        disabled: disabled2
+      };
+    }, [rows, selectedIdSet]);
+    const handleCheckedChange = (checked2) => {
+      if (typeof onCheckedChange !== "function") {
+        return;
+      }
+      const newSelectedRows = rows.reduce((acc, row, index2) => {
+        const isDisabled = row.isDisabled || row.isDeleted;
+        const shouldBeSelected = checked2 ? !isDisabled || selectedIdSet.has(row.id) : isDisabled && selectedIdSet.has(row.id);
+        if (shouldBeSelected) {
+          acc.push({
+            item: row,
+            index: index2
+          });
+        }
+        return acc;
+      }, []);
+      onCheckedChange(newSelectedRows);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
+  };
   const StyledTable = styled.styled.table.withConfig({
     componentId: "sc-1q458rb-19"
   })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);

package/dist/components/Checkbox/Checkbox.d.ts

@@ -7,4 +7,4 @@ export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
     variant?: CheckboxVariants;
     dir?: "start" | "end";
 }
-export declare const Checkbox: ({ id, label, variant, disabled, orientation, dir, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ id, label, variant, disabled, orientation, dir, checked, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -1,5 +1,5 @@
-import { HorizontalDirection } from '..';
 import { HTMLAttributes, ReactNode } from 'react';
+import { HorizontalDirection } from '..';
 
 type SortDir = "asc" | "desc";
 type SortFn = (sortDir: SortDir, header: TableHeaderType, index: number) => void;

package/package.json

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