@pie-lib/drag 4.0.3-next.1 → 4.0.3-next.133
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/lib/drag-provider.js +29 -4
- package/lib/drag-provider.js.map +1 -1
- package/lib/placeholder.js +2 -2
- package/lib/placeholder.js.map +1 -1
- package/package.json +5 -5
- package/src/__tests__/drag-provider.test.jsx +49 -3
- package/src/__tests__/placeholder.test.jsx +1 -1
- package/src/drag-provider.jsx +32 -2
- package/src/placeholder.jsx +8 -2
package/lib/drag-provider.js
CHANGED
|
@@ -18,16 +18,27 @@ function DragProvider(_ref) {
|
|
|
18
18
|
onDragStart = _ref.onDragStart,
|
|
19
19
|
collisionDetection = _ref.collisionDetection,
|
|
20
20
|
modifiers = _ref.modifiers,
|
|
21
|
-
autoScroll = _ref.autoScroll
|
|
21
|
+
autoScroll = _ref.autoScroll,
|
|
22
|
+
keyboardCoordinateGetter = _ref.keyboardCoordinateGetter,
|
|
23
|
+
keyboardCodes = _ref.keyboardCodes,
|
|
24
|
+
accessibility = _ref.accessibility;
|
|
22
25
|
var _useState = (0, _react.useState)(null),
|
|
23
26
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
24
27
|
activeId = _useState2[0],
|
|
25
28
|
setActiveId = _useState2[1];
|
|
29
|
+
|
|
30
|
+
// Only build a keyboard sensor options object when a consumer actually customizes
|
|
31
|
+
// it, so consumers that don't pass these props get dnd-kit's own defaults exactly
|
|
32
|
+
// as before (arrow-key nudging, Tab ends the drag, etc.).
|
|
33
|
+
var keyboardSensorOptions = keyboardCoordinateGetter || keyboardCodes ? {
|
|
34
|
+
coordinateGetter: keyboardCoordinateGetter,
|
|
35
|
+
keyboardCodes: keyboardCodes
|
|
36
|
+
} : undefined;
|
|
26
37
|
var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
|
|
27
38
|
activationConstraint: {
|
|
28
39
|
distance: 8
|
|
29
40
|
}
|
|
30
|
-
}), (0, _core.useSensor)(_core.KeyboardSensor));
|
|
41
|
+
}), (0, _core.useSensor)(_core.KeyboardSensor, keyboardSensorOptions));
|
|
31
42
|
var handleDragStart = function handleDragStart(event) {
|
|
32
43
|
setActiveId(event.active.id);
|
|
33
44
|
if (onDragStart) {
|
|
@@ -46,7 +57,8 @@ function DragProvider(_ref) {
|
|
|
46
57
|
onDragEnd: handleDragEnd,
|
|
47
58
|
collisionDetection: collisionDetection,
|
|
48
59
|
modifiers: modifiers,
|
|
49
|
-
autoScroll: autoScroll
|
|
60
|
+
autoScroll: autoScroll,
|
|
61
|
+
accessibility: accessibility
|
|
50
62
|
}, children);
|
|
51
63
|
}
|
|
52
64
|
DragProvider.propTypes = {
|
|
@@ -55,7 +67,20 @@ DragProvider.propTypes = {
|
|
|
55
67
|
onDragStart: _propTypes["default"].func,
|
|
56
68
|
collisionDetection: _propTypes["default"].func,
|
|
57
69
|
modifiers: _propTypes["default"].arrayOf(_propTypes["default"].func),
|
|
58
|
-
autoScroll: _propTypes["default"].object
|
|
70
|
+
autoScroll: _propTypes["default"].object,
|
|
71
|
+
// Custom dnd-kit KeyboardSensor coordinateGetter (e.g. for Tab/Shift+Tab-based placement).
|
|
72
|
+
// Omit to keep dnd-kit's default keyboard-dragging behavior.
|
|
73
|
+
keyboardCoordinateGetter: _propTypes["default"].func,
|
|
74
|
+
// Overrides for dnd-kit's KeyboardSensor keyboardCodes (start/cancel/end).
|
|
75
|
+
// Omit to keep dnd-kit's defaults.
|
|
76
|
+
keyboardCodes: _propTypes["default"].shape({
|
|
77
|
+
start: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
78
|
+
cancel: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
79
|
+
end: _propTypes["default"].arrayOf(_propTypes["default"].string)
|
|
80
|
+
}),
|
|
81
|
+
// Passed straight through to dnd-kit's DndContext (screenReaderInstructions,
|
|
82
|
+
// announcements, container). Omit to keep dnd-kit's defaults.
|
|
83
|
+
accessibility: _propTypes["default"].object
|
|
59
84
|
};
|
|
60
85
|
var _default = exports["default"] = DragProvider;
|
|
61
86
|
//# sourceMappingURL=drag-provider.js.map
|
package/lib/drag-provider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","onDragStart","collisionDetection","modifiers","autoScroll","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","propTypes","PropTypes","node","isRequired","func","arrayOf","object","_default","exports"],"sources":["../src/drag-provider.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';\n\nexport function DragProvider({
|
|
1
|
+
{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","onDragStart","collisionDetection","modifiers","autoScroll","keyboardCoordinateGetter","keyboardCodes","accessibility","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","keyboardSensorOptions","coordinateGetter","undefined","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","propTypes","PropTypes","node","isRequired","func","arrayOf","object","shape","start","string","cancel","end","_default","exports"],"sources":["../src/drag-provider.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';\n\nexport function DragProvider({\n children,\n onDragEnd,\n onDragStart,\n collisionDetection,\n modifiers,\n autoScroll,\n keyboardCoordinateGetter,\n keyboardCodes,\n accessibility,\n}) {\n const [activeId, setActiveId] = useState(null);\n\n // Only build a keyboard sensor options object when a consumer actually customizes\n // it, so consumers that don't pass these props get dnd-kit's own defaults exactly\n // as before (arrow-key nudging, Tab ends the drag, etc.).\n const keyboardSensorOptions =\n keyboardCoordinateGetter || keyboardCodes ? { coordinateGetter: keyboardCoordinateGetter, keyboardCodes } : undefined;\n\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),\n useSensor(KeyboardSensor, keyboardSensorOptions),\n );\n\n const handleDragStart = (event) => {\n setActiveId(event.active.id);\n if (onDragStart) {\n onDragStart(event);\n }\n };\n\n const handleDragEnd = (event) => {\n setActiveId(null);\n if (onDragEnd) {\n onDragEnd(event);\n }\n };\n\n return (\n <DndContext\n sensors={sensors}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n collisionDetection={collisionDetection}\n modifiers={modifiers}\n autoScroll={autoScroll}\n accessibility={accessibility}\n >\n {children}\n </DndContext>\n );\n}\n\nDragProvider.propTypes = {\n children: PropTypes.node.isRequired,\n onDragEnd: PropTypes.func,\n onDragStart: PropTypes.func,\n collisionDetection: PropTypes.func,\n modifiers: PropTypes.arrayOf(PropTypes.func),\n autoScroll: PropTypes.object,\n // Custom dnd-kit KeyboardSensor coordinateGetter (e.g. for Tab/Shift+Tab-based placement).\n // Omit to keep dnd-kit's default keyboard-dragging behavior.\n keyboardCoordinateGetter: PropTypes.func,\n // Overrides for dnd-kit's KeyboardSensor keyboardCodes (start/cancel/end).\n // Omit to keep dnd-kit's defaults.\n keyboardCodes: PropTypes.shape({\n start: PropTypes.arrayOf(PropTypes.string),\n cancel: PropTypes.arrayOf(PropTypes.string),\n end: PropTypes.arrayOf(PropTypes.string),\n }),\n // Passed straight through to dnd-kit's DndContext (screenReaderInstructions,\n // announcements, container). Omit to keep dnd-kit's defaults.\n accessibility: PropTypes.object,\n};\n\nexport default DragProvider;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/placeholder.js
CHANGED
|
@@ -35,7 +35,7 @@ var StyledPlaceholder = (0, _styles.styled)('div')(function (_ref) {
|
|
|
35
35
|
padding: theme.spacing(1),
|
|
36
36
|
border: "2px dashed ".concat(_renderUi.color.black())
|
|
37
37
|
},
|
|
38
|
-
'&.
|
|
38
|
+
'&.placeholderDisabled': {
|
|
39
39
|
boxShadow: 'none',
|
|
40
40
|
background: theme.palette.background.paper
|
|
41
41
|
},
|
|
@@ -83,7 +83,7 @@ var PlaceHolder = exports.PlaceHolder = function PlaceHolder(props) {
|
|
|
83
83
|
isVerticalPool = props.isVerticalPool,
|
|
84
84
|
minHeight = props.minHeight,
|
|
85
85
|
extraStyles = props.extraStyles;
|
|
86
|
-
var names = (0, _classnames["default"])('placeholder', disabled && '
|
|
86
|
+
var names = (0, _classnames["default"])('placeholder', disabled && 'placeholderDisabled', isOver && 'over', type, className);
|
|
87
87
|
var style = {};
|
|
88
88
|
if (grid && grid.columns) {
|
|
89
89
|
style.gridTemplateColumns = "repeat(".concat(grid.columns, ", 1fr)");
|
package/lib/placeholder.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","spacing","gridColumnGap","padding","border","concat","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","extraStyles","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n '&.placeholder': {\n WebkitTouchCallout: 'none',\n WebkitUserSelect: 'none',\n KhtmlUserSelect: 'none',\n MozUserSelect: 'none',\n MsUserSelect: 'none',\n userSelect: 'none',\n width: '100%',\n height: '100%',\n background: color.white(),\n transition: 'background-color 200ms linear, border-color 200ms linear',\n boxSizing: 'border-box',\n display: 'grid',\n gridRowGap: theme.spacing(1),\n gridColumnGap: theme.spacing(1),\n padding: theme.spacing(1),\n border: `2px dashed ${color.black()}`,\n },\n '&.
|
|
1
|
+
{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","spacing","gridColumnGap","padding","border","concat","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","extraStyles","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n '&.placeholder': {\n WebkitTouchCallout: 'none',\n WebkitUserSelect: 'none',\n KhtmlUserSelect: 'none',\n MozUserSelect: 'none',\n MsUserSelect: 'none',\n userSelect: 'none',\n width: '100%',\n height: '100%',\n background: color.white(),\n transition: 'background-color 200ms linear, border-color 200ms linear',\n boxSizing: 'border-box',\n display: 'grid',\n gridRowGap: theme.spacing(1),\n gridColumnGap: theme.spacing(1),\n padding: theme.spacing(1),\n border: `2px dashed ${color.black()}`,\n },\n '&.placeholderDisabled': {\n boxShadow: 'none',\n background: theme.palette.background.paper,\n },\n '&.over': {\n border: `1px solid ${grey[500]}`,\n backgroundColor: `${grey[300]}`,\n },\n '&.board': {\n padding: theme.spacing(1),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '100px',\n justifyContent: 'center',\n overflow: 'hidden',\n touchAction: 'none',\n backgroundColor: color.backgroundDark(),\n },\n '&.categorizeBoard': {\n padding: theme.spacing(0.5),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '100px',\n justifyContent: 'center',\n overflow: 'hidden',\n touchAction: 'none',\n backgroundColor: color.backgroundDark(),\n },\n '&.verticalPool': {\n display: 'flex',\n flexFlow: 'column wrap',\n },\n}));\n\nexport const PlaceHolder = (props) => {\n const {\n children,\n className,\n isOver,\n type,\n grid,\n disabled,\n choiceBoard,\n isCategorize,\n isVerticalPool,\n minHeight,\n extraStyles,\n } = props;\n\n const names = classNames(\n 'placeholder',\n disabled && 'placeholderDisabled',\n isOver && 'over',\n type,\n className,\n );\n\n const style = {};\n\n if (grid && grid.columns) {\n style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n }\n\n if (grid && grid.rows) {\n const repeatValue = grid.rowsRepeatValue || '1fr';\n\n style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n }\n\n // The \"type\" is only sent through placement-ordering / placeholder\n // It can be \"choice\" or \"target\"\n // We apply a different style for the \"choice\" type\n // For any other type, use a dashed black border and a white fill\n if (type === 'choice') {\n style.border = `1px solid ${color.borderLight()}`;\n style.background = color.backgroundDark();\n }\n\n const boardStyle = isCategorize ? 'categorizeBoard' : 'board';\n\n return (\n <StyledPlaceholder\n style={{ ...style, minHeight: minHeight, ...extraStyles }}\n className={classNames(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')}\n >\n {children}\n </StyledPlaceholder>\n );\n};\n\nPlaceHolder.propTypes = {\n choiceBoard: PropTypes.bool,\n grid: PropTypes.shape({\n columns: PropTypes.number,\n rows: PropTypes.number,\n // if a different value then 1fr is wanted\n rowsRepeatValue: PropTypes.string,\n }),\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n className: PropTypes.string,\n isOver: PropTypes.bool,\n index: PropTypes.number,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n isCategorize: PropTypes.bool,\n isVerticalPool: PropTypes.bool,\n minHeight: PropTypes.number,\n};\n\nexport default PlaceHolder;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/drag",
|
|
3
|
-
"version": "4.0.3-next.
|
|
3
|
+
"version": "4.0.3-next.133+9dfab0ec7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"@dnd-kit/sortable": "10.0.0",
|
|
11
11
|
"@dnd-kit/utilities": "3.2.2",
|
|
12
12
|
"@emotion/react": "^11.14.0",
|
|
13
|
-
"@emotion/
|
|
13
|
+
"@emotion/styled": "^11.14.1",
|
|
14
14
|
"@mui/icons-material": "^7.3.4",
|
|
15
15
|
"@mui/material": "^7.3.4",
|
|
16
|
-
"@pie-lib/math-rendering": "^5.0.
|
|
17
|
-
"@pie-lib/render-ui": "^6.1.
|
|
16
|
+
"@pie-lib/math-rendering": "^5.0.2",
|
|
17
|
+
"@pie-lib/render-ui": "^6.1.0",
|
|
18
18
|
"classnames": "^2.2.6",
|
|
19
19
|
"lodash-es": "^4.17.23",
|
|
20
20
|
"prop-types": "^15.7.2",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"scripts": {},
|
|
27
27
|
"author": "",
|
|
28
28
|
"license": "ISC",
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "9dfab0ec774d60793d94d11c5257b1aca8cdb49a"
|
|
30
30
|
}
|
|
@@ -3,13 +3,14 @@ import { render, screen } from '@testing-library/react';
|
|
|
3
3
|
import { DragProvider } from '../drag-provider';
|
|
4
4
|
|
|
5
5
|
jest.mock('@dnd-kit/core', () => ({
|
|
6
|
-
DndContext: ({ children, onDragStart, onDragEnd, sensors, collisionDetection, modifiers, autoScroll }) => (
|
|
6
|
+
DndContext: ({ children, onDragStart, onDragEnd, sensors, collisionDetection, modifiers, autoScroll, accessibility }) => (
|
|
7
7
|
<div
|
|
8
8
|
data-testid="dnd-context"
|
|
9
9
|
data-has-sensors={!!sensors}
|
|
10
10
|
data-has-collision-detection={!!collisionDetection}
|
|
11
11
|
data-has-modifiers={!!modifiers}
|
|
12
12
|
data-has-auto-scroll={!!autoScroll}
|
|
13
|
+
data-has-accessibility={!!accessibility}
|
|
13
14
|
data-on-drag-start={typeof onDragStart === 'function' ? 'function' : 'undefined'}
|
|
14
15
|
data-on-drag-end={typeof onDragEnd === 'function' ? 'function' : 'undefined'}
|
|
15
16
|
>
|
|
@@ -114,12 +115,20 @@ describe('DragProvider', () => {
|
|
|
114
115
|
expect(dndContext).toHaveAttribute('data-has-auto-scroll', 'true');
|
|
115
116
|
});
|
|
116
117
|
|
|
118
|
+
it('should pass accessibility to DndContext', () => {
|
|
119
|
+
const accessibility = { screenReaderInstructions: { draggable: 'Press Space or Enter to pick up.' } };
|
|
120
|
+
render(<DragProvider {...defaultProps} accessibility={accessibility} />);
|
|
121
|
+
const dndContext = screen.getByTestId('dnd-context');
|
|
122
|
+
expect(dndContext).toHaveAttribute('data-has-accessibility', 'true');
|
|
123
|
+
});
|
|
124
|
+
|
|
117
125
|
it('should pass all props to DndContext', () => {
|
|
118
126
|
const onDragStart = jest.fn();
|
|
119
127
|
const onDragEnd = jest.fn();
|
|
120
128
|
const collisionDetection = jest.fn();
|
|
121
129
|
const modifiers = [jest.fn()];
|
|
122
130
|
const autoScroll = { enabled: true };
|
|
131
|
+
const accessibility = { screenReaderInstructions: { draggable: 'Press Space or Enter to pick up.' } };
|
|
123
132
|
|
|
124
133
|
render(
|
|
125
134
|
<DragProvider
|
|
@@ -129,6 +138,7 @@ describe('DragProvider', () => {
|
|
|
129
138
|
collisionDetection={collisionDetection}
|
|
130
139
|
modifiers={modifiers}
|
|
131
140
|
autoScroll={autoScroll}
|
|
141
|
+
accessibility={accessibility}
|
|
132
142
|
/>,
|
|
133
143
|
);
|
|
134
144
|
|
|
@@ -138,6 +148,7 @@ describe('DragProvider', () => {
|
|
|
138
148
|
expect(dndContext).toHaveAttribute('data-has-collision-detection', 'true');
|
|
139
149
|
expect(dndContext).toHaveAttribute('data-has-modifiers', 'true');
|
|
140
150
|
expect(dndContext).toHaveAttribute('data-has-auto-scroll', 'true');
|
|
151
|
+
expect(dndContext).toHaveAttribute('data-has-accessibility', 'true');
|
|
141
152
|
});
|
|
142
153
|
});
|
|
143
154
|
|
|
@@ -171,6 +182,12 @@ describe('DragProvider', () => {
|
|
|
171
182
|
const dndContext = screen.getByTestId('dnd-context');
|
|
172
183
|
expect(dndContext).toHaveAttribute('data-has-auto-scroll', 'false');
|
|
173
184
|
});
|
|
185
|
+
|
|
186
|
+
it('should work without accessibility', () => {
|
|
187
|
+
render(<DragProvider {...defaultProps} />);
|
|
188
|
+
const dndContext = screen.getByTestId('dnd-context');
|
|
189
|
+
expect(dndContext).toHaveAttribute('data-has-accessibility', 'false');
|
|
190
|
+
});
|
|
174
191
|
});
|
|
175
192
|
|
|
176
193
|
describe('sensors setup', () => {
|
|
@@ -181,11 +198,11 @@ describe('DragProvider', () => {
|
|
|
181
198
|
expect(useSensor).toHaveBeenCalledWith('PointerSensor', { activationConstraint: { distance: 8 } });
|
|
182
199
|
});
|
|
183
200
|
|
|
184
|
-
it('should initialize KeyboardSensor', () => {
|
|
201
|
+
it('should initialize KeyboardSensor with no options by default', () => {
|
|
185
202
|
const { useSensor } = require('@dnd-kit/core');
|
|
186
203
|
render(<DragProvider {...defaultProps} />);
|
|
187
204
|
|
|
188
|
-
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor');
|
|
205
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', undefined);
|
|
189
206
|
});
|
|
190
207
|
|
|
191
208
|
it('should combine sensors with useSensors', () => {
|
|
@@ -194,6 +211,35 @@ describe('DragProvider', () => {
|
|
|
194
211
|
|
|
195
212
|
expect(useSensors).toHaveBeenCalled();
|
|
196
213
|
});
|
|
214
|
+
|
|
215
|
+
it('should initialize KeyboardSensor with a custom coordinateGetter when provided', () => {
|
|
216
|
+
const { useSensor } = require('@dnd-kit/core');
|
|
217
|
+
const keyboardCoordinateGetter = jest.fn();
|
|
218
|
+
render(<DragProvider {...defaultProps} keyboardCoordinateGetter={keyboardCoordinateGetter} />);
|
|
219
|
+
|
|
220
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', {
|
|
221
|
+
coordinateGetter: keyboardCoordinateGetter,
|
|
222
|
+
keyboardCodes: undefined,
|
|
223
|
+
});
|
|
224
|
+
});
|
|
225
|
+
|
|
226
|
+
it('should initialize KeyboardSensor with custom keyboardCodes when provided', () => {
|
|
227
|
+
const { useSensor } = require('@dnd-kit/core');
|
|
228
|
+
const keyboardCodes = { start: ['Space'], cancel: ['Escape'], end: ['Space'] };
|
|
229
|
+
render(<DragProvider {...defaultProps} keyboardCodes={keyboardCodes} />);
|
|
230
|
+
|
|
231
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', {
|
|
232
|
+
coordinateGetter: undefined,
|
|
233
|
+
keyboardCodes,
|
|
234
|
+
});
|
|
235
|
+
});
|
|
236
|
+
|
|
237
|
+
it('should not customize KeyboardSensor when only unrelated props are passed', () => {
|
|
238
|
+
const { useSensor } = require('@dnd-kit/core');
|
|
239
|
+
render(<DragProvider {...defaultProps} collisionDetection={jest.fn()} />);
|
|
240
|
+
|
|
241
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', undefined);
|
|
242
|
+
});
|
|
197
243
|
});
|
|
198
244
|
|
|
199
245
|
describe('re-rendering', () => {
|
|
@@ -29,7 +29,7 @@ describe('placeholder', () => {
|
|
|
29
29
|
it('applies disabled class when disabled is true', () => {
|
|
30
30
|
const { container } = renderComponent({ disabled: true });
|
|
31
31
|
const placeholder = container.firstChild;
|
|
32
|
-
expect(placeholder).toHaveClass('
|
|
32
|
+
expect(placeholder).toHaveClass('placeholderDisabled');
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
it('applies custom className', () => {
|
package/src/drag-provider.jsx
CHANGED
|
@@ -2,12 +2,28 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
4
4
|
|
|
5
|
-
export function DragProvider({
|
|
5
|
+
export function DragProvider({
|
|
6
|
+
children,
|
|
7
|
+
onDragEnd,
|
|
8
|
+
onDragStart,
|
|
9
|
+
collisionDetection,
|
|
10
|
+
modifiers,
|
|
11
|
+
autoScroll,
|
|
12
|
+
keyboardCoordinateGetter,
|
|
13
|
+
keyboardCodes,
|
|
14
|
+
accessibility,
|
|
15
|
+
}) {
|
|
6
16
|
const [activeId, setActiveId] = useState(null);
|
|
7
17
|
|
|
18
|
+
// Only build a keyboard sensor options object when a consumer actually customizes
|
|
19
|
+
// it, so consumers that don't pass these props get dnd-kit's own defaults exactly
|
|
20
|
+
// as before (arrow-key nudging, Tab ends the drag, etc.).
|
|
21
|
+
const keyboardSensorOptions =
|
|
22
|
+
keyboardCoordinateGetter || keyboardCodes ? { coordinateGetter: keyboardCoordinateGetter, keyboardCodes } : undefined;
|
|
23
|
+
|
|
8
24
|
const sensors = useSensors(
|
|
9
25
|
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
|
|
10
|
-
useSensor(KeyboardSensor),
|
|
26
|
+
useSensor(KeyboardSensor, keyboardSensorOptions),
|
|
11
27
|
);
|
|
12
28
|
|
|
13
29
|
const handleDragStart = (event) => {
|
|
@@ -32,6 +48,7 @@ export function DragProvider({ children, onDragEnd, onDragStart, collisionDetect
|
|
|
32
48
|
collisionDetection={collisionDetection}
|
|
33
49
|
modifiers={modifiers}
|
|
34
50
|
autoScroll={autoScroll}
|
|
51
|
+
accessibility={accessibility}
|
|
35
52
|
>
|
|
36
53
|
{children}
|
|
37
54
|
</DndContext>
|
|
@@ -45,6 +62,19 @@ DragProvider.propTypes = {
|
|
|
45
62
|
collisionDetection: PropTypes.func,
|
|
46
63
|
modifiers: PropTypes.arrayOf(PropTypes.func),
|
|
47
64
|
autoScroll: PropTypes.object,
|
|
65
|
+
// Custom dnd-kit KeyboardSensor coordinateGetter (e.g. for Tab/Shift+Tab-based placement).
|
|
66
|
+
// Omit to keep dnd-kit's default keyboard-dragging behavior.
|
|
67
|
+
keyboardCoordinateGetter: PropTypes.func,
|
|
68
|
+
// Overrides for dnd-kit's KeyboardSensor keyboardCodes (start/cancel/end).
|
|
69
|
+
// Omit to keep dnd-kit's defaults.
|
|
70
|
+
keyboardCodes: PropTypes.shape({
|
|
71
|
+
start: PropTypes.arrayOf(PropTypes.string),
|
|
72
|
+
cancel: PropTypes.arrayOf(PropTypes.string),
|
|
73
|
+
end: PropTypes.arrayOf(PropTypes.string),
|
|
74
|
+
}),
|
|
75
|
+
// Passed straight through to dnd-kit's DndContext (screenReaderInstructions,
|
|
76
|
+
// announcements, container). Omit to keep dnd-kit's defaults.
|
|
77
|
+
accessibility: PropTypes.object,
|
|
48
78
|
};
|
|
49
79
|
|
|
50
80
|
export default DragProvider;
|
package/src/placeholder.jsx
CHANGED
|
@@ -24,7 +24,7 @@ const StyledPlaceholder = styled('div')(({ theme }) => ({
|
|
|
24
24
|
padding: theme.spacing(1),
|
|
25
25
|
border: `2px dashed ${color.black()}`,
|
|
26
26
|
},
|
|
27
|
-
'&.
|
|
27
|
+
'&.placeholderDisabled': {
|
|
28
28
|
boxShadow: 'none',
|
|
29
29
|
background: theme.palette.background.paper,
|
|
30
30
|
},
|
|
@@ -75,7 +75,13 @@ export const PlaceHolder = (props) => {
|
|
|
75
75
|
extraStyles,
|
|
76
76
|
} = props;
|
|
77
77
|
|
|
78
|
-
const names = classNames(
|
|
78
|
+
const names = classNames(
|
|
79
|
+
'placeholder',
|
|
80
|
+
disabled && 'placeholderDisabled',
|
|
81
|
+
isOver && 'over',
|
|
82
|
+
type,
|
|
83
|
+
className,
|
|
84
|
+
);
|
|
79
85
|
|
|
80
86
|
const style = {};
|
|
81
87
|
|