@stratakit/structures/dist/DEV/Table.js

Medium-sized component structures for the Strata design system

import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { Role } from "@ariakit/react/role";
import {
  forwardRef,
  useMergedRefs,
  useSafeContext
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
const TableContext = React.createContext(void 0);
const TableHeaderContext = React.createContext(false);
const HtmlTable = forwardRef((props, forwardedRef) => {
  const tableContextValue = React.useMemo(
    () => ({ mode: "html" }),
    []
  );
  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
    Role,
    {
      render: /* @__PURE__ */ jsx("table", {}),
      ...props,
      ref: forwardedRef,
      className: cx("\u{1F95D}-table", props.className)
    }
  ) });
});
DEV: HtmlTable.displayName = "Table.HtmlTable";
const CustomTable = forwardRef(
  (props, forwardedRef) => {
    const [captionId, setCaptionId] = React.useState();
    const tableContextValue = React.useMemo(
      () => ({ captionId, setCaptionId, mode: "aria" }),
      [captionId]
    );
    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
      Role.div,
      {
        role: "table",
        "aria-labelledby": captionId,
        ...props,
        ref: forwardedRef,
        className: cx("\u{1F95D}-table", props.className)
      }
    ) });
  }
);
DEV: CustomTable.displayName = "Table.CustomTable";
const TableHeader = forwardRef(
  (props, forwardedRef) => {
    const { mode } = useSafeContext(TableContext);
    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
    const role = mode === "aria" ? "rowgroup" : void 0;
    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
      Role.div,
      {
        render,
        role,
        ...props,
        ref: forwardedRef,
        className: cx("\u{1F95D}-table-header", props.className)
      }
    ) });
  }
);
DEV: TableHeader.displayName = "Table.Header";
const TableBody = forwardRef((props, forwardedRef) => {
  const { mode } = useSafeContext(TableContext);
  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
  return /* @__PURE__ */ jsx(
    Role.div,
    {
      render,
      role: void 0,
      ...props,
      ref: forwardedRef,
      className: cx("\u{1F95D}-table-body", props.className)
    }
  );
});
DEV: TableBody.displayName = "Table.Body";
const TableRow = forwardRef((props, forwardedRef) => {
  const { mode } = useSafeContext(TableContext);
  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
  const role = mode === "aria" ? "row" : void 0;
  return /* @__PURE__ */ jsx(
    Role.div,
    {
      render,
      role,
      ...props,
      ref: forwardedRef,
      className: cx("\u{1F95D}-table-row", props.className)
    }
  );
});
DEV: TableRow.displayName = "Table.Row";
const TableCaption = forwardRef(
  (props, forwardedRef) => {
    const fallbackId = React.useId();
    const { id = fallbackId, ...rest } = props;
    const { mode, setCaptionId } = useSafeContext(TableContext);
    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
    const captionIdRef = React.useCallback(
      (element) => {
        setCaptionId?.(element ? id : void 0);
      },
      [id, setCaptionId]
    );
    return /* @__PURE__ */ jsx(
      Role.div,
      {
        render,
        ...rest,
        id,
        ref: useMergedRefs(forwardedRef, captionIdRef),
        className: cx("\u{1F95D}-table-caption", props.className)
      }
    );
  }
);
DEV: TableCaption.displayName = "Table.Caption";
const TableCell = forwardRef((props, forwardedRef) => {
  const isWithinTableHeader = useSafeContext(TableHeaderContext);
  const { mode } = useSafeContext(TableContext);
  const { render, role } = React.useMemo(() => {
    if (mode === "aria") {
      return { role: isWithinTableHeader ? "columnheader" : "cell" };
    }
    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
  }, [isWithinTableHeader, mode]);
  return /* @__PURE__ */ jsx(
    Role.div,
    {
      render,
      role,
      ...props,
      ref: forwardedRef,
      className: cx("\u{1F95D}-table-cell", props.className)
    }
  );
});
DEV: TableCell.displayName = "Table.Cell";
export {
  TableBody as Body,
  TableCaption as Caption,
  TableCell as Cell,
  CustomTable,
  TableHeader as Header,
  HtmlTable,
  TableRow as Row
};