@sproutsocial/seeds-react-table 1.0.3 → 1.0.5

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

@@ -0,0 +1,374 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import TableV2, {
+  TableWrapper,
+  Table,
+  TableRoot,
+  TableCaption,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+} from "../TableV2";
+
+// Mock ResizeObserver for scrolling functionality
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+describe("TableV2", () => {
+  const mockColumns = ["Name", "Age", "Occupation"];
+  const mockData = [
+    ["John Doe", "30", "Engineer"],
+    ["Jane Smith", "25", "Designer"],
+    ["Bob Johnson", "35", "Manager"],
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic Rendering", () => {
+    it("renders table with columns and data", () => {
+      render(
+        <TableV2 caption="User Data" columns={mockColumns} data={mockData} />
+      );
+
+      expect(screen.getByRole("table")).toBeInTheDocument();
+      expect(screen.getByText("User Data")).toBeInTheDocument();
+    });
+
+    it("renders all column headers", () => {
+      render(
+        <TableV2 caption="User Data" columns={mockColumns} data={mockData} />
+      );
+
+      expect(
+        screen.getByRole("columnheader", { name: "Name" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("columnheader", { name: "Age" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("columnheader", { name: "Occupation" })
+      ).toBeInTheDocument();
+    });
+
+    it("renders all data cells", () => {
+      render(
+        <TableV2 caption="User Data" columns={mockColumns} data={mockData} />
+      );
+
+      // Check first row
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+      expect(screen.getByText("30")).toBeInTheDocument();
+      expect(screen.getByText("Engineer")).toBeInTheDocument();
+
+      // Check second row
+      expect(screen.getByText("Jane Smith")).toBeInTheDocument();
+      expect(screen.getByText("25")).toBeInTheDocument();
+      expect(screen.getByText("Designer")).toBeInTheDocument();
+
+      // Check third row
+      expect(screen.getByText("Bob Johnson")).toBeInTheDocument();
+      expect(screen.getByText("35")).toBeInTheDocument();
+      expect(screen.getByText("Manager")).toBeInTheDocument();
+    });
+
+    it("renders correct number of rows", () => {
+      render(
+        <TableV2 caption="User Data" columns={mockColumns} data={mockData} />
+      );
+
+      const rows = screen.getAllByRole("row");
+      // 1 header row + 3 data rows
+      expect(rows).toHaveLength(4);
+    });
+
+    it("renders empty table with no data", () => {
+      render(<TableV2 caption="Empty Table" columns={mockColumns} data={[]} />);
+
+      expect(screen.getByRole("table")).toBeInTheDocument();
+      expect(screen.getByText("Empty Table")).toBeInTheDocument();
+
+      const rows = screen.getAllByRole("row");
+      // Only 1 header row
+      expect(rows).toHaveLength(1);
+    });
+  });
+
+  describe("Caption Display", () => {
+    it("displays caption by default", () => {
+      render(
+        <TableV2
+          caption="Visible Caption"
+          columns={mockColumns}
+          data={mockData}
+        />
+      );
+
+      const caption = screen.getByText("Visible Caption");
+      expect(caption).toBeInTheDocument();
+      expect(caption).toBeVisible();
+    });
+
+    it("hides caption when displayCaption is false", () => {
+      render(
+        <TableV2
+          caption="Hidden Caption"
+          displayCaption={false}
+          columns={mockColumns}
+          data={mockData}
+        />
+      );
+
+      const caption = screen.getByText("Hidden Caption");
+      expect(caption).toBeInTheDocument();
+      // Caption exists for accessibility but is visually hidden
+    });
+
+    it("shows caption when displayCaption is explicitly true", () => {
+      render(
+        <TableV2
+          caption="Explicit Caption"
+          displayCaption={true}
+          columns={mockColumns}
+          data={mockData}
+        />
+      );
+
+      const caption = screen.getByText("Explicit Caption");
+      expect(caption).toBeInTheDocument();
+      expect(caption).toBeVisible();
+    });
+  });
+
+  describe("JSX Elements", () => {
+    it("renders JSX elements in column headers", () => {
+      const jsxColumns = [
+        <strong key="name" data-testid="bold-header">
+          Name
+        </strong>,
+        "Age",
+        "Occupation",
+      ];
+
+      render(
+        <TableV2 caption="JSX Headers" columns={jsxColumns} data={mockData} />
+      );
+
+      expect(screen.getByTestId("bold-header")).toBeInTheDocument();
+      expect(screen.getByText("Name")).toBeInTheDocument();
+    });
+
+    it("renders JSX elements in data cells", () => {
+      const jsxData = [
+        [
+          <strong key="john" data-testid="bold-name">
+            John Doe
+          </strong>,
+          "30",
+          "Engineer",
+        ],
+      ];
+
+      render(
+        <TableV2 caption="JSX Data" columns={mockColumns} data={jsxData} />
+      );
+
+      expect(screen.getByTestId("bold-name")).toBeInTheDocument();
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+    });
+
+    it("handles mixed JSX and string content", () => {
+      const mixedColumns = [
+        <span key="col1" data-testid="jsx-column">
+          Name
+        </span>,
+        "Age",
+      ];
+      const mixedData = [
+        [
+          <strong key="cell1" data-testid="jsx-cell">
+            John
+          </strong>,
+          "30",
+        ],
+      ];
+
+      render(
+        <TableV2
+          caption="Mixed Content"
+          columns={mixedColumns}
+          data={mixedData}
+        />
+      );
+
+      expect(screen.getByTestId("jsx-column")).toBeInTheDocument();
+      expect(screen.getByTestId("jsx-cell")).toBeInTheDocument();
+      expect(screen.getByText("Age")).toBeInTheDocument();
+      expect(screen.getByText("30")).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("renders with correct table role", () => {
+      render(
+        <TableV2
+          caption="Accessible Table"
+          columns={mockColumns}
+          data={mockData}
+        />
+      );
+
+      expect(screen.getByRole("table")).toBeInTheDocument();
+    });
+
+    it("renders caption for screen readers", () => {
+      render(
+        <TableV2
+          caption="Screen Reader Caption"
+          displayCaption={false}
+          columns={mockColumns}
+          data={mockData}
+        />
+      );
+
+      // Caption should exist even when hidden
+      expect(screen.getByText("Screen Reader Caption")).toBeInTheDocument();
+    });
+
+    it("renders column headers with correct scope", () => {
+      render(<TableV2 caption="Table" columns={mockColumns} data={mockData} />);
+
+      const headers = screen.getAllByRole("columnheader");
+      headers.forEach((header) => {
+        expect(header).toHaveAttribute("scope", "col");
+      });
+    });
+
+    it("renders container with region role", () => {
+      render(<TableV2 caption="Table" columns={mockColumns} data={mockData} />);
+
+      const region = screen.getByRole("region");
+      expect(region).toBeInTheDocument();
+      expect(region).toHaveAttribute("tabIndex", "0");
+    });
+  });
+
+  describe("Compound Components", () => {
+    it("exports TableWrapper component", () => {
+      expect(TableWrapper).toBeDefined();
+    });
+
+    it("exports Table component", () => {
+      expect(Table).toBeDefined();
+    });
+
+    it("exports TableCaption component", () => {
+      expect(TableCaption).toBeDefined();
+    });
+
+    it("exports TableHeader component", () => {
+      expect(TableHeader).toBeDefined();
+    });
+
+    it("exports TableBody component", () => {
+      expect(TableBody).toBeDefined();
+    });
+
+    it("exports TableRow component", () => {
+      expect(TableRow).toBeDefined();
+    });
+
+    it("exports TableHeaderCell component", () => {
+      expect(TableHeaderCell).toBeDefined();
+    });
+
+    it("exports TableCell component", () => {
+      expect(TableCell).toBeDefined();
+    });
+
+    it("can use compound components to build custom table", () => {
+      render(
+        <TableWrapper>
+          <TableRoot>
+            <TableCaption isVisible={true}>Custom Table</TableCaption>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell scope="col">Header</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>Data</TableCell>
+              </TableRow>
+            </TableBody>
+          </TableRoot>
+        </TableWrapper>
+      );
+
+      expect(screen.getByText("Custom Table")).toBeInTheDocument();
+      expect(screen.getByText("Header")).toBeInTheDocument();
+      expect(screen.getByText("Data")).toBeInTheDocument();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("handles single column", () => {
+      render(
+        <TableV2
+          caption="Single Column"
+          columns={["Name"]}
+          data={[["John"], ["Jane"]]}
+        />
+      );
+
+      expect(
+        screen.getByRole("columnheader", { name: "Name" })
+      ).toBeInTheDocument();
+      expect(screen.getByText("John")).toBeInTheDocument();
+      expect(screen.getByText("Jane")).toBeInTheDocument();
+    });
+
+    it("handles single row", () => {
+      render(
+        <TableV2
+          caption="Single Row"
+          columns={mockColumns}
+          data={[["John Doe", "30", "Engineer"]]}
+        />
+      );
+
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+      expect(screen.getByText("30")).toBeInTheDocument();
+      expect(screen.getByText("Engineer")).toBeInTheDocument();
+    });
+
+    it("handles large dataset", () => {
+      const largeData = Array.from({ length: 100 }, (_, i) => [
+        `Person ${i}`,
+        `${20 + i}`,
+        "Engineer",
+      ]);
+
+      render(
+        <TableV2
+          caption="Large Dataset"
+          columns={mockColumns}
+          data={largeData}
+        />
+      );
+
+      expect(screen.getByText("Person 0")).toBeInTheDocument();
+      expect(screen.getByText("Person 99")).toBeInTheDocument();
+
+      const rows = screen.getAllByRole("row");
+      // 1 header + 100 data rows
+      expect(rows).toHaveLength(101);
+    });
+  });
+});

package/src/v2/index.ts

@@ -0,0 +1,20 @@
+// V2 Table - Explicit flat exports for optimal tree shaking
+export {
+  Table,
+  TableRoot,
+  TableWrapper,
+  TableCaption,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  useTableContainerId,
+  default as TableV2,
+} from "./TableV2";
+
+// Explicit type exports
+export type { TableV2Props, ColumnHeader, RowData } from "./TableV2Types";
+
+// Explicit style exports
+export * from "./styles";

package/src/v2/styles.ts

@@ -0,0 +1,82 @@
+import styled, { css } from "styled-components";
+import {
+  COMMON,
+  LAYOUT,
+  TYPOGRAPHY,
+} from "@sproutsocial/seeds-react-system-props";
+
+export const StyledTableV2Container = styled.div`
+  ${COMMON}
+  ${LAYOUT}
+  overflow-x: auto;
+  max-width: 100%;
+`;
+
+export const StyledTableV2 = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  color: ${(props) => props.theme.colors.text.body};
+  font-family: ${(props) => props.theme.fontFamily};
+`;
+
+StyledTableV2.displayName = "TableV2.Table";
+
+export const StyledCaption = styled.caption<{ isVisible: boolean }>`
+  ${TYPOGRAPHY}
+  text-align: left;
+  ${(props) => props.theme.typography[400]}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding: ${(props) => props.theme.space[300]};
+  margin-top: ${(props) => props.theme.space[200]};
+  ${({ isVisible }) =>
+    !isVisible &&
+    css`
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+    `}
+`;
+
+StyledCaption.displayName = "TableV2.Caption";
+
+export const StyledTableHeader = styled.thead`
+  vertical-align: bottom;
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
+`;
+
+StyledTableHeader.displayName = "TableV2.TableHeader";
+
+export const StyledTableBody = styled.tbody``;
+
+StyledTableBody.displayName = "TableV2.TableBody";
+
+export const StyledTableRow = styled.tr`
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
+`;
+
+StyledTableRow.displayName = "TableV2.TableRow";
+
+export const StyledTableHeaderCell = styled.th`
+  ${(props) => props.theme.typography[100]}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: left;
+`;
+
+StyledTableHeaderCell.displayName = "TableV2.TableHeaderCell";
+
+export const StyledTableCell = styled.td`
+  ${(props) => props.theme.typography[200]}
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: left;
+`;
+
+StyledTableCell.displayName = "TableV2.TableCell";

package/tsup.config.ts

@@ -1,12 +1,14 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig((options) => ({
-  entry: {
-    index: "src/index.ts",
-    tableCell: "src/TableCell/index.ts",
-    tableHeaderCell: "src/TableHeaderCell/index.ts",
-    tableRowAccordion: "src/TableRowAccordion/index.ts",
-  },
+  entry: [
+    "src/index.ts",
+    "src/v1/index.ts",
+    "src/v2/index.ts",
+    "src/v1/TableCell/index.ts",
+    "src/v1/TableHeaderCell/index.ts",
+    "src/v1/TableRowAccordion/index.ts",
+  ],
   format: ["cjs", "esm"],
   clean: true,
   legacyOutput: true,

package/dist/esm/chunk-SMHAMHIP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TableHeaderCell/TableHeaderCell.tsx","../../src/TableHeaderCell/styles.ts","../../src/TableHeaderCell/constants.ts","../../src/TableHeaderCell/TableHeaderCellTypes.ts","../../src/TableHeaderCell/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport Container, { SortIcon, UnstyledButton } from \"./styles\";\nimport { SORT_DIRECTIONS } from \"./constants\";\nimport type { TypeTableHeaderCellProps } from \"./TableHeaderCellTypes\";\n\nexport class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {\n  static displayName: string;\n\n  getSortIcon = (\n    isSorted: boolean,\n    ariaSortDirection: \"ascending\" | \"descending\" | undefined\n  ) => {\n    const { sortDirection } = this.props;\n    let iconName: TypeIconName = \"caret-up-down-outline\";\n\n    if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {\n      iconName = \"caret-up-solid\";\n    } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {\n      iconName = \"caret-down-solid\";\n    }\n\n    return (\n      <SortIcon>\n        <Icon size=\"mini\" name={iconName} aria-label={ariaSortDirection} />\n      </SortIcon>\n    );\n  };\n\n  // @ts-note: If this is set to an HTMLButtonElement event, then the `Container` freaks out\n  handleClick = (\n    e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>\n  ) => {\n    const { onClick, onSort, isSortable, id } = this.props;\n\n    if (onClick || isSortable) {\n      e.preventDefault();\n    }\n\n    if (onClick) {\n      // @ts-note: Right now the `onClick` is incorrectly set to consume an HTMLButtonElement event\n      onClick(e as unknown as React.MouseEvent<HTMLButtonElement>);\n      return;\n    }\n\n    if (!isSortable || !onSort) return;\n    onSort(id);\n  };\n\n  override render() {\n    const {\n      id,\n      content,\n      colSpan,\n      width,\n      align,\n      isSortable,\n      sortId,\n      sortDirection,\n      children,\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      shouldTruncate,\n      onSort,\n      onClick,\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n      color,\n      ...rest\n    } = this.props;\n\n    const isSorted = sortId === id;\n    const ariaSort = isSorted\n      ? sortDirection === SORT_DIRECTIONS.ASC\n        ? \"ascending\"\n        : \"descending\"\n      : undefined;\n\n    const buttonProps = isSortable\n      ? {\n          role: \"button\",\n          onClick: this.handleClick,\n        }\n      : {};\n\n    const scope = colSpan ? \"colgroup\" : \"col\";\n\n    return (\n      <Container\n        {...rest}\n        key={id}\n        alignment={align || \"left\"}\n        sortable={isSortable}\n        colSpan={colSpan}\n        scope={scope}\n        width={width}\n        onClick={this.handleClick}\n        data-tableheadercell-sortable={isSortable}\n        data-qa-table-header-cell=\"\"\n        data-qa-table-header-cell-sortdirection={sortDirection}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        aria-sort={ariaSort}\n      >\n        {isSortable ? (\n          <UnstyledButton {...buttonProps}>\n            <div aria-live=\"polite\" role=\"status\">\n              {children || content}\n              {!children && this.getSortIcon(id === sortId, ariaSort)}\n            </div>\n          </UnstyledButton>\n        ) : (\n          children || content\n        )}\n      </Container>\n    );\n  }\n}\n\nexport default TableHeaderCell;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableHeaderCellProps } from \"./TableHeaderCellTypes\";\n\nconst Container = styled.th<{\n  sortable?: boolean;\n  alignment: TypeTableHeaderCellProps[\"align\"];\n  width: TypeTableHeaderCellProps[\"width\"];\n}>`\n  ${(props) => props.theme.typography[100]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: ${(props) => props.alignment};\n\n  ${(props) =>\n    props.sortable &&\n    css`\n      position: relative;\n      cursor: pointer;\n    `}\n\n  ${COMMON}\n`;\n\nexport const SortIcon = styled.span`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  font-size: 0;\n  padding: 0 ${(props) => props.theme.space[200]};\n`;\n\nexport const UnstyledButton = styled.button`\n  background: none;\n  border: none;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  overflow: visible;\n  padding: 0;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n`;\n\nexport default Container;\n","export const SORT_DIRECTIONS = {\n  ASC: \"ASC\",\n  DESC: \"DESC\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeTableCellProps } from \"../TableCell/TableCellTypes\";\nimport { SORT_DIRECTIONS } from \"./constants\";\n\nexport type TypeEnumSortDirections = keyof typeof SORT_DIRECTIONS;\n\nexport interface TypeTableHeaderCellProps\n  extends Omit<TypeTableCellProps, \"onClick\"> {\n  /** Legacy Deteremines if a table column is sortable (optional) */\n  isSortable?: boolean;\n\n  /** Truncates text into a singular line with ellipsis (optional) */\n  shouldTruncate?: boolean;\n\n  /** Legacy: Callback for Sorting Table Columns (optional) */\n  onSort?: (id: string) => void;\n\n  /** Legacy: Controls which column is being sorted (optional) */\n  sortId?: string;\n\n  /** Legacy: Controls the current sort direction (optional) */\n  sortDirection?: TypeEnumSortDirections;\n\n  /** Callback for Click Events. If Included will override onSort prop */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n}\n","import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,UAAiC;;;ACDxC,OAAO,UAAU,WAAW;AAC5B,SAAS,cAAc;AAGvB,IAAM,YAAY,OAAO;AAAA,IAKrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,aAC/C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,IAED,MAAM;AAAA;AAGH,IAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKhB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGzC,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarC,IAAO,iBAAQ;;;AC7CR,IAAM,kBAAkB;AAAA,EAC7B,KAAK;AAAA,EACL,MAAM;AACR;;;AFqBQ,cAkFI,YAlFJ;AA8DF;AAhFC,IAAM,kBAAN,cAAoC,gBAAoC;AAAA,EAC7E,OAAO;AAAA,EAEP,cAAc,CACZ,UACA,sBACG;AACH,UAAM,EAAE,cAAc,IAAI,KAAK;AAC/B,QAAI,WAAyB;AAE7B,QAAI,YAAY,kBAAkB,gBAAgB,KAAK;AACrD,iBAAW;AAAA,IACb,WAAW,YAAY,kBAAkB,gBAAgB,MAAM;AAC7D,iBAAW;AAAA,IACb;AAEA,WACE,oBAAC,YACC,8BAAC,QAAK,MAAK,QAAO,MAAM,UAAU,cAAY,mBAAmB,GACnE;AAAA,EAEJ;AAAA;AAAA,EAGA,cAAc,CACZ,MACG;AACH,UAAM,EAAE,SAAS,QAAQ,YAAY,GAAG,IAAI,KAAK;AAEjD,QAAI,WAAW,YAAY;AACzB,QAAE,eAAe;AAAA,IACnB;AAEA,QAAI,SAAS;AAEX,cAAQ,CAAmD;AAC3D;AAAA,IACF;AAEA,QAAI,CAAC,cAAc,CAAC,OAAQ;AAC5B,WAAO,EAAE;AAAA,EACX;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AAET,UAAM,WAAW,WAAW;AAC5B,UAAM,WAAW,WACb,kBAAkB,gBAAgB,MAChC,cACA,eACF;AAEJ,UAAM,cAAc,aAChB;AAAA,MACE,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,IAChB,IACA,CAAC;AAEL,UAAM,QAAQ,UAAU,aAAa;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,SAAS;AAAA,QACpB,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,KAAK;AAAA,QACd,iCAA+B;AAAA,QAC/B,6BAA0B;AAAA,QAC1B,2CAAyC;AAAA,QAIzC;AAAA,QACA,aAAW;AAAA;AAAA,MAEV,aACC,oBAAC,kBAAgB,GAAG,aAClB,+BAAC,SAAI,aAAU,UAAS,MAAK,UAC1B;AAAA,oBAAY;AAAA,QACZ,CAAC,YAAY,KAAK,YAAY,OAAO,QAAQ,QAAQ;AAAA,SACxD,GACF,IAEA,YAAY;AAAA,IAEhB;AAAA,EAEJ;AACF;AAEA,IAAO,0BAAQ;;;AGvHf,OAAuB;;;ACEvB,IAAOA,2BAAQ;","names":["TableHeaderCell_default"]}

package/dist/esm/chunk-XJMS6762.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TableCell/TableCell.tsx","../../src/TableCell/styles.ts","../../src/TableCell/TableCellTypes.ts","../../src/TableCell/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\n/**\n * The table cell component is for rendering table cells and is meant to be used with the table component.\n */\nexport class TableCell extends React.Component<TypeTableCellProps> {\n  static displayName: string;\n  override render() {\n    const {\n      id,\n      content,\n      colSpan,\n      width,\n      align,\n      scope,\n      children,\n      color,\n      ...rest\n    } = this.props;\n    return (\n      <Container\n        {...rest}\n        // If the `scope` property is passed we must render the element as a <th>\n        as={scope ? \"th\" : \"td\"}\n        scope={scope ? scope : undefined}\n        alignment={align || \"left\"}\n        key={id}\n        colSpan={colSpan}\n        width={width}\n        data-qa-table-cell=\"\"\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      >\n        {children || content}\n      </Container>\n    );\n  }\n}\n\nexport default TableCell;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\nconst Container = styled.td<{\n  alignment: TypeTableCellProps[\"align\"];\n}>`\n  ${(props) => props.theme.typography[200]}\n  font-weight: ${(props) => props.theme.fontWeights.normal};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: ${(props) => props.alignment};\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeTableCellProps\n  extends TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"td\">,\n      keyof TypeSystemCommonProps | \"content\"\n    > {\n  /** Table Cell Id */\n  id: string;\n\n  /** Content is deprecated.  Please use children instead. Content to be render */\n  content?: React.ReactNode;\n\n  /** Controls the colSpan attribute (optional) */\n  colSpan?: number;\n\n  /** Controls the width attribute (optional) */\n  width?: number;\n\n  /** Controls the CSS text-align property (optional) */\n  align?: \"left\" | \"right\" | \"center\" | \"justify\";\n\n  /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional)  */\n  scope?: \"row\" | \"col\" | \"rowGroup\" | \"colGroup\";\n\n  /** Children to be rendered */\n  children?: React.ReactNode;\n}\n","import TableCell from \"./TableCell\";\n\nexport default TableCell;\nexport { TableCell };\nexport * from \"./TableCellTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,YAAY;AACnB,SAAS,cAAc;AAGvB,IAAM,YAAY,OAAO;AAAA,IAGrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADOT;AAfC,IAAM,YAAN,cAA8B,gBAA8B;AAAA,EACjE,OAAO;AAAA,EACE,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QAEJ,IAAI,QAAQ,OAAO;AAAA,QACnB,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,SAAS;AAAA,QACpB,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,sBAAmB;AAAA,QAInB;AAAA;AAAA,MAEC,YAAY;AAAA,IACf;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;;;AE3Cf,OAAuB;;;ACEvB,IAAOA,qBAAQ;","names":["TableCell_default"]}

package/dist/esm/tableRowAccordion.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TableRowAccordion/TableRowAccordion.tsx","../../src/TableRowAccordion/styles.ts","../../src/TableRowAccordion/TableRowAccordionTypes.ts","../../src/TableRowAccordion/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport TableCell from \"../TableCell\";\nimport Container, { Detail, Trigger } from \"./styles\";\nimport type { TypeTableRowAccordionProps } from \"./TableRowAccordionTypes\";\n\n/**\n * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.\n */\nexport default class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {\n  handleToggle: React.MouseEventHandler<HTMLTableRowElement> = (e) => {\n    const { onToggle, id } = this.props;\n    e.stopPropagation();\n\n    if (onToggle) {\n      onToggle(id);\n    }\n  };\n\n  override render() {\n    const {\n      id,\n      cells,\n      detail,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onToggle,\n      isExpanded,\n      color,\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        {...rest}\n        data-qa-table-row-accordion={isExpanded}\n        key={id}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      >\n        <tr data-tablerowaccordion-summary onClick={this.handleToggle}>\n          {cells.map((td) => {\n            return <TableCell {...td} key={td.id} />;\n          })}\n          <TableCell\n            id=\"tableRowAccordion_trigger\"\n            content={\n              // TODO: This trigger needs an accessible label passed in via props\n              <Trigger\n                data-tablerowaccordion-trigger\n                onClick={this.handleToggle}\n                role=\"button\"\n              >\n                <Icon\n                  name={\n                    isExpanded ? \"chevron-up-outline\" : \"chevron-down-outline\"\n                  }\n                  aria-hidden\n                />\n              </Trigger>\n            }\n          />\n        </tr>\n        <Detail isExpanded={isExpanded} data-tablerowaccordion-detail>\n          <TableCell\n            id=\"tableRowAccordion_detail\"\n            colSpan={100}\n            content={detail}\n          />\n        </Detail>\n      </Container>\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.tbody`\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const Detail = styled.tr<{ isExpanded: boolean }>`\n  display: none;\n\n  ${(props) =>\n    props.isExpanded &&\n    css`\n      display: table-row;\n    `}\n`;\n\nexport const Trigger = styled.div`\n  cursor: pointer;\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableRow } from \"../TableTypes\";\n\nexport interface TypeTableRowAccordionProps\n  extends TypeTableRow,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"tbody\">,\n      keyof TypeTableRow | keyof TypeSystemCommonProps\n    > {\n  /** Content to be rendered in accordion drawer */\n  detail: React.ReactNode;\n\n  /** Controls the display state of the accordion drawer */\n  isExpanded: boolean;\n\n  /** Callback for toggling the accordion drawer state */\n  onToggle: (id: string) => void;\n}\n","import TableRowAccordion from \"./TableRowAccordion\";\n\nexport default TableRowAccordion;\nexport { TableRowAccordion };\nexport * from \"./TableRowAccordionTypes\";\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AACvB,OAAO,UAAU;;;ACDjB,OAAO,UAAU,WAAW;AAC5B,SAAS,cAAc;AAEvB,IAAM,YAAY,OAAO;AAAA;AAAA,MAEnB,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAErD,MAAM;AAAA;AAGH,IAAM,SAAS,OAAO;AAAA;AAAA;AAAA,IAGzB,CAAC,UACD,MAAM,cACN;AAAA;AAAA,KAEC;AAAA;AAGE,IAAM,UAAU,OAAO;AAAA;AAAA;AAI9B,IAAO,iBAAQ;;;ADiBP,SAaQ,KAbR;AAEW;AAlCnB,IAAqB,oBAArB,cAAqD,gBAAsC;AAAA,EACzF,eAA6D,CAAC,MAAM;AAClE,UAAM,EAAE,UAAU,GAAG,IAAI,KAAK;AAC9B,MAAE,gBAAgB;AAElB,QAAI,UAAU;AACZ,eAAS,EAAE;AAAA,IACb;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AAET,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,+BAA6B;AAAA,QAC7B,KAAK;AAAA,QAIL;AAAA;AAAA,MAEA,qBAAC,QAAG,kCAA8B,MAAC,SAAS,KAAK,cAC9C;AAAA,cAAM,IAAI,CAAC,OAAO;AACjB,iBAAO,8BAAC,qBAAW,GAAG,IAAI,KAAK,GAAG,IAAI;AAAA,QACxC,CAAC;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA;AAAA,cAEE;AAAA,gBAAC;AAAA;AAAA,kBACC,kCAA8B;AAAA,kBAC9B,SAAS,KAAK;AAAA,kBACd,MAAK;AAAA,kBAEL;AAAA,oBAAC;AAAA;AAAA,sBACC,MACE,aAAa,uBAAuB;AAAA,sBAEtC,eAAW;AAAA;AAAA,kBACb;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA,MACA,oBAAC,UAAO,YAAwB,iCAA6B,MAC3D;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,SAAS;AAAA,UACT,SAAS;AAAA;AAAA,MACX,GACF;AAAA,IACF;AAAA,EAEJ;AACF;;;AE1EA,OAAuB;;;ACEvB,IAAO,4BAAQ;","names":[]}

package/dist/tableCell.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/TableCell/index.ts","../src/TableCell/TableCell.tsx","../src/TableCell/styles.ts","../src/TableCell/TableCellTypes.ts"],"sourcesContent":["import TableCell from \"./TableCell\";\n\nexport default TableCell;\nexport { TableCell };\nexport * from \"./TableCellTypes\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\n/**\n * The table cell component is for rendering table cells and is meant to be used with the table component.\n */\nexport class TableCell extends React.Component<TypeTableCellProps> {\n  static displayName: string;\n  override render() {\n    const {\n      id,\n      content,\n      colSpan,\n      width,\n      align,\n      scope,\n      children,\n      color,\n      ...rest\n    } = this.props;\n    return (\n      <Container\n        {...rest}\n        // If the `scope` property is passed we must render the element as a <th>\n        as={scope ? \"th\" : \"td\"}\n        scope={scope ? scope : undefined}\n        alignment={align || \"left\"}\n        key={id}\n        colSpan={colSpan}\n        width={width}\n        data-qa-table-cell=\"\"\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      >\n        {children || content}\n      </Container>\n    );\n  }\n}\n\nexport default TableCell;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\nconst Container = styled.td<{\n  alignment: TypeTableCellProps[\"align\"];\n}>`\n  ${(props) => props.theme.typography[200]}\n  font-weight: ${(props) => props.theme.fontWeights.normal};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: ${(props) => props.alignment};\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeTableCellProps\n  extends TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"td\">,\n      keyof TypeSystemCommonProps | \"content\"\n    > {\n  /** Table Cell Id */\n  id: string;\n\n  /** Content is deprecated.  Please use children instead. Content to be render */\n  content?: React.ReactNode;\n\n  /** Controls the colSpan attribute (optional) */\n  colSpan?: number;\n\n  /** Controls the width attribute (optional) */\n  width?: number;\n\n  /** Controls the CSS text-align property (optional) */\n  align?: \"left\" | \"right\" | \"center\" | \"justify\";\n\n  /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional)  */\n  scope?: \"row\" | \"col\" | \"rowGroup\" | \"colGroup\";\n\n  /** Children to be rendered */\n  children?: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,sCAAuB;AAGvB,IAAM,YAAY,yBAAAC,QAAO;AAAA,IAGrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADOT;AAfC,IAAM,YAAN,cAA8B,gBAA8B;AAAA,EACjE,OAAO;AAAA,EACE,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QAEJ,IAAI,QAAQ,OAAO;AAAA,QACnB,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,SAAS;AAAA,QACpB,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,sBAAmB;AAAA,QAInB;AAAA;AAAA,MAEC,YAAY;AAAA,IACf;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;;;AE3Cf,IAAAC,SAAuB;;;AHEvB,IAAOC,qBAAQ;","names":["TableCell_default","styled","React","TableCell_default"]}

package/dist/tableHeaderCell.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/TableHeaderCell/index.ts","../src/TableHeaderCell/TableHeaderCell.tsx","../src/TableHeaderCell/styles.ts","../src/TableHeaderCell/constants.ts","../src/TableHeaderCell/TableHeaderCellTypes.ts"],"sourcesContent":["import TableHeaderCell from \"./TableHeaderCell\";\n\nexport default TableHeaderCell;\nexport { TableHeaderCell };\nexport * from \"./TableHeaderCellTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport Container, { SortIcon, UnstyledButton } from \"./styles\";\nimport { SORT_DIRECTIONS } from \"./constants\";\nimport type { TypeTableHeaderCellProps } from \"./TableHeaderCellTypes\";\n\nexport class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {\n  static displayName: string;\n\n  getSortIcon = (\n    isSorted: boolean,\n    ariaSortDirection: \"ascending\" | \"descending\" | undefined\n  ) => {\n    const { sortDirection } = this.props;\n    let iconName: TypeIconName = \"caret-up-down-outline\";\n\n    if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {\n      iconName = \"caret-up-solid\";\n    } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {\n      iconName = \"caret-down-solid\";\n    }\n\n    return (\n      <SortIcon>\n        <Icon size=\"mini\" name={iconName} aria-label={ariaSortDirection} />\n      </SortIcon>\n    );\n  };\n\n  // @ts-note: If this is set to an HTMLButtonElement event, then the `Container` freaks out\n  handleClick = (\n    e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>\n  ) => {\n    const { onClick, onSort, isSortable, id } = this.props;\n\n    if (onClick || isSortable) {\n      e.preventDefault();\n    }\n\n    if (onClick) {\n      // @ts-note: Right now the `onClick` is incorrectly set to consume an HTMLButtonElement event\n      onClick(e as unknown as React.MouseEvent<HTMLButtonElement>);\n      return;\n    }\n\n    if (!isSortable || !onSort) return;\n    onSort(id);\n  };\n\n  override render() {\n    const {\n      id,\n      content,\n      colSpan,\n      width,\n      align,\n      isSortable,\n      sortId,\n      sortDirection,\n      children,\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      shouldTruncate,\n      onSort,\n      onClick,\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n      color,\n      ...rest\n    } = this.props;\n\n    const isSorted = sortId === id;\n    const ariaSort = isSorted\n      ? sortDirection === SORT_DIRECTIONS.ASC\n        ? \"ascending\"\n        : \"descending\"\n      : undefined;\n\n    const buttonProps = isSortable\n      ? {\n          role: \"button\",\n          onClick: this.handleClick,\n        }\n      : {};\n\n    const scope = colSpan ? \"colgroup\" : \"col\";\n\n    return (\n      <Container\n        {...rest}\n        key={id}\n        alignment={align || \"left\"}\n        sortable={isSortable}\n        colSpan={colSpan}\n        scope={scope}\n        width={width}\n        onClick={this.handleClick}\n        data-tableheadercell-sortable={isSortable}\n        data-qa-table-header-cell=\"\"\n        data-qa-table-header-cell-sortdirection={sortDirection}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        aria-sort={ariaSort}\n      >\n        {isSortable ? (\n          <UnstyledButton {...buttonProps}>\n            <div aria-live=\"polite\" role=\"status\">\n              {children || content}\n              {!children && this.getSortIcon(id === sortId, ariaSort)}\n            </div>\n          </UnstyledButton>\n        ) : (\n          children || content\n        )}\n      </Container>\n    );\n  }\n}\n\nexport default TableHeaderCell;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableHeaderCellProps } from \"./TableHeaderCellTypes\";\n\nconst Container = styled.th<{\n  sortable?: boolean;\n  alignment: TypeTableHeaderCellProps[\"align\"];\n  width: TypeTableHeaderCellProps[\"width\"];\n}>`\n  ${(props) => props.theme.typography[100]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: ${(props) => props.alignment};\n\n  ${(props) =>\n    props.sortable &&\n    css`\n      position: relative;\n      cursor: pointer;\n    `}\n\n  ${COMMON}\n`;\n\nexport const SortIcon = styled.span`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  font-size: 0;\n  padding: 0 ${(props) => props.theme.space[200]};\n`;\n\nexport const UnstyledButton = styled.button`\n  background: none;\n  border: none;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  overflow: visible;\n  padding: 0;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n`;\n\nexport default Container;\n","export const SORT_DIRECTIONS = {\n  ASC: \"ASC\",\n  DESC: \"DESC\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeTableCellProps } from \"../TableCell/TableCellTypes\";\nimport { SORT_DIRECTIONS } from \"./constants\";\n\nexport type TypeEnumSortDirections = keyof typeof SORT_DIRECTIONS;\n\nexport interface TypeTableHeaderCellProps\n  extends Omit<TypeTableCellProps, \"onClick\"> {\n  /** Legacy Deteremines if a table column is sortable (optional) */\n  isSortable?: boolean;\n\n  /** Truncates text into a singular line with ellipsis (optional) */\n  shouldTruncate?: boolean;\n\n  /** Legacy: Callback for Sorting Table Columns (optional) */\n  onSort?: (id: string) => void;\n\n  /** Legacy: Controls which column is being sorted (optional) */\n  sortId?: string;\n\n  /** Legacy: Controls the current sort direction (optional) */\n  sortDirection?: TypeEnumSortDirections;\n\n  /** Callback for Click Events. If Included will override onSort prop */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n}\n"],"mappings":"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","names":["TableHeaderCell_default","styled","Icon","React","TableHeaderCell_default"]}

package/dist/tableRowAccordion.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/TableRowAccordion/index.ts","../src/TableRowAccordion/TableRowAccordion.tsx","../src/TableCell/TableCell.tsx","../src/TableCell/styles.ts","../src/TableCell/TableCellTypes.ts","../src/TableCell/index.ts","../src/TableRowAccordion/styles.ts","../src/TableRowAccordion/TableRowAccordionTypes.ts"],"sourcesContent":["import TableRowAccordion from \"./TableRowAccordion\";\n\nexport default TableRowAccordion;\nexport { TableRowAccordion };\nexport * from \"./TableRowAccordionTypes\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport TableCell from \"../TableCell\";\nimport Container, { Detail, Trigger } from \"./styles\";\nimport type { TypeTableRowAccordionProps } from \"./TableRowAccordionTypes\";\n\n/**\n * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.\n */\nexport default class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {\n  handleToggle: React.MouseEventHandler<HTMLTableRowElement> = (e) => {\n    const { onToggle, id } = this.props;\n    e.stopPropagation();\n\n    if (onToggle) {\n      onToggle(id);\n    }\n  };\n\n  override render() {\n    const {\n      id,\n      cells,\n      detail,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onToggle,\n      isExpanded,\n      color,\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        {...rest}\n        data-qa-table-row-accordion={isExpanded}\n        key={id}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      >\n        <tr data-tablerowaccordion-summary onClick={this.handleToggle}>\n          {cells.map((td) => {\n            return <TableCell {...td} key={td.id} />;\n          })}\n          <TableCell\n            id=\"tableRowAccordion_trigger\"\n            content={\n              // TODO: This trigger needs an accessible label passed in via props\n              <Trigger\n                data-tablerowaccordion-trigger\n                onClick={this.handleToggle}\n                role=\"button\"\n              >\n                <Icon\n                  name={\n                    isExpanded ? \"chevron-up-outline\" : \"chevron-down-outline\"\n                  }\n                  aria-hidden\n                />\n              </Trigger>\n            }\n          />\n        </tr>\n        <Detail isExpanded={isExpanded} data-tablerowaccordion-detail>\n          <TableCell\n            id=\"tableRowAccordion_detail\"\n            colSpan={100}\n            content={detail}\n          />\n        </Detail>\n      </Container>\n    );\n  }\n}\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\n/**\n * The table cell component is for rendering table cells and is meant to be used with the table component.\n */\nexport class TableCell extends React.Component<TypeTableCellProps> {\n  static displayName: string;\n  override render() {\n    const {\n      id,\n      content,\n      colSpan,\n      width,\n      align,\n      scope,\n      children,\n      color,\n      ...rest\n    } = this.props;\n    return (\n      <Container\n        {...rest}\n        // If the `scope` property is passed we must render the element as a <th>\n        as={scope ? \"th\" : \"td\"}\n        scope={scope ? scope : undefined}\n        alignment={align || \"left\"}\n        key={id}\n        colSpan={colSpan}\n        width={width}\n        data-qa-table-cell=\"\"\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      >\n        {children || content}\n      </Container>\n    );\n  }\n}\n\nexport default TableCell;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableCellProps } from \"./TableCellTypes\";\n\nconst Container = styled.td<{\n  alignment: TypeTableCellProps[\"align\"];\n}>`\n  ${(props) => props.theme.typography[200]}\n  font-weight: ${(props) => props.theme.fontWeights.normal};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: ${(props) => props.alignment};\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeTableCellProps\n  extends TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"td\">,\n      keyof TypeSystemCommonProps | \"content\"\n    > {\n  /** Table Cell Id */\n  id: string;\n\n  /** Content is deprecated.  Please use children instead. Content to be render */\n  content?: React.ReactNode;\n\n  /** Controls the colSpan attribute (optional) */\n  colSpan?: number;\n\n  /** Controls the width attribute (optional) */\n  width?: number;\n\n  /** Controls the CSS text-align property (optional) */\n  align?: \"left\" | \"right\" | \"center\" | \"justify\";\n\n  /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional)  */\n  scope?: \"row\" | \"col\" | \"rowGroup\" | \"colGroup\";\n\n  /** Children to be rendered */\n  children?: React.ReactNode;\n}\n","import TableCell from \"./TableCell\";\n\nexport default TableCell;\nexport { TableCell };\nexport * from \"./TableCellTypes\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.tbody`\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const Detail = styled.tr<{ isExpanded: boolean }>`\n  display: none;\n\n  ${(props) =>\n    props.isExpanded &&\n    css`\n      display: table-row;\n    `}\n`;\n\nexport const Trigger = styled.div`\n  cursor: pointer;\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTableRow } from \"../TableTypes\";\n\nexport interface TypeTableRowAccordionProps\n  extends TypeTableRow,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"tbody\">,\n      keyof TypeTableRow | keyof TypeSystemCommonProps\n    > {\n  /** Content to be rendered in accordion drawer */\n  detail: React.ReactNode;\n\n  /** Controls the display state of the accordion drawer */\n  isExpanded: boolean;\n\n  /** Callback for toggling the accordion drawer state */\n  onToggle: (id: string) => void;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;AACvB,8BAAiB;;;ACDjB,YAAuB;;;ACAvB,+BAAmB;AACnB,sCAAuB;AAGvB,IAAM,YAAY,yBAAAC,QAAO;AAAA,IAGrB,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA,aAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC9B,CAAC,UAAU,MAAM,SAAS;AAAA;AAAA,IAEtC,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADOT;AAfC,IAAM,YAAN,cAA8B,gBAA8B;AAAA,EACjE,OAAO;AAAA,EACE,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QAEJ,IAAI,QAAQ,OAAO;AAAA,QACnB,OAAO,QAAQ,QAAQ;AAAA,QACvB,WAAW,SAAS;AAAA,QACpB,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,sBAAmB;AAAA,QAInB;AAAA;AAAA,MAEC,YAAY;AAAA,IACf;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;;;AE3Cf,IAAAC,SAAuB;;;ACEvB,IAAOC,qBAAQ;;;ACFf,IAAAC,4BAA4B;AAC5B,IAAAC,mCAAuB;AAEvB,IAAMC,aAAY,0BAAAC,QAAO;AAAA;AAAA,MAEnB,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAErD,uCAAM;AAAA;AAGH,IAAM,SAAS,0BAAAA,QAAO;AAAA;AAAA;AAAA,IAGzB,CAAC,UACD,MAAM,cACN;AAAA;AAAA,KAEC;AAAA;AAGE,IAAM,UAAU,0BAAAA,QAAO;AAAA;AAAA;AAI9B,IAAOC,kBAAQF;;;ALiBP;AAEW,IAAAG,gBAAA;AAlCnB,IAAqB,oBAArB,cAAqD,iBAAsC;AAAA,EACzF,eAA6D,CAAC,MAAM;AAClE,UAAM,EAAE,UAAU,GAAG,IAAI,KAAK;AAC9B,MAAE,gBAAgB;AAElB,QAAI,UAAU;AACZ,eAAS,EAAE;AAAA,IACb;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AAET,WACE;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,+BAA6B;AAAA,QAC7B,KAAK;AAAA,QAIL;AAAA;AAAA,MAEA,6CAAC,QAAG,kCAA8B,MAAC,SAAS,KAAK,cAC9C;AAAA,cAAM,IAAI,CAAC,OAAO;AACjB,iBAAO,iDAACC,oBAAA,EAAW,GAAG,IAAI,KAAK,GAAG,IAAI;AAAA,QACxC,CAAC;AAAA,QACD;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH;AAAA;AAAA,cAEE;AAAA,gBAAC;AAAA;AAAA,kBACC,kCAA8B;AAAA,kBAC9B,SAAS,KAAK;AAAA,kBACd,MAAK;AAAA,kBAEL;AAAA,oBAAC,wBAAAC;AAAA,oBAAA;AAAA,sBACC,MACE,aAAa,uBAAuB;AAAA,sBAEtC,eAAW;AAAA;AAAA,kBACb;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA,MACA,4CAAC,UAAO,YAAwB,iCAA6B,MAC3D;AAAA,QAACD;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,SAAS;AAAA,UACT,SAAS;AAAA;AAAA,MACX,GACF;AAAA,IACF;AAAA,EAEJ;AACF;;;AM1EA,IAAAE,SAAuB;;;APEvB,IAAO,4BAAQ;","names":["React","styled","React","TableCell_default","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_react","styles_default","TableCell_default","Icon","React"]}