@sproutsocial/seeds-react-table 1.0.3 → 1.0.4

package/dist/v1/index.js

@@ -0,0 +1,323 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v1/index.ts
+var v1_exports = {};
+__export(v1_exports, {
+  Table: () => Table_default,
+  default: () => v1_default
+});
+module.exports = __toCommonJS(v1_exports);
+
+// src/v1/Table.tsx
+var React5 = require("react");
+
+// src/v1/TableCell/TableCell.tsx
+var React = __toESM(require("react"));
+
+// src/v1/TableCell/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var Container = import_styled_components.default.td`
+  ${(props) => props.theme.typography[200]}
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  padding: ${(props) => props.theme.space[300]};
+  text-align: ${(props) => props.alignment};
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var styles_default = Container;
+
+// src/v1/TableCell/TableCell.tsx
+var import_react = require("react");
+var TableCell = class extends React.Component {
+  static displayName;
+  render() {
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      scope,
+      children,
+      color,
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ (0, import_react.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/v1/TableCell/TableCellTypes.ts
+var React2 = require("react");
+
+// src/v1/TableCell/index.ts
+var TableCell_default2 = TableCell_default;
+
+// src/v1/TableHeaderCell/TableHeaderCell.tsx
+var React3 = __toESM(require("react"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+
+// src/v1/TableHeaderCell/styles.ts
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var Container2 = import_styled_components2.default.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 && import_styled_components2.css`
+      position: relative;
+      cursor: pointer;
+    `}
+
+  ${import_seeds_react_system_props2.COMMON}
+`;
+var SortIcon = import_styled_components2.default.span`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0;
+  padding: 0 ${(props) => props.theme.space[200]};
+`;
+var UnstyledButton = import_styled_components2.default.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_default2 = Container2;
+
+// src/v1/TableHeaderCell/constants.ts
+var SORT_DIRECTIONS = {
+  ASC: "ASC",
+  DESC: "DESC"
+};
+
+// src/v1/TableHeaderCell/TableHeaderCell.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("react");
+var TableHeaderCell = class extends React3.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__ */ (0, import_jsx_runtime.jsx)(SortIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { 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__ */ (0, import_react2.createElement)(
+      styles_default2,
+      {
+        ...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__ */ (0, import_jsx_runtime.jsx)(UnstyledButton, { ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-live": "polite", role: "status", children: [
+        children || content,
+        !children && this.getSortIcon(id === sortId, ariaSort)
+      ] }) }) : children || content
+    );
+  }
+};
+var TableHeaderCell_default = TableHeaderCell;
+
+// src/v1/TableHeaderCell/TableHeaderCellTypes.ts
+var React4 = require("react");
+
+// src/v1/TableHeaderCell/index.ts
+var TableHeaderCell_default2 = TableHeaderCell_default;
+
+// src/v1/styles.ts
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
+var Container3 = import_styled_components3.default.table`
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    vertical-align: bottom;
+  }
+
+  tr,
+  thead {
+    border-bottom: 1px solid
+      ${(props) => props.theme.colors.container.border.base};
+  }
+
+  ${import_seeds_react_system_props3.COMMON}
+`;
+var styles_default3 = Container3;
+
+// src/v1/Table.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var renderTableRow = (row) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { "data-qa-table-row": "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: row.cells.map((td) => {
+    return /* @__PURE__ */ (0, import_react3.createElement)(TableCell_default2, { ...td, key: td.id });
+  }) }) }, row.id);
+};
+var Table = ({
+  head = [],
+  rows = [],
+  onSort,
+  sortId,
+  sortDirection,
+  rowRender,
+  children,
+  color,
+  ...rest
+}) => {
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default3, { ...rest, "data-qa-table": "", children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    styles_default3,
+    {
+      ...rest,
+      "data-qa-table": "",
+      color,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("colgroup", { children: head.map(({ id, colSpan = 1 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("col", { span: colSpan }, id)) }),
+        head.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { "data-qa-table-header": "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: head.map(({ color: color2, ...th }) => {
+          return /* @__PURE__ */ (0, import_react3.createElement)(
+            TableHeaderCell_default2,
+            {
+              ...th,
+              key: th.id,
+              onSort,
+              sortId,
+              sortDirection,
+              color: color2
+            }
+          );
+        }) }) }),
+        rows.map((row) => {
+          return rowRender ? rowRender(row) : renderTableRow(row);
+        })
+      ]
+    }
+  );
+};
+var TableHead = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...props, children });
+var TableBody = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { ...props, children });
+var TableRow = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { ...props, children });
+TableHead.displayName = "Table.TableHead";
+TableBody.displayName = "Table.TableBody";
+TableRow.displayName = "Table.TableRow";
+TableHeaderCell_default2.displayName = "Table.HeaderCell";
+TableCell_default2.displayName = "Table.Cell";
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = TableHeaderCell_default2;
+Table.Cell = TableCell_default2;
+var Table_default = Table;
+
+// src/v1/index.ts
+var v1_default = Table_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table
+});
+//# sourceMappingURL=index.js.map

package/dist/v1/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/v1/index.ts","../../src/v1/Table.tsx","../../src/v1/TableCell/TableCell.tsx","../../src/v1/TableCell/styles.ts","../../src/v1/TableCell/TableCellTypes.ts","../../src/v1/TableCell/index.ts","../../src/v1/TableHeaderCell/TableHeaderCell.tsx","../../src/v1/TableHeaderCell/styles.ts","../../src/v1/TableHeaderCell/constants.ts","../../src/v1/TableHeaderCell/TableHeaderCellTypes.ts","../../src/v1/TableHeaderCell/index.ts","../../src/v1/styles.ts"],"sourcesContent":["// V1 Table - Explicit exports for optimal tree shaking\nimport Table from \"./Table\";\n\nexport default Table;\nexport { Table };\n\n// Explicit type exports\nexport type {\n  TypeTableProps,\n  TypeTableRow,\n  TypeTableHeadProp,\n  TypePassthroughProps,\n} from \"./TableTypes\";\n","import * as React from \"react\";\nimport TableCell from \"./TableCell\";\nimport TableHeaderCell from \"./TableHeaderCell\";\nimport Container from \"./styles\";\nimport type {\n  TypePassthroughProps,\n  TypeTableProps,\n  TypeTableRow,\n} from \"./TableTypes\";\n\nconst renderTableRow = (row: TypeTableRow) => {\n  return (\n    <tbody key={row.id} data-qa-table-row=\"\">\n      <tr>\n        {row.cells.map((td) => {\n          return <TableCell {...td} key={td.id} />;\n        })}\n      </tr>\n    </tbody>\n  );\n};\n\n/**\n * The table component assist in rendering tabular data.\n */\nexport const Table = ({\n  head = [],\n  rows = [],\n  onSort,\n  sortId,\n  sortDirection,\n  rowRender,\n  children,\n  color,\n  ...rest\n}: TypeTableProps) => {\n  if (children) {\n    return (\n      <Container {...rest} data-qa-table=\"\">\n        {children}\n      </Container>\n    );\n  }\n\n  return (\n    <Container\n      {...rest}\n      data-qa-table=\"\"\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      <colgroup>\n        {head.map(({ id, colSpan = 1 }) => (\n          <col key={id} span={colSpan} />\n        ))}\n      </colgroup>\n      {head.length > 0 && (\n        <thead data-qa-table-header=\"\">\n          <tr>\n            {head.map(({ color, ...th }) => {\n              return (\n                <TableHeaderCell\n                  {...th}\n                  key={th.id}\n                  onSort={onSort}\n                  sortId={sortId}\n                  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                />\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n      {rows.map((row) => {\n        return rowRender ? rowRender(row) : renderTableRow(row);\n      })}\n    </Container>\n  );\n};\n\nexport const TableHead = ({ children, ...props }: TypePassthroughProps) => (\n  <thead {...props}>{children}</thead>\n);\n\nexport const TableBody = ({ children, ...props }: TypePassthroughProps) => (\n  <tbody {...props}>{children}</tbody>\n);\n\nexport const TableRow = ({ children, ...props }: TypePassthroughProps) => (\n  <tr {...props}>{children}</tr>\n);\n\nTableHead.displayName = \"Table.TableHead\";\nTableBody.displayName = \"Table.TableBody\";\nTableRow.displayName = \"Table.TableRow\";\nTableHeaderCell.displayName = \"Table.HeaderCell\";\nTableCell.displayName = \"Table.Cell\";\n\nTable.TableHead = TableHead;\nTable.TableBody = TableBody;\nTable.TableRow = TableRow;\nTable.HeaderCell = TableHeaderCell;\nTable.Cell = TableCell;\n\nexport default Table;\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 * 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","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.table`\n  width: 100%;\n  border-collapse: collapse;\n\n  thead {\n    vertical-align: bottom;\n  }\n\n  tr,\n  thead {\n    border-bottom: 1px solid\n      ${(props) => props.theme.colors.container.border.base};\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n"],"mappings":"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","names":["React","styled","React","TableCell_default","React","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_react","Icon","styles_default","React","TableHeaderCell_default","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_jsx_runtime","import_react","TableCell_default","styles_default","color","TableHeaderCell_default"]}

package/dist/v2/index.d.mts

@@ -0,0 +1,42 @@
+import * as styled_components from 'styled-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+
+type ColumnHeader = string | React.ReactNode;
+type RowData = Array<string | React.ReactNode>;
+interface TableV2Props {
+    caption: string;
+    displayCaption?: boolean;
+    columns: ColumnHeader[];
+    data: RowData[];
+}
+
+declare const useTableContainerId: () => string | null;
+declare const TableWrapper: ({ children, ...rest }: {
+    children: React__default.ReactElement;
+}) => react_jsx_runtime.JSX.Element;
+declare const TableV2: ({ caption, displayCaption, columns, data, }: TableV2Props) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ caption, displayCaption, columns, data, }: TableV2Props) => react_jsx_runtime.JSX.Element;
+declare const TableRoot: styled_components.StyledComponent<"table", any, {}, never>;
+declare const TableCaption: styled_components.StyledComponent<"caption", any, {
+    isVisible: boolean;
+}, never>;
+declare const TableHeader: styled_components.StyledComponent<"thead", any, {}, never>;
+declare const TableBody: styled_components.StyledComponent<"tbody", any, {}, never>;
+declare const TableRow: styled_components.StyledComponent<"tr", any, {}, never>;
+declare const TableHeaderCell: styled_components.StyledComponent<"th", any, {}, never>;
+declare const TableCell: styled_components.StyledComponent<"td", any, {}, never>;
+
+declare const StyledTableV2Container: styled_components.StyledComponent<"div", any, {}, never>;
+declare const StyledTableV2: styled_components.StyledComponent<"table", any, {}, never>;
+declare const StyledCaption: styled_components.StyledComponent<"caption", any, {
+    isVisible: boolean;
+}, never>;
+declare const StyledTableHeader: styled_components.StyledComponent<"thead", any, {}, never>;
+declare const StyledTableBody: styled_components.StyledComponent<"tbody", any, {}, never>;
+declare const StyledTableRow: styled_components.StyledComponent<"tr", any, {}, never>;
+declare const StyledTableHeaderCell: styled_components.StyledComponent<"th", any, {}, never>;
+declare const StyledTableCell: styled_components.StyledComponent<"td", any, {}, never>;
+
+export { type ColumnHeader, type RowData, StyledCaption, StyledTableBody, StyledTableCell, StyledTableHeader, StyledTableHeaderCell, StyledTableRow, StyledTableV2, StyledTableV2Container, Table, TableBody, TableCaption, TableCell, TableHeader, TableHeaderCell, TableRoot, TableRow, TableV2, type TableV2Props, TableWrapper, useTableContainerId };

package/dist/v2/index.d.ts

@@ -0,0 +1,42 @@
+import * as styled_components from 'styled-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+
+type ColumnHeader = string | React.ReactNode;
+type RowData = Array<string | React.ReactNode>;
+interface TableV2Props {
+    caption: string;
+    displayCaption?: boolean;
+    columns: ColumnHeader[];
+    data: RowData[];
+}
+
+declare const useTableContainerId: () => string | null;
+declare const TableWrapper: ({ children, ...rest }: {
+    children: React__default.ReactElement;
+}) => react_jsx_runtime.JSX.Element;
+declare const TableV2: ({ caption, displayCaption, columns, data, }: TableV2Props) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ caption, displayCaption, columns, data, }: TableV2Props) => react_jsx_runtime.JSX.Element;
+declare const TableRoot: styled_components.StyledComponent<"table", any, {}, never>;
+declare const TableCaption: styled_components.StyledComponent<"caption", any, {
+    isVisible: boolean;
+}, never>;
+declare const TableHeader: styled_components.StyledComponent<"thead", any, {}, never>;
+declare const TableBody: styled_components.StyledComponent<"tbody", any, {}, never>;
+declare const TableRow: styled_components.StyledComponent<"tr", any, {}, never>;
+declare const TableHeaderCell: styled_components.StyledComponent<"th", any, {}, never>;
+declare const TableCell: styled_components.StyledComponent<"td", any, {}, never>;
+
+declare const StyledTableV2Container: styled_components.StyledComponent<"div", any, {}, never>;
+declare const StyledTableV2: styled_components.StyledComponent<"table", any, {}, never>;
+declare const StyledCaption: styled_components.StyledComponent<"caption", any, {
+    isVisible: boolean;
+}, never>;
+declare const StyledTableHeader: styled_components.StyledComponent<"thead", any, {}, never>;
+declare const StyledTableBody: styled_components.StyledComponent<"tbody", any, {}, never>;
+declare const StyledTableRow: styled_components.StyledComponent<"tr", any, {}, never>;
+declare const StyledTableHeaderCell: styled_components.StyledComponent<"th", any, {}, never>;
+declare const StyledTableCell: styled_components.StyledComponent<"td", any, {}, never>;
+
+export { type ColumnHeader, type RowData, StyledCaption, StyledTableBody, StyledTableCell, StyledTableHeader, StyledTableHeaderCell, StyledTableRow, StyledTableV2, StyledTableV2Container, Table, TableBody, TableCaption, TableCell, TableHeader, TableHeaderCell, TableRoot, TableRow, TableV2, type TableV2Props, TableWrapper, useTableContainerId };

package/dist/v2/index.js

@@ -0,0 +1,189 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/index.ts
+var v2_exports = {};
+__export(v2_exports, {
+  StyledCaption: () => StyledCaption,
+  StyledTableBody: () => StyledTableBody,
+  StyledTableCell: () => StyledTableCell,
+  StyledTableHeader: () => StyledTableHeader,
+  StyledTableHeaderCell: () => StyledTableHeaderCell,
+  StyledTableRow: () => StyledTableRow,
+  StyledTableV2: () => StyledTableV2,
+  StyledTableV2Container: () => StyledTableV2Container,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableHeader: () => TableHeader,
+  TableHeaderCell: () => TableHeaderCell,
+  TableRoot: () => TableRoot,
+  TableRow: () => TableRow,
+  TableV2: () => TableV2_default,
+  TableWrapper: () => TableWrapper,
+  useTableContainerId: () => useTableContainerId
+});
+module.exports = __toCommonJS(v2_exports);
+
+// src/v2/TableV2.tsx
+var import_react = __toESM(require("react"));
+
+// src/v2/TableV2Types.ts
+var React = require("react");
+
+// src/v2/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var StyledTableV2Container = import_styled_components.default.div`
+  ${import_seeds_react_system_props.COMMON}
+  ${import_seeds_react_system_props.LAYOUT}
+  overflow-x: auto;
+  max-width: 100%;
+`;
+var StyledTableV2 = import_styled_components.default.table`
+  width: 100%;
+  border-collapse: collapse;
+  color: ${(props) => props.theme.colors.text.body};
+  font-family: ${(props) => props.theme.fontFamily};
+`;
+StyledTableV2.displayName = "TableV2.Table";
+var StyledCaption = import_styled_components.default.caption`
+  ${import_seeds_react_system_props.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 && import_styled_components.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";
+var StyledTableHeader = import_styled_components.default.thead`
+  vertical-align: bottom;
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
+`;
+StyledTableHeader.displayName = "TableV2.TableHeader";
+var StyledTableBody = import_styled_components.default.tbody``;
+StyledTableBody.displayName = "TableV2.TableBody";
+var StyledTableRow = import_styled_components.default.tr`
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
+`;
+StyledTableRow.displayName = "TableV2.TableRow";
+var StyledTableHeaderCell = import_styled_components.default.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";
+var StyledTableCell = import_styled_components.default.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";
+
+// src/v2/TableV2.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TableContainerContext = import_react.default.createContext(null);
+var useTableContainerId = () => import_react.default.useContext(TableContainerContext);
+var TableWrapper = ({
+  children,
+  ...rest
+}) => {
+  const containerId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableContainerContext.Provider, { value: containerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledTableV2Container,
+    {
+      role: "region",
+      tabIndex: 0,
+      id: containerId,
+      "aria-labelledby": containerId,
+      ...rest,
+      children
+    }
+  ) });
+};
+var TableV2 = ({
+  caption,
+  displayCaption = true,
+  columns,
+  data
+}) => {
+  const containerId = useTableContainerId();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTableV2, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCaption, { id: containerId ?? void 0, isVisible: displayCaption, children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableRow, { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableHeaderCell, { scope: "col", children: column }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableCell, { children: cell }, cellIndex)) }, rowIndex)) })
+  ] }) });
+};
+var Table = TableV2;
+var TableRoot = StyledTableV2;
+var TableCaption = StyledCaption;
+var TableHeader = StyledTableHeader;
+var TableBody = StyledTableBody;
+var TableRow = StyledTableRow;
+var TableHeaderCell = StyledTableHeaderCell;
+var TableCell = StyledTableCell;
+var TableV2_default = TableV2;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyledCaption,
+  StyledTableBody,
+  StyledTableCell,
+  StyledTableHeader,
+  StyledTableHeaderCell,
+  StyledTableRow,
+  StyledTableV2,
+  StyledTableV2Container,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRoot,
+  TableRow,
+  TableV2,
+  TableWrapper,
+  useTableContainerId
+});
+//# sourceMappingURL=index.js.map

package/dist/v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/v2/index.ts","../../src/v2/TableV2.tsx","../../src/v2/TableV2Types.ts","../../src/v2/styles.ts"],"sourcesContent":["// V2 Table - Explicit flat exports for optimal tree shaking\nexport {\n  Table,\n  TableRoot,\n  TableWrapper,\n  TableCaption,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHeaderCell,\n  TableCell,\n  useTableContainerId,\n  default as TableV2,\n} from \"./TableV2\";\n\n// Explicit type exports\nexport type { TableV2Props, ColumnHeader, RowData } from \"./TableV2Types\";\n\n// Explicit style exports\nexport * from \"./styles\";\n","import React, { useId } from \"react\";\nimport { type TableV2Props } from \"./TableV2Types\";\nimport {\n  StyledTableV2Container,\n  StyledTableV2,\n  StyledCaption,\n  StyledTableHeader,\n  StyledTableBody,\n  StyledTableRow,\n  StyledTableHeaderCell,\n  StyledTableCell,\n} from \"./styles\";\n\nconst TableContainerContext = React.createContext<string | null>(null);\n\nexport const useTableContainerId = () =>\n  React.useContext(TableContainerContext);\n\nexport const TableWrapper = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactElement;\n}) => {\n  const containerId = useId();\n  return (\n    <TableContainerContext.Provider value={containerId}>\n      <StyledTableV2Container\n        role=\"region\"\n        tabIndex={0}\n        id={containerId}\n        aria-labelledby={containerId}\n        {...rest}\n      >\n        {children}\n      </StyledTableV2Container>\n    </TableContainerContext.Provider>\n  );\n};\n\nconst TableV2 = ({\n  caption,\n  displayCaption = true,\n  columns,\n  data,\n}: TableV2Props) => {\n  const containerId = useTableContainerId();\n\n  return (\n    <TableWrapper>\n      <StyledTableV2>\n        <StyledCaption id={containerId ?? undefined} isVisible={displayCaption}>\n          {caption}\n        </StyledCaption>\n        <StyledTableHeader>\n          <StyledTableRow>\n            {columns.map((column, index) => (\n              <StyledTableHeaderCell key={index} scope=\"col\">\n                {column}\n              </StyledTableHeaderCell>\n            ))}\n          </StyledTableRow>\n        </StyledTableHeader>\n        <StyledTableBody>\n          {data.map((row, rowIndex) => (\n            <StyledTableRow key={rowIndex}>\n              {row.map((cell, cellIndex) => (\n                <StyledTableCell key={cellIndex}>{cell}</StyledTableCell>\n              ))}\n            </StyledTableRow>\n          ))}\n        </StyledTableBody>\n      </StyledTableV2>\n    </TableWrapper>\n  );\n};\n\n// Export the full Table component as Table (main export)\nexport const Table = TableV2;\n\n// Export styled components for compound component usage\nexport const TableRoot = StyledTableV2;\nexport const TableCaption = StyledCaption;\nexport const TableHeader = StyledTableHeader;\nexport const TableBody = StyledTableBody;\nexport const TableRow = StyledTableRow;\nexport const TableHeaderCell = StyledTableHeaderCell;\nexport const TableCell = StyledTableCell;\n\n// Default export\nexport default TableV2;\n","import * as React from \"react\";\n\nexport type ColumnHeader = string | React.ReactNode;\n\nexport type RowData = Array<string | React.ReactNode>;\n\nexport interface TableV2Props {\n  caption: string;\n  displayCaption?: boolean;\n  columns: ColumnHeader[];\n  data: RowData[];\n}\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledTableV2Container = styled.div`\n  ${COMMON}\n  ${LAYOUT}\n  overflow-x: auto;\n  max-width: 100%;\n`;\n\nexport const StyledTableV2 = styled.table`\n  width: 100%;\n  border-collapse: collapse;\n  color: ${(props) => props.theme.colors.text.body};\n  font-family: ${(props) => props.theme.fontFamily};\n`;\n\nStyledTableV2.displayName = \"TableV2.Table\";\n\nexport const StyledCaption = styled.caption<{ isVisible: boolean }>`\n  ${TYPOGRAPHY}\n  text-align: left;\n  ${(props) => props.theme.typography[400]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  margin-top: ${(props) => props.theme.space[200]};\n  ${({ isVisible }) =>\n    !isVisible &&\n    css`\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      border: 0;\n    `}\n`;\n\nStyledCaption.displayName = \"TableV2.Caption\";\n\nexport const StyledTableHeader = styled.thead`\n  vertical-align: bottom;\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n`;\n\nStyledTableHeader.displayName = \"TableV2.TableHeader\";\n\nexport const StyledTableBody = styled.tbody``;\n\nStyledTableBody.displayName = \"TableV2.TableBody\";\n\nexport const StyledTableRow = styled.tr`\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n`;\n\nStyledTableRow.displayName = \"TableV2.TableRow\";\n\nexport const StyledTableHeaderCell = styled.th`\n  ${(props) => props.theme.typography[100]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: left;\n`;\n\nStyledTableHeaderCell.displayName = \"TableV2.TableHeaderCell\";\n\nexport const StyledTableCell = styled.td`\n  ${(props) => props.theme.typography[200]}\n  font-weight: ${(props) => props.theme.fontWeights.normal};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: left;\n`;\n\nStyledTableCell.displayName = \"TableV2.TableCell\";\n"],"mappings":"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","names":["styled","React"]}