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

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Text = require('../Text/Text.js');
var Sequence = require('./components/Sequence.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var KeybindingHint_module = require('./KeybindingHint.module.css.js');
var clsx = require('clsx');

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

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

/** `kbd` element with style resets. */
const Kbd = ({
  children,
  className
}) => {
  const enabled = useFeatureFlag.useFeatureFlag('primer_react_css_modules_staff');
  return /*#__PURE__*/React__default.default.createElement(Text, {
    as: 'kbd',
    className: clsx.clsx(className, enabled && KeybindingHint_module.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__*/React.memo(({
  className,
  ...props
}) => /*#__PURE__*/React__default.default.createElement(Kbd, {
  className: className
}, /*#__PURE__*/React__default.default.createElement(Sequence.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 = Sequence.accessibleSequenceString;

exports.KeybindingHint = KeybindingHint;
exports.getAccessibleKeybindingHintString = getAccessibleKeybindingHintString;