@atlaskit/pragmatic-drag-and-drop-react-accessibility 1.1.5 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/constellation/drag-handle-button/about.mdx +7 -9
- package/constellation/index/about.mdx +3 -1
- package/dist/cjs/drag-handle-button-base.js +1 -0
- package/dist/es2019/drag-handle-button-base.js +2 -0
- package/dist/esm/drag-handle-button-base.js +2 -0
- package/package.json +94 -94
package/CHANGELOG.md
CHANGED
|
@@ -12,10 +12,9 @@ import DragHandleButtonSmallExample from '../../examples/drag-handle-button-smal
|
|
|
12
12
|
import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-menu';
|
|
13
13
|
|
|
14
14
|
<SectionMessage appearance="warning">
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<Code><button></Code> element.
|
|
15
|
+
This component does not use the <Code>@atlaskit/button</Code> component, because{' '}
|
|
16
|
+
<Code>@atlaskit/button</Code> cancels <Code>mousedown</Code> events and prevents dragging from
|
|
17
|
+
occurring. Instead this component uses a native <Code><button></Code> element.
|
|
19
18
|
</SectionMessage>
|
|
20
19
|
|
|
21
20
|
## Default
|
|
@@ -26,8 +25,8 @@ import DragHandleDropdownMenuExample from '../../examples/drag-handle-dropdown-m
|
|
|
26
25
|
|
|
27
26
|
A small variant is available through the `/drag-handle-button-small` entrypoint.
|
|
28
27
|
|
|
29
|
-
It is intended for experiences with very limited space to accomodate a drag handle.
|
|
30
|
-
|
|
28
|
+
It is intended for experiences with very limited space to accomodate a drag handle. It is not
|
|
29
|
+
recommended for general use due to the small target size.
|
|
31
30
|
|
|
32
31
|
<Example Component={DragHandleButtonSmallExample} />
|
|
33
32
|
|
|
@@ -35,8 +34,7 @@ It is not recommended for general use due to the small target size.
|
|
|
35
34
|
|
|
36
35
|
This component can be composed with [Dropdown menu](/components/dropdown-menu).
|
|
37
36
|
|
|
38
|
-
Because the Dropdown menu provides a `triggerRef` you will need to merge it
|
|
39
|
-
|
|
40
|
-
`draggable()` registration.
|
|
37
|
+
Because the Dropdown menu provides a `triggerRef` you will need to merge it with your own ref in
|
|
38
|
+
order to use the trigger as the `dragHandle` in your `draggable()` registration.
|
|
41
39
|
|
|
42
40
|
<Example Component={DragHandleDropdownMenuExample} />
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
order: 0
|
|
3
3
|
title: React accessibility
|
|
4
|
-
description:
|
|
4
|
+
description:
|
|
5
|
+
An optional package for Pragmatic drag and drop containing react components to assist with setting
|
|
6
|
+
up accessible experiences
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
import SectionMessage from '@atlaskit/section-message';
|
|
@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
|
|
|
12
12
|
var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
|
|
13
13
|
var _excluded = ["children", "isSelected", "testId", "appearance", "type"];
|
|
14
14
|
/** @jsx jsx */
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
16
|
/**
|
|
16
17
|
* Cannot use `@atlaskit/button` here because it cancels `mousedown` events
|
|
17
18
|
* which prevents dragging.
|
|
@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
+
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
7
|
import { css, jsx } from '@emotion/react';
|
|
6
8
|
import FocusRing from '@atlaskit/focus-ring';
|
|
7
9
|
/**
|
|
@@ -4,6 +4,8 @@ var _excluded = ["children", "isSelected", "testId", "appearance", "type"];
|
|
|
4
4
|
/** @jsx jsx */
|
|
5
5
|
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
|
+
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
9
|
import { css, jsx } from '@emotion/react';
|
|
8
10
|
import FocusRing from '@atlaskit/focus-ring';
|
|
9
11
|
/**
|
package/package.json
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
2
|
+
"name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
|
|
3
|
+
"version": "1.1.7",
|
|
4
|
+
"description": "An optional package for Pragmatic drag and drop containing react components to assist with setting up accessible experiences",
|
|
5
|
+
"author": "Atlassian Pty Ltd",
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"registry": "https://registry.npmjs.org/"
|
|
9
|
+
},
|
|
10
|
+
"atlassian": {
|
|
11
|
+
"team": "Design System Team",
|
|
12
|
+
"inPublicMirror": false,
|
|
13
|
+
"releaseModel": "continuous",
|
|
14
|
+
"website": {
|
|
15
|
+
"name": "React accessibility",
|
|
16
|
+
"category": "Libraries"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"repository": "https://github.com/atlassian/pragmatic-drag-and-drop",
|
|
20
|
+
"homepage": "https://atlassian.design/components/pragmatic-drag-and-drop/",
|
|
21
|
+
"main": "dist/cjs/index.js",
|
|
22
|
+
"module": "dist/esm/index.js",
|
|
23
|
+
"module:es2019": "dist/es2019/index.js",
|
|
24
|
+
"types": "dist/types/index.d.ts",
|
|
25
|
+
"typesVersions": {
|
|
26
|
+
">=4.5 <4.9": {
|
|
27
|
+
"*": [
|
|
28
|
+
"dist/types-ts4.5/*",
|
|
29
|
+
"dist/types-ts4.5/index.d.ts"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"sideEffects": false,
|
|
34
|
+
"atlaskit:src": "src/index.tsx",
|
|
35
|
+
"af:exports": {
|
|
36
|
+
"./drag-handle-button": "./src/drag-handle-button.tsx",
|
|
37
|
+
"./drag-handle-button-small": "./src/drag-handle-button-small.tsx"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@atlaskit/focus-ring": "^1.5.0",
|
|
41
|
+
"@atlaskit/icon": "^22.5.0",
|
|
42
|
+
"@atlaskit/primitives": "^9.0.0",
|
|
43
|
+
"@atlaskit/tokens": "^1.53.0",
|
|
44
|
+
"@babel/runtime": "^7.0.0",
|
|
45
|
+
"@emotion/react": "^11.7.1"
|
|
46
|
+
},
|
|
47
|
+
"peerDependencies": {
|
|
48
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@af/visual-regression": "*",
|
|
52
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
53
|
+
"@atlaskit/ssr": "*",
|
|
54
|
+
"@atlaskit/visual-regression": "*",
|
|
55
|
+
"@testing-library/react": "^12.1.5",
|
|
56
|
+
"react-dom": "^16.8.0",
|
|
57
|
+
"typescript": "~5.4.2",
|
|
58
|
+
"wait-for-expect": "^1.2.0"
|
|
59
|
+
},
|
|
60
|
+
"techstack": {
|
|
61
|
+
"@atlassian/frontend": {
|
|
62
|
+
"import-structure": [
|
|
63
|
+
"atlassian-conventions"
|
|
64
|
+
],
|
|
65
|
+
"circular-dependencies": [
|
|
66
|
+
"file-and-folder-level"
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
"@repo/internal": {
|
|
70
|
+
"dom-events": "use-bind-event-listener",
|
|
71
|
+
"analytics": [
|
|
72
|
+
"analytics-next"
|
|
73
|
+
],
|
|
74
|
+
"design-tokens": [
|
|
75
|
+
"color"
|
|
76
|
+
],
|
|
77
|
+
"theming": [
|
|
78
|
+
"react-context"
|
|
79
|
+
],
|
|
80
|
+
"ui-components": [
|
|
81
|
+
"lite-mode"
|
|
82
|
+
],
|
|
83
|
+
"deprecation": [
|
|
84
|
+
"no-deprecated-imports"
|
|
85
|
+
],
|
|
86
|
+
"styling": [
|
|
87
|
+
"static",
|
|
88
|
+
"emotion"
|
|
89
|
+
],
|
|
90
|
+
"imports": [
|
|
91
|
+
"import-no-extraneous-disable-for-examples-and-docs"
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|