@primer/react/dist/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 { clsx } from 'clsx';
import classes from './Chord.module.css.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 Chord = t0 => {
  const $ = c(13);
  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 = variant === "normal";
  const t5 = variant === "onEmphasis";
  const t6 = variant === "onPrimary";
  const t7 = size === "small";
  let t8;
  if ($[0] !== t4 || $[1] !== t5 || $[2] !== t6 || $[3] !== t7) {
    t8 = clsx(classes.Chord, {
      [classes.ChordNormal]: t4,
      [classes.ChordOnEmphasis]: t5,
      [classes.ChordOnPrimary]: t6,
      [classes.ChordSmall]: t7
    });
    $[0] = t4;
    $[1] = t5;
    $[2] = t6;
    $[3] = t7;
    $[4] = t8;
  } else {
    t8 = $[4];
  }
  let t9;
  if ($[5] !== format || $[6] !== keys) {
    let t10;
    if ($[8] !== format) {
      t10 = (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);
      $[8] = format;
      $[9] = t10;
    } else {
      t10 = $[9];
    }
    t9 = splitChord(keys).map(t10);
    $[5] = format;
    $[6] = keys;
    $[7] = t9;
  } else {
    t9 = $[7];
  }
  let t10;
  if ($[10] !== t8 || $[11] !== t9) {
    t10 = /*#__PURE__*/jsx(Text, {
      "data-kbd-chord": true,
      className: t8,
      children: t9
    });
    $[10] = t8;
    $[11] = t9;
    $[12] = t10;
  } else {
    t10 = $[12];
  }
  return t10;
};

/** 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 };