harsh-aghara
9cee2eebd0
The custom Checkbox used Lucide Square/SquareCheck for unchecked/checked states but had no indeterminateIcon, so MUI fell back to its default 24px Material icon. This caused a visible size mismatch and row height jitter in the bulk-select header of monitor tables. Add SquareMinus from lucide-react at the same size (16px) and strokeWidth (1.5) as the existing icons, and extend the checked color rule to also cover the indeterminate state.
63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import { forwardRef } from "react";
|
|
import Checkbox from "@mui/material/Checkbox";
|
|
import type { CheckboxProps } from "@mui/material/Checkbox";
|
|
import { Square, SquareCheck, SquareMinus } from "lucide-react";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
type CheckboxInputProps = CheckboxProps & {
|
|
label?: string;
|
|
};
|
|
export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
|
|
function CheckboxInput(
|
|
{ sx, ...props }: CheckboxInputProps,
|
|
ref: React.Ref<HTMLInputElement>
|
|
) {
|
|
const theme = useTheme();
|
|
return (
|
|
<Checkbox
|
|
{...props}
|
|
aria-label={props.label}
|
|
slotProps={{
|
|
input: {
|
|
ref: ref,
|
|
},
|
|
}}
|
|
icon={
|
|
<Square
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
/>
|
|
}
|
|
checkedIcon={
|
|
<SquareCheck
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
/>
|
|
}
|
|
indeterminateIcon={
|
|
<SquareMinus
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
/>
|
|
}
|
|
sx={{
|
|
color: theme.palette.text.secondary,
|
|
"&.Mui-checked, &.MuiCheckbox-indeterminate": {
|
|
color: theme.palette.primary.main,
|
|
},
|
|
"&:hover": { backgroundColor: "transparent" },
|
|
"& svg": {
|
|
stroke: "currentColor",
|
|
},
|
|
"& svg path, & svg line, & svg polyline, & svg rect": {
|
|
stroke: "currentColor",
|
|
fill: "none",
|
|
},
|
|
|
|
...sx,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
);
|