@hitachivantara/uikit-react-core/dist/esm/Table/TableHeader/TableHeader.js

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useContext } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../../icons.js";
import { capitalize } from "../../utils/helpers.js";
import TableContext from "../TableContext.js";
import { TableSectionContext } from "../TableSectionContext.js";
import { useClasses } from "./TableHeader.styles.js";
import { staticClasses } from "./TableHeader.styles.js";
import { getSortIconName, isParagraph } from "./utils.js";
import { HvButton } from "../../Button/Button.js";
import { HvTypography } from "../../Typography/Typography.js";
const defaultComponent = "th";
const HvTableHeader = forwardRef(
  function HvTableHeader2(props, ref) {
    const {
      children,
      component,
      className,
      style: styleProp,
      classes: classesProp,
      scope: scopeProp,
      align = "inherit",
      variant = "default",
      type: typeProp,
      stickyColumn = false,
      stickyColumnMostLeft = false,
      stickyColumnLeastRight = false,
      groupColumnMostLeft = false,
      groupColumnMostRight = false,
      sortDirection = "none",
      sorted,
      sortable,
      headerTextProps,
      resizerProps = {},
      resizable = false,
      resizing = false,
      sortButtonProps,
      ...others
    } = useDefaultProps("HvTableHeader", props);
    const { classes, cx } = useClasses(classesProp);
    const tableContext = useContext(TableContext);
    const tableSectionContext = useContext(TableSectionContext);
    const type = typeProp || tableSectionContext?.type || "body";
    const isHeadCell = type === "head";
    const scope = scopeProp ?? (isHeadCell ? "col" : "row");
    const Component = component || tableContext?.components?.Th || defaultComponent;
    const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
    const paragraph = isParagraph(children);
    const style = stickyColumn ? { ...styleProp, position: "sticky" } : styleProp;
    return /* @__PURE__ */ jsxs(
      Component,
      {
        ref,
        role,
        scope,
        style,
        className: cx(
          classes.root,
          classes[type],
          align !== "inherit" && classes[`align${capitalize(align)}`],
          variant !== "default" && classes[`variant${capitalize(variant)}`],
          {
            [classes.groupColumnMostLeft]: groupColumnMostLeft,
            [classes.groupColumnMostRight]: groupColumnMostRight,
            [classes.sortable]: sortable,
            [classes.sorted]: sorted,
            [classes.resizable]: resizable,
            [classes.resizing]: resizing,
            [classes.stickyColumn]: stickyColumn,
            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,
            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,
            [classes.variantList]: tableContext.variant === "listrow"
          },
          className
        ),
        "aria-sort": sortable ? sortDirection : void 0,
        ...others,
        children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(
                classes.headerContent,
                align !== "inherit" && classes[`alignFlex${capitalize(align)}`]
              ),
              children: [
                isHeadCell && sortable && /* @__PURE__ */ jsx(
                  HvButton,
                  {
                    className: classes.sortButton,
                    icon: true,
                    "aria-label": "Sort",
                    ...sortButtonProps,
                    children: /* @__PURE__ */ jsx(
                      HvIcon,
                      {
                        name: getSortIconName(sorted && sortDirection),
                        className: classes.sortIcon
                      }
                    )
                  }
                ),
                /* @__PURE__ */ jsx(
                  HvTypography,
                  {
                    component: "div",
                    className: cx({
                      [classes.headerText]: !paragraph,
                      [classes.headerParagraph]: paragraph,
                      [classes.sortableHeaderText]: sortable
                    }),
                    variant: "label",
                    ...headerTextProps,
                    children
                  }
                )
              ]
            }
          ),
          resizable && /* @__PURE__ */ jsx("div", { ...resizerProps, className: classes.resizer })
        ]
      }
    );
  }
);
export {
  HvTableHeader,
  staticClasses as tableHeaderClasses
};