@atlaskit/pragmatic-drag-and-drop-react-accessibility/dist/es2019/drag-handle-button-base.js

An optional package for Pragmatic drag and drop containing react components to assist with setting up accessible experiences

import _extends from "@babel/runtime/helpers/extends";
/* eslint-disable @atlaskit/design-system/no-deprecated-imports -- Preserve existing drag handle behavior while focus-ring usage is reviewed separately. */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import { forwardRef } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import FocusRing from '@atlaskit/focus-ring/focus-ring';
/**
 * Cannot use `@atlaskit/button` here because it cancels `mousedown` events
 * which prevents dragging.
 */
const buttonStyles = css({
  color: "var(--ds-text, #292A2E)",
  borderRadius: "var(--ds-radius-small, 4px)",
  padding: "var(--ds-space-0, 0px)",
  width: 'max-content',
  border: 'none',
  cursor: 'grab',
  display: 'flex'
});
const buttonAppearanceStyles = {
  default: css({
    backgroundColor: "var(--ds-background-neutral, #0515240F)",
    '&:hover': {
      backgroundColor: "var(--ds-background-neutral-hovered, #0B120E24)"
    },
    '&:active': {
      backgroundColor: "var(--ds-background-neutral-pressed, #080F214A)"
    }
  }),
  subtle: css({
    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
    '&:hover': {
      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
    },
    '&:active': {
      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
    }
  }),
  selected: css({
    backgroundColor: "var(--ds-background-selected, #E9F2FE)",
    color: "var(--ds-text-selected, #1868DB)"
  })
};

/**
 * A button with pre-configured styling to look like a drag handle.
 *
 * This component uses a native button because the `@atlaskit/button`
 * cancels `mouseDown` events, which prevents dragging.
 */
export const DragHandleButtonBase = /*#__PURE__*/forwardRef(function DragHandleButton({
  children,
  isSelected = false,
  testId,
  appearance: appearanceProp = 'default',
  /**
   * Defaulting to `button` instead of `submit` (native default in some cases).
   *
   * A type of `submit` only makes sense in a form context, and isn't very
   * relevant to a drag handle.
   *
   * `@atlaskit/button` also defaults to a type of `button` as well, as it
   * is more semantically appropriate in a wider range of cases.
   */
  type = 'button',
  ...buttonProps
}, ref) {
  const appearance = isSelected ? 'selected' : appearanceProp;
  return jsx(FocusRing, null, jsx("button", _extends({
    ref: ref,
    css: [buttonStyles, buttonAppearanceStyles[appearance]],
    "data-testid": testId,
    type: type
  }, buttonProps), children));
});