@atlaskit/pragmatic-drag-and-drop-react-accessibility 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/pragmatic-drag-and-drop-react-accessibility
 
+## 0.4.0
+
+### Minor Changes
+
+- [#41296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41296) [`3e479ba1a4a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e479ba1a4a) - [ux] The drag handle icon now uses the `color.icon.subtle` token.
+- [#41296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41296) [`ac64412c674`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac64412c674) - Introduced small variants of the drag handle button and drag handle dropdown menu.
+
+  These are intended for existing experiences with little space available to
+  introduce a drag handle. They are not recommended for general use.
+
+  These small variants can be accessed through the `/drag-handle-button-small` and
+  `/drag-handle-dropdown-menu-small` entrypoints.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.1
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ import { Code } from '@atlaskit/code';
 import SectionMessage from '@atlaskit/section-message';
 
 import DragHandleButtonExample from '../../examples/drag-handle-button';
+import DragHandleButtonSmallExample from '../../examples/drag-handle-button-small';
 
 <SectionMessage appearance="warning">
   This component does not use the <Code>@atlaskit/button</Code> component,
@@ -19,3 +20,12 @@ import DragHandleButtonExample from '../../examples/drag-handle-button';
 ## Default
 
 <Example Component={DragHandleButtonExample} />
+
+## Small variant
+
+A small variant is available through the `/drag-handle-button-small` entrypoint.
+
+It is intended for experiences with very limited space to accomodate a drag handle.
+It is not recommended for general use due to the small target size.
+
+<Example Component={DragHandleButtonSmallExample} />

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

@@ -8,6 +8,7 @@ import { Code } from '@atlaskit/code';
 import SectionMessage from '@atlaskit/section-message';
 
 import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-menu';
+import DragHandleDropdownMenuSmallExample from '../../examples/drag-handle-dropdown-menu-small';
 
 <SectionMessage appearance="warning">
   This component does not use the <Code>@atlaskit/button</Code> component,
@@ -19,3 +20,12 @@ import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-m
 ## Default
 
 <Example Component={DragHandleDropdownMenuExample} />
+
+## Small variant
+
+A small variant is available through the `/drag-handle-dropdown-menu-small` entrypoint.
+
+It is intended for experiences with very limited space to accomodate a drag handle.
+It is not recommended for general use due to the small target size.
+
+<Example Component={DragHandleButtonSizeExample} />

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleButtonBase = 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 _excluded = ["children", "isSelected", "testId", "appearance", "type"];
+/** @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',
+  display: 'flex'
+});
+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 DragHandleButtonBase = exports.DragHandleButtonBase = /*#__PURE__*/(0, _react.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 = (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,
+    type: type
+  }, buttonProps), children));
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleButtonSmall = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _dragHandleButtonBase = require("./drag-handle-button-base");
+var _dragHandleIconSmall = require("./drag-handle-icon-small");
+var _excluded = ["label"];
+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 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 DragHandleButtonSmall = exports.DragHandleButtonSmall = /*#__PURE__*/(0, _react.forwardRef)(function DragHandleButton(_ref, ref) {
+  var label = _ref.label,
+    buttonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_dragHandleButtonBase.DragHandleButtonBase, (0, _extends2.default)({
+    ref: ref
+  }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandleIconSmall.DragHandleIconSmall, {
+    label: label
+  }));
+});

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

@@ -1,54 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 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", "type"];
-/** @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',
-  display: 'flex'
-});
-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)"
-  })
-};
+var _react = _interopRequireWildcard(require("react"));
+var _dragHandleButtonBase = require("./drag-handle-button-base");
+var _dragHandleIcon = require("./drag-handle-icon");
+var _excluded = ["label"];
+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 button with pre-configured styling to look like a drag handle.
  *
@@ -56,22 +21,11 @@ var buttonAppearanceStyles = {
  * cancels `mouseDown` events, which prevents dragging.
  */
 var DragHandleButton = exports.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,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
+  var 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,
-    type: type
-  }, buttonProps), (0, _react2.jsx)(_dragHandler.default, {
+  return /*#__PURE__*/_react.default.createElement(_dragHandleButtonBase.DragHandleButtonBase, (0, _extends2.default)({
+    ref: ref
+  }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandleIcon.DragHandleIcon, {
     label: label
-  })));
+  }));
 });

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleDropdownMenuSmall = DragHandleDropdownMenuSmall;
+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 _dragHandleButtonBase = require("./drag-handle-button-base");
+var _dragHandleIconSmall = require("./drag-handle-icon-small");
+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 DragHandleDropdownMenuSmall(_ref) {
+  var children = _ref.children,
+    consumerRef = _ref.triggerRef,
+    appearance = _ref.appearance,
+    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(_dragHandleButtonBase.DragHandleButtonBase, (0, _extends2.default)({
+      ref: mergedRef,
+      appearance: appearance
+    }, triggerProps), /*#__PURE__*/_react.default.createElement(_dragHandleIconSmall.DragHandleIconSmall, {
+      label: label
+    }));
+  }, [appearance, consumerRef, label]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    trigger: renderTrigger
+  }, children);
+}

package/dist/cjs/drag-handle-icon-small.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleIconSmall = DragHandleIconSmall;
+var _react = require("@emotion/react");
+var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
+var _primitives = require("@atlaskit/primitives");
+/** @jsx jsx */
+
+var iconSmallStyles = (0, _primitives.xcss)({
+  display: 'inline-flex',
+  marginInline: "var(--ds-space-negative-050, -4px)"
+});
+function DragHandleIconSmall(_ref) {
+  var label = _ref.label;
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: iconSmallStyles
+  }, (0, _react.jsx)(_dragHandler.default, {
+    label: label,
+    size: "small",
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
+  }));
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleIcon = DragHandleIcon;
+var _react = _interopRequireDefault(require("react"));
+var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
+function DragHandleIcon(_ref) {
+  var label = _ref.label;
+  return /*#__PURE__*/_react.default.createElement(_dragHandler.default, {
+    label: label,
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
+  });
+}

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,74 @@
+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';
+/**
+ * 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',
+  display: 'flex'
+});
+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 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));
+});

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

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { DragHandleButtonBase } from './drag-handle-button-base';
+import { DragHandleIconSmall } from './drag-handle-icon-small';
+/**
+ * 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 DragHandleButtonSmall = /*#__PURE__*/forwardRef(function DragHandleButton({
+  label,
+  ...buttonProps
+}, ref) {
+  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
+    ref: ref
+  }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIconSmall, {
+    label: label
+  }));
+});

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

@@ -1,46 +1,7 @@
 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',
-  display: 'flex'
-});
-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)"
-  })
-};
+import React, { forwardRef } from 'react';
+import { DragHandleButtonBase } from './drag-handle-button-base';
+import { DragHandleIcon } from './drag-handle-icon';
 /**
  * A button with pre-configured styling to look like a drag handle.
  *
@@ -48,29 +9,12 @@ const buttonAppearanceStyles = {
  * cancels `mouseDown` events, which prevents dragging.
  */
 export const DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButton({
-  isSelected = false,
-  testId,
-  appearance: appearanceProp = 'default',
   label,
-  /**
-   * 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), jsx(DragHandlerIcon, {
+  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
+    ref: ref
+  }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIcon, {
     label: label
-  })));
+  }));
 });

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

@@ -0,0 +1,34 @@
+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 { DragHandleButtonBase } from './drag-handle-button-base';
+import { DragHandleIconSmall } from './drag-handle-icon-small';
+/**
+ * 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 DragHandleDropdownMenuSmall({
+  children,
+  triggerRef: consumerRef,
+  appearance,
+  label
+}) {
+  const renderTrigger = useCallback(({
+    triggerRef,
+    ...triggerProps
+  }) => {
+    const mergedRef = mergeRefs([consumerRef, triggerRef]);
+    return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
+      ref: mergedRef,
+      appearance: appearance
+    }, triggerProps), /*#__PURE__*/React.createElement(DragHandleIconSmall, {
+      label: label
+    }));
+  }, [appearance, consumerRef, label]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: renderTrigger
+  }, children);
+}

package/dist/es2019/drag-handle-icon-small.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import { Box, xcss } from '@atlaskit/primitives';
+const iconSmallStyles = xcss({
+  display: 'inline-flex',
+  marginInline: "var(--ds-space-negative-050, -4px)"
+});
+export function DragHandleIconSmall({
+  label
+}) {
+  return jsx(Box, {
+    xcss: iconSmallStyles
+  }, jsx(DragHandlerIcon, {
+    label: label,
+    size: "small",
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
+  }));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+export function DragHandleIcon({
+  label
+}) {
+  return /*#__PURE__*/React.createElement(DragHandlerIcon, {
+    label: label,
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
+  });
+}

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "isSelected", "testId", "appearance", "type"];
+/** @jsx jsx */
+
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+/**
+ * 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',
+  display: 'flex'
+});
+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 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));
+});

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label"];
+import React, { forwardRef } from 'react';
+import { DragHandleButtonBase } from './drag-handle-button-base';
+import { DragHandleIconSmall } from './drag-handle-icon-small';
+/**
+ * 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 DragHandleButtonSmall = /*#__PURE__*/forwardRef(function DragHandleButton(_ref, ref) {
+  var label = _ref.label,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
+    ref: ref
+  }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIconSmall, {
+    label: label
+  }));
+});

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

@@ -1,48 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isSelected", "testId", "appearance", "label", "type"];
-/** @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',
-  display: 'flex'
-});
-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)"
-  })
-};
+var _excluded = ["label"];
+import React, { forwardRef } from 'react';
+import { DragHandleButtonBase } from './drag-handle-button-base';
+import { DragHandleIcon } from './drag-handle-icon';
 /**
  * A button with pre-configured styling to look like a drag handle.
  *
@@ -50,22 +11,11 @@ var buttonAppearanceStyles = {
  * 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,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
+  var 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,
-    type: type
-  }, buttonProps), jsx(DragHandlerIcon, {
+  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
+    ref: ref
+  }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIcon, {
     label: label
-  })));
+  }));
 });

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

@@ -0,0 +1,34 @@
+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 { DragHandleButtonBase } from './drag-handle-button-base';
+import { DragHandleIconSmall } from './drag-handle-icon-small';
+/**
+ * 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 DragHandleDropdownMenuSmall(_ref) {
+  var children = _ref.children,
+    consumerRef = _ref.triggerRef,
+    appearance = _ref.appearance,
+    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(DragHandleButtonBase, _extends({
+      ref: mergedRef,
+      appearance: appearance
+    }, triggerProps), /*#__PURE__*/React.createElement(DragHandleIconSmall, {
+      label: label
+    }));
+  }, [appearance, consumerRef, label]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: renderTrigger
+  }, children);
+}

package/dist/esm/drag-handle-icon-small.js

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import { Box, xcss } from '@atlaskit/primitives';
+var iconSmallStyles = xcss({
+  display: 'inline-flex',
+  marginInline: "var(--ds-space-negative-050, -4px)"
+});
+export function DragHandleIconSmall(_ref) {
+  var label = _ref.label;
+  return jsx(Box, {
+    xcss: iconSmallStyles
+  }, jsx(DragHandlerIcon, {
+    label: label,
+    size: "small",
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
+  }));
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+export function DragHandleIcon(_ref) {
+  var label = _ref.label;
+  return /*#__PURE__*/React.createElement(DragHandlerIcon, {
+    label: label,
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
+  });
+}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+/// <reference types="react" />
+import type { DragHandleButtonProps } from './types';
+export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
+/**
+ * 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 DragHandleButtonBase: import("react").ForwardRefExoticComponent<Omit<DragHandleButtonProps, "label"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * 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 DragHandleButtonSmall: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("./types").DragHandleSharedProps & {
+    isSelected?: boolean | undefined;
+    testId?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,49 +1,11 @@
-/** @jsx jsx */
-import { ButtonHTMLAttributes } from 'react';
-export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
-export type DragHandleButtonProps = ButtonHTMLAttributes<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;
-};
+import React from 'react';
 /**
  * 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<ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Change the style to indicate the button is selected
-     */
+export declare const DragHandleButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("./types").DragHandleSharedProps & {
     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>>;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DragHandleDropdownMenuProps } from './types';
+/**
+ * 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 DragHandleDropdownMenuSmall({ children, triggerRef: consumerRef, appearance, label, }: DragHandleDropdownMenuProps): JSX.Element;

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

@@ -1,23 +1,5 @@
-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;
-};
+/// <reference types="react" />
+import type { DragHandleDropdownMenuProps } from './types';
 /**
  * A dropdown menu with a predefined trigger, styled to look like a drag handle.
  *

package/dist/types/drag-handle-icon-small.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { DragHandleIconProps } from './types';
+export declare function DragHandleIconSmall({ label }: DragHandleIconProps): jsx.JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DragHandleIconProps } from './types';
+export declare function DragHandleIcon({ label }: DragHandleIconProps): JSX.Element;

package/dist/types/types.d.ts

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, ReactElement, Ref } from 'react';
+export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
+export type DragHandleSharedProps = {
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: DragHandleButtonAppearance;
+    /**
+     * Text used to describe what the button is in context.
+     */
+    label: string;
+};
+export type DragHandleButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & DragHandleSharedProps & {
+    /**
+     * 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;
+};
+export type DragHandleIconProps = {
+    label: string;
+};
+export type DragHandleDropdownMenuProps = DragHandleSharedProps & {
+    /**
+     * The contents of the dropdown menu.
+     */
+    children: ReactElement;
+    /**
+     * Ref for the button which acts as the dropdown trigger.
+     */
+    triggerRef: Ref<HTMLButtonElement>;
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import type { DragHandleButtonProps } from './types';
+export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
+/**
+ * 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 DragHandleButtonBase: import("react").ForwardRefExoticComponent<Omit<DragHandleButtonProps, "label"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * 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 DragHandleButtonSmall: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("./types").DragHandleSharedProps & {
+    isSelected?: boolean | undefined;
+    testId?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * 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: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("./types").DragHandleSharedProps & {
+    isSelected?: boolean | undefined;
+    testId?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DragHandleDropdownMenuProps } from './types';
+/**
+ * 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 DragHandleDropdownMenuSmall({ children, triggerRef: consumerRef, appearance, label, }: DragHandleDropdownMenuProps): JSX.Element;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DragHandleDropdownMenuProps } from './types';
+/**
+ * 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, appearance, label, }: DragHandleDropdownMenuProps): JSX.Element;

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

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { DragHandleIconProps } from './types';
+export declare function DragHandleIconSmall({ label }: DragHandleIconProps): jsx.JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DragHandleIconProps } from './types';
+export declare function DragHandleIcon({ label }: DragHandleIconProps): 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/dist/types-ts4.5/types.d.ts

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, ReactElement, Ref } from 'react';
+export type DragHandleButtonAppearance = 'default' | 'subtle' | 'selected';
+export type DragHandleSharedProps = {
+    /**
+     * The base styling to apply to the button
+     */
+    appearance?: DragHandleButtonAppearance;
+    /**
+     * Text used to describe what the button is in context.
+     */
+    label: string;
+};
+export type DragHandleButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & DragHandleSharedProps & {
+    /**
+     * 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;
+};
+export type DragHandleIconProps = {
+    label: string;
+};
+export type DragHandleDropdownMenuProps = DragHandleSharedProps & {
+    /**
+     * The contents of the dropdown menu.
+     */
+    children: ReactElement;
+    /**
+     * Ref for the button which acts as the dropdown trigger.
+     */
+    triggerRef: Ref<HTMLButtonElement>;
+};

package/drag-handle-button-small/package.json

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Optional react components to help implement accessible alternative flows for Pragmatic drag and drop",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,14 +37,17 @@
   "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"
+    "./drag-handle-dropdown-menu": "./src/drag-handle-dropdown-menu.tsx",
+    "./drag-handle-button-small": "./src/drag-handle-button-small.tsx",
+    "./drag-handle-dropdown-menu-small": "./src/drag-handle-dropdown-menu-small.tsx"
   },
   "dependencies": {
-    "@atlaskit/dropdown-menu": "^12.0.0",
+    "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/ds-lib": "^2.2.3",
     "@atlaskit/focus-ring": "^1.3.4",
     "@atlaskit/icon": "^21.12.6",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/primitives": "^1.6.1",
+    "@atlaskit/tokens": "^1.26.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

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)
+
+```