@primer/react/lib-esm/KeybindingHint/components/Chord.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { Fragment } from 'react';
import { Key } from './Key.js';
import { accessibleKeyName } from '../key-names.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import Text from '../../Text/Text.js';

const keySortPriorities = {
  control: 1,
  meta: 2,
  alt: 3,
  option: 4,
  shift: 5,
  function: 6
};
const keySortPriority = priority => {
  var _keySortPriorities$pr;
  return (_keySortPriorities$pr = keySortPriorities[priority]) !== null && _keySortPriorities$pr !== void 0 ? _keySortPriorities$pr : Infinity;
};
const compareLowercaseKeys = (a, b) => keySortPriority(a) - keySortPriority(b);

/** Split and sort the chord keys in standard order. */
const splitChord = chord => chord.split('+').map(k => k.toLowerCase()).sort(compareLowercaseKeys);
const backgroundColors = {
  normal: 'var(--bgColor-transparent)',
  onEmphasis: 'var(--counter-bgColor-emphasis)',
  onPrimary: 'var(--button-primary-bgColor-active)'
};
const Chord = t0 => {
  const $ = c(17);
  const {
    keys,
    format: t1,
    variant: t2,
    size: t3
  } = t0;
  const format = t1 === undefined ? "condensed" : t1;
  const variant = t2 === undefined ? "normal" : t2;
  const size = t3 === undefined ? "normal" : t3;
  const t4 = backgroundColors[variant];
  const t5 = variant === "normal" ? "var(--fgColor-muted)" : "var(--fgColor-onEmphasis)";
  const t6 = variant === "normal" ? "var(--borderColor-default)" : "transparent";
  const t7 = size === "small" ? 1 : 2;
  const t8 = size === "small" ? "11px" : 0;
  const t9 = size === "small" ? "2px" : 1;
  const t10 = size === "small" ? "8px" : "10px";
  const t11 = size === "small" ? "var(--base-size-16)" : "var(--base-size-20)";
  let t12;
  if ($[0] !== t10 || $[1] !== t11 || $[2] !== t4 || $[3] !== t5 || $[4] !== t6 || $[5] !== t7 || $[6] !== t8 || $[7] !== t9) {
    t12 = {
      display: "inline-flex",
      bg: t4,
      color: t5,
      border: "1px solid",
      borderColor: t6,
      borderRadius: t7,
      fontWeight: "normal",
      fontFamily: "normal",
      fontSize: t8,
      p: t9,
      gap: "0.5ch",
      boxShadow: "none",
      verticalAlign: "baseline",
      overflow: "hidden",
      lineHeight: t10,
      minWidth: t11,
      justifyContent: "center"
    };
    $[0] = t10;
    $[1] = t11;
    $[2] = t4;
    $[3] = t5;
    $[4] = t6;
    $[5] = t7;
    $[6] = t8;
    $[7] = t9;
    $[8] = t12;
  } else {
    t12 = $[8];
  }
  let t13;
  if ($[9] !== format || $[10] !== keys) {
    let t14;
    if ($[12] !== format) {
      t14 = (k, i) => /*#__PURE__*/jsxs(Fragment, {
        children: [i > 0 && format === "full" ? /*#__PURE__*/jsx("span", {
          "aria-hidden": true,
          children: " + "
        }) : " ", /*#__PURE__*/jsx(Key, {
          name: k,
          format: format
        })]
      }, i);
      $[12] = format;
      $[13] = t14;
    } else {
      t14 = $[13];
    }
    t13 = splitChord(keys).map(t14);
    $[9] = format;
    $[10] = keys;
    $[11] = t13;
  } else {
    t13 = $[11];
  }
  let t14;
  if ($[14] !== t12 || $[15] !== t13) {
    t14 = /*#__PURE__*/jsx(Text, {
      sx: t12,
      children: t13
    });
    $[14] = t12;
    $[15] = t13;
    $[16] = t14;
  } else {
    t14 = $[16];
  }
  return t14;
};

/** Plain string version of `Chord` for use in `aria` string attributes. */
const accessibleChordString = (chord, isMacOS) => splitChord(chord).map(key => accessibleKeyName(key, isMacOS)).join(' ');

export { Chord, accessibleChordString };