@sproutsocial/seeds-react-table 1.0.50 → 1.0.51

package/src/v2/TableV2Hybrid.tsx

@@ -0,0 +1,277 @@
+/**
+ * Hybrid v2 Table components.
+ *
+ * Each exported sub-component renders the fast pure-CSS-class (Tailwind) path by
+ * default and transparently falls back to the styled-components path via the
+ * documented `needsStyledComponents` single gate — i.e. when a consumer passes
+ * styled-system props (px, color, width, …) or extends the component with
+ * `styled()` (detected through an injected `theme` prop or the generated
+ * `sc-XXXX` className). This mirrors the established Button/Badge hybrid pattern
+ * and preserves 100% backward compatibility with the existing styled-components
+ * API.
+ */
+
+import React, { useId } from "react";
+import { type TableV2Props } from "./TableV2Types";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import {
+  StyledTableV2Container,
+  StyledTableV2,
+  StyledCaption,
+  StyledTableHeader,
+  StyledTableBody,
+  StyledTableRow,
+  StyledTableHeaderCell,
+  StyledTableCell,
+} from "./styles";
+import {
+  TableV2ContainerTailwind,
+  TableRootTailwind,
+  CaptionTailwind,
+  TableHeaderTailwind,
+  TableBodyTailwind,
+  TableRowTailwind,
+  TableHeaderCellTailwind,
+  TableCellTailwind,
+} from "./TableV2Tailwind";
+
+type HybridProps = {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+};
+
+const TableContainerContext = React.createContext<string | null>(null);
+
+export const useTableContainerId = () =>
+  React.useContext(TableContainerContext);
+
+export const TableWrapper = React.forwardRef<
+  HTMLDivElement,
+  { children: React.ReactElement } & HybridProps
+>(({ children, className, ...rest }, ref) => {
+  const containerId = useId();
+
+  // Region semantics stay identical on both paths.
+  const containerProps = {
+    role: "region",
+    tabIndex: 0,
+    id: containerId,
+    "aria-labelledby": containerId,
+  };
+
+  return (
+    <TableContainerContext.Provider value={containerId}>
+      {needsStyledComponents({ ...rest, className }) ? (
+        <StyledTableV2Container
+          className={className}
+          ref={ref}
+          {...containerProps}
+          {...rest}
+        >
+          {children}
+        </StyledTableV2Container>
+      ) : (
+        <TableV2ContainerTailwind
+          className={className}
+          ref={ref}
+          {...containerProps}
+          {...rest}
+        >
+          {children}
+        </TableV2ContainerTailwind>
+      )}
+    </TableContainerContext.Provider>
+  );
+});
+
+TableWrapper.displayName = "TableV2.TableWrapper";
+
+export const TableRoot = React.forwardRef<HTMLTableElement, HybridProps>(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return (
+        <StyledTableV2 className={className} ref={ref} {...rest}>
+          {children}
+        </StyledTableV2>
+      );
+    }
+    return (
+      <TableRootTailwind className={className} ref={ref} {...rest}>
+        {children}
+      </TableRootTailwind>
+    );
+  }
+);
+
+TableRoot.displayName = "TableV2.Table";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  HybridProps & { isVisible?: boolean }
+>(({ className, children, isVisible = true, ...rest }, ref) => {
+  if (needsStyledComponents({ ...rest, className })) {
+    return (
+      <StyledCaption
+        className={className}
+        isVisible={isVisible}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </StyledCaption>
+    );
+  }
+  return (
+    <CaptionTailwind
+      className={className}
+      isVisible={isVisible}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </CaptionTailwind>
+  );
+});
+
+TableCaption.displayName = "TableV2.Caption";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  HybridProps
+>(({ className, children, ...rest }, ref) => {
+  if (needsStyledComponents({ ...rest, className })) {
+    return (
+      <StyledTableHeader className={className} ref={ref} {...rest}>
+        {children}
+      </StyledTableHeader>
+    );
+  }
+  return (
+    <TableHeaderTailwind className={className} ref={ref} {...rest}>
+      {children}
+    </TableHeaderTailwind>
+  );
+});
+
+TableHeader.displayName = "TableV2.TableHeader";
+
+export const TableBody = React.forwardRef<HTMLTableSectionElement, HybridProps>(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return (
+        <StyledTableBody className={className} ref={ref} {...rest}>
+          {children}
+        </StyledTableBody>
+      );
+    }
+    return (
+      <TableBodyTailwind className={className} ref={ref} {...rest}>
+        {children}
+      </TableBodyTailwind>
+    );
+  }
+);
+
+TableBody.displayName = "TableV2.TableBody";
+
+export const TableRow = React.forwardRef<HTMLTableRowElement, HybridProps>(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return (
+        <StyledTableRow className={className} ref={ref} {...rest}>
+          {children}
+        </StyledTableRow>
+      );
+    }
+    return (
+      <TableRowTailwind className={className} ref={ref} {...rest}>
+        {children}
+      </TableRowTailwind>
+    );
+  }
+);
+
+TableRow.displayName = "TableV2.TableRow";
+
+export const TableHeaderCell = React.forwardRef<
+  HTMLTableCellElement,
+  HybridProps
+>(({ className, children, ...rest }, ref) => {
+  if (needsStyledComponents({ ...rest, className })) {
+    return (
+      <StyledTableHeaderCell className={className} ref={ref} {...rest}>
+        {children}
+      </StyledTableHeaderCell>
+    );
+  }
+  return (
+    <TableHeaderCellTailwind className={className} ref={ref} {...rest}>
+      {children}
+    </TableHeaderCellTailwind>
+  );
+});
+
+TableHeaderCell.displayName = "TableV2.TableHeaderCell";
+
+export const TableCell = React.forwardRef<HTMLTableCellElement, HybridProps>(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return (
+        <StyledTableCell className={className} ref={ref} {...rest}>
+          {children}
+        </StyledTableCell>
+      );
+    }
+    return (
+      <TableCellTailwind className={className} ref={ref} {...rest}>
+        {children}
+      </TableCellTailwind>
+    );
+  }
+);
+
+TableCell.displayName = "TableV2.TableCell";
+
+const TableV2 = ({
+  caption,
+  displayCaption = true,
+  columns,
+  data,
+}: TableV2Props) => {
+  const containerId = useTableContainerId();
+
+  return (
+    <TableWrapper>
+      <TableRoot>
+        <TableCaption id={containerId ?? undefined} isVisible={displayCaption}>
+          {caption}
+        </TableCaption>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableHeaderCell key={index} scope="col">
+                {column}
+              </TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((row, rowIndex) => (
+            <TableRow key={rowIndex}>
+              {row.map((cell, cellIndex) => (
+                <TableCell key={cellIndex}>{cell}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableRoot>
+    </TableWrapper>
+  );
+};
+
+// Export the full Table component as Table (main export)
+export const Table = TableV2;
+
+// Default export
+export default TableV2;

package/src/v2/TableV2Tailwind.tsx

@@ -0,0 +1,177 @@
+/**
+ * Tailwind CSS implementation of the v2 Table sub-components.
+ * Uses Seeds table CSS classes from table-v2.css.
+ *
+ * These are the pure semantic-HTML + CSS-class leaves the hybrid wrappers render
+ * on the fast path. They forward `className` and `ref` so `styled(Component)`
+ * extensions keep working, and pass standard HTML attributes (scope, id, role,
+ * tabIndex, …) straight through to the DOM. Every leaf honors the polymorphic
+ * `as` prop (rendering a dynamic element instead of a hard-coded tag) so
+ * `<TableCell as="th" scope="row">` produces a real `<th scope="row">` with the
+ * `rowheader` role and `<TableRow as="div">` renders a `<div>`, matching the
+ * styled-components path. Because `as` is destructured out, it never leaks onto
+ * the DOM node; a component-valued `as` (e.g. `styled(TableRow)`) re-enters the
+ * hybrid, which then detects the styled signal and routes to styled-components.
+ */
+
+import React from "react";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+type TailwindProps = {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+};
+
+export const TableV2ContainerTailwind = React.forwardRef<
+  HTMLDivElement,
+  TailwindProps
+>(({ className, children, as: Component = "div", ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cn("seeds-table-v2-container", className)}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
+
+TableV2ContainerTailwind.displayName = "TableV2.ContainerTailwind";
+
+export const TableRootTailwind = React.forwardRef<
+  HTMLTableElement,
+  TailwindProps
+>(({ className, children, as: Component = "table", ...rest }, ref) => (
+  <Component ref={ref} className={cn("seeds-table-v2", className)} {...rest}>
+    {children}
+  </Component>
+));
+
+TableRootTailwind.displayName = "TableV2.TableTailwind";
+
+export const CaptionTailwind = React.forwardRef<
+  HTMLTableCaptionElement,
+  TailwindProps & { isVisible?: boolean }
+>(
+  (
+    {
+      className,
+      children,
+      isVisible = true,
+      as: Component = "caption",
+      ...rest
+    },
+    ref
+  ) => (
+    <Component
+      ref={ref}
+      className={cn(
+        "seeds-table-v2-caption",
+        { "seeds-table-v2-caption-hidden": !isVisible },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+CaptionTailwind.displayName = "TableV2.CaptionTailwind";
+
+export const TableHeaderTailwind = React.forwardRef<
+  HTMLTableSectionElement,
+  TailwindProps
+>(({ className, children, as: Component = "thead", ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cn("seeds-table-v2-header", className)}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
+
+TableHeaderTailwind.displayName = "TableV2.TableHeaderTailwind";
+
+export const TableBodyTailwind = React.forwardRef<
+  HTMLTableSectionElement,
+  TailwindProps
+>(({ className, children, as: Component = "tbody", ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cn("seeds-table-v2-body", className)}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
+
+TableBodyTailwind.displayName = "TableV2.TableBodyTailwind";
+
+export const TableRowTailwind = React.forwardRef<
+  HTMLTableRowElement,
+  TailwindProps
+>(({ className, children, as: Component = "tr", ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cn("seeds-table-v2-row", className)}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
+
+TableRowTailwind.displayName = "TableV2.TableRowTailwind";
+
+export const TableHeaderCellTailwind = React.forwardRef<
+  HTMLTableCellElement,
+  TailwindProps
+>(({ className, children, as: Component = "th", ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cn("seeds-table-v2-header-cell", className)}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
+
+TableHeaderCellTailwind.displayName = "TableV2.TableHeaderCellTailwind";
+
+export const TableCellTailwind = React.forwardRef<
+  HTMLTableCellElement,
+  TailwindProps
+>(({ className, children, as: Component = "td", ...rest }, ref) => (
+  <Component
+    ref={ref}
+    className={cn("seeds-table-v2-cell", className)}
+    {...rest}
+  >
+    {children}
+  </Component>
+));
+
+TableCellTailwind.displayName = "TableV2.TableCellTailwind";

package/src/v2/__tests__/table-v2.test.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import styled from "styled-components";
 import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { theme } from "@sproutsocial/seeds-react-theme";
 import TableV2, {
   TableWrapper,
   Table,
@@ -371,4 +373,235 @@ describe("TableV2", () => {
       expect(rows).toHaveLength(101);
     });
   });
+
+  describe("Hybrid routing", () => {
+    it("renders the Tailwind (CSS-class) path by default", () => {
+      render(
+        <TableV2 caption="Default" columns={mockColumns} data={mockData} />
+      );
+
+      expect(screen.getByRole("table")).toHaveClass("seeds-table-v2");
+      expect(screen.getAllByRole("cell")[0]).toHaveClass("seeds-table-v2-cell");
+      expect(screen.getAllByRole("columnheader")[0]).toHaveClass(
+        "seeds-table-v2-header-cell"
+      );
+    });
+
+    it("routes to the styled-components path when a system prop is passed", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow>
+                <TableCell px={400}>Styled Cell</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const cell = screen.getByText("Styled Cell");
+      // The styled-components fallback does not carry the Tailwind class...
+      expect(cell).not.toHaveClass("seeds-table-v2-cell");
+      // ...and the system prop must not leak onto the DOM node.
+      expect(cell).not.toHaveAttribute("px");
+    });
+
+    it("routes to the styled-components path for a styled() extension carrying a theme prop", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow>
+                <TableCell theme={theme}>Themed Cell</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const cell = screen.getByText("Themed Cell");
+      // A styled() extension injects a theme prop; it must route to the
+      // styled-components path, not the Tailwind leaf...
+      expect(cell).not.toHaveClass("seeds-table-v2-cell");
+      // ...and the theme object must not leak onto the DOM node.
+      expect(cell).not.toHaveAttribute("theme");
+    });
+
+    it("routes to the styled-components path for a styled() extension with an sc- className", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow>
+                <TableCell className="sc-abc123">Sc Cell</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const cell = screen.getByText("Sc Cell");
+      // The generated sc-XXXX class is the styled() signal even without a
+      // theme prop, so this must not land on the Tailwind leaf.
+      expect(cell).not.toHaveClass("seeds-table-v2-cell");
+    });
+
+    it("visually hides the caption when isVisible is false but keeps it in the DOM", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableCaption isVisible={false}>Hidden Caption</TableCaption>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const caption = screen.getByText("Hidden Caption");
+      expect(caption).toBeInTheDocument();
+      expect(caption).toHaveClass("seeds-table-v2-caption-hidden");
+    });
+
+    it("keeps the caption visible when isVisible is true", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableCaption isVisible={true}>Visible Caption</TableCaption>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const caption = screen.getByText("Visible Caption");
+      expect(caption).toBeVisible();
+      expect(caption).not.toHaveClass("seeds-table-v2-caption-hidden");
+    });
+  });
+
+  describe("Polymorphic `as` prop", () => {
+    it("renders TableCell as a th with the rowheader role when as='th' scope='row'", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow>
+                <TableCell as="th" scope="row">
+                  Row Header
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const cell = screen.getByRole("rowheader", { name: "Row Header" });
+      expect(cell.tagName).toBe("TH");
+      expect(cell).toHaveAttribute("scope", "row");
+      expect(cell).toHaveClass("seeds-table-v2-cell");
+      // `as` is destructured out and must not leak onto the DOM node.
+      expect(cell).not.toHaveAttribute("as");
+    });
+
+    it("renders TableCell as a td (role cell) by default", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow>
+                <TableCell>Body Cell</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const cell = screen.getByRole("cell", { name: "Body Cell" });
+      expect(cell.tagName).toBe("TD");
+    });
+
+    it("renders TableHeaderCell as a th by default", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell scope="col">Column Header</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const header = screen.getByRole("columnheader", {
+        name: "Column Header",
+      });
+      expect(header.tagName).toBe("TH");
+    });
+
+    it("renders a non-cell leaf (TableRow) as the requested element for a string `as`", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow as="div">
+                <TableCell>Cell in a div row</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const row = screen
+        .getByText("Cell in a div row")
+        .closest(".seeds-table-v2-row");
+      expect(row).not.toBeNull();
+      // The requested element is rendered while the Tailwind class is kept...
+      expect(row?.tagName).toBe("DIV");
+      // ...and `as` is destructured out, so it must not leak onto the DOM node.
+      expect(row).not.toHaveAttribute("as");
+    });
+
+    it("renders a non-cell leaf (TableBody) as the requested element for a string `as`", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody as="section">
+              <TableRow>
+                <TableCell>Cell in a section body</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const body = screen
+        .getByText("Cell in a section body")
+        .closest(".seeds-table-v2-body");
+      expect(body).not.toBeNull();
+      expect(body?.tagName).toBe("SECTION");
+      expect(body).not.toHaveAttribute("as");
+    });
+
+    it("routes a non-cell leaf to the styled-components path for a component-valued `as`", () => {
+      const StyledRow = styled(TableRow)``;
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableBody>
+              <TableRow as={StyledRow}>
+                <TableCell>Cell in a styled row</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      const row = screen.getByText("Cell in a styled row").closest("tr");
+      // A component-valued `as` (the documented `tableRowProps={{ as: styled(...) }}`
+      // pattern) re-enters the hybrid, which detects the injected styled signal and
+      // renders a real <tr> via the styled-components path...
+      expect(row).not.toBeNull();
+      // ...and the component reference must never leak onto the DOM as an `as`
+      // attribute, which was the reported regression.
+      expect(row).not.toHaveAttribute("as");
+    });
+  });
 });