@atlaskit/pragmatic-drag-and-drop-react-accessibility/dist/esm/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";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "isSelected", "testId", "appearance", "type"];
/* 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.
 */
var 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'
});
var 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 var DragHandleButtonBase = /*#__PURE__*/forwardRef(function DragHandleButton(_ref, ref) {
  var children = _ref.children,
    _ref$isSelected = _ref.isSelected,
    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
    testId = _ref.testId,
    _ref$appearance = _ref.appearance,
    appearanceProp = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'button' : _ref$type,
    buttonProps = _objectWithoutProperties(_ref, _excluded);
  var appearance = isSelected ? 'selected' : appearanceProp;
  return jsx(FocusRing, null, jsx("button", _extends({
    ref: ref,
    css: [buttonStyles, buttonAppearanceStyles[appearance]],
    "data-testid": testId,
    type: type
  }, buttonProps), children));
});