@atlaskit/pragmatic-drag-and-drop-react-accessibility 0.1.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/pragmatic-drag-and-drop-react-accessibility

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,9 @@
+# PragmaticDragAndDropReactAccessibility
+
+Accessibility helpers for pragmatic-drag-and-drop, written in React.
+
+## Usage
+
+`import PragmaticDragAndDropReactAccessibility from '@atlaskit/pragmatic-drag-and-drop-react-accessibility';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/pragmatic-drag-and-drop/pragmatic-drag-and-drop-react-accessibility).

package/constellation/drag-handle-button/examples.mdx

@@ -0,0 +1,21 @@
+---
+order: 0
+title: Drag Handle Button
+description: A button styled to look like a drag handle
+---
+
+import { Code } from '@atlaskit/code';
+import SectionMessage from '@atlaskit/section-message';
+
+import DragHandleButtonExample from '../../examples/drag-handle-button';
+
+<SectionMessage appearance="warning">
+  This component does not use the <Code>@atlaskit/button</Code> component,
+  because <Code>@atlaskit/button</Code> cancels <Code>mousedown</Code> events
+  and prevents dragging from occurring.
+  Instead this component uses a native <Code>&lt;button&gt;</Code> element.
+</SectionMessage>
+
+## Default
+
+<Example Component={DragHandleButtonExample} />

package/constellation/drag-handle-button/props.mdx

@@ -0,0 +1,14 @@
+---
+order: 1
+title: Drag Handle Button
+description: A button styled to look like a drag handle
+---
+
+import { Code } from '@atlaskit/code';
+
+import DragHandleButtonProps from '!!extract-react-types-loader!../../extract-react-types/drag-handle-button';
+
+## Props
+
+<PropsTable heading="" props={DragHandleButtonProps} />
+

package/constellation/drag-handle-dropdown-menu/examples.mdx

@@ -0,0 +1,21 @@
+---
+order: 0
+title: Drag Handle Dropdown Menu
+description: A dropdown menu with a drag handle as the trigger
+---
+
+import { Code } from '@atlaskit/code';
+import SectionMessage from '@atlaskit/section-message';
+
+import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-menu';
+
+<SectionMessage appearance="warning">
+  This component does not use the <Code>@atlaskit/button</Code> component,
+  because <Code>@atlaskit/button</Code> cancels <Code>mousedown</Code> events
+  and prevents dragging from occurring.
+  Instead this component uses a native <Code>&lt;button&gt;</Code> element.
+</SectionMessage>
+
+## Default
+
+<Example Component={DragHandleDropdownMenuExample} />

package/constellation/drag-handle-dropdown-menu/props.mdx

@@ -0,0 +1,14 @@
+---
+order: 1
+title: Drag Handle Dropdown Menu
+description: A dropdown menu with a drag handle as the trigger
+---
+
+import { Code } from '@atlaskit/code';
+
+import DragHandleButtonProps from '!!extract-react-types-loader!../../extract-react-types/drag-handle-button';
+
+## Props
+
+<PropsTable heading="" props={DragHandleButtonProps} />
+

package/constellation/index/about.mdx

@@ -0,0 +1,8 @@
+---
+order: 0
+title: React Accessibility
+description: React components to help implement accessible alternative flows
+---
+
+This package provides some optional `react` components that can be used to build
+alternative flows for accessibility.

package/constellation/index/props.mdx

@@ -0,0 +1,14 @@
+import { Code } from '@atlaskit/code';
+
+import DragHandleButtonProps from '!!extract-react-types-loader!../../extract-react-types/drag-handle-button';
+import DragHandleDropdownMenuProps from '!!extract-react-types-loader!../../extract-react-types/drag-handle-dropdown-menu';
+
+## Props
+
+### Drag Handle Button Props
+
+<PropsTable heading="" props={DragHandleButtonProps} />
+
+### Drag Handle Dropdown Menu Props
+
+<PropsTable heading="" props={DragHandleDropdownMenuProps} />

package/dist/cjs/drag-handle-button.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
+var _excluded = ["isSelected", "testId", "appearance", "label"];
+/** @jsx jsx */
+/**
+ * Cannot use `@atlaskit/button` here because it cancels `mousedown` events
+ * which prevents dragging.
+ */
+var buttonStyles = (0, _react2.css)({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  padding: "var(--ds-space-0, 0px)",
+  width: 'max-content',
+  border: 'none',
+  cursor: 'grab'
+});
+var buttonAppearanceStyles = {
+  default: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  }),
+  subtle: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  }),
+  selected: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+    color: "var(--ds-text-selected, #0C66E4)"
+  })
+};
+/**
+ * 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.
+ */
+var DragHandleButton = /*#__PURE__*/(0, _react.forwardRef)(function DragHandleButton(_ref, ref) {
+  var _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,
+    label = _ref.label,
+    buttonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var appearance = isSelected ? 'selected' : appearanceProp;
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("button", (0, _extends2.default)({
+    ref: ref,
+    css: [buttonStyles, buttonAppearanceStyles[appearance]],
+    "data-testid": testId
+  }, buttonProps), (0, _react2.jsx)(_dragHandler.default, {
+    label: label
+  })));
+});
+exports.DragHandleButton = DragHandleButton;

package/dist/cjs/drag-handle-dropdown-menu.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleDropdownMenu = DragHandleDropdownMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _dragHandleButton = require("./drag-handle-button");
+var _excluded = ["triggerRef"]; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * A dropdown menu with a predefined trigger, styled to look like a drag handle.
+ *
+ * The API is designed to mirror the `@atlaskit/dropdown-menu` API.
+ */
+function DragHandleDropdownMenu(_ref) {
+  var children = _ref.children,
+    consumerRef = _ref.triggerRef,
+    label = _ref.label;
+  var renderTrigger = (0, _react.useCallback)(function (_ref2) {
+    var triggerRef = _ref2.triggerRef,
+      triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    var mergedRef = (0, _mergeRefs.default)([consumerRef, triggerRef]);
+    return /*#__PURE__*/_react.default.createElement(_dragHandleButton.DragHandleButton, (0, _extends2.default)({
+      ref: mergedRef
+    }, triggerProps, {
+      label: label
+    }));
+  }, [consumerRef, label]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    trigger: renderTrigger
+  }, children);
+}

package/dist/cjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * This file exists for module resolution purposes.
+ */
+var _default = {};
+exports.default = _default;

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/es2019/drag-handle-button.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+/**
+ * Cannot use `@atlaskit/button` here because it cancels `mousedown` events
+ * which prevents dragging.
+ */
+const buttonStyles = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  padding: "var(--ds-space-0, 0px)",
+  width: 'max-content',
+  border: 'none',
+  cursor: 'grab'
+});
+const buttonAppearanceStyles = {
+  default: css({
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  }),
+  subtle: css({
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  }),
+  selected: css({
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+    color: "var(--ds-text-selected, #0C66E4)"
+  })
+};
+/**
+ * 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 DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButton({
+  isSelected = false,
+  testId,
+  appearance: appearanceProp = 'default',
+  label,
+  ...buttonProps
+}, ref) {
+  const appearance = isSelected ? 'selected' : appearanceProp;
+  return jsx(FocusRing, null, jsx("button", _extends({
+    ref: ref,
+    css: [buttonStyles, buttonAppearanceStyles[appearance]],
+    "data-testid": testId
+  }, buttonProps), jsx(DragHandlerIcon, {
+    label: label
+  })));
+});

package/dist/es2019/drag-handle-dropdown-menu.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import DropdownMenu from '@atlaskit/dropdown-menu';
+// eslint-disable-next-line @atlaskit/design-system/no-banned-imports
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { DragHandleButton } from './drag-handle-button';
+/**
+ * A dropdown menu with a predefined trigger, styled to look like a drag handle.
+ *
+ * The API is designed to mirror the `@atlaskit/dropdown-menu` API.
+ */
+export function DragHandleDropdownMenu({
+  children,
+  triggerRef: consumerRef,
+  label
+}) {
+  const renderTrigger = useCallback(({
+    triggerRef,
+    ...triggerProps
+  }) => {
+    const mergedRef = mergeRefs([consumerRef, triggerRef]);
+    return /*#__PURE__*/React.createElement(DragHandleButton, _extends({
+      ref: mergedRef
+    }, triggerProps, {
+      label: label
+    }));
+  }, [consumerRef, label]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: renderTrigger
+  }, children);
+}

package/dist/es2019/index.js

@@ -0,0 +1,4 @@
+/**
+ * This file exists for module resolution purposes.
+ */
+export default {};

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/esm/drag-handle-button.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isSelected", "testId", "appearance", "label"];
+/** @jsx jsx */
+
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+/**
+ * Cannot use `@atlaskit/button` here because it cancels `mousedown` events
+ * which prevents dragging.
+ */
+var buttonStyles = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  padding: "var(--ds-space-0, 0px)",
+  width: 'max-content',
+  border: 'none',
+  cursor: 'grab'
+});
+var buttonAppearanceStyles = {
+  default: css({
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  }),
+  subtle: css({
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  }),
+  selected: css({
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+    color: "var(--ds-text-selected, #0C66E4)"
+  })
+};
+/**
+ * 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 DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButton(_ref, ref) {
+  var _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,
+    label = _ref.label,
+    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
+  }, buttonProps), jsx(DragHandlerIcon, {
+    label: label
+  })));
+});

package/dist/esm/drag-handle-dropdown-menu.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef"];
+import React, { useCallback } from 'react';
+import DropdownMenu from '@atlaskit/dropdown-menu';
+// eslint-disable-next-line @atlaskit/design-system/no-banned-imports
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { DragHandleButton } from './drag-handle-button';
+/**
+ * A dropdown menu with a predefined trigger, styled to look like a drag handle.
+ *
+ * The API is designed to mirror the `@atlaskit/dropdown-menu` API.
+ */
+export function DragHandleDropdownMenu(_ref) {
+  var children = _ref.children,
+    consumerRef = _ref.triggerRef,
+    label = _ref.label;
+  var renderTrigger = useCallback(function (_ref2) {
+    var triggerRef = _ref2.triggerRef,
+      triggerProps = _objectWithoutProperties(_ref2, _excluded);
+    var mergedRef = mergeRefs([consumerRef, triggerRef]);
+    return /*#__PURE__*/React.createElement(DragHandleButton, _extends({
+      ref: mergedRef
+    }, triggerProps, {
+      label: label
+    }));
+  }, [consumerRef, label]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: renderTrigger
+  }, children);
+}

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+/**
+ * This file exists for module resolution purposes.
+ */
+export default {};

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/types/drag-handle-button.d.ts

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { HTMLAttributes } from 'react';
+export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
+export type DragHandleButtonProps = HTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string
+     * that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: DragHandleButtonAppearance;
+    /**
+     * Text used to describe what the button is in context.
+     */
+    label: string;
+};
+/**
+ * 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 declare const DragHandleButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean | undefined;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string
+     * that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string | undefined;
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: DragHandleButtonAppearance | undefined;
+    /**
+     * Text used to describe what the button is in context.
+     */
+    label: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/drag-handle-dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement, Ref } from 'react';
+import { DragHandleButtonAppearance } from './drag-handle-button';
+export type DragHandleDropdownMenuProps = {
+    /**
+     * The contents of the dropdown menu.
+     */
+    children: ReactElement;
+    /**
+     * Ref for the button which acts as the dropdown trigger.
+     */
+    triggerRef: Ref<HTMLButtonElement>;
+    /**
+     * The appearance of the button which acts as the dropdown trigger.
+     */
+    appearance?: DragHandleButtonAppearance;
+    /**
+     * The string used as the button label.
+     */
+    label: string;
+};
+/**
+ * A dropdown menu with a predefined trigger, styled to look like a drag handle.
+ *
+ * The API is designed to mirror the `@atlaskit/dropdown-menu` API.
+ */
+export declare function DragHandleDropdownMenu({ children, triggerRef: consumerRef, label, }: DragHandleDropdownMenuProps): JSX.Element;

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This file exists for module resolution purposes.
+ */
+declare const _default: {};
+export default _default;

package/dist/types-ts4.5/drag-handle-button.d.ts

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { HTMLAttributes } from 'react';
+export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
+export type DragHandleButtonProps = HTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string
+     * that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: DragHandleButtonAppearance;
+    /**
+     * Text used to describe what the button is in context.
+     */
+    label: string;
+};
+/**
+ * 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 declare const DragHandleButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Change the style to indicate the button is selected
+     */
+    isSelected?: boolean | undefined;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string
+     * that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string | undefined;
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: DragHandleButtonAppearance | undefined;
+    /**
+     * Text used to describe what the button is in context.
+     */
+    label: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/drag-handle-dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement, Ref } from 'react';
+import { DragHandleButtonAppearance } from './drag-handle-button';
+export type DragHandleDropdownMenuProps = {
+    /**
+     * The contents of the dropdown menu.
+     */
+    children: ReactElement;
+    /**
+     * Ref for the button which acts as the dropdown trigger.
+     */
+    triggerRef: Ref<HTMLButtonElement>;
+    /**
+     * The appearance of the button which acts as the dropdown trigger.
+     */
+    appearance?: DragHandleButtonAppearance;
+    /**
+     * The string used as the button label.
+     */
+    label: string;
+};
+/**
+ * A dropdown menu with a predefined trigger, styled to look like a drag handle.
+ *
+ * The API is designed to mirror the `@atlaskit/dropdown-menu` API.
+ */
+export declare function DragHandleDropdownMenu({ children, triggerRef: consumerRef, label, }: DragHandleDropdownMenuProps): JSX.Element;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This file exists for module resolution purposes.
+ */
+declare const _default: {};
+export default _default;

package/drag-handle-button/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button",
+  "main": "../dist/cjs/drag-handle-button.js",
+  "module": "../dist/esm/drag-handle-button.js",
+  "module:es2019": "../dist/es2019/drag-handle-button.js",
+  "sideEffects": false,
+  "types": "../dist/types/drag-handle-button.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/drag-handle-button.d.ts"
+      ]
+    }
+  }
+}

package/drag-handle-dropdown-menu/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-dropdown-menu",
+  "main": "../dist/cjs/drag-handle-dropdown-menu.js",
+  "module": "../dist/esm/drag-handle-dropdown-menu.js",
+  "module:es2019": "../dist/es2019/drag-handle-dropdown-menu.js",
+  "sideEffects": false,
+  "types": "../dist/types/drag-handle-dropdown-menu.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/drag-handle-dropdown-menu.d.ts"
+      ]
+    }
+  }
+}

package/extract-react-types/drag-handle-button.tsx

@@ -0,0 +1,3 @@
+import type { DragHandleButtonProps } from '../src/drag-handle-button';
+
+export default function ({}: DragHandleButtonProps) {}

package/extract-react-types/drag-handle-dropdown-menu.tsx

@@ -0,0 +1,3 @@
+import type { DragHandleDropdownMenuProps } from '../src/drag-handle-dropdown-menu';
+
+export default function ({}: DragHandleDropdownMenuProps) {}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
+  "version": "0.1.0",
+  "description": "Optional react components to help implement accessible alternative flows for Pragmatic drag and drop",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "PragmaticDragAndDropReactAccessibility",
+      "category": "Components"
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "homepage": "https://atlassian.design/components/pragmatic-drag-and-drop/",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    "./drag-handle-button": "./src/drag-handle-button.tsx",
+    "./drag-handle-dropdown-menu": "./src/drag-handle-dropdown-menu.tsx"
+  },
+  "dependencies": {
+    "@atlaskit/dropdown-menu": "^11.11.2",
+    "@atlaskit/ds-lib": "^2.2.3",
+    "@atlaskit/focus-ring": "^1.3.4",
+    "@atlaskit/icon": "^21.12.6",
+    "@atlaskit/tokens": "^1.13.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@af/visual-regression": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,37 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/pragmatic-drag-and-drop-react-accessibility"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+// @public
+const _default: {};
+export default _default;
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,13 @@
+## API Report File for "@atlaskit/pragmatic-drag-and-drop-react-accessibility"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// @public
+const _default: {};
+export default _default;
+
+// (No @packageDocumentation comment for this package)
+
+```