@sproutsocial/seeds-react-table 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,53 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: {"index":"src/index.ts","tableCell":"src/TableCell/index.ts","tableHeaderCell":"src/TableHeaderCell/index.ts","tableRowAccordion":"src/TableRowAccordion/index.ts"}
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-table/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js                 10.34 KB
+CJS dist/tableCell.js             3.10 KB
+CJS dist/tableHeaderCell.js       5.97 KB
+CJS dist/tableRowAccordion.js     6.36 KB
+CJS dist/index.js.map             18.90 KB
+CJS dist/tableCell.js.map         3.88 KB
+CJS dist/tableHeaderCell.js.map   8.11 KB
+CJS dist/tableRowAccordion.js.map 9.26 KB
+CJS ⚡️ Build success in 216ms
+ESM dist/esm/index.js                 2.92 KB
+ESM dist/esm/tableCell.js             196.00 B
+ESM dist/esm/tableHeaderCell.js       270.00 B
+ESM dist/esm/chunk-67DCEN4G.js        3.90 KB
+ESM dist/esm/tableRowAccordion.js     2.93 KB
+ESM dist/esm/chunk-XJMS6762.js        1.34 KB
+ESM dist/esm/index.js.map             6.74 KB
+ESM dist/esm/tableCell.js.map         71.00 B
+ESM dist/esm/tableHeaderCell.js.map   71.00 B
+ESM dist/esm/chunk-67DCEN4G.js.map    8.00 KB
+ESM dist/esm/tableRowAccordion.js.map 5.25 KB
+ESM dist/esm/chunk-XJMS6762.js.map    3.79 KB
+ESM ⚡️ Build success in 221ms
+DTS Build start
+DTS ⚡️ Build success in 86476ms
+DTS dist/index.d.ts                          1.27 KB
+DTS dist/tableCell.d.ts                      270.00 B
+DTS dist/tableHeaderCell.d.ts                396.00 B
+DTS dist/tableRowAccordion.d.ts              1.27 KB
+DTS dist/TableCell-CN71R1B5.d.ts             453.00 B
+DTS dist/TableHeaderCell-DnwlruQg.d.ts       588.00 B
+DTS dist/TableTypes-Dg7QrcGt.d.ts            1.55 KB
+DTS dist/TableHeaderCellTypes-CH_zzW6X.d.ts  1.06 KB
+DTS dist/TableCellTypes-Cp-8r7l1.d.ts        1013.00 B
+DTS dist/index.d.mts                         1.28 KB
+DTS dist/tableCell.d.mts                     272.00 B
+DTS dist/tableHeaderCell.d.mts               399.00 B
+DTS dist/tableRowAccordion.d.mts             1.27 KB
+DTS dist/TableCell-B8GMRlv7.d.mts            454.00 B
+DTS dist/TableHeaderCell-DsJpGb2j.d.mts      589.00 B
+DTS dist/TableTypes-jS0O3bwQ.d.mts           1.55 KB
+DTS dist/TableHeaderCellTypes-CsJQBwu2.d.mts 1.06 KB
+DTS dist/TableCellTypes-Cp-8r7l1.d.mts       1013.00 B
+Done in 92.63s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-table
+
+## 1.0.0
+
+### Major Changes
+
+- 2a261d7: Migrate Table component to its own seeds-react-table package

package/dist/TableCell-B8GMRlv7.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { T as TypeTableCellProps } from './TableCellTypes-Cp-8r7l1.mjs';
+
+/**
+ * The table cell component is for rendering table cells and is meant to be used with the table component.
+ */
+declare class TableCell extends React.Component<TypeTableCellProps> {
+    static displayName: string;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { TableCell as T };

package/dist/TableCell-CN71R1B5.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { T as TypeTableCellProps } from './TableCellTypes-Cp-8r7l1.js';
+
+/**
+ * The table cell component is for rendering table cells and is meant to be used with the table component.
+ */
+declare class TableCell extends React.Component<TypeTableCellProps> {
+    static displayName: string;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { TableCell as T };

package/dist/TableCellTypes-Cp-8r7l1.d.mts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeTableCellProps extends TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"td">, keyof TypeSystemCommonProps | "content"> {
+    /** Table Cell Id */
+    id: string;
+    /** Content is deprecated.  Please use children instead. Content to be render */
+    content?: React.ReactNode;
+    /** Controls the colSpan attribute (optional) */
+    colSpan?: number;
+    /** Controls the width attribute (optional) */
+    width?: number;
+    /** Controls the CSS text-align property (optional) */
+    align?: "left" | "right" | "center" | "justify";
+    /** 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)  */
+    scope?: "row" | "col" | "rowGroup" | "colGroup";
+    /** Children to be rendered */
+    children?: React.ReactNode;
+}
+
+export type { TypeTableCellProps as T };

package/dist/TableCellTypes-Cp-8r7l1.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeTableCellProps extends TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"td">, keyof TypeSystemCommonProps | "content"> {
+    /** Table Cell Id */
+    id: string;
+    /** Content is deprecated.  Please use children instead. Content to be render */
+    content?: React.ReactNode;
+    /** Controls the colSpan attribute (optional) */
+    colSpan?: number;
+    /** Controls the width attribute (optional) */
+    width?: number;
+    /** Controls the CSS text-align property (optional) */
+    align?: "left" | "right" | "center" | "justify";
+    /** 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)  */
+    scope?: "row" | "col" | "rowGroup" | "colGroup";
+    /** Children to be rendered */
+    children?: React.ReactNode;
+}
+
+export type { TypeTableCellProps as T };

package/dist/TableHeaderCell-DnwlruQg.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { a as TypeTableHeaderCellProps } from './TableHeaderCellTypes-CH_zzW6X.js';
+
+declare class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {
+    static displayName: string;
+    getSortIcon: (isSorted: boolean, ariaSortDirection: "ascending" | "descending" | undefined) => react_jsx_runtime.JSX.Element;
+    handleClick: (e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>) => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { TableHeaderCell as T };

package/dist/TableHeaderCell-DsJpGb2j.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { a as TypeTableHeaderCellProps } from './TableHeaderCellTypes-CsJQBwu2.mjs';
+
+declare class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {
+    static displayName: string;
+    getSortIcon: (isSorted: boolean, ariaSortDirection: "ascending" | "descending" | undefined) => react_jsx_runtime.JSX.Element;
+    handleClick: (e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>) => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { TableHeaderCell as T };

package/dist/TableHeaderCellTypes-CH_zzW6X.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { T as TypeTableCellProps } from './TableCellTypes-Cp-8r7l1.js';
+
+declare const SORT_DIRECTIONS: {
+    readonly ASC: "ASC";
+    readonly DESC: "DESC";
+};
+
+type TypeEnumSortDirections = keyof typeof SORT_DIRECTIONS;
+interface TypeTableHeaderCellProps extends Omit<TypeTableCellProps, "onClick"> {
+    /** Legacy Deteremines if a table column is sortable (optional) */
+    isSortable?: boolean;
+    /** Truncates text into a singular line with ellipsis (optional) */
+    shouldTruncate?: boolean;
+    /** Legacy: Callback for Sorting Table Columns (optional) */
+    onSort?: (id: string) => void;
+    /** Legacy: Controls which column is being sorted (optional) */
+    sortId?: string;
+    /** Legacy: Controls the current sort direction (optional) */
+    sortDirection?: TypeEnumSortDirections;
+    /** Callback for Click Events. If Included will override onSort prop */
+    onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+}
+
+export { SORT_DIRECTIONS as S, type TypeEnumSortDirections as T, type TypeTableHeaderCellProps as a };

package/dist/TableHeaderCellTypes-CsJQBwu2.d.mts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { T as TypeTableCellProps } from './TableCellTypes-Cp-8r7l1.mjs';
+
+declare const SORT_DIRECTIONS: {
+    readonly ASC: "ASC";
+    readonly DESC: "DESC";
+};
+
+type TypeEnumSortDirections = keyof typeof SORT_DIRECTIONS;
+interface TypeTableHeaderCellProps extends Omit<TypeTableCellProps, "onClick"> {
+    /** Legacy Deteremines if a table column is sortable (optional) */
+    isSortable?: boolean;
+    /** Truncates text into a singular line with ellipsis (optional) */
+    shouldTruncate?: boolean;
+    /** Legacy: Callback for Sorting Table Columns (optional) */
+    onSort?: (id: string) => void;
+    /** Legacy: Controls which column is being sorted (optional) */
+    sortId?: string;
+    /** Legacy: Controls the current sort direction (optional) */
+    sortDirection?: TypeEnumSortDirections;
+    /** Callback for Click Events. If Included will override onSort prop */
+    onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+}
+
+export { SORT_DIRECTIONS as S, type TypeEnumSortDirections as T, type TypeTableHeaderCellProps as a };

package/dist/TableTypes-Dg7QrcGt.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { a as TypeTableHeaderCellProps, T as TypeEnumSortDirections } from './TableHeaderCellTypes-CH_zzW6X.js';
+import { T as TypeTableCellProps } from './TableCellTypes-Cp-8r7l1.js';
+import { TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypePassthroughProps {
+    children: React.ReactNode;
+}
+interface TypeTableRow {
+    /** Table Row Id */
+    id: string;
+    /** Array for TableCells to render */
+    cells: TypeTableCellProps[];
+}
+interface TypeTableHeadProp extends Omit<TypeTableHeaderCellProps, "onSort" | "sortId" | "sortDirection"> {
+}
+interface TypeTableProps extends TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"table">, keyof TypeSystemCommonProps> {
+    /** Array of TableHeaderCells to render */
+    head?: TypeTableHeadProp[];
+    /** Array of TableRows to render */
+    rows?: TypeTableRow[];
+    /** Callback for Sorting Table Columns (optional) */
+    onSort?: (id: string) => void;
+    /** Controls which column is being sorted (optional) */
+    sortId?: string;
+    /** Controls the current sort direction (optional) */
+    sortDirection?: TypeEnumSortDirections;
+    /** Custom row render for flexibilty */
+    rowRender?: (row: TypeTableRow) => React.ReactNode;
+    /**
+     * Including children will overwrite all head, rows, rowRender, and sorting props
+     * Should be used for manually rendering tables and ignoring data props
+     */
+    children?: React.ReactNode;
+}
+
+export type { TypeTableProps as T, TypePassthroughProps as a, TypeTableRow as b, TypeTableHeadProp as c };

package/dist/TableTypes-jS0O3bwQ.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { a as TypeTableHeaderCellProps, T as TypeEnumSortDirections } from './TableHeaderCellTypes-CsJQBwu2.mjs';
+import { T as TypeTableCellProps } from './TableCellTypes-Cp-8r7l1.mjs';
+import { TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypePassthroughProps {
+    children: React.ReactNode;
+}
+interface TypeTableRow {
+    /** Table Row Id */
+    id: string;
+    /** Array for TableCells to render */
+    cells: TypeTableCellProps[];
+}
+interface TypeTableHeadProp extends Omit<TypeTableHeaderCellProps, "onSort" | "sortId" | "sortDirection"> {
+}
+interface TypeTableProps extends TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"table">, keyof TypeSystemCommonProps> {
+    /** Array of TableHeaderCells to render */
+    head?: TypeTableHeadProp[];
+    /** Array of TableRows to render */
+    rows?: TypeTableRow[];
+    /** Callback for Sorting Table Columns (optional) */
+    onSort?: (id: string) => void;
+    /** Controls which column is being sorted (optional) */
+    sortId?: string;
+    /** Controls the current sort direction (optional) */
+    sortDirection?: TypeEnumSortDirections;
+    /** Custom row render for flexibilty */
+    rowRender?: (row: TypeTableRow) => React.ReactNode;
+    /**
+     * Including children will overwrite all head, rows, rowRender, and sorting props
+     * Should be used for manually rendering tables and ignoring data props
+     */
+    children?: React.ReactNode;
+}
+
+export type { TypeTableProps as T, TypePassthroughProps as a, TypeTableRow as b, TypeTableHeadProp as c };

package/dist/esm/chunk-67DCEN4G.js

@@ -0,0 +1,140 @@
+// src/TableHeaderCell/TableHeaderCell.tsx
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/TableHeaderCell/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var Container = styled.th`
+  ${(props) => props.theme.typography[100]}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: ${(props) => props.alignment};
+
+  ${(props) => props.sortable && css`
+      position: relative;
+      cursor: pointer;
+    `}
+
+  ${COMMON}
+`;
+var SortIcon = styled.span`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0;
+  padding: 0 ${(props) => props.theme.space[200]};
+`;
+var UnstyledButton = styled.button`
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  padding: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+`;
+var styles_default = Container;
+
+// src/TableHeaderCell/constants.ts
+var SORT_DIRECTIONS = {
+  ASC: "ASC",
+  DESC: "DESC"
+};
+
+// src/TableHeaderCell/TableHeaderCell.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+var TableHeaderCell = class extends React.Component {
+  static displayName;
+  getSortIcon = (isSorted, ariaSortDirection) => {
+    const { sortDirection } = this.props;
+    let iconName = "caret-up-down-outline";
+    if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
+      iconName = "caret-up-solid";
+    } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
+      iconName = "caret-down-solid";
+    }
+    return /* @__PURE__ */ jsx(SortIcon, { children: /* @__PURE__ */ jsx(Icon, { size: "mini", name: iconName, "aria-label": ariaSortDirection }) });
+  };
+  // @ts-note: If this is set to an HTMLButtonElement event, then the `Container` freaks out
+  handleClick = (e) => {
+    const { onClick, onSort, isSortable, id } = this.props;
+    if (onClick || isSortable) {
+      e.preventDefault();
+    }
+    if (onClick) {
+      onClick(e);
+      return;
+    }
+    if (!isSortable || !onSort)
+      return;
+    onSort(id);
+  };
+  render() {
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      isSortable,
+      sortId,
+      sortDirection,
+      children,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      shouldTruncate,
+      onSort,
+      onClick,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      color,
+      ...rest
+    } = this.props;
+    const isSorted = sortId === id;
+    const ariaSort = isSorted ? sortDirection === SORT_DIRECTIONS.ASC ? "ascending" : "descending" : void 0;
+    const buttonProps = isSortable ? {
+      role: "button",
+      onClick: this.handleClick
+    } : {};
+    const scope = colSpan ? "colgroup" : "col";
+    return /* @__PURE__ */ createElement(
+      styles_default,
+      {
+        ...rest,
+        key: id,
+        alignment: align || "left",
+        sortable: isSortable,
+        colSpan,
+        scope,
+        width,
+        onClick: this.handleClick,
+        "data-tableheadercell-sortable": isSortable,
+        "data-qa-table-header-cell": "",
+        "data-qa-table-header-cell-sortdirection": sortDirection,
+        color,
+        "aria-sort": ariaSort
+      },
+      isSortable ? /* @__PURE__ */ jsx(UnstyledButton, { ...buttonProps, children: /* @__PURE__ */ jsxs("div", { "aria-live": "polite", role: "status", children: [
+        children || content,
+        !children && this.getSortIcon(id === sortId, ariaSort)
+      ] }) }) : children || content
+    );
+  }
+};
+var TableHeaderCell_default = TableHeaderCell;
+
+// src/TableHeaderCell/TableHeaderCellTypes.ts
+import "react";
+
+// src/TableHeaderCell/index.ts
+var TableHeaderCell_default2 = TableHeaderCell_default;
+
+export {
+  SORT_DIRECTIONS,
+  TableHeaderCell_default,
+  TableHeaderCell_default2
+};
+//# sourceMappingURL=chunk-67DCEN4G.js.map

package/dist/esm/chunk-67DCEN4G.js.map

@@ -0,0 +1 @@
+{"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;AAAQ;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

@@ -0,0 +1,62 @@
+// src/TableCell/TableCell.tsx
+import * as React from "react";
+
+// src/TableCell/styles.ts
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var Container = styled.td`
+  ${(props) => props.theme.typography[200]}
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: ${(props) => props.alignment};
+
+  ${COMMON}
+`;
+var styles_default = Container;
+
+// src/TableCell/TableCell.tsx
+import { createElement } from "react";
+var TableCell = class extends React.Component {
+  static displayName;
+  render() {
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      scope,
+      children,
+      color,
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ createElement(
+      styles_default,
+      {
+        ...rest,
+        as: scope ? "th" : "td",
+        scope: scope ? scope : void 0,
+        alignment: align || "left",
+        key: id,
+        colSpan,
+        width,
+        "data-qa-table-cell": "",
+        color
+      },
+      children || content
+    );
+  }
+};
+var TableCell_default = TableCell;
+
+// src/TableCell/TableCellTypes.ts
+import "react";
+
+// src/TableCell/index.ts
+var TableCell_default2 = TableCell_default;
+
+export {
+  TableCell_default,
+  TableCell_default2
+};
+//# sourceMappingURL=chunk-XJMS6762.js.map

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

@@ -0,0 +1 @@
+{"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/index.js

@@ -0,0 +1,106 @@
+import {
+  TableHeaderCell_default2 as TableHeaderCell_default
+} from "./chunk-67DCEN4G.js";
+import {
+  TableCell_default2 as TableCell_default
+} from "./chunk-XJMS6762.js";
+
+// src/Table.tsx
+import "react";
+
+// src/styles.ts
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var Container = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    vertical-align: bottom;
+  }
+
+  tr,
+  thead {
+    border-bottom: 1px solid
+      ${(props) => props.theme.colors.container.border.base};
+  }
+
+  ${COMMON}
+`;
+var styles_default = Container;
+
+// src/Table.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+var renderTableRow = (row) => {
+  return /* @__PURE__ */ jsx("tbody", { "data-qa-table-row": "", children: /* @__PURE__ */ jsx("tr", { children: row.cells.map((td) => {
+    return /* @__PURE__ */ createElement(TableCell_default, { ...td, key: td.id });
+  }) }) }, row.id);
+};
+var Table = ({
+  head = [],
+  rows = [],
+  onSort,
+  sortId,
+  sortDirection,
+  rowRender,
+  children,
+  color,
+  ...rest
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsx(styles_default, { ...rest, "data-qa-table": "", children });
+  }
+  return /* @__PURE__ */ jsxs(
+    styles_default,
+    {
+      ...rest,
+      "data-qa-table": "",
+      color,
+      children: [
+        /* @__PURE__ */ jsx("colgroup", { children: head.map(({ id, colSpan = 1 }) => /* @__PURE__ */ jsx("col", { span: colSpan }, id)) }),
+        head.length > 0 && /* @__PURE__ */ jsx("thead", { "data-qa-table-header": "", children: /* @__PURE__ */ jsx("tr", { children: head.map(({ color: color2, ...th }) => {
+          return /* @__PURE__ */ createElement(
+            TableHeaderCell_default,
+            {
+              ...th,
+              key: th.id,
+              onSort,
+              sortId,
+              sortDirection,
+              color: color2
+            }
+          );
+        }) }) }),
+        rows.map((row) => {
+          return rowRender ? rowRender(row) : renderTableRow(row);
+        })
+      ]
+    }
+  );
+};
+var TableHead = ({ children, ...props }) => /* @__PURE__ */ jsx("thead", { ...props, children });
+var TableBody = ({ children, ...props }) => /* @__PURE__ */ jsx("tbody", { ...props, children });
+var TableRow = ({ children, ...props }) => /* @__PURE__ */ jsx("tr", { ...props, children });
+TableHead.displayName = "Table.TableHead";
+TableBody.displayName = "Table.TableBody";
+TableRow.displayName = "Table.TableRow";
+TableHeaderCell_default.displayName = "Table.HeaderCell";
+TableCell_default.displayName = "Table.Cell";
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = TableHeaderCell_default;
+Table.Cell = TableCell_default;
+var Table_default = Table;
+
+// src/TableTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Table_default;
+export {
+  Table_default as Table,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map