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

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React from 'react';
import { AlertIcon } from '@primer/octicons-react';
import { ItemContext } from './shared.js';
import { clsx } from 'clsx';
import classes from './ActionList.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { Tooltip } from '../TooltipV2/Tooltip.js';
import Spinner from '../Spinner/Spinner.js';

const VisualContainer = t0 => {
  const $ = c(8);
  let className;
  let props;
  if ($[0] !== t0) {
    ({
      className,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = props;
  } else {
    className = $[1];
    props = $[2];
  }
  let t1;
  if ($[3] !== className) {
    t1 = clsx(className, classes.VisualWrap);
    $[3] = className;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== props || $[6] !== t1) {
    t2 = /*#__PURE__*/jsx("span", {
      className: t1,
      ...props
    });
    $[5] = props;
    $[6] = t1;
    $[7] = t2;
  } else {
    t2 = $[7];
  }
  return t2;
};
const LeadingVisual = t0 => {
  const $ = c(8);
  let className;
  let props;
  if ($[0] !== t0) {
    ({
      className,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = props;
  } else {
    className = $[1];
    props = $[2];
  }
  let t1;
  if ($[3] !== className) {
    t1 = clsx(className, classes.LeadingVisual);
    $[3] = className;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== props || $[6] !== t1) {
    t2 = /*#__PURE__*/jsx(VisualContainer, {
      className: t1,
      "data-component": "ActionList.LeadingVisual",
      ...props,
      children: props.children
    });
    $[5] = props;
    $[6] = t1;
    $[7] = t2;
  } else {
    t2 = $[7];
  }
  return t2;
};
const TrailingVisual = t0 => {
  const $ = c(9);
  let className;
  let props;
  if ($[0] !== t0) {
    ({
      className,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = props;
  } else {
    className = $[1];
    props = $[2];
  }
  const {
    trailingVisualId
  } = React.useContext(ItemContext);
  let t1;
  if ($[3] !== className) {
    t1 = clsx(className, classes.TrailingVisual);
    $[3] = className;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== props || $[6] !== t1 || $[7] !== trailingVisualId) {
    t2 = /*#__PURE__*/jsx(VisualContainer, {
      className: t1,
      "data-component": "ActionList.TrailingVisual",
      id: trailingVisualId,
      ...props,
      children: props.children
    });
    $[5] = props;
    $[6] = t1;
    $[7] = trailingVisualId;
    $[8] = t2;
  } else {
    t2 = $[8];
  }
  return t2;
};

// VisualOrIndicator handles the positioning of indicators and determines whether to show a visual or an indicator.
//
// If we're showing an *inactive* or *loading* indicator and a leading visual has NOT been passed,
// replace the trailing visual with the inactive indicator.
//
// This preserves the left alignment of item text.
const VisualOrIndicator = t0 => {
  const $ = c(5);
  const {
    children,
    labelId,
    loading,
    inactiveText,
    itemHasLeadingVisual,
    position,
    className
  } = t0;
  const VisualComponent = position === "leading" ? LeadingVisual : TrailingVisual;
  if (!loading && !inactiveText) {
    return children;
  }
  if (itemHasLeadingVisual && position === "trailing" || !itemHasLeadingVisual && position === "leading") {
    return children;
  }
  let t1;
  if ($[0] !== VisualComponent || $[1] !== className || $[2] !== inactiveText || $[3] !== labelId) {
    t1 = inactiveText ? /*#__PURE__*/jsx("span", {
      className: classes.InactiveButtonWrap,
      children: /*#__PURE__*/jsx(Tooltip, {
        text: inactiveText,
        type: "description",
        children: /*#__PURE__*/jsx("button", {
          type: "button",
          className: classes.InactiveButtonReset,
          "aria-labelledby": labelId,
          children: /*#__PURE__*/jsx(VisualComponent, {
            children: /*#__PURE__*/jsx(AlertIcon, {})
          })
        })
      })
    }) : /*#__PURE__*/jsx(VisualComponent, {
      className: className,
      children: /*#__PURE__*/jsx(Spinner, {
        size: "small"
      })
    });
    $[0] = VisualComponent;
    $[1] = className;
    $[2] = inactiveText;
    $[3] = labelId;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  return t1;
};
LeadingVisual.displayName = 'ActionList.LeadingVisual';
TrailingVisual.displayName = 'ActionList.TrailingVisual';
LeadingVisual.__SLOT__ = Symbol('ActionList.LeadingVisual');
TrailingVisual.__SLOT__ = Symbol('ActionList.TrailingVisual');

export { LeadingVisual, TrailingVisual, VisualContainer, VisualOrIndicator };