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

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { AlertIcon } from '@primer/octicons-react';
import Box from '../Box/Box.js';
import StyledSpinner from '../Spinner/Spinner.js';
import '@styled-system/css';
import merge from 'deepmerge';
import { ItemContext, getVariantStyles } from './shared.js';
import { Tooltip } from '../TooltipV2/Tooltip.js';
import { clsx } from 'clsx';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './ActionList.module.css.js';
import { defaultSxProp } from '../utils/defaultSxProp.js';
import { actionListCssModulesFlag } from './featureflag.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const VisualContainer = ({
  sx = defaultSxProp,
  className,
  ...props
}) => {
  if (sx !== defaultSxProp) {
    return /*#__PURE__*/React.createElement(Box, _extends({
      as: "span",
      className: clsx(className, classes.VisualWrap),
      sx: sx
    }, props));
  }
  return /*#__PURE__*/React.createElement("span", _extends({
    className: clsx(className, classes.VisualWrap)
  }, props));
};
VisualContainer.displayName = "VisualContainer";
// remove when primer_react_css_modules_X is shipped
const LeadingVisualContainer = ({
  sx = defaultSxProp,
  ...props
}) => {
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: "span",
    sx: merge({
      height: '20px',
      // match height of text row
      maxWidth: '20px',
      // square (same as height)
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexShrink: 0,
      marginRight: 2,
      color: 'fg.muted'
    }, sx)
  }, props));
};
LeadingVisualContainer.displayName = "LeadingVisualContainer";
const LeadingVisual = ({
  sx = defaultSxProp,
  className,
  ...props
}) => {
  const {
    variant,
    disabled,
    inactive
  } = React.useContext(ItemContext);
  const enabled = useFeatureFlag(actionListCssModulesFlag);
  if (enabled) {
    return /*#__PURE__*/React.createElement(VisualContainer, _extends({
      className: clsx(className, classes.LeadingVisual),
      sx: sx
    }, props), props.children);
  }
  return /*#__PURE__*/React.createElement(LeadingVisualContainer, _extends({
    className: className,
    sx: merge({
      color: getVariantStyles(variant, disabled, inactive).iconColor,
      svg: {
        fontSize: 0
      },
      '[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover &, [data-variant="danger"]:active &': {
        color: getVariantStyles(variant, disabled, inactive).hoverColor
      }
    }, sx)
  }, props), props.children);
};
LeadingVisual.displayName = "LeadingVisual";
const TrailingVisual = ({
  sx = defaultSxProp,
  className,
  ...props
}) => {
  const {
    variant,
    disabled,
    inactive,
    trailingVisualId
  } = React.useContext(ItemContext);
  const enabled = useFeatureFlag(actionListCssModulesFlag);
  if (enabled) {
    if (sx !== defaultSxProp) {
      return /*#__PURE__*/React.createElement(VisualContainer, _extends({
        className: clsx(className, classes.TrailingVisual),
        sx: sx,
        id: trailingVisualId
      }, props), props.children);
    }
    return /*#__PURE__*/React.createElement(VisualContainer, _extends({
      className: clsx(className, classes.TrailingVisual),
      id: trailingVisualId
    }, props), props.children);
  }
  return /*#__PURE__*/React.createElement(Box, _extends({
    id: trailingVisualId,
    as: "span",
    className: className,
    sx: merge({
      height: '20px',
      // match height of text row
      flexShrink: 0,
      color: getVariantStyles(variant, disabled, inactive).annotationColor,
      marginLeft: 2,
      fontWeight: 'initial',
      display: 'grid',
      alignContent: 'center',
      '[data-variant="danger"]:hover &, [data-variant="danger"]:active &': {
        color: getVariantStyles(variant, disabled, inactive).hoverColor
      }
    }, sx)
  }, props), props.children);
};
TrailingVisual.displayName = "TrailingVisual";
// 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 = ({
  children,
  labelId,
  loading,
  inactiveText,
  itemHasLeadingVisual,
  position,
  className
}) => {
  const VisualComponent = position === 'leading' ? LeadingVisual : TrailingVisual;
  if (!loading && !inactiveText) return children;
  if (itemHasLeadingVisual && position === 'trailing' ||
  // has a leading visual, and it's in the trailing position, or
  !itemHasLeadingVisual && position === 'leading' // it doesn't have a leading visual, and it's in the leading position
  ) {
    // => so we don't render the indicator here
    return children;
  }
  return inactiveText ? /*#__PURE__*/React.createElement("span", {
    className: classes.InactiveButtonWrap
  }, /*#__PURE__*/React.createElement(Tooltip, {
    text: inactiveText,
    type: "label"
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classes.InactiveButtonReset,
    "aria-describedby": labelId
  }, /*#__PURE__*/React.createElement(VisualComponent, null, /*#__PURE__*/React.createElement(AlertIcon, null))))) : /*#__PURE__*/React.createElement(VisualComponent, {
    className: className
  }, /*#__PURE__*/React.createElement(StyledSpinner, {
    size: "small"
  }));
};

export { LeadingVisual, LeadingVisualContainer, TrailingVisual, VisualContainer, VisualOrIndicator };