@atlaskit/primitives/dist/es2019/components/pressable.js

Primitives are token-backed low-level building blocks.

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef } from 'react';
import { xcss } from '../xcss/xcss';
import Box from './box';
// TODO: Duplicated FocusRing styles due to lack of `xcss` support
// and to prevent additional dependency
const baseFocusRingStyles = {
  outlineColor: 'color.border.focused',
  outlineWidth: 'border.width.outline',
  outlineStyle: 'solid',
  outlineOffset: 'space.025'
};
const focusRingStyles = xcss({
  ':focus-visible': baseFocusRingStyles,
  '@supports not selector(*:focus-visible)': {
    ':focus': baseFocusRingStyles
  },
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
    ':focus-visible': {
      outline: '1px solid'
    }
  }
});

/**
 * __UNSAFE_PRESSABLE__
 *
 * @internal Still under development. Do not use.
 *
 * A Pressable is a primitive component that renders a `<button>`.
 *
 * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
 * - [Code](https://atlassian.design/components/primitives/pressable/code)
 * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
 */
const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
  children,
  backgroundColor,
  padding,
  paddingBlock,
  paddingBlockStart,
  paddingBlockEnd,
  paddingInline,
  paddingInlineStart,
  paddingInlineEnd,
  isDisabled,
  type = 'button',
  testId,
  xcss: xcssStyles,
  ...htmlAttributes
}, ref) => {
  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
  let styles = [xcss({
    cursor: isDisabled ? 'not-allowed' : 'pointer'
  }), focusRingStyles];
  styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
    as: "button",
    ref: ref,
    testId: testId,
    type: type,
    backgroundColor: backgroundColor,
    padding: padding,
    paddingBlock: paddingBlock,
    paddingBlockStart: paddingBlockStart,
    paddingBlockEnd: paddingBlockEnd,
    paddingInline: paddingInline,
    paddingInlineStart: paddingInlineStart,
    paddingInlineEnd: paddingInlineEnd
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
    ,
    xcss: styles,
    disabled: isDisabled
  }), children);
});
export default UNSAFE_PRESSABLE;