@react-md/core 6.5.1 → 7.0.0

package/src/table/TableBody.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, forwardRef, useMemo } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+  useMemo,
+} from "react";
 
 import {
   TableConfigProvider,
@@ -10,9 +15,9 @@ import {
 import { type TableConfig, type TableConfigContext } from "./types.js";
 
 export interface TableBodyProps
-  extends
-    HTMLAttributes<HTMLTableSectionElement>,
-    Omit<TableConfig, "header"> {}
+  extends HTMLAttributes<HTMLTableSectionElement>, Omit<TableConfig, "header"> {
+  ref?: Ref<HTMLTableSectionElement>;
+}
 
 /**
  * **Client Component**
@@ -22,48 +27,47 @@ export interface TableBodyProps
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  function TableBody(props, ref) {
-    const {
-      className,
-      children,
+export function TableBody(props: TableBodyProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    hAlign: propHAlign,
+    vAlign: propVAlign,
+    lineWrap: propLineWrap,
+    disableHover: propDisableHover,
+    disableBorders: propDisableBorders,
+    ...remaining
+  } = props;
+
+  // update the table configuration with the custom overrides for the `<thead>`
+  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =
+    useTableConfig({
       hAlign: propHAlign,
       vAlign: propVAlign,
       lineWrap: propLineWrap,
       disableHover: propDisableHover,
       disableBorders: propDisableBorders,
-      ...remaining
-    } = props;
-
-    // update the table configuration with the custom overrides for the `<thead>`
-    const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =
-      useTableConfig({
-        hAlign: propHAlign,
-        vAlign: propVAlign,
-        lineWrap: propLineWrap,
-        disableHover: propDisableHover,
-        disableBorders: propDisableBorders,
-      });
+    });
 
-    const configuration = useMemo<TableConfigContext>(
-      () => ({
-        header: false,
-        dense,
-        hAlign,
-        vAlign,
-        lineWrap,
-        disableBorders,
-        disableHover,
-      }),
-      [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]
-    );
+  const configuration = useMemo<TableConfigContext>(
+    () => ({
+      header: false,
+      dense,
+      hAlign,
+      vAlign,
+      lineWrap,
+      disableBorders,
+      disableHover,
+    }),
+    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]
+  );
 
-    return (
-      <TableConfigProvider value={configuration}>
-        <tbody {...remaining} ref={ref} className={cnb("rmd-tbody", className)}>
-          {children}
-        </tbody>
-      </TableConfigProvider>
-    );
-  }
-);
+  return (
+    <TableConfigProvider value={configuration}>
+      <tbody {...remaining} ref={ref} className={cnb("rmd-tbody", className)}>
+        {children}
+      </tbody>
+    </TableConfigProvider>
+  );
+}

package/src/table/TableCell.tsx

@@ -2,10 +2,11 @@
 
 import {
   type ButtonHTMLAttributes,
+  type ReactElement,
   type ReactNode,
+  type Ref,
   type TdHTMLAttributes,
   type ThHTMLAttributes,
-  forwardRef,
 } from "react";
 
 import { getIcon } from "../icon/config.js";
@@ -69,6 +70,8 @@ export interface TableCellOptions extends TableCellConfig {
  * @since 6.0.0 Removed `disablePadding` in favor of `padding`.
  */
 export interface TableCellProps extends TableCellAttributes, TableCellOptions {
+  ref?: Ref<HTMLTableCellElement>;
+
   /**
    * If you want to apply a sort icon for a header cell, set this prop to either
    * `"ascending"` or `"descending"`. When you change the sort order, this prop
@@ -213,88 +216,87 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  function TableCell(props, ref) {
-    const {
-      "aria-sort": sortOrder,
-      className,
-      grow = false,
-      scope: propScope,
-      hAlign: propHAlign,
-      vAlign: propVAlign,
-      header: propHeader,
-      lineWrap: propDisableLineWrap,
-      inputToggle,
-      children,
-      beforeChildren,
-      afterChildren,
-      sticky,
-      sortIcon: propSortIcon,
-      sortIconAfter = false,
-      sortIconRotated,
-      iconRotatorProps,
-      padding = "horizontal",
-      contentProps,
-      ...remaining
-    } = props;
+export function TableCell(props: TableCellProps): ReactElement {
+  const {
+    ref,
+    "aria-sort": sortOrder,
+    className,
+    grow = false,
+    scope: propScope,
+    hAlign: propHAlign,
+    vAlign: propVAlign,
+    header: propHeader,
+    lineWrap: propDisableLineWrap,
+    inputToggle,
+    children,
+    beforeChildren,
+    afterChildren,
+    sticky,
+    sortIcon: propSortIcon,
+    sortIconAfter = false,
+    sortIconRotated,
+    iconRotatorProps,
+    padding = "horizontal",
+    contentProps,
+    ...remaining
+  } = props;
 
-    const sortIcon = getIcon("sort", propSortIcon);
+  const sortIcon = getIcon("sort", propSortIcon);
 
-    // Note: unlike the other usages of `useTableConfig`, the `propHeader`
-    // is not provided. This is so that `TableCheckbox` components can still
-    // be a sticky header without being rendered as a `<th>`. This also makes
-    // it so the scope can be defaulted to `col` or `row` automatically.
-    const {
-      header: inheritedHeader,
-      hAlign,
-      vAlign,
-      lineWrap,
-    } = useTableConfig({
-      hAlign: propHAlign,
-      vAlign: propVAlign,
-      lineWrap: propDisableLineWrap,
-    });
-    const header = propHeader ?? inheritedHeader;
+  // Note: unlike the other usages of `useTableConfig`, the `propHeader`
+  // is not provided. This is so that `TableCheckbox` components can still
+  // be a sticky header without being rendered as a `<th>`. This also makes
+  // it so the scope can be defaulted to `col` or `row` automatically.
+  const {
+    header: inheritedHeader,
+    hAlign,
+    vAlign,
+    lineWrap,
+  } = useTableConfig({
+    hAlign: propHAlign,
+    vAlign: propVAlign,
+    lineWrap: propDisableLineWrap,
+  });
+  const header = propHeader ?? inheritedHeader;
 
-    let scope = propScope;
-    if (!scope && header) {
-      scope = !inheritedHeader && propHeader ? "row" : "col";
-    }
+  let scope = propScope;
+  if (!scope && header) {
+    scope = !inheritedHeader && propHeader ? "row" : "col";
+  }
 
-    const Component = header ? "th" : "td";
-    return (
-      <Component
-        {...remaining}
-        ref={ref}
-        aria-sort={sortOrder === "none" ? undefined : sortOrder}
-        className={tableCell({
-          className,
-          grow,
-          header,
-          sticky,
-          inputToggle,
-          hAlign,
-          vAlign,
-          lineWrap: !sortOrder && lineWrap,
-          padding: sortIcon && sortOrder ? "none" : padding,
-          isInTableHeader: inheritedHeader,
-        })}
-        scope={scope}
+  const Component = header ? "th" : "td";
+  return (
+    <Component
+      {...remaining}
+      ref={ref}
+      aria-sort={sortOrder === "none" ? undefined : sortOrder}
+      className={tableCell({
+        className,
+        grow,
+        header,
+        sticky,
+        inputToggle,
+        hAlign,
+        vAlign,
+        lineWrap: !sortOrder && lineWrap,
+        padding: sortIcon && sortOrder ? "none" : padding,
+        isInTableHeader: inheritedHeader,
+      })}
+      scope={scope}
+    >
+      {beforeChildren}
+      <TableCellContent
+        {...contentProps}
+        icon={sortIcon}
+        iconAfter={sortIconAfter}
+        iconRotatorProps={iconRotatorProps}
+        sortOrder={sortOrder}
+        hAlign={hAlign}
+        rotated={sortIconRotated}
       >
-        {beforeChildren}
-        <TableCellContent
-          {...contentProps}
-          icon={sortIcon}
-          iconAfter={sortIconAfter}
-          iconRotatorProps={iconRotatorProps}
-          sortOrder={sortOrder}
-          hAlign={hAlign}
-          rotated={sortIconRotated}
-        >
-          {children}
-        </TableCellContent>
-        {afterChildren}
-      </Component>
-    );
-  }
-);
+        {children}
+      </TableCellContent>
+      {afterChildren}
+    </Component>
+  );
+}

package/src/table/TableCellContent.tsx

@@ -1,5 +1,10 @@
 import { cnb } from "cnbuilder";
-import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
 import { IconRotator, type IconRotatorProps } from "../icon/IconRotator.js";
@@ -20,6 +25,8 @@ export type TableCellContentsIconRotatorProps = Omit<
  * @internal
  */
 export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  ref?: Ref<HTMLButtonElement>;
+
   /**
    * The current sort order for this cell. Setting this to `null` will prevent
    * the button from being rendered.
@@ -61,11 +68,9 @@ const styles = bem("rmd-table-cell");
  *
  * @internal
  */
-export const TableCellContent = forwardRef<
-  HTMLButtonElement,
-  TableCellContentProps
->(function TableCellContent(props, ref) {
+export function TableCellContent(props: TableCellContentProps): ReactElement {
   const {
+    ref,
     icon: propIcon,
     style,
     className,
@@ -109,4 +114,4 @@ export const TableCellContent = forwardRef<
       {iconAfter && icon}
     </ButtonUnstyled>
   );
-});
+}

package/src/table/TableCheckbox.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type TdHTMLAttributes, forwardRef } from "react";
+import { type ReactElement, type Ref, type TdHTMLAttributes } from "react";
 
 import { Checkbox } from "../form/Checkbox.js";
 import { type CheckboxProps } from "../form/InputToggle.js";
@@ -49,6 +49,8 @@ export type TableCheckboxSupportedCheckboxProps = Pick<
  */
 export interface TableCheckboxProps
   extends TableCheckboxTdHTMLAttributes, TableCheckboxSupportedCheckboxProps {
+  ref?: Ref<HTMLTableCellElement>;
+
   /**
    * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
    */
@@ -147,11 +149,9 @@ export interface TableCheckboxProps
  * @since 6.0.0 The default `aria-label` was changed from
  * `"Toggle Row Selection"` to `"Select Row"`.
  */
-export const TableCheckbox = forwardRef<
-  HTMLTableCellElement,
-  TableCheckboxProps
->(function TableCheckbox(props, ref) {
+export function TableCheckbox(props: TableCheckboxProps): ReactElement {
   const {
+    ref,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined,
     "aria-controls": ariaControls,
@@ -203,4 +203,4 @@ export const TableCheckbox = forwardRef<
       />
     </TableCell>
   );
-});
+}

package/src/table/TableContainer.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef, useMemo } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type Ref,
+  useMemo,
+} from "react";
 
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import {
@@ -9,7 +14,9 @@ import {
 } from "./TableContainerProvider.js";
 import { tableContainer } from "./tableContainerStyles.js";
 
-export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
+export interface TableContainerProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
+}
 
 /**
  * **Client Component**
@@ -21,29 +28,27 @@ export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(
-  function TableContainer(props, ref) {
-    const { className, children, ...remaining } = props;
-    const [nodeRef, refCallback] = useEnsuredRef(ref);
+export function TableContainer(props: TableContainerProps): ReactElement {
+  const { ref, className, children, ...remaining } = props;
+  const [nodeRef, refCallback] = useEnsuredRef(ref);
 
-    const value = useMemo<TableContainerContext>(
-      () => ({
-        exists: true,
-        containerRef: nodeRef,
-      }),
-      [nodeRef]
-    );
+  const value = useMemo<TableContainerContext>(
+    () => ({
+      exists: true,
+      containerRef: nodeRef,
+    }),
+    [nodeRef]
+  );
 
-    return (
-      <TableContainerProvider value={value}>
-        <div
-          {...remaining}
-          ref={refCallback}
-          className={tableContainer({ className })}
-        >
-          {children}
-        </div>
-      </TableContainerProvider>
-    );
-  }
-);
+  return (
+    <TableContainerProvider value={value}>
+      <div
+        {...remaining}
+        ref={refCallback}
+        className={tableContainer({ className })}
+      >
+        {children}
+      </div>
+    </TableContainerProvider>
+  );
+}

package/src/table/TableContainerProvider.ts

@@ -8,7 +8,7 @@ import { type RefObject, createContext, useContext } from "react";
  */
 export interface TableContainerContext {
   exists: boolean;
-  containerRef: RefObject<HTMLDivElement>;
+  containerRef: RefObject<HTMLDivElement | null>;
 }
 
 const context = createContext<Readonly<TableContainerContext>>({

package/src/table/TableFooter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableFooter } from "./tableFooterStyles.js";
@@ -9,6 +9,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
 
 export interface TableFooterProps
   extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
+  ref?: Ref<HTMLTableSectionElement>;
+
   /**
    * NOTE: It is recommended to use the `StickyTableSection` component instead
    * of enabling this prop since it supports dynamically adding styles while the
@@ -31,11 +33,8 @@ export interface TableFooterProps
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const TableFooter = forwardRef<
-  HTMLTableSectionElement,
-  TableFooterProps
->(function TableFooter(props, propRef) {
-  const { className, hoverable, lineWrap, children, ...remaining } = props;
+export function TableFooter(props: TableFooterProps): ReactElement {
+  const { ref, className, hoverable, lineWrap, children, ...remaining } = props;
 
   const config = useTableSectionConfig({
     type: "footer",
@@ -45,13 +44,9 @@ export const TableFooter = forwardRef<
 
   return (
     <TableConfigProvider value={config}>
-      <tfoot
-        {...remaining}
-        ref={propRef}
-        className={tableFooter({ className })}
-      >
+      <tfoot {...remaining} ref={ref} className={tableFooter({ className })}>
         {children}
       </tfoot>
     </TableConfigProvider>
   );
-});
+}

package/src/table/TableHeader.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableHeader } from "./tableHeaderStyles.js";
@@ -9,6 +9,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
 
 export interface TableHeaderProps
   extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
+  ref?: Ref<HTMLTableSectionElement>;
+
   /**
    * NOTE: It is recommended to use the `StickyTableSection` component instead
    * of enabling this prop since it supports dynamically adding styles while the
@@ -33,12 +35,16 @@ export interface TableHeaderProps
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  TableHeaderProps
->(function TableHeader(props, propRef) {
-  const { className, sticky, lineWrap, hoverable, children, ...remaining } =
-    props;
+export function TableHeader(props: TableHeaderProps): ReactElement {
+  const {
+    ref,
+    className,
+    sticky,
+    lineWrap,
+    hoverable,
+    children,
+    ...remaining
+  } = props;
 
   const config = useTableSectionConfig({
     type: "header",
@@ -51,7 +57,7 @@ export const TableHeader = forwardRef<
     <TableConfigProvider value={config}>
       <thead
         {...remaining}
-        ref={propRef}
+        ref={ref}
         className={tableHeader({
           className,
           dense,
@@ -62,4 +68,4 @@ export const TableHeader = forwardRef<
       </thead>
     </TableConfigProvider>
   );
-});
+}