@primer/react/lib-esm/Token/Token.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { forwardRef } from 'react';
import TokenBase, { isTokenInteractive, defaultTokenSize } from './TokenBase.js';
import RemoveTokenButton from './_RemoveTokenButton.js';
import TokenTextContainer from './_TokenTextContainer.js';
import VisuallyHidden from '../_VisuallyHidden.js';
import classes from './Token.module.css.js';
import { clsx } from 'clsx';
import { jsxs, jsx } from 'react/jsx-runtime';

const tokenBorderWidthPx = 1;
const LeadingVisualContainer = t0 => {
  const $ = c(7);
  const {
    children,
    size
  } = t0;
  let t1;
  if ($[0] !== size) {
    t1 = size && ["large", "xlarge"].includes(size);
    $[0] = size;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  let t2;
  if ($[2] !== t1) {
    t2 = clsx(classes.LeadingVisualContainer, {
      [classes.LargeLeadingVisual]: t1
    });
    $[2] = t1;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  let t3;
  if ($[4] !== children || $[5] !== t2) {
    t3 = /*#__PURE__*/jsx("div", {
      className: t2,
      children: children
    });
    $[4] = children;
    $[5] = t2;
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  return t3;
};
const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
  const $ = c(66);
  let LeadingVisual;
  let as;
  let className;
  let hideRemoveButton;
  let href;
  let id;
  let onClick;
  let onRemove;
  let rest;
  let style;
  let t0;
  let text;
  if ($[0] !== props) {
    ({
      as,
      onRemove,
      id,
      leadingVisual: LeadingVisual,
      text,
      size: t0,
      hideRemoveButton,
      href,
      onClick,
      className,
      style,
      ...rest
    } = props);
    $[0] = props;
    $[1] = LeadingVisual;
    $[2] = as;
    $[3] = className;
    $[4] = hideRemoveButton;
    $[5] = href;
    $[6] = id;
    $[7] = onClick;
    $[8] = onRemove;
    $[9] = rest;
    $[10] = style;
    $[11] = t0;
    $[12] = text;
  } else {
    LeadingVisual = $[1];
    as = $[2];
    className = $[3];
    hideRemoveButton = $[4];
    href = $[5];
    id = $[6];
    onClick = $[7];
    onRemove = $[8];
    rest = $[9];
    style = $[10];
    t0 = $[11];
    text = $[12];
  }
  const size = t0 === undefined ? defaultTokenSize : t0;
  let t1;
  if ($[13] !== hideRemoveButton || $[14] !== onRemove || $[15] !== props) {
    t1 = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
    $[13] = hideRemoveButton;
    $[14] = onRemove;
    $[15] = props;
    $[16] = t1;
  } else {
    t1 = $[16];
  }
  const hasMultipleActionTargets = t1;
  let t2;
  if ($[17] !== onRemove) {
    t2 = e => {
      e.stopPropagation();
      onRemove && onRemove();
    };
    $[17] = onRemove;
    $[18] = t2;
  } else {
    t2 = $[18];
  }
  const onRemoveClick = t2;
  let t3;
  if ($[19] !== as || $[20] !== href || $[21] !== onClick) {
    t3 = {
      as,
      href,
      onClick
    };
    $[19] = as;
    $[20] = href;
    $[21] = onClick;
    $[22] = t3;
  } else {
    t3 = $[22];
  }
  const interactiveTokenProps = t3;
  let t4;
  if ($[23] !== id) {
    var _id;
    t4 = (_id = id) === null || _id === void 0 ? void 0 : _id.toString();
    $[23] = id;
    $[24] = t4;
  } else {
    t4 = $[24];
  }
  let t5;
  if ($[25] !== className) {
    t5 = clsx(className, classes.Token);
    $[25] = className;
    $[26] = t5;
  } else {
    t5 = $[26];
  }
  const t6 = !(hideRemoveButton || !onRemove);
  let t7;
  if ($[27] !== hasMultipleActionTargets || $[28] !== interactiveTokenProps) {
    t7 = !hasMultipleActionTargets ? interactiveTokenProps : {};
    $[27] = hasMultipleActionTargets;
    $[28] = interactiveTokenProps;
    $[29] = t7;
  } else {
    t7 = $[29];
  }
  let t8;
  if ($[30] !== style) {
    t8 = {
      borderWidth: `${tokenBorderWidthPx}px`,
      ...style
    };
    $[30] = style;
    $[31] = t8;
  } else {
    t8 = $[31];
  }
  let t9;
  if ($[32] !== LeadingVisual || $[33] !== size) {
    t9 = LeadingVisual ? /*#__PURE__*/jsx(LeadingVisualContainer, {
      size: size,
      children: /*#__PURE__*/jsx(LeadingVisual, {})
    }) : null;
    $[32] = LeadingVisual;
    $[33] = size;
    $[34] = t9;
  } else {
    t9 = $[34];
  }
  let t10;
  if ($[35] !== hasMultipleActionTargets || $[36] !== interactiveTokenProps) {
    t10 = hasMultipleActionTargets ? interactiveTokenProps : {};
    $[35] = hasMultipleActionTargets;
    $[36] = interactiveTokenProps;
    $[37] = t10;
  } else {
    t10 = $[37];
  }
  let t11;
  if ($[38] !== onRemove) {
    t11 = onRemove && /*#__PURE__*/jsx(VisuallyHidden, {
      children: " (press backspace or delete to remove)"
    });
    $[38] = onRemove;
    $[39] = t11;
  } else {
    t11 = $[39];
  }
  let t12;
  if ($[40] !== t10 || $[41] !== t11 || $[42] !== text) {
    t12 = /*#__PURE__*/jsxs(TokenTextContainer, {
      ...t10,
      children: [text, t11]
    });
    $[40] = t10;
    $[41] = t11;
    $[42] = text;
    $[43] = t12;
  } else {
    t12 = $[43];
  }
  let t13;
  if ($[44] !== hasMultipleActionTargets || $[45] !== hideRemoveButton || $[46] !== onRemove || $[47] !== onRemoveClick || $[48] !== props || $[49] !== size) {
    t13 = !hideRemoveButton && onRemove ? /*#__PURE__*/jsx(RemoveTokenButton, {
      borderOffset: tokenBorderWidthPx,
      onClick: onRemoveClick,
      size: size,
      isParentInteractive: isTokenInteractive(props),
      "aria-hidden": hasMultipleActionTargets ? "true" : "false"
    }) : null;
    $[44] = hasMultipleActionTargets;
    $[45] = hideRemoveButton;
    $[46] = onRemove;
    $[47] = onRemoveClick;
    $[48] = props;
    $[49] = size;
    $[50] = t13;
  } else {
    t13 = $[50];
  }
  let t14;
  if ($[51] !== forwardedRef || $[52] !== onRemove || $[53] !== props.isSelected || $[54] !== rest || $[55] !== size || $[56] !== t12 || $[57] !== t13 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9 || $[64] !== text) {
    t14 = /*#__PURE__*/jsxs(TokenBase, {
      onRemove: onRemove,
      id: t4,
      className: t5,
      text: text,
      size: size,
      "data-is-selected": props.isSelected,
      "data-is-remove-btn": t6,
      ...t7,
      ...rest,
      ref: forwardedRef,
      style: t8,
      children: [t9, t12, t13]
    });
    $[51] = forwardedRef;
    $[52] = onRemove;
    $[53] = props.isSelected;
    $[54] = rest;
    $[55] = size;
    $[56] = t12;
    $[57] = t13;
    $[58] = t4;
    $[59] = t5;
    $[60] = t6;
    $[61] = t7;
    $[62] = t8;
    $[63] = t9;
    $[64] = text;
    $[65] = t14;
  } else {
    t14 = $[65];
  }
  return t14;
});
Token.displayName = 'Token';

export { Token as default };