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

An implementation of GitHub's Primer Design System using React

import React__default, { forwardRef } from 'react';
import { Button } from './Button/index.js';
import Tooltip from './Tooltip.js';
import './sx.js';
import Box from './Box/Box.js';
import { IconButton } from './Button/IconButton.js';
import merge from 'deepmerge';

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.createElement(React__default.Fragment, null, ariaLabel ? /*#__PURE__*/React__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__*/forwardRef(({
  'aria-label': ariaLabel,
  tooltipDirection,
  children,
  icon,
  sx: sxProp,
  variant = 'invisible',
  ...rest
}, forwardedRef) => {
  const sx = variant === 'invisible' ? merge(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.createElement(Box, {
    as: "span",
    className: "TextInput-action",
    marginLeft: 1,
    marginRight: 1,
    lineHeight: "0"
  }, icon && !children ? /*#__PURE__*/React__default.createElement(Tooltip, {
    direction: tooltipDirection,
    "aria-label": ariaLabel
  }, /*#__PURE__*/React__default.createElement(IconButton, _extends({
    variant: variant,
    type: "button",
    icon: icon,
    size: "small",
    sx: sx
  }, rest, {
    "aria-label": ariaLabel,
    "aria-labelledby": undefined,
    ref: forwardedRef
  }))) : /*#__PURE__*/React__default.createElement(ConditionalTooltip, {
    "aria-label": ariaLabel
  }, /*#__PURE__*/React__default.createElement(Button, _extends({
    variant: variant,
    type: "button",
    sx: sx
  }, rest, {
    ref: forwardedRef
  }), children)));
});
var TextInputAction$1 = TextInputAction;

export { TextInputAction$1 as default };