@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/table/TableHeader.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   useCallback,
@@ -9,7 +8,6 @@ import {
 } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import {
   TableConfigProvider,
   useTableConfig,
@@ -17,31 +15,23 @@ import {
   type TableConfigContext,
 } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-import { type TableStickySectionProps } from "./types.js";
-
-const styles = bem("rmd-thead");
-
-/** @remarks \@since 6.0.0 */
-export interface TableHeaderClassNameOptions {
-  className?: string;
-  dense?: boolean;
-  sticky?: boolean;
-  stickyActive?: boolean;
-}
-
-/** @remarks \@since 6.0.0 */
-export function tableHeader(options: TableHeaderClassNameOptions = {}): string {
-  const { dense, sticky, stickyActive, className } = options;
+import { tableHeader } from "./tableHeaderStyles.js";
+import {
+  type IsStickyTableSectionActive,
+  type TableStickySectionProps,
+} from "./types.js";
 
-  return cnb(
-    styles({
-      dense,
-      sticky,
-      "sticky-active": stickyActive,
-    }),
-    className
+/**
+ * @remarks \@since 6.0.0
+ */
+export const isTableHeaderStickyActive: IsStickyTableSectionActive = (
+  entry
+) => {
+  return (
+    entry.intersectionRatio < 1 &&
+    entry.boundingClientRect.bottom <= window.innerHeight
   );
-}
+};
 
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
@@ -58,19 +48,10 @@ export interface TableHeaderProps
    * @defaultValue `false`
    */
   hoverable?: boolean;
-}
 
-/**
- * @remarks \@since 6.0.0
- */
-export const isTableHeaderStickyActive = (
-  entry: IntersectionObserverEntry
-): boolean => {
-  return (
-    entry.intersectionRatio < 1 &&
-    entry.boundingClientRect.bottom <= window.innerHeight
-  );
-};
+  /** @defaultValue {@link isTableHeaderStickyActive} */
+  isStickyActive?: IsStickyTableSectionActive;
+}
 
 /**
  * **Client Component**
@@ -96,6 +77,7 @@ export const TableHeader = forwardRef<
     stickyOptions,
     isStickyActive = isTableHeaderStickyActive,
     disableStickyStyles = false,
+    stickyActiveClassName,
     ...remaining
   } = props;
 
@@ -145,9 +127,9 @@ export const TableHeader = forwardRef<
     }, [exists, theadRef]),
     onUpdate: useCallback(
       ([entry]) => {
-        setStickyActive(isStickyActive(entry));
+        setStickyActive(isStickyActive(entry, exists));
       },
-      [isStickyActive]
+      [exists, isStickyActive]
     ),
     // allow the user defined sticky options to override the default behavior
     ...stickyOptions,
@@ -159,10 +141,11 @@ export const TableHeader = forwardRef<
         {...remaining}
         ref={exists ? theadRefCallback : targetRef}
         className={tableHeader({
+          className,
           dense,
           sticky,
           stickyActive,
-          className,
+          stickyActiveClassName,
         })}
       >
         {children}

package/src/table/TableRadio.tsx

@@ -0,0 +1,195 @@
+import { forwardRef, type TdHTMLAttributes } from "react";
+import { type RadioProps } from "../form/InputToggle.js";
+import { Radio } from "../form/Radio.js";
+import { type PropsWithRef } from "../types.js";
+import { TableCell } from "./TableCell.js";
+
+const noop = (): void => {
+  // do nothing
+};
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableRadioTdHTMLAttributes = Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  "aria-sort" | "scope" | "onChange" | "onInvalid"
+>;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableRadioSupportedRadioProps = Pick<
+  RadioProps,
+  | "name"
+  | "value"
+  | "icon"
+  | "iconStyle"
+  | "iconClassName"
+  | "iconProps"
+  | "checkedIcon"
+  | "checked"
+  | "onChange"
+  | "defaultChecked"
+  | "error"
+  | "required"
+  | "onInvalid"
+>;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TableRadioProps
+  extends TableRadioTdHTMLAttributes,
+    TableRadioSupportedRadioProps {
+  /**
+   * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
+   */
+  "aria-label"?: string;
+
+  /** @defaultValue `false` */
+  sticky?: boolean;
+
+  /**
+   * This allows you to override any props for the checkbox that are not
+   * configurable as top-level props.
+   *
+   * @example
+   * Simple Example
+   * ```tsx
+   * checkboxProps={{
+   *   id: "some-custom-id",
+   *   ref: checkboxRef,
+   * }}
+   * ```
+   *
+   * @see {@link TableRadioSupportedRadioProps}
+   * @remarks \@since 6.0.0
+   */
+  radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;
+}
+
+/**
+ * **Server Component**
+ * This might actually be a client component.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCell,
+ *   TableRadio,
+ *   TableContainer,
+ *   TableHeader,
+ *   TableRow,
+ *   useRadioGroup,
+ * } 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 { getRadioProps } = useRadioGroup({
+ *     name: "selected",
+ *   });
+ *   return (
+ *     <TableContainer>
+ *       <Table>
+ *         <TableHeader>
+ *           <TableRow>
+ *             <TableCell header={false} />
+ *             <TableCell>Name</TableCell>
+ *             <TableCell>Type</TableCell>
+ *           </TableRow>
+ *         </TableHeader>
+ *         <TableBody>
+ *           {rows.map(({ name, type }) => {
+ *             const radioProps = getRadioProps(name);
+ *             const { checked, onChange } = radioProps;
+ *
+ *             return (
+ *               <TableRow
+ *                 key={name}
+ *                 onClick={onChange}
+ *                 clickable
+ *                 selected={checked}
+ *               >
+ *                 <TableRadio {...radioProps} />
+ *                 <TableCell>{name}</TableCell>
+ *                 <TableCell hAlign="right">{type}</TableCell>
+ *               </TableRow>
+ *             );
+ *           })}
+ *         </TableBody>
+ *       </Table>
+ *     </TableContainer>
+ *   );
+ * }
+ * ```
+ * @remarks \@since 6.0.0
+ */
+export const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(
+  function TableRadio(props, ref) {
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined,
+      "aria-controls": ariaControls,
+      name,
+      icon,
+      iconProps,
+      iconStyle,
+      iconClassName,
+      checkedIcon,
+      value,
+      checked,
+      onChange,
+      defaultChecked,
+      radioProps,
+      onClick = noop,
+      error,
+      required,
+      onInvalid,
+      ...remaining
+    } = props;
+
+    return (
+      <TableCell
+        {...remaining}
+        ref={ref}
+        header={false}
+        inputToggle
+        onClick={(event) => {
+          event.stopPropagation();
+          onClick(event);
+        }}
+      >
+        <Radio
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-controls={ariaControls}
+          name={name}
+          icon={icon}
+          iconProps={iconProps}
+          iconStyle={iconStyle}
+          iconClassName={iconClassName}
+          checkedIcon={checkedIcon}
+          value={value}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          error={error}
+          required={required}
+          onChange={onChange}
+          onInvalid={onInvalid}
+          {...radioProps}
+        />
+      </TableCell>
+    );
+  }
+);

package/src/table/TableRow.tsx

@@ -1,37 +1,10 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
 import {
   useTableConfig,
   type TableRowConfiguration,
 } from "./TableConfigurationProvider.js";
-
-const styles = bem("rmd-tr");
-
-/** @remarks \@since 6.0.0 */
-export interface TableRowClassNameOptions {
-  className?: string;
-  disableHover?: boolean;
-  disableBorders?: boolean;
-  selected?: boolean;
-  clickable?: boolean;
-}
-
-/** @remarks \@since 6.0.0 */
-export function tableRow(options: TableRowClassNameOptions = {}): string {
-  const { disableHover, disableBorders, selected, clickable, className } =
-    options;
-  return cnb(
-    styles({
-      bordered: !disableBorders,
-      hoverable: !disableHover,
-      clickable,
-      selected,
-    }),
-    className
-  );
-}
+import { tableRow } from "./tableRowStyles.js";
 
 export interface TableRowProps
   extends HTMLAttributes<HTMLTableRowElement>,

package/src/table/__tests__/Table.tsx

@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { act, render } from "../../test-utils/index.js";
+import { act, render, screen } from "../../test-utils/index.js";
 
 import { type PropsWithRef } from "../../types.js";
-import { Table, table, type TableProps } from "../Table.js";
+import { Table, type TableProps } from "../Table.js";
 import { TableBody } from "../TableBody.js";
 import { TableCell } from "../TableCell.js";
 import { TableContainer } from "../TableContainer.js";
@@ -51,8 +51,8 @@ describe("Table", () => {
       ),
     };
 
-    const { getByRole, rerender } = render(<Table {...props} />);
-    const table = getByRole("table");
+    const { rerender } = render(<Table {...props} />);
+    const table = screen.getByRole("table");
     expect(ref.current).toBeInstanceOf(HTMLTableElement);
     expect(ref.current).toBe(table);
     expect(table).toMatchSnapshot();
@@ -73,12 +73,6 @@ describe("Table", () => {
     expect(table).toMatchSnapshot();
   });
 
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(table()).toMatchSnapshot();
-    });
-  });
-
   // NOTE: This might be one I should only test with cypress/playwright because
   // of the `getRootMargin` behavior for both of these
   describe("sticky table behavior", () => {

package/src/table/__tests__/TableBody.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Table } from "../Table.js";
 import { TableBody } from "../TableBody.js";
@@ -20,13 +20,13 @@ describe("TableBody", () => {
       ),
     } as const;
 
-    const { getByTestId, rerender } = render(
+    const { rerender } = render(
       <Table>
         <TableBody {...props} />
       </Table>
     );
 
-    const body = getByTestId("body");
+    const body = screen.getByTestId("body");
     expect(body).toMatchSnapshot();
 
     rerender(

package/src/table/__tests__/TableCheckbox.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef, type FC, type ReactElement, type ReactNode } from "react";
-import { render, userEvent } from "../../test-utils/index.js";
+import { render, screen, userEvent } from "../../test-utils/index.js";
 
 import { useCheckboxGroup } from "../../form/useCheckboxGroup.js";
 import { Table } from "../Table.js";
@@ -19,11 +19,11 @@ const Wrapper: FC<{ children: ReactNode }> = ({ children }) => (
 describe("TableCheckbox", () => {
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<HTMLTableCellElement>();
-    const { getByRole, rerender } = render(<TableCheckbox ref={ref} />, {
+    const { rerender } = render(<TableCheckbox ref={ref} />, {
       wrapper: Wrapper,
     });
 
-    const cell = getByRole("cell", { name: "Select Row" });
+    const cell = screen.getByRole("cell", { name: "Select Row" });
     expect(ref.current).toBeInstanceOf(HTMLTableCellElement);
     expect(ref.current).toBe(cell);
     expect(cell).toMatchSnapshot();
@@ -58,10 +58,10 @@ describe("TableCheckbox", () => {
       );
     }
 
-    const { getByRole } = render(<Test />);
+    render(<Test />);
 
-    const row = getByRole("row");
-    const checkbox = getByRole("checkbox");
+    const row = screen.getByRole("row");
+    const checkbox = screen.getByRole("checkbox");
     expect(checkbox).not.toBeChecked();
     expect(row).not.toHaveClass("rmd-tr--selected");
 
@@ -75,12 +75,11 @@ describe("TableCheckbox", () => {
   });
 
   it("should handle the aria-label/aria-labelledby props correctly", () => {
-    const { getByRole, rerender } = render(
-      <TableCheckbox aria-label="Custom Label" />,
-      { wrapper: Wrapper }
-    );
+    const { rerender } = render(<TableCheckbox aria-label="Custom Label" />, {
+      wrapper: Wrapper,
+    });
 
-    const cell = getByRole("cell", { name: "Custom Label" });
+    const cell = screen.getByRole("cell", { name: "Custom Label" });
     expect(cell).toMatchSnapshot();
 
     rerender(<TableCheckbox aria-labelledby="another-id" />);

package/src/table/__tests__/TableContainer.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { TableContainer } from "../TableContainer.js";
 
@@ -12,9 +12,9 @@ describe("TableContainer", () => {
       ref,
     } as const;
 
-    const { getByTestId, rerender } = render(<TableContainer {...props} />);
+    const { rerender } = render(<TableContainer {...props} />);
 
-    const container = getByTestId("container");
+    const container = screen.getByTestId("container");
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
     expect(ref.current).toBe(container);
     expect(container).toMatchSnapshot();

package/src/table/__tests__/TableRadio.tsx

@@ -0,0 +1,112 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef, type FC, type ReactElement, type ReactNode } from "react";
+import { useRadioGroup } from "../../form/useRadioGroup.js";
+import { render, screen, userEvent, within } from "../../test-utils/index.js";
+import { Table } from "../Table.js";
+import { TableBody } from "../TableBody.js";
+import { TableRadio } from "../TableRadio.js";
+import { TableRow } from "../TableRow.js";
+
+const Wrapper: FC<{ children: ReactNode }> = ({ children }) => (
+  <Table>
+    <TableBody>
+      <TableRow>{children}</TableRow>
+    </TableBody>
+  </Table>
+);
+
+describe("TableRadio", () => {
+  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
+    const ref = createRef<HTMLTableCellElement>();
+    const { rerender } = render(<TableRadio ref={ref} />, {
+      wrapper: Wrapper,
+    });
+
+    const cell = screen.getByRole("cell", { name: "Select Row" });
+    expect(ref.current).toBeInstanceOf(HTMLTableCellElement);
+    expect(ref.current).toBe(cell);
+    expect(cell).toMatchSnapshot();
+
+    rerender(
+      <TableRadio
+        ref={ref}
+        style={{ pointerEvents: "none" }}
+        className="custom-class-name"
+      />
+    );
+    expect(cell).toMatchSnapshot();
+  });
+
+  it("should work within a clickable TableRow", async () => {
+    function Test(): ReactElement {
+      const { getRadioProps, setValue } = useRadioGroup({
+        name: "selected",
+      });
+
+      const radioProps1 = getRadioProps("row1");
+      const radioProps2 = getRadioProps("row2");
+
+      return (
+        <Table>
+          <TableBody>
+            <TableRow
+              clickable
+              selected={radioProps1.checked}
+              onClick={() => {
+                // only because of mismatched events
+                setValue("row1");
+              }}
+            >
+              <TableRadio {...radioProps1} />
+            </TableRow>
+            <TableRow
+              clickable
+              selected={radioProps2.checked}
+              onClick={() => {
+                // only because of mismatched events
+                setValue("row2");
+              }}
+            >
+              <TableRadio {...radioProps2} />
+            </TableRow>
+          </TableBody>
+        </Table>
+      );
+    }
+
+    render(<Test />);
+
+    const [row1, row2] = screen.getAllByRole("row");
+    const radio1 = within(row1).getByRole("radio");
+    const radio2 = within(row2).getByRole("radio");
+    expect(radio1).not.toBeChecked();
+    expect(row1).not.toHaveClass("rmd-tr--selected");
+    expect(radio2).not.toBeChecked();
+    expect(row2).not.toHaveClass("rmd-tr--selected");
+
+    await userEvent.click(radio1);
+    expect(radio1).toBeChecked();
+    expect(row1).toHaveClass("rmd-tr--selected");
+    expect(radio2).not.toBeChecked();
+    expect(row2).not.toHaveClass("rmd-tr--selected");
+
+    await userEvent.click(row2);
+    expect(radio1).not.toBeChecked();
+    expect(row1).not.toHaveClass("rmd-tr--selected");
+    expect(radio2).toBeChecked();
+    expect(row2).toHaveClass("rmd-tr--selected");
+  });
+
+  it("should handle the aria-label/aria-labelledby props correctly", () => {
+    const { rerender } = render(<TableRadio aria-label="Custom Label" />, {
+      wrapper: Wrapper,
+    });
+
+    const cell = screen.getByRole("cell", { name: "Custom Label" });
+    expect(cell).toMatchSnapshot();
+
+    rerender(<TableRadio aria-labelledby="another-id" />);
+    expect(cell).not.toHaveAttribute("aria-label");
+    expect(cell).toMatchSnapshot();
+  });
+});

package/src/table/__tests__/TableRow.tsx

@@ -1,11 +1,11 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { Table } from "../Table.js";
 import { TableBody } from "../TableBody.js";
 import { TableCell } from "../TableCell.js";
-import { tableRow, TableRow } from "../TableRow.js";
+import { TableRow } from "../TableRow.js";
 
 describe("TableRow", () => {
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
@@ -16,7 +16,7 @@ describe("TableRow", () => {
       children: <TableCell>Content</TableCell>,
     } as const;
 
-    const { getByTestId, rerender } = render(
+    const { rerender } = render(
       <Table>
         <TableBody>
           <TableRow {...props} />
@@ -24,7 +24,7 @@ describe("TableRow", () => {
       </Table>
     );
 
-    const row = getByTestId("row");
+    const row = screen.getByTestId("row");
     expect(ref.current).toBeInstanceOf(HTMLTableRowElement);
     expect(ref.current).toBe(row);
     expect(row).toMatchSnapshot();
@@ -60,10 +60,4 @@ describe("TableRow", () => {
     );
     expect(row).toMatchSnapshot();
   });
-
-  describe("styling utility class", () => {
-    it("should be callable without any arguments", () => {
-      expect(tableRow()).toMatchSnapshot();
-    });
-  });
 });