@primer/react/dist/KeybindingHint/components/Sequence.js

An implementation of GitHub's Primer Design System using React

import { Fragment } from 'react';
import VisuallyHidden from '../../_VisuallyHidden.js';
import { accessibleChordString, Chord } from './Chord.js';
import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';

const splitSequence = sequence => sequence.split(' ');
const Sequence = ({
  keys,
  ...chordProps
}) => splitSequence(keys).map((c, i) => /*#__PURE__*/jsxs(Fragment, {
  children: [
  //  Since we audibly separate individual keys in chord with space, we need some other separator for chords in a sequence
  i > 0 && /*#__PURE__*/jsxs(Fragment$1, {
    children: [/*#__PURE__*/jsx(VisuallyHidden, {
      children: "then"
    }), ' ']
  }), /*#__PURE__*/jsx(Chord, {
    keys: c,
    ...chordProps
  })]
}, i));

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