@pie-lib/drag 4.0.3-next.1 → 4.0.3-next.127
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 +23 -3
- 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 +31 -2
- package/src/__tests__/placeholder.test.jsx +1 -1
- package/src/drag-provider.jsx +27 -2
- package/src/placeholder.jsx +8 -2
package/lib/drag-provider.js
CHANGED
|
@@ -18,16 +18,26 @@ 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;
|
|
22
24
|
var _useState = (0, _react.useState)(null),
|
|
23
25
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
24
26
|
activeId = _useState2[0],
|
|
25
27
|
setActiveId = _useState2[1];
|
|
28
|
+
|
|
29
|
+
// Only build a keyboard sensor options object when a consumer actually customizes
|
|
30
|
+
// it, so consumers that don't pass these props get dnd-kit's own defaults exactly
|
|
31
|
+
// as before (arrow-key nudging, Tab ends the drag, etc.).
|
|
32
|
+
var keyboardSensorOptions = keyboardCoordinateGetter || keyboardCodes ? {
|
|
33
|
+
coordinateGetter: keyboardCoordinateGetter,
|
|
34
|
+
keyboardCodes: keyboardCodes
|
|
35
|
+
} : undefined;
|
|
26
36
|
var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
|
|
27
37
|
activationConstraint: {
|
|
28
38
|
distance: 8
|
|
29
39
|
}
|
|
30
|
-
}), (0, _core.useSensor)(_core.KeyboardSensor));
|
|
40
|
+
}), (0, _core.useSensor)(_core.KeyboardSensor, keyboardSensorOptions));
|
|
31
41
|
var handleDragStart = function handleDragStart(event) {
|
|
32
42
|
setActiveId(event.active.id);
|
|
33
43
|
if (onDragStart) {
|
|
@@ -55,7 +65,17 @@ DragProvider.propTypes = {
|
|
|
55
65
|
onDragStart: _propTypes["default"].func,
|
|
56
66
|
collisionDetection: _propTypes["default"].func,
|
|
57
67
|
modifiers: _propTypes["default"].arrayOf(_propTypes["default"].func),
|
|
58
|
-
autoScroll: _propTypes["default"].object
|
|
68
|
+
autoScroll: _propTypes["default"].object,
|
|
69
|
+
// Custom dnd-kit KeyboardSensor coordinateGetter (e.g. for Tab/Shift+Tab-based placement).
|
|
70
|
+
// Omit to keep dnd-kit's default keyboard-dragging behavior.
|
|
71
|
+
keyboardCoordinateGetter: _propTypes["default"].func,
|
|
72
|
+
// Overrides for dnd-kit's KeyboardSensor keyboardCodes (start/cancel/end).
|
|
73
|
+
// Omit to keep dnd-kit's defaults.
|
|
74
|
+
keyboardCodes: _propTypes["default"].shape({
|
|
75
|
+
start: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
76
|
+
cancel: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
77
|
+
end: _propTypes["default"].arrayOf(_propTypes["default"].string)
|
|
78
|
+
})
|
|
59
79
|
};
|
|
60
80
|
var _default = exports["default"] = DragProvider;
|
|
61
81
|
//# 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","_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}) {\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 >\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};\n\nexport default DragProvider;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAiG,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,wBAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE1F,SAASmB,YAAYA,CAAAC,IAAA,EASzB;EAAA,IARDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAClBC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,wBAAwB,GAAAP,IAAA,CAAxBO,wBAAwB;IACxBC,aAAa,GAAAR,IAAA,CAAbQ,aAAa;EAEb,IAAAC,SAAA,GAAgC,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAvCI,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;;EAE5B;EACA;EACA;EACA,IAAMI,qBAAqB,GACzBR,wBAAwB,IAAIC,aAAa,GAAG;IAAEQ,gBAAgB,EAAET,wBAAwB;IAAEC,aAAa,EAAbA;EAAc,CAAC,GAAGS,SAAS;EAEvH,IAAMC,OAAO,GAAG,IAAAC,gBAAU,EACxB,IAAAC,eAAS,EAACC,mBAAa,EAAE;IAAEC,oBAAoB,EAAE;MAAEC,QAAQ,EAAE;IAAE;EAAE,CAAC,CAAC,EACnE,IAAAH,eAAS,EAACI,oBAAc,EAAET,qBAAqB,CACjD,CAAC;EAED,IAAMU,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAK,EAAK;IACjCZ,WAAW,CAACY,KAAK,CAACC,MAAM,CAACC,EAAE,CAAC;IAC5B,IAAIzB,WAAW,EAAE;MACfA,WAAW,CAACuB,KAAK,CAAC;IACpB;EACF,CAAC;EAED,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CAAIH,KAAK,EAAK;IAC/BZ,WAAW,CAAC,IAAI,CAAC;IACjB,IAAIZ,SAAS,EAAE;MACbA,SAAS,CAACwB,KAAK,CAAC;IAClB;EACF,CAAC;EAED,oBACErD,MAAA,YAAAyD,aAAA,CAACpD,KAAA,CAAAqD,UAAU;IACTb,OAAO,EAAEA,OAAQ;IACjBf,WAAW,EAAEsB,eAAgB;IAC7BvB,SAAS,EAAE2B,aAAc;IACzBzB,kBAAkB,EAAEA,kBAAmB;IACvCC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA;EAAW,GAEtBL,QACS,CAAC;AAEjB;AAEAF,YAAY,CAACiC,SAAS,GAAG;EACvB/B,QAAQ,EAAEgC,qBAAS,CAACC,IAAI,CAACC,UAAU;EACnCjC,SAAS,EAAE+B,qBAAS,CAACG,IAAI;EACzBjC,WAAW,EAAE8B,qBAAS,CAACG,IAAI;EAC3BhC,kBAAkB,EAAE6B,qBAAS,CAACG,IAAI;EAClC/B,SAAS,EAAE4B,qBAAS,CAACI,OAAO,CAACJ,qBAAS,CAACG,IAAI,CAAC;EAC5C9B,UAAU,EAAE2B,qBAAS,CAACK,MAAM;EAC5B;EACA;EACA/B,wBAAwB,EAAE0B,qBAAS,CAACG,IAAI;EACxC;EACA;EACA5B,aAAa,EAAEyB,qBAAS,CAACM,KAAK,CAAC;IAC7BC,KAAK,EAAEP,qBAAS,CAACI,OAAO,CAACJ,qBAAS,CAACQ,MAAM,CAAC;IAC1CC,MAAM,EAAET,qBAAS,CAACI,OAAO,CAACJ,qBAAS,CAACQ,MAAM,CAAC;IAC3CE,GAAG,EAAEV,qBAAS,CAACI,OAAO,CAACJ,qBAAS,CAACQ,MAAM;EACzC,CAAC;AACH,CAAC;AAAC,IAAAG,QAAA,GAAAC,OAAA,cAEa9C,YAAY","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.127+137cbc16b",
|
|
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": "137cbc16bafa6750044c9fdf5050cfc60e8423b5"
|
|
30
30
|
}
|
|
@@ -181,11 +181,11 @@ describe('DragProvider', () => {
|
|
|
181
181
|
expect(useSensor).toHaveBeenCalledWith('PointerSensor', { activationConstraint: { distance: 8 } });
|
|
182
182
|
});
|
|
183
183
|
|
|
184
|
-
it('should initialize KeyboardSensor', () => {
|
|
184
|
+
it('should initialize KeyboardSensor with no options by default', () => {
|
|
185
185
|
const { useSensor } = require('@dnd-kit/core');
|
|
186
186
|
render(<DragProvider {...defaultProps} />);
|
|
187
187
|
|
|
188
|
-
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor');
|
|
188
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', undefined);
|
|
189
189
|
});
|
|
190
190
|
|
|
191
191
|
it('should combine sensors with useSensors', () => {
|
|
@@ -194,6 +194,35 @@ describe('DragProvider', () => {
|
|
|
194
194
|
|
|
195
195
|
expect(useSensors).toHaveBeenCalled();
|
|
196
196
|
});
|
|
197
|
+
|
|
198
|
+
it('should initialize KeyboardSensor with a custom coordinateGetter when provided', () => {
|
|
199
|
+
const { useSensor } = require('@dnd-kit/core');
|
|
200
|
+
const keyboardCoordinateGetter = jest.fn();
|
|
201
|
+
render(<DragProvider {...defaultProps} keyboardCoordinateGetter={keyboardCoordinateGetter} />);
|
|
202
|
+
|
|
203
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', {
|
|
204
|
+
coordinateGetter: keyboardCoordinateGetter,
|
|
205
|
+
keyboardCodes: undefined,
|
|
206
|
+
});
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
it('should initialize KeyboardSensor with custom keyboardCodes when provided', () => {
|
|
210
|
+
const { useSensor } = require('@dnd-kit/core');
|
|
211
|
+
const keyboardCodes = { start: ['Space'], cancel: ['Escape'], end: ['Space'] };
|
|
212
|
+
render(<DragProvider {...defaultProps} keyboardCodes={keyboardCodes} />);
|
|
213
|
+
|
|
214
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', {
|
|
215
|
+
coordinateGetter: undefined,
|
|
216
|
+
keyboardCodes,
|
|
217
|
+
});
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
it('should not customize KeyboardSensor when only unrelated props are passed', () => {
|
|
221
|
+
const { useSensor } = require('@dnd-kit/core');
|
|
222
|
+
render(<DragProvider {...defaultProps} collisionDetection={jest.fn()} />);
|
|
223
|
+
|
|
224
|
+
expect(useSensor).toHaveBeenCalledWith('KeyboardSensor', undefined);
|
|
225
|
+
});
|
|
197
226
|
});
|
|
198
227
|
|
|
199
228
|
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,27 @@ 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
|
+
}) {
|
|
6
15
|
const [activeId, setActiveId] = useState(null);
|
|
7
16
|
|
|
17
|
+
// Only build a keyboard sensor options object when a consumer actually customizes
|
|
18
|
+
// it, so consumers that don't pass these props get dnd-kit's own defaults exactly
|
|
19
|
+
// as before (arrow-key nudging, Tab ends the drag, etc.).
|
|
20
|
+
const keyboardSensorOptions =
|
|
21
|
+
keyboardCoordinateGetter || keyboardCodes ? { coordinateGetter: keyboardCoordinateGetter, keyboardCodes } : undefined;
|
|
22
|
+
|
|
8
23
|
const sensors = useSensors(
|
|
9
24
|
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
|
|
10
|
-
useSensor(KeyboardSensor),
|
|
25
|
+
useSensor(KeyboardSensor, keyboardSensorOptions),
|
|
11
26
|
);
|
|
12
27
|
|
|
13
28
|
const handleDragStart = (event) => {
|
|
@@ -45,6 +60,16 @@ DragProvider.propTypes = {
|
|
|
45
60
|
collisionDetection: PropTypes.func,
|
|
46
61
|
modifiers: PropTypes.arrayOf(PropTypes.func),
|
|
47
62
|
autoScroll: PropTypes.object,
|
|
63
|
+
// Custom dnd-kit KeyboardSensor coordinateGetter (e.g. for Tab/Shift+Tab-based placement).
|
|
64
|
+
// Omit to keep dnd-kit's default keyboard-dragging behavior.
|
|
65
|
+
keyboardCoordinateGetter: PropTypes.func,
|
|
66
|
+
// Overrides for dnd-kit's KeyboardSensor keyboardCodes (start/cancel/end).
|
|
67
|
+
// Omit to keep dnd-kit's defaults.
|
|
68
|
+
keyboardCodes: PropTypes.shape({
|
|
69
|
+
start: PropTypes.arrayOf(PropTypes.string),
|
|
70
|
+
cancel: PropTypes.arrayOf(PropTypes.string),
|
|
71
|
+
end: PropTypes.arrayOf(PropTypes.string),
|
|
72
|
+
}),
|
|
48
73
|
};
|
|
49
74
|
|
|
50
75
|
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
|
|