@clickhouse/click-ui 0.0.220 → 0.0.222

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;}"]);
@@ -50955,3 +51000,4 @@ export {
   useCUITheme,
   useToast
 };
+//# sourceMappingURL=click-ui.es.js.map