"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Checkbox } from "../form/Checkbox.js";
import { TableCell } from "./TableCell.js";
const noop = ()=>{
// do nothing
};
/**
 * **Client Component**
 * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying
 * some minimal styles.
 *
 * @example
 * Simple Example
 * ```tsx
 * import {
 *   Table,
 *   TableBody,
 *   TableCell,
 *   TableCheckbox,
 *   TableContainer,
 *   TableHeader,
 *   TableRow,
 *   useCheckboxGroup
 * } from "@react-md/core";
 * import { type ReactElement } from "react";
 *
 * const rows = [
 *   { name: "Frozen Yogurt", type: "Ice Cream" },
 *   { name: "Ice cream sandwich", type: "Ice Cream" },
 *   { name: "Eclair", type: "Pastry" },
 *   // ...other content
 * ] as const;
 *
 * function Example(): ReactElement {
 *   const { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({
 *     values: rows.map(({ name }) => name),
 *     name: "selected",
 *   });
 *   return (
 *     <TableContainer>
 *       <Table>
 *         <TableHeader>
 *           <TableRow>
 *             <TableCheckbox {...getIndeterminateProps()} />
 *             <TableCell>Name</TableCell>
 *             <TableCell>Type</TableCell>
 *           </TableRow>
 *         </TableHeader>
 *         <TableBody>
 *           {rows.map(({ name, type }) => {
 *             const checkboxProps = getCheckboxProps(name);
 *             const { checked, onChange } = checkboxProps;
 *
 *             return (
 *               <TableRow
 *                 key={name}
 *                 onClick={onChange}
 *                 clickable
 *                 selected={checked}
 *               >
 *                 <TableCheckbox {...checkboxProps} />
 *                 <TableCell>{name}</TableCell>
 *                 <TableCell hAlign="right">{type}</TableCell>
 *               </TableRow>
 *             );
 *           })}
 *         </TableBody>
 *       </Table>
 *     </TableContainer>
 *   );
 * }
 * ```
 *
 * @remarks
 * \@since 6.0.0 The `id` prop is no longer required since the checkbox's id
 * will automatically be generated as `"checkbox" + useId()`. Use the {@link checkboxProps}
 * to set an `id` manually for the checkbox.
 * \@since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.
 * \@since 6,0.0 The default `aria-label` was changed from
 * `"Toggle Row Selection"` to `"Select Row"`.
 */ export const TableCheckbox = /*#__PURE__*/ forwardRef(function TableCheckbox(props, ref) {
    const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, indeterminateIcon, value, checked, onChange, defaultChecked, indeterminate, checkboxProps, onClick = noop, ...remaining } = props;
    return /*#__PURE__*/ _jsx(TableCell, {
        ...remaining,
        ref: ref,
        header: false,
        inputToggle: true,
        onClick: (event)=>{
            event.stopPropagation();
            onClick(event);
        },
        children: /*#__PURE__*/ _jsx(Checkbox, {
            "aria-label": ariaLabel,
            "aria-labelledby": ariaLabelledBy,
            "aria-controls": ariaControls,
            name: name,
            icon: icon,
            iconProps: iconProps,
            iconStyle: iconStyle,
            iconClassName: iconClassName,
            checkedIcon: checkedIcon,
            indeterminateIcon: indeterminateIcon,
            value: value,
            checked: checked,
            defaultChecked: defaultChecked,
            onChange: onChange,
            indeterminate: indeterminate,
            ...checkboxProps
        })
    });
});

//# sourceMappingURL=TableCheckbox.js.map