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

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Text = require('../../Text/Text.js');
var Key = require('./Key.js');
var keyNames = require('../key-names.js');

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

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

/**
 * Consistent sort order for modifier keys. There should never be more than one non-modifier
 * key in a chord, so we don't need to worry about sorting those - we just put them at
 * the end.
 */
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 !== undefined ? _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 = ({
  keys,
  format = 'condensed',
  variant = 'normal',
  size = 'normal'
}) => /*#__PURE__*/React__default.default.createElement(Text, {
  sx: {
    display: 'inline-flex',
    bg: backgroundColors[variant],
    color: variant === 'normal' ? 'var(--fgColor-muted)' : 'var(--fgColor-onEmphasis)',
    border: '1px solid',
    borderColor: variant === 'normal' ? 'var(--borderColor-default)' : 'transparent',
    borderRadius: size === 'small' ? 1 : 2,
    fontWeight: 'normal',
    fontFamily: 'normal',
    fontSize: size === 'small' ? '11px' : 0,
    p: size === 'small' ? '2px' : 1,
    gap: '0.5ch',
    boxShadow: 'none',
    verticalAlign: 'baseline',
    overflow: 'hidden',
    lineHeight: size === 'small' ? '8px' : '10px',
    minWidth: size === 'small' ? 'var(--base-size-16)' : 'var(--base-size-20)',
    justifyContent: 'center'
  }
}, splitChord(keys).map((k, i) => /*#__PURE__*/React__default.default.createElement(React.Fragment, {
  key: i
}, i > 0 && format === 'full' ? /*#__PURE__*/React__default.default.createElement("span", {
  "aria-hidden": true
}, " + ") // hiding the plus sign helps screen readers be more concise
: ' ' // space is nonvisual due to flex layout but critical for labelling / screen readers
, /*#__PURE__*/React__default.default.createElement(Key.Key, {
  name: k,
  format: format
}))));
Chord.displayName = "Chord";
/** Plain string version of `Chord` for use in `aria` string attributes. */
const accessibleChordString = (chord, isMacOS) => splitChord(chord).map(key => keyNames.accessibleKeyName(key, isMacOS)).join(' ');

exports.Chord = Chord;
exports.accessibleChordString = accessibleChordString;