@primer/react/lib-esm/ActionList/Description.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { ItemContext } from './shared.js';
import classes from './ActionList.module.css.js';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { clsx } from 'clsx';
import { jsx } from 'react/jsx-runtime';
import Truncate from '../Truncate/Truncate.js';

const Description = ({
  variant = 'inline',
  sx,
  className,
  truncate,
  ...props
}) => {
  const {
    blockDescriptionId,
    inlineDescriptionId
  } = React.useContext(ItemContext);
  const containerRef = React.useRef(null);
  const [computedTitle, setComputedTitle] = React.useState('');

  // Extract text content from rendered DOM for tooltip
  React.useEffect(() => {
    if (truncate && containerRef.current) {
      const textContent = containerRef.current.textContent || '';
      setComputedTitle(textContent);
    }
  }, [truncate, props.children]);
  const effectiveTitle = typeof props.children === 'string' ? props.children : computedTitle;
  if (variant === 'block' || !truncate) {
    return /*#__PURE__*/jsx(BoxWithFallback, {
      as: "span",
      sx: sx,
      id: variant === 'block' ? blockDescriptionId : inlineDescriptionId,
      className: clsx(className, classes.Description),
      "data-component": "ActionList.Description",
      children: props.children
    });
  } else {
    return /*#__PURE__*/jsx(Truncate, {
      ref: containerRef,
      id: inlineDescriptionId,
      className: clsx(className, classes.Description),
      sx: sx,
      title: effectiveTitle,
      inline: true,
      maxWidth: "100%",
      "data-component": "ActionList.Description",
      children: props.children
    });
  }
};

export { Description };