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

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Box = require('../Box/Box.js');
var Truncate = require('../Truncate/Truncate.js');
require('@styled-system/css');
var merge = require('deepmerge');
var shared = require('./shared.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var ActionList_module = require('./ActionList.module.css.js');
var clsx = require('clsx');
var defaultSxProp = require('../utils/defaultSxProp.js');
var featureflag = require('./featureflag.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var merge__default = /*#__PURE__*/_interopDefault(merge);

const Description = ({
  variant = 'inline',
  sx = defaultSxProp.defaultSxProp,
  className,
  truncate,
  ...props
}) => {
  const styles = {
    fontSize: 0,
    lineHeight: '16px',
    flexGrow: 1,
    flexBasis: variant === 'inline' && !truncate ? 'auto' : 0,
    minWidth: 0,
    marginLeft: variant === 'block' ? 0 : 2,
    color: 'fg.muted',
    'li[aria-disabled="true"] &[data-component="ActionList.Description"]': {
      color: 'inherit'
    },
    'li[data-variant="danger"]:hover &[data-component="ActionList.Description"], li[data-variant="danger"]:active &[data-component="ActionList.Description"]': {
      color: 'inherit'
    }
  };
  const {
    blockDescriptionId,
    inlineDescriptionId
  } = React__default.default.useContext(shared.ItemContext);
  const enabled = useFeatureFlag.useFeatureFlag(featureflag.actionListCssModulesFlag);
  if (enabled) {
    if (sx !== defaultSxProp.defaultSxProp) {
      if (variant === 'block' || !truncate) {
        return /*#__PURE__*/React__default.default.createElement(Box, {
          as: "span",
          sx: merge__default.default(styles, sx),
          id: variant === 'block' ? blockDescriptionId : inlineDescriptionId,
          className: className,
          "data-component": "ActionList.Description"
        }, props.children);
      } else {
        return /*#__PURE__*/React__default.default.createElement(Truncate, {
          id: inlineDescriptionId,
          className: className,
          sx: merge__default.default(styles, sx),
          title: props.children,
          inline: true,
          maxWidth: "100%",
          "data-component": "ActionList.Description"
        }, props.children);
      }
    }
    if (variant === 'block' || !truncate) {
      return /*#__PURE__*/React__default.default.createElement("span", {
        className: clsx.clsx(className, ActionList_module.Description),
        "data-component": "ActionList.Description",
        id: variant === 'block' ? blockDescriptionId : inlineDescriptionId
      }, props.children);
    } else {
      return /*#__PURE__*/React__default.default.createElement(Truncate, {
        id: inlineDescriptionId,
        className: clsx.clsx(className, ActionList_module.Description),
        title: props.children,
        inline: true,
        maxWidth: "100%",
        "data-component": "ActionList.Description",
        "data-truncate": truncate
      }, props.children);
    }
  }
  return variant === 'block' || !truncate ? /*#__PURE__*/React__default.default.createElement(Box, {
    as: "span",
    sx: merge__default.default(styles, sx),
    id: variant === 'block' ? blockDescriptionId : inlineDescriptionId,
    className: className,
    "data-component": "ActionList.Description"
  }, props.children) : /*#__PURE__*/React__default.default.createElement(Truncate, {
    id: inlineDescriptionId,
    className: className,
    sx: merge__default.default(styles, sx),
    title: props.children,
    inline: true,
    maxWidth: "100%",
    "data-component": "ActionList.Description"
  }, props.children);
};

exports.Description = Description;