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

An implementation of GitHub's Primer Design System using React

import React, { Fragment } from 'react';
import VisuallyHidden from '../../_VisuallyHidden.js';
import { Chord, accessibleChordString } from './Chord.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const splitSequence = sequence => sequence.split(' ');
const Sequence = ({
  keys,
  ...chordProps
}) => splitSequence(keys).map((c, i) => /*#__PURE__*/React.createElement(Fragment, {
  key: i
},
//  Since we audibly separate individual keys in chord with space, we need some other separator for chords in a sequence
i > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "then"), ' '), /*#__PURE__*/React.createElement(Chord, _extends({
  keys: c
}, chordProps))));

/** Plain string version of `Sequence` for use in `aria` string attributes. */
const accessibleSequenceString = (sequence, isMacOS) => splitSequence(sequence).map(chord => accessibleChordString(chord, isMacOS)).join(' then ');

export { Sequence, accessibleSequenceString };