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

package/CHANGELOG.md

@@ -1,8 +1,20 @@
 # @atlaskit/pragmatic-drag-and-drop-react-accessibility
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [#38144](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38144) [`ee9aa9b7300`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee9aa9b7300) - [ux] The button now has `display: flex`
+
 ## 0.2.0
 
 ### Minor Changes
 
-- [`ffb3e727aaf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ffb3e727aaf) - The `type` of the `DragHandleButton` now defaults to `'button'` (instead of `'submit'`)
+- [#38115](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38115) [`ffb3e727aaf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ffb3e727aaf) - The `type` of the `DragHandleButton` now defaults to `'button'` (instead of `'submit'`)
 - [`9f5b56f5677`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f5b56f5677) - The `DragHandleButton` props now extend `ButtonHTMLAttributes` (instead of just `HTMLAttributes`)

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

@@ -12,10 +12,10 @@ 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.
+  and prevents dragging from occurring. Instead this component uses a native{' '}
+  <Code>&lt;button&gt;</Code> element.
 </SectionMessage>
 
 ## Default
 
-<Example Component={DragHandleButtonExample} />
+<Example Component={DragHandleButtonExample} />

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

@@ -11,4 +11,3 @@ import DragHandleButtonProps from '!!extract-react-types-loader!../../extract-re
 ## Props
 
 <PropsTable heading="" props={DragHandleButtonProps} />
-

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

@@ -12,10 +12,10 @@ import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-m
 <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.
+  and prevents dragging from occurring. Instead this component uses a native{' '}
+  <Code>&lt;button&gt;</Code> element.
 </SectionMessage>
 
 ## Default
 
-<Example Component={DragHandleDropdownMenuExample} />
+<Example Component={DragHandleDropdownMenuExample} />

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

@@ -11,4 +11,3 @@ import DragHandleButtonProps from '!!extract-react-types-loader!../../extract-re
 ## Props
 
 <PropsTable heading="" props={DragHandleButtonProps} />
-

package/constellation/index/about.mdx

@@ -1,8 +1,6 @@
 ---
 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.
+alternative flows for accessibility.

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

@@ -22,7 +22,8 @@ var buttonStyles = (0, _react2.css)({
   padding: "var(--ds-space-0, 0px)",
   width: 'max-content',
   border: 'none',
-  cursor: 'grab'
+  cursor: 'grab',
+  display: 'flex'
 });
 var buttonAppearanceStyles = {
   default: (0, _react2.css)({
@@ -54,7 +55,7 @@ var buttonAppearanceStyles = {
  * 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 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,
@@ -73,5 +74,4 @@ var DragHandleButton = /*#__PURE__*/(0, _react.forwardRef)(function DragHandleBu
   }, buttonProps), (0, _react2.jsx)(_dragHandler.default, {
     label: label
   })));
-});
-exports.DragHandleButton = DragHandleButton;
+});

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

@@ -23,6 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function DragHandleDropdownMenu(_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,
@@ -31,9 +32,10 @@ function DragHandleDropdownMenu(_ref) {
     return /*#__PURE__*/_react.default.createElement(_dragHandleButton.DragHandleButton, (0, _extends2.default)({
       ref: mergedRef
     }, triggerProps, {
-      label: label
+      label: label,
+      appearance: appearance
     }));
-  }, [consumerRef, label]);
+  }, [appearance, consumerRef, label]);
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     trigger: renderTrigger
   }, children);

package/dist/cjs/index.js

@@ -7,5 +7,4 @@ exports.default = void 0;
 /**
  * This file exists for module resolution purposes.
  */
-var _default = {};
-exports.default = _default;
+var _default = exports.default = {};

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

@@ -14,7 +14,8 @@ const buttonStyles = css({
   padding: "var(--ds-space-0, 0px)",
   width: 'max-content',
   border: 'none',
-  cursor: 'grab'
+  cursor: 'grab',
+  display: 'flex'
 });
 const buttonAppearanceStyles = {
   default: css({
@@ -51,6 +52,15 @@ export const DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButto
   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) {

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

@@ -12,6 +12,7 @@ import { DragHandleButton } from './drag-handle-button';
 export function DragHandleDropdownMenu({
   children,
   triggerRef: consumerRef,
+  appearance,
   label
 }) {
   const renderTrigger = useCallback(({
@@ -22,9 +23,10 @@ export function DragHandleDropdownMenu({
     return /*#__PURE__*/React.createElement(DragHandleButton, _extends({
       ref: mergedRef
     }, triggerProps, {
-      label: label
+      label: label,
+      appearance: appearance
     }));
-  }, [consumerRef, label]);
+  }, [appearance, consumerRef, label]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: renderTrigger
   }, children);

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

@@ -16,7 +16,8 @@ var buttonStyles = css({
   padding: "var(--ds-space-0, 0px)",
   width: 'max-content',
   border: 'none',
-  cursor: 'grab'
+  cursor: 'grab',
+  display: 'flex'
 });
 var buttonAppearanceStyles = {
   default: css({

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

@@ -14,6 +14,7 @@ import { DragHandleButton } from './drag-handle-button';
 export function DragHandleDropdownMenu(_ref) {
   var children = _ref.children,
     consumerRef = _ref.triggerRef,
+    appearance = _ref.appearance,
     label = _ref.label;
   var renderTrigger = useCallback(function (_ref2) {
     var triggerRef = _ref2.triggerRef,
@@ -22,9 +23,10 @@ export function DragHandleDropdownMenu(_ref) {
     return /*#__PURE__*/React.createElement(DragHandleButton, _extends({
       ref: mergedRef
     }, triggerProps, {
-      label: label
+      label: label,
+      appearance: appearance
     }));
-  }, [consumerRef, label]);
+  }, [appearance, consumerRef, label]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: renderTrigger
   }, children);

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

@@ -23,4 +23,4 @@ export type DragHandleDropdownMenuProps = {
  *
  * The API is designed to mirror the `@atlaskit/dropdown-menu` API.
  */
-export declare function DragHandleDropdownMenu({ children, triggerRef: consumerRef, label, }: DragHandleDropdownMenuProps): JSX.Element;
+export declare function DragHandleDropdownMenu({ children, triggerRef: consumerRef, appearance, label, }: DragHandleDropdownMenuProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Optional react components to help implement accessible alternative flows for Pragmatic drag and drop",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -12,8 +12,11 @@
     "inPublicMirror": false,
     "releaseModel": "continuous",
     "website": {
-      "name": "PragmaticDragAndDropReactAccessibility",
-      "category": "Components"
+      "name": "React accessibility",
+      "category": "Libraries",
+      "status": {
+        "type": "alpha"
+      }
     }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -37,11 +40,11 @@
     "./drag-handle-dropdown-menu": "./src/drag-handle-dropdown-menu.tsx"
   },
   "dependencies": {
-    "@atlaskit/dropdown-menu": "^11.11.2",
+    "@atlaskit/dropdown-menu": "^12.0.0",
     "@atlaskit/ds-lib": "^2.2.3",
     "@atlaskit/focus-ring": "^1.3.4",
     "@atlaskit/icon": "^21.12.6",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

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

@@ -1,49 +0,0 @@
-/** @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;
-};
-/**
- * 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
-     */
-    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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-## 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)
-
-```