@atlaskit/pragmatic-drag-and-drop-react-accessibility 1.1.2 → 1.1.4

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.
Files changed (21) hide show
  1. package/CHANGELOG.md +128 -111
  2. package/dist/cjs/drag-handle-button-base.js +9 -5
  3. package/dist/cjs/drag-handle-button-small.js +13 -4
  4. package/dist/cjs/drag-handle-button.js +2 -2
  5. package/dist/es2019/drag-handle-button-base.js +9 -5
  6. package/dist/es2019/drag-handle-button-small.js +13 -4
  7. package/dist/es2019/drag-handle-button.js +2 -2
  8. package/dist/esm/drag-handle-button-base.js +9 -5
  9. package/dist/esm/drag-handle-button-small.js +13 -4
  10. package/dist/esm/drag-handle-button.js +2 -2
  11. package/package.json +5 -7
  12. package/dist/cjs/drag-handle-icon-small.js +0 -26
  13. package/dist/cjs/drag-handle-icon.js +0 -16
  14. package/dist/es2019/drag-handle-icon-small.js +0 -20
  15. package/dist/es2019/drag-handle-icon.js +0 -10
  16. package/dist/esm/drag-handle-icon-small.js +0 -19
  17. package/dist/esm/drag-handle-icon.js +0 -9
  18. package/dist/types/drag-handle-icon-small.d.ts +0 -4
  19. package/dist/types/drag-handle-icon.d.ts +0 -3
  20. package/dist/types-ts4.5/drag-handle-icon-small.d.ts +0 -4
  21. package/dist/types-ts4.5/drag-handle-icon.d.ts +0 -3
package/CHANGELOG.md CHANGED
@@ -1,209 +1,226 @@
1
1
  # @atlaskit/pragmatic-drag-and-drop-react-accessibility
2
2
 
3
+ ## 1.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#107125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107125)
8
+ [`bba5df29ef98`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bba5df29ef98) -
9
+ ts-ignore css prop error to unblock local consumption in jira
10
+
11
+ ## 1.1.3
12
+
13
+ ### Patch Changes
14
+
15
+ - [#106643](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106643)
16
+ [`66e90d5874ad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/66e90d5874ad) -
17
+ Shifting icon color from `'color.icon.subtle'` (`Neutral700`) to `'color.text'` (`Neutral1000`) to
18
+ match standard icon button appearance and for improved accessibility.
19
+
3
20
  ## 1.1.2
4
21
 
5
22
  ### Patch Changes
6
23
 
7
- - Updated dependencies
24
+ - Updated dependencies
8
25
 
9
26
  ## 1.1.1
10
27
 
11
28
  ### Patch Changes
12
29
 
13
- - [#88354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88354)
14
- [`4c87d9b4f0c2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4c87d9b4f0c2) -
15
- The internal composition of this component has changed. There is no expected change in behavior.
30
+ - [#88354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88354)
31
+ [`4c87d9b4f0c2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4c87d9b4f0c2) -
32
+ The internal composition of this component has changed. There is no expected change in behavior.
16
33
 
17
34
  ## 1.1.0
18
35
 
19
36
  ### Minor Changes
20
37
 
21
- - [#87853](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87853)
22
- [`54e884fd8d96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/54e884fd8d96) -
23
- Increasing `react` `peerDependency` range to include `react@17` and `react@18`.
38
+ - [#87853](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87853)
39
+ [`54e884fd8d96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/54e884fd8d96) -
40
+ Increasing `react` `peerDependency` range to include `react@17` and `react@18`.
24
41
 
25
42
  ## 1.0.7
26
43
 
27
44
  ### Patch Changes
28
45
 
29
- - [#84398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84398)
30
- [`77694db987fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77694db987fc) -
31
- Public release of Pragmatic drag and drop documentation
46
+ - [#84398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84398)
47
+ [`77694db987fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77694db987fc) -
48
+ Public release of Pragmatic drag and drop documentation
32
49
 
33
50
  ## 1.0.6
34
51
 
35
52
  ### Patch Changes
36
53
 
37
- - [#84250](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84250)
38
- [`a1cc31800621`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1cc31800621) -
39
- Internal refactor: now relying on automatic fallback insertion for `token()`. This change
40
- provides an improved experience for consumers who don't have Atlassian Design tokens enabled.
54
+ - [#84250](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84250)
55
+ [`a1cc31800621`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1cc31800621) -
56
+ Internal refactor: now relying on automatic fallback insertion for `token()`. This change provides
57
+ an improved experience for consumers who don't have Atlassian Design tokens enabled.
41
58
 
42
59
  ## 1.0.5
43
60
 
44
61
  ### Patch Changes
45
62
 
46
- - [#83702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83702)
47
- [`4d9e25ab4eaa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4d9e25ab4eaa) -
48
- Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent
49
- description to various consumers, and so they are consistently formed amongst each other.
63
+ - [#83702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83702)
64
+ [`4d9e25ab4eaa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4d9e25ab4eaa) -
65
+ Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent
66
+ description to various consumers, and so they are consistently formed amongst each other.
50
67
 
51
- - `package.json` `description`
52
- - `README.md`
53
- - Website documentation
68
+ - `package.json` `description`
69
+ - `README.md`
70
+ - Website documentation
54
71
 
55
72
  ## 1.0.4
56
73
 
57
74
  ### Patch Changes
58
75
 
59
- - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
60
- [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
61
- Upgrade Typescript from `4.9.5` to `5.4.2`
76
+ - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
77
+ [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
78
+ Upgrade Typescript from `4.9.5` to `5.4.2`
62
79
 
63
80
  ## 1.0.3
64
81
 
65
82
  ### Patch Changes
66
83
 
67
- - Updated dependencies
84
+ - Updated dependencies
68
85
 
69
86
  ## 1.0.2
70
87
 
71
88
  ### Patch Changes
72
89
 
73
- - Updated dependencies
90
+ - Updated dependencies
74
91
 
75
92
  ## 1.0.1
76
93
 
77
94
  ### Patch Changes
78
95
 
79
- - Updated dependencies
96
+ - Updated dependencies
80
97
 
81
98
  ## 1.0.0
82
99
 
83
100
  ### Major Changes
84
101
 
85
- - [#70616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70616)
86
- [`42e57ea65fee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/42e57ea65fee) -
87
- This is our first `major` release (`1.0`) for all Pragmatic drag and drop packages.
102
+ - [#70616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70616)
103
+ [`42e57ea65fee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/42e57ea65fee) -
104
+ This is our first `major` release (`1.0`) for all Pragmatic drag and drop packages.
88
105
 
89
- For a detailed explanation of these changes, and how to upgrade (automatically) to `1.0` please
90
- see our
91
- [1.0 upgrade guide](http://atlassian.design/components/pragmatic-drag-and-drop/core-package/upgrade-guides/upgrade-guide-for-1.0)
106
+ For a detailed explanation of these changes, and how to upgrade (automatically) to `1.0` please
107
+ see our
108
+ [1.0 upgrade guide](http://atlassian.design/components/pragmatic-drag-and-drop/core-package/upgrade-guides/upgrade-guide-for-1.0)
92
109
 
93
110
  ## 0.5.1
94
111
 
95
112
  ### Patch Changes
96
113
 
97
- - Updated dependencies
114
+ - Updated dependencies
98
115
 
99
116
  ## 0.5.0
100
117
 
101
118
  ### Minor Changes
102
119
 
103
- - [#59748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59748)
104
- [`70d293a2f8b8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70d293a2f8b8) -
105
- Removed the `DragHandleDropdownMenu` and `DragHandleDropdownMenuSmall` exports. Composition with
106
- `DropdownMenu` should be used instead.
107
-
108
- This decision was made to avoid the risk of mismatched versions of `@atlaskit/dropdown-menu`,
109
- which could occur when this package was bringing in a different version to the main one
110
- installed. It is also preferable to encourage composition, which allows for greater flexibility
111
- and control for consumers.
112
-
113
- **Before**
114
-
115
- ```tsx
116
- import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
117
- import { DragHandleDropdownMenu } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-dropdown-menu';
118
-
119
- function MyComponent() {
120
- const myRef = useRef<HTMLButtonElement>(null);
121
- return (
122
- <DragHandleDropdownMenu triggerRef={myRef} label="Reorder">
123
- <DropdownItemGroup>
124
- <DropdownItem>Move up</DropdownItem>
125
- <DropdownItem>Move down</DropdownItem>
126
- </DropdownItemGroup>
127
- </DragHandleDropdownMenu>
128
- );
129
- }
130
- ```
131
-
132
- **After**
133
-
134
- ```tsx
135
- import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
136
- import mergeRefs from '@atlaskit/ds-lib/merge-refs';
137
- import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
138
-
139
- function MyComponent() {
140
- const myRef = useRef<HTMLButtonElement>(null);
141
- return (
142
- <DropdownMenu
143
- trigger={({ triggerRef, ...triggerProps }) => (
144
- <DragHandleButton
145
- ref={mergeRefs([myRef, triggerRef])}
146
- {...triggerProps}
147
- label="Reorder"
148
- />
149
- )}
150
- >
151
- <DropdownItemGroup>
152
- <DropdownItem>Move up</DropdownItem>
153
- <DropdownItem>Move down</DropdownItem>
154
- </DropdownItemGroup>
155
- </DropdownMenu>
156
- );
157
- }
158
- ```
120
+ - [#59748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59748)
121
+ [`70d293a2f8b8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70d293a2f8b8) -
122
+ Removed the `DragHandleDropdownMenu` and `DragHandleDropdownMenuSmall` exports. Composition with
123
+ `DropdownMenu` should be used instead.
124
+
125
+ This decision was made to avoid the risk of mismatched versions of `@atlaskit/dropdown-menu`,
126
+ which could occur when this package was bringing in a different version to the main one installed.
127
+ It is also preferable to encourage composition, which allows for greater flexibility and control
128
+ for consumers.
129
+
130
+ **Before**
131
+
132
+ ```tsx
133
+ import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
134
+ import { DragHandleDropdownMenu } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-dropdown-menu';
135
+
136
+ function MyComponent() {
137
+ const myRef = useRef<HTMLButtonElement>(null);
138
+ return (
139
+ <DragHandleDropdownMenu triggerRef={myRef} label="Reorder">
140
+ <DropdownItemGroup>
141
+ <DropdownItem>Move up</DropdownItem>
142
+ <DropdownItem>Move down</DropdownItem>
143
+ </DropdownItemGroup>
144
+ </DragHandleDropdownMenu>
145
+ );
146
+ }
147
+ ```
148
+
149
+ **After**
150
+
151
+ ```tsx
152
+ import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
153
+ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
154
+ import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
155
+
156
+ function MyComponent() {
157
+ const myRef = useRef<HTMLButtonElement>(null);
158
+ return (
159
+ <DropdownMenu
160
+ trigger={({ triggerRef, ...triggerProps }) => (
161
+ <DragHandleButton
162
+ ref={mergeRefs([myRef, triggerRef])}
163
+ {...triggerProps}
164
+ label="Reorder"
165
+ />
166
+ )}
167
+ >
168
+ <DropdownItemGroup>
169
+ <DropdownItem>Move up</DropdownItem>
170
+ <DropdownItem>Move down</DropdownItem>
171
+ </DropdownItemGroup>
172
+ </DropdownMenu>
173
+ );
174
+ }
175
+ ```
159
176
 
160
177
  ## 0.4.1
161
178
 
162
179
  ### Patch Changes
163
180
 
164
- - Updated dependencies
181
+ - Updated dependencies
165
182
 
166
183
  ## 0.4.0
167
184
 
168
185
  ### Minor Changes
169
186
 
170
- - [#41296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41296)
171
- [`3e479ba1a4a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e479ba1a4a) - [ux]
172
- The drag handle icon now uses the `color.icon.subtle` token.
173
- - [#41296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41296)
174
- [`ac64412c674`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac64412c674) -
175
- Introduced small variants of the drag handle button and drag handle dropdown menu.
187
+ - [#41296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41296)
188
+ [`3e479ba1a4a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e479ba1a4a) - [ux] The
189
+ drag handle icon now uses the `color.icon.subtle` token.
190
+ - [#41296](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41296)
191
+ [`ac64412c674`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac64412c674) -
192
+ Introduced small variants of the drag handle button and drag handle dropdown menu.
176
193
 
177
- These are intended for existing experiences with little space available to introduce a drag
178
- handle. They are not recommended for general use.
194
+ These are intended for existing experiences with little space available to introduce a drag
195
+ handle. They are not recommended for general use.
179
196
 
180
- These small variants can be accessed through the `/drag-handle-button-small` and
181
- `/drag-handle-dropdown-menu-small` entrypoints.
197
+ These small variants can be accessed through the `/drag-handle-button-small` and
198
+ `/drag-handle-dropdown-menu-small` entrypoints.
182
199
 
183
200
  ### Patch Changes
184
201
 
185
- - Updated dependencies
202
+ - Updated dependencies
186
203
 
187
204
  ## 0.3.1
188
205
 
189
206
  ### Patch Changes
190
207
 
191
- - Updated dependencies
208
+ - Updated dependencies
192
209
 
193
210
  ## 0.3.0
194
211
 
195
212
  ### Minor Changes
196
213
 
197
- - [#38144](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38144)
198
- [`ee9aa9b7300`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee9aa9b7300) - [ux]
199
- The button now has `display: flex`
214
+ - [#38144](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38144)
215
+ [`ee9aa9b7300`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee9aa9b7300) - [ux] The
216
+ button now has `display: flex`
200
217
 
201
218
  ## 0.2.0
202
219
 
203
220
  ### Minor Changes
204
221
 
205
- - [#38115](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38115)
206
- [`ffb3e727aaf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ffb3e727aaf) - The
207
- `type` of the `DragHandleButton` now defaults to `'button'` (instead of `'submit'`)
208
- - [`9f5b56f5677`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f5b56f5677) - The
209
- `DragHandleButton` props now extend `ButtonHTMLAttributes` (instead of just `HTMLAttributes`)
222
+ - [#38115](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38115)
223
+ [`ffb3e727aaf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ffb3e727aaf) - The
224
+ `type` of the `DragHandleButton` now defaults to `'button'` (instead of `'submit'`)
225
+ - [`9f5b56f5677`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f5b56f5677) - The
226
+ `DragHandleButton` props now extend `ButtonHTMLAttributes` (instead of just `HTMLAttributes`)
package/dist/cjs/drag-handle-button-base.js CHANGED
@@ -17,6 +17,7 @@ var _excluded = ["children", "isSelected", "testId", "appearance", "type"];
17
17
  * which prevents dragging.
18
18
  */
19
19
  var buttonStyles = (0, _react2.css)({
20
+ color: "var(--ds-text, #172B4D)",
20
21
  borderRadius: "var(--ds-border-radius-100, 4px)",
21
22
  padding: "var(--ds-space-0, 0px)",
22
23
  width: 'max-content',
@@ -27,19 +28,19 @@ var buttonStyles = (0, _react2.css)({
27
28
  var buttonAppearanceStyles = {
28
29
  default: (0, _react2.css)({
29
30
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
30
- ':hover': {
31
+ '&:hover': {
31
32
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
32
33
  },
33
- ':active': {
34
+ '&:active': {
34
35
  backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
35
36
  }
36
37
  }),
37
38
  subtle: (0, _react2.css)({
38
39
  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
39
- ':hover': {
40
+ '&:hover': {
40
41
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
41
42
  },
42
- ':active': {
43
+ '&:active': {
43
44
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
44
45
  }
45
46
  }),
@@ -67,7 +68,10 @@ var DragHandleButtonBase = exports.DragHandleButtonBase = /*#__PURE__*/(0, _reac
67
68
  buttonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
68
69
  var appearance = isSelected ? 'selected' : appearanceProp;
69
70
  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("button", (0, _extends2.default)({
70
- ref: ref,
71
+ ref: ref
72
+ // @ts-ignore - This was added when `@atlaskit/pragmatic-drag-and-drop-react-accessibility` was enrolled into JFE local consumption
73
+ // There seems to be an incompatibility in the `css` prop between jira and platform
74
+ ,
71
75
  css: [buttonStyles, buttonAppearanceStyles[appearance]],
72
76
  "data-testid": testId,
73
77
  type: type
package/dist/cjs/drag-handle-button-small.js CHANGED
@@ -9,11 +9,17 @@ exports.DragHandleButtonSmall = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
13
+ var _primitives = require("@atlaskit/primitives");
12
14
  var _dragHandleButtonBase = require("./drag-handle-button-base");
13
- var _dragHandleIconSmall = require("./drag-handle-icon-small");
14
15
  var _excluded = ["label"];
15
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
+ var iconSmallStyles = (0, _primitives.xcss)({
19
+ display: 'inline-flex',
20
+ marginInline: 'space.negative.050'
21
+ });
22
+
17
23
  /**
18
24
  * A button with pre-configured styling to look like a drag handle.
19
25
  *
@@ -25,7 +31,10 @@ var DragHandleButtonSmall = exports.DragHandleButtonSmall = /*#__PURE__*/(0, _re
25
31
  buttonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
26
32
  return /*#__PURE__*/_react.default.createElement(_dragHandleButtonBase.DragHandleButtonBase, (0, _extends2.default)({
27
33
  ref: ref
28
- }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandleIconSmall.DragHandleIconSmall, {
29
- label: label
30
- }));
34
+ }, buttonProps), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
35
+ xcss: iconSmallStyles
36
+ }, /*#__PURE__*/_react.default.createElement(_dragHandler.default, {
37
+ label: label,
38
+ size: "small"
39
+ })));
31
40
  });
package/dist/cjs/drag-handle-button.js CHANGED
@@ -9,8 +9,8 @@ exports.DragHandleButton = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
12
13
  var _dragHandleButtonBase = require("./drag-handle-button-base");
13
- var _dragHandleIcon = require("./drag-handle-icon");
14
14
  var _excluded = ["label"];
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -25,7 +25,7 @@ var DragHandleButton = exports.DragHandleButton = /*#__PURE__*/(0, _react.forwar
25
25
  buttonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
26
26
  return /*#__PURE__*/_react.default.createElement(_dragHandleButtonBase.DragHandleButtonBase, (0, _extends2.default)({
27
27
  ref: ref
28
- }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandleIcon.DragHandleIcon, {
28
+ }, buttonProps), /*#__PURE__*/_react.default.createElement(_dragHandler.default, {
29
29
  label: label
30
30
  }));
31
31
  });
package/dist/es2019/drag-handle-button-base.js CHANGED
@@ -9,6 +9,7 @@ import FocusRing from '@atlaskit/focus-ring';
9
9
  * which prevents dragging.
10
10
  */
11
11
  const buttonStyles = css({
12
+ color: "var(--ds-text, #172B4D)",
12
13
  borderRadius: "var(--ds-border-radius-100, 4px)",
13
14
  padding: "var(--ds-space-0, 0px)",
14
15
  width: 'max-content',
@@ -19,19 +20,19 @@ const buttonStyles = css({
19
20
  const buttonAppearanceStyles = {
20
21
  default: css({
21
22
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
22
- ':hover': {
23
+ '&:hover': {
23
24
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
24
25
  },
25
- ':active': {
26
+ '&:active': {
26
27
  backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
27
28
  }
28
29
  }),
29
30
  subtle: css({
30
31
  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
31
- ':hover': {
32
+ '&:hover': {
32
33
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
33
34
  },
34
- ':active': {
35
+ '&:active': {
35
36
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
36
37
  }
37
38
  }),
@@ -66,7 +67,10 @@ export const DragHandleButtonBase = /*#__PURE__*/forwardRef(function DragHandleB
66
67
  }, ref) {
67
68
  const appearance = isSelected ? 'selected' : appearanceProp;
68
69
  return jsx(FocusRing, null, jsx("button", _extends({
69
- ref: ref,
70
+ ref: ref
71
+ // @ts-ignore - This was added when `@atlaskit/pragmatic-drag-and-drop-react-accessibility` was enrolled into JFE local consumption
72
+ // There seems to be an incompatibility in the `css` prop between jira and platform
73
+ ,
70
74
  css: [buttonStyles, buttonAppearanceStyles[appearance]],
71
75
  "data-testid": testId,
72
76
  type: type
package/dist/es2019/drag-handle-button-small.js CHANGED
@@ -1,7 +1,13 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef } from 'react';
3
+ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
4
+ import { Box, xcss } from '@atlaskit/primitives';
3
5
  import { DragHandleButtonBase } from './drag-handle-button-base';
4
- import { DragHandleIconSmall } from './drag-handle-icon-small';
6
+ const iconSmallStyles = xcss({
7
+ display: 'inline-flex',
8
+ marginInline: 'space.negative.050'
9
+ });
10
+
5
11
  /**
6
12
  * A button with pre-configured styling to look like a drag handle.
7
13
  *
@@ -14,7 +20,10 @@ export const DragHandleButtonSmall = /*#__PURE__*/forwardRef(function DragHandle
14
20
  }, ref) {
15
21
  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
16
22
  ref: ref
17
- }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIconSmall, {
18
- label: label
19
- }));
23
+ }, buttonProps), /*#__PURE__*/React.createElement(Box, {
24
+ xcss: iconSmallStyles
25
+ }, /*#__PURE__*/React.createElement(DragHandlerIcon, {
26
+ label: label,
27
+ size: "small"
28
+ })));
20
29
  });
package/dist/es2019/drag-handle-button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef } from 'react';
3
+ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
3
4
  import { DragHandleButtonBase } from './drag-handle-button-base';
4
- import { DragHandleIcon } from './drag-handle-icon';
5
5
  /**
6
6
  * A button with pre-configured styling to look like a drag handle.
7
7
  *
@@ -14,7 +14,7 @@ export const DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButto
14
14
  }, ref) {
15
15
  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
16
16
  ref: ref
17
- }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIcon, {
17
+ }, buttonProps), /*#__PURE__*/React.createElement(DragHandlerIcon, {
18
18
  label: label
19
19
  }));
20
20
  });
package/dist/esm/drag-handle-button-base.js CHANGED
@@ -11,6 +11,7 @@ import FocusRing from '@atlaskit/focus-ring';
11
11
  * which prevents dragging.
12
12
  */
13
13
  var buttonStyles = css({
14
+ color: "var(--ds-text, #172B4D)",
14
15
  borderRadius: "var(--ds-border-radius-100, 4px)",
15
16
  padding: "var(--ds-space-0, 0px)",
16
17
  width: 'max-content',
@@ -21,19 +22,19 @@ var buttonStyles = css({
21
22
  var buttonAppearanceStyles = {
22
23
  default: css({
23
24
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
24
- ':hover': {
25
+ '&:hover': {
25
26
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
26
27
  },
27
- ':active': {
28
+ '&:active': {
28
29
  backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
29
30
  }
30
31
  }),
31
32
  subtle: css({
32
33
  backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
33
- ':hover': {
34
+ '&:hover': {
34
35
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
35
36
  },
36
- ':active': {
37
+ '&:active': {
37
38
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
38
39
  }
39
40
  }),
@@ -61,7 +62,10 @@ export var DragHandleButtonBase = /*#__PURE__*/forwardRef(function DragHandleBut
61
62
  buttonProps = _objectWithoutProperties(_ref, _excluded);
62
63
  var appearance = isSelected ? 'selected' : appearanceProp;
63
64
  return jsx(FocusRing, null, jsx("button", _extends({
64
- ref: ref,
65
+ ref: ref
66
+ // @ts-ignore - This was added when `@atlaskit/pragmatic-drag-and-drop-react-accessibility` was enrolled into JFE local consumption
67
+ // There seems to be an incompatibility in the `css` prop between jira and platform
68
+ ,
65
69
  css: [buttonStyles, buttonAppearanceStyles[appearance]],
66
70
  "data-testid": testId,
67
71
  type: type
package/dist/esm/drag-handle-button-small.js CHANGED
@@ -2,8 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["label"];
4
4
  import React, { forwardRef } from 'react';
5
+ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
6
+ import { Box, xcss } from '@atlaskit/primitives';
5
7
  import { DragHandleButtonBase } from './drag-handle-button-base';
6
- import { DragHandleIconSmall } from './drag-handle-icon-small';
8
+ var iconSmallStyles = xcss({
9
+ display: 'inline-flex',
10
+ marginInline: 'space.negative.050'
11
+ });
12
+
7
13
  /**
8
14
  * A button with pre-configured styling to look like a drag handle.
9
15
  *
@@ -15,7 +21,10 @@ export var DragHandleButtonSmall = /*#__PURE__*/forwardRef(function DragHandleBu
15
21
  buttonProps = _objectWithoutProperties(_ref, _excluded);
16
22
  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
17
23
  ref: ref
18
- }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIconSmall, {
19
- label: label
20
- }));
24
+ }, buttonProps), /*#__PURE__*/React.createElement(Box, {
25
+ xcss: iconSmallStyles
26
+ }, /*#__PURE__*/React.createElement(DragHandlerIcon, {
27
+ label: label,
28
+ size: "small"
29
+ })));
21
30
  });
package/dist/esm/drag-handle-button.js CHANGED
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["label"];
4
4
  import React, { forwardRef } from 'react';
5
+ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
5
6
  import { DragHandleButtonBase } from './drag-handle-button-base';
6
- import { DragHandleIcon } from './drag-handle-icon';
7
7
  /**
8
8
  * A button with pre-configured styling to look like a drag handle.
9
9
  *
@@ -15,7 +15,7 @@ export var DragHandleButton = /*#__PURE__*/forwardRef(function DragHandleButton(
15
15
  buttonProps = _objectWithoutProperties(_ref, _excluded);
16
16
  return /*#__PURE__*/React.createElement(DragHandleButtonBase, _extends({
17
17
  ref: ref
18
- }, buttonProps), /*#__PURE__*/React.createElement(DragHandleIcon, {
18
+ }, buttonProps), /*#__PURE__*/React.createElement(DragHandlerIcon, {
19
19
  label: label
20
20
  }));
21
21
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/pragmatic-drag-and-drop-react-accessibility",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "description": "An optional package for Pragmatic drag and drop containing react components to assist with setting up accessible experiences",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,9 +38,9 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@atlaskit/focus-ring": "^1.4.0",
41
- "@atlaskit/icon": "^22.1.0",
42
- "@atlaskit/primitives": "^6.0.0",
43
- "@atlaskit/tokens": "^1.45.0",
41
+ "@atlaskit/icon": "^22.3.0",
42
+ "@atlaskit/primitives": "^6.5.0",
43
+ "@atlaskit/tokens": "^1.49.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@emotion/react": "^11.7.1"
46
46
  },
@@ -52,7 +52,6 @@
52
52
  "@atlaskit/ds-lib": "^2.3.0",
53
53
  "@atlaskit/ssr": "*",
54
54
  "@atlaskit/visual-regression": "*",
55
- "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
56
55
  "@testing-library/react": "^12.1.5",
57
56
  "react-dom": "^16.8.0",
58
57
  "typescript": "~5.4.2",
@@ -92,6 +91,5 @@
92
91
  "import-no-extraneous-disable-for-examples-and-docs"
93
92
  ]
94
93
  }
95
- },
96
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
94
+ }
97
95
  }
package/dist/cjs/drag-handle-icon-small.js DELETED
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.DragHandleIconSmall = DragHandleIconSmall;
8
- var _react = require("@emotion/react");
9
- var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
10
- var _primitives = require("@atlaskit/primitives");
11
- /** @jsx jsx */
12
-
13
- var iconSmallStyles = (0, _primitives.xcss)({
14
- display: 'inline-flex',
15
- marginInline: 'space.negative.050'
16
- });
17
- function DragHandleIconSmall(_ref) {
18
- var label = _ref.label;
19
- return (0, _react.jsx)(_primitives.Box, {
20
- xcss: iconSmallStyles
21
- }, (0, _react.jsx)(_dragHandler.default, {
22
- label: label,
23
- size: "small",
24
- primaryColor: "var(--ds-icon-subtle, #626F86)"
25
- }));
26
- }
package/dist/cjs/drag-handle-icon.js DELETED
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.DragHandleIcon = DragHandleIcon;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
10
- function DragHandleIcon(_ref) {
11
- var label = _ref.label;
12
- return /*#__PURE__*/_react.default.createElement(_dragHandler.default, {
13
- label: label,
14
- primaryColor: "var(--ds-icon-subtle, #626F86)"
15
- });
16
- }
package/dist/es2019/drag-handle-icon-small.js DELETED
@@ -1,20 +0,0 @@
1
- /** @jsx jsx */
2
-
3
- import { jsx } from '@emotion/react';
4
- import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
5
- import { Box, xcss } from '@atlaskit/primitives';
6
- const iconSmallStyles = xcss({
7
- display: 'inline-flex',
8
- marginInline: 'space.negative.050'
9
- });
10
- export function DragHandleIconSmall({
11
- label
12
- }) {
13
- return jsx(Box, {
14
- xcss: iconSmallStyles
15
- }, jsx(DragHandlerIcon, {
16
- label: label,
17
- size: "small",
18
- primaryColor: "var(--ds-icon-subtle, #626F86)"
19
- }));
20
- }
package/dist/es2019/drag-handle-icon.js DELETED
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
3
- export function DragHandleIcon({
4
- label
5
- }) {
6
- return /*#__PURE__*/React.createElement(DragHandlerIcon, {
7
- label: label,
8
- primaryColor: "var(--ds-icon-subtle, #626F86)"
9
- });
10
- }
package/dist/esm/drag-handle-icon-small.js DELETED
@@ -1,19 +0,0 @@
1
- /** @jsx jsx */
2
-
3
- import { jsx } from '@emotion/react';
4
- import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
5
- import { Box, xcss } from '@atlaskit/primitives';
6
- var iconSmallStyles = xcss({
7
- display: 'inline-flex',
8
- marginInline: 'space.negative.050'
9
- });
10
- export function DragHandleIconSmall(_ref) {
11
- var label = _ref.label;
12
- return jsx(Box, {
13
- xcss: iconSmallStyles
14
- }, jsx(DragHandlerIcon, {
15
- label: label,
16
- size: "small",
17
- primaryColor: "var(--ds-icon-subtle, #626F86)"
18
- }));
19
- }
package/dist/esm/drag-handle-icon.js DELETED
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
3
- export function DragHandleIcon(_ref) {
4
- var label = _ref.label;
5
- return /*#__PURE__*/React.createElement(DragHandlerIcon, {
6
- label: label,
7
- primaryColor: "var(--ds-icon-subtle, #626F86)"
8
- });
9
- }
package/dist/types/drag-handle-icon-small.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
3
- import type { DragHandleIconProps } from './types';
4
- export declare function DragHandleIconSmall({ label }: DragHandleIconProps): jsx.JSX.Element;
package/dist/types/drag-handle-icon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import type { DragHandleIconProps } from './types';
3
- export declare function DragHandleIcon({ label }: DragHandleIconProps): JSX.Element;
package/dist/types-ts4.5/drag-handle-icon-small.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
3
- import type { DragHandleIconProps } from './types';
4
- export declare function DragHandleIconSmall({ label }: DragHandleIconProps): jsx.JSX.Element;
package/dist/types-ts4.5/drag-handle-icon.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import type { DragHandleIconProps } from './types';
3
- export declare function DragHandleIcon({ label }: DragHandleIconProps): JSX.Element;