@primer/react/lib/_TextInputInnerAction.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var index = require('./Button/index.js');
var Tooltip = require('./Tooltip.js');
require('./sx.js');
var Box = require('./Box/Box.js');
var IconButton = require('./Button/IconButton.js');
var merge = require('deepmerge');

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

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const invisibleButtonStyleOverrides = {
  paddingTop: '2px',
  paddingRight: '4px',
  paddingBottom: '2px',
  paddingLeft: '4px',
  position: 'relative',
  '&[data-component="IconButton"]': {
    width: 'var(--inner-action-size)',
    height: 'var(--inner-action-size)'
  },
  '@media (pointer: coarse)': {
    ':after': {
      content: '""',
      position: 'absolute',
      left: 0,
      right: 0,
      transform: 'translateY(-50%)',
      top: '50%',
      minHeight: '44px'
    }
  }
};
const ConditionalTooltip = ({
  'aria-label': ariaLabel,
  children,
  tooltipDirection
}) => /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, ariaLabel ? /*#__PURE__*/React__default.default.createElement(Tooltip, {
  "aria-label": ariaLabel,
  direction: tooltipDirection,
  sx: {
    /* inline-block is used to ensure the tooltip dimensions don't
       collapse when being used with `grid` or `inline` children */
    display: 'inline-block'
  }
}, children) : children);
const TextInputAction = /*#__PURE__*/React.forwardRef(({
  'aria-label': ariaLabel,
  tooltipDirection,
  children,
  icon,
  sx: sxProp,
  variant = 'invisible',
  ...rest
}, forwardedRef) => {
  const sx = variant === 'invisible' ? merge__default.default(invisibleButtonStyleOverrides, sxProp || {}) : sxProp || {};
  if (icon && !ariaLabel || !children && !ariaLabel) {
    // eslint-disable-next-line no-console
    console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology');
  }
  return /*#__PURE__*/React__default.default.createElement(Box, {
    as: "span",
    className: "TextInput-action",
    marginLeft: 1,
    marginRight: 1,
    lineHeight: "0"
  }, icon && !children ? /*#__PURE__*/React__default.default.createElement(Tooltip, {
    direction: tooltipDirection,
    "aria-label": ariaLabel
  }, /*#__PURE__*/React__default.default.createElement(IconButton.IconButton, _extends({
    variant: variant,
    type: "button",
    icon: icon,
    size: "small",
    sx: sx
  }, rest, {
    "aria-label": ariaLabel,
    "aria-labelledby": undefined,
    ref: forwardedRef
  }))) : /*#__PURE__*/React__default.default.createElement(ConditionalTooltip, {
    "aria-label": ariaLabel
  }, /*#__PURE__*/React__default.default.createElement(index.Button, _extends({
    variant: variant,
    type: "button",
    sx: sx
  }, rest, {
    ref: forwardedRef
  }), children)));
});
var TextInputAction$1 = TextInputAction;

module.exports = TextInputAction$1;