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

Core React components for the NEXT Design System.

import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useLabels } from "../../hooks/useLabels.js";
import { HvIcon } from "../../icons.js";
import { HvButton } from "../../Button/Button.js";
import { HvTypography } from "../../Typography/Typography.js";
const DEFAULT_LABELS = {
  expandRowButtonAriaLabel: "Expand this row",
  collapseRowButtonAriaLabel: "Collapse this row"
};
const CellWithExpandButton = ({
  row,
  cell,
  labels: labelsProp
}) => {
  const labels = useLabels(DEFAULT_LABELS, labelsProp);
  const rowProps = row.getToggleRowExpandedProps?.();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      HvButton,
      {
        icon: true,
        "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
        "aria-expanded": row.isExpanded,
        onClick: rowProps?.onClick,
        children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: row.isExpanded })
      }
    ),
    cell?.value && /* @__PURE__ */ jsx(HvTypography, { variant: "label", component: "span", children: cell.value })
  ] });
};
const visibleColumnsHook = (columns, { instance }) => {
  if (instance.disableCreateExpandButton) {
    return columns;
  }
  const firstDataColumnIndex = columns.findIndex(
    (c) => !c.id?.startsWith("_hv_")
  );
  if (firstDataColumnIndex !== -1) {
    const firstDataColumn = columns[firstDataColumnIndex];
    if (firstDataColumn.Cell === CellWithExpandButton) return columns;
    if (firstDataColumn.Cell == null) {
      firstDataColumn.Cell = CellWithExpandButton;
      firstDataColumn.variant = "expand";
      return columns;
    }
  }
  const expandColumn = {
    id: "_hv_expand",
    variant: "none",
    width: 32,
    // this will only work when using useHvTableSticky
    // but ensures it stays left of any sticky column
    sticky: "left",
    Cell: CellWithExpandButton
  };
  const columnsCopy = [...columns];
  columnsCopy.splice(
    firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,
    0,
    expandColumn
  );
  return columnsCopy;
};
const getRowPropsHook = (props, { row }) => {
  const nextProps = {
    expanded: row.isExpanded
  };
  return [props, nextProps];
};
const useHvRowExpand = (hooks) => {
  hooks.visibleColumns.push(visibleColumnsHook);
  hooks.getRowProps.push(getRowPropsHook);
};
useHvRowExpand.pluginName = "useHvRowExpand";
export {
  useHvRowExpand
};