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

An implementation of GitHub's Primer Design System using React

import React, { memo } from 'react';
import Text from '../Text/Text.js';
import { Sequence, accessibleSequenceString } from './components/Sequence.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './KeybindingHint.module.css.js';
import { clsx } from 'clsx';

/** `kbd` element with style resets. */
const Kbd = ({
  children,
  className
}) => {
  const enabled = useFeatureFlag('primer_react_css_modules_staff');
  return /*#__PURE__*/React.createElement(Text, {
    as: 'kbd',
    className: clsx(className, enabled && classes.KeybindingHint),
    "data-testid": "keybinding-hint",
    sx: enabled ? undefined : {
      color: 'inherit',
      fontFamily: 'inherit',
      fontSize: 'inherit',
      border: 'none',
      background: 'none',
      boxShadow: 'none',
      p: 0,
      lineHeight: 'unset',
      position: 'relative',
      overflow: 'visible',
      verticalAlign: 'baseline',
      textWrap: 'nowrap'
    }
  }, children);
};
Kbd.displayName = "Kbd";
/** Indicates the presence of an available keybinding. */
// KeybindingHint is a good candidate for memoizing since props will rarely change
const KeybindingHint = /*#__PURE__*/memo(({
  className,
  ...props
}) => /*#__PURE__*/React.createElement(Kbd, {
  className: className
}, /*#__PURE__*/React.createElement(Sequence, props)));
KeybindingHint.displayName = 'KeybindingHint';

/**
 * AVOID: `KeybindingHint` is nearly always sufficient for providing both visible and accessible keyboard hints, and
 * will result in a good screen reader experience when used as the target for `aria-describedby` and `aria-labelledby`.
 * However, there may be cases where we need a plain string version, such as when building `aria-label` or
 * `aria-description`. In that case, this plain string builder can be used instead.
 *
 * NOTE that this string should _only_ be used when building `aria-label` or `aria-description` props (never rendered
 * visibly) and should nearly always also be paired with a visible hint for sighted users.
 */
const getAccessibleKeybindingHintString = accessibleSequenceString;

export { KeybindingHint, getAccessibleKeybindingHintString };