@clickhouse/click-ui 0.0.220 → 0.0.222

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;}"]);
@@ -52139,3 +52184,4 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.useToast = useToast;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
+//# sourceMappingURL=click-ui.bundled.umd.js.map