@primer/react/dist/ActionList/Description.js

An implementation of GitHub's Primer Design System using React

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

const Description = t0 => {
  const $ = c(26);
  let className;
  let props;
  let style;
  let t1;
  let truncate;
  if ($[0] !== t0) {
    ({
      variant: t1,
      className,
      truncate,
      style,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = props;
    $[3] = style;
    $[4] = t1;
    $[5] = truncate;
  } else {
    className = $[1];
    props = $[2];
    style = $[3];
    t1 = $[4];
    truncate = $[5];
  }
  const variant = t1 === undefined ? "inline" : t1;
  const {
    blockDescriptionId,
    inlineDescriptionId,
    setTruncatedText
  } = React.useContext(ItemContext);
  const containerRef = React.useRef(null);
  const [computedTitle, setComputedTitle] = React.useState("");
  let t2;
  let t3;
  if ($[6] !== props.children || $[7] !== setTruncatedText || $[8] !== truncate) {
    t2 = () => {
      if (truncate && containerRef.current) {
        const el = containerRef.current;
        const textContent = el.textContent || "";
        setComputedTitle(textContent);
        if (setTruncatedText) {
          setTruncatedText(el.scrollWidth > el.clientWidth ? typeof props.children === "string" ? props.children : textContent : undefined);
        }
      }
    };
    t3 = [truncate, props.children, setTruncatedText];
    $[6] = props.children;
    $[7] = setTruncatedText;
    $[8] = truncate;
    $[9] = t2;
    $[10] = t3;
  } else {
    t2 = $[9];
    t3 = $[10];
  }
  React.useEffect(t2, t3);
  const effectiveTitle = typeof props.children === "string" ? props.children : computedTitle;
  if (variant === "block" || !truncate) {
    const t4 = variant === "block" ? blockDescriptionId : inlineDescriptionId;
    let t5;
    if ($[11] !== className) {
      t5 = clsx(className, classes.Description);
      $[11] = className;
      $[12] = t5;
    } else {
      t5 = $[12];
    }
    let t6;
    if ($[13] !== props.children || $[14] !== style || $[15] !== t4 || $[16] !== t5) {
      t6 = /*#__PURE__*/jsx("span", {
        id: t4,
        className: t5,
        style: style,
        "data-component": "ActionList.Description",
        children: props.children
      });
      $[13] = props.children;
      $[14] = style;
      $[15] = t4;
      $[16] = t5;
      $[17] = t6;
    } else {
      t6 = $[17];
    }
    return t6;
  } else {
    let t4;
    if ($[18] !== className) {
      t4 = clsx(className, classes.Description);
      $[18] = className;
      $[19] = t4;
    } else {
      t4 = $[19];
    }
    const t5 = setTruncatedText ? "" : effectiveTitle;
    let t6;
    if ($[20] !== inlineDescriptionId || $[21] !== props.children || $[22] !== style || $[23] !== t4 || $[24] !== t5) {
      t6 = /*#__PURE__*/jsx(Truncate, {
        ref: containerRef,
        id: inlineDescriptionId,
        className: t4,
        style: style,
        title: t5,
        inline: true,
        maxWidth: "100%",
        "data-component": "ActionList.Description",
        children: props.children
      });
      $[20] = inlineDescriptionId;
      $[21] = props.children;
      $[22] = style;
      $[23] = t4;
      $[24] = t5;
      $[25] = t6;
    } else {
      t6 = $[25];
    }
    return t6;
  }
};
Description.__SLOT__ = Symbol('ActionList.Description');

export { Description };