akeneo-design-system 0.1.239 → 0.1.241

package/jest.unit.config.js

@@ -3,7 +3,7 @@ module.exports = {
   moduleFileExtensions: ['js', 'ts', 'tsx'],
   moduleDirectories: ['node_modules', 'src'],
   moduleNameMapper: {
-    "\\.(jpg|ico|jpeg|png|gif|svg|css)$": "<rootDir>/__mocks__/fileMock.js"
+    '\\.(jpg|ico|jpeg|png|gif|svg|css)$': '<rootDir>/__mocks__/fileMock.js',
   },
   roots: ['<rootDir>'],
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
@@ -18,12 +18,13 @@ module.exports = {
   collectCoverageFrom: ['src/**/*.ts?(x)', '!**/*.visual.ts?(x)'],
   cacheDirectory: '/tmp/jest',
   coveragePathIgnorePatterns: [
-      'src/illustrations',
-      'src/icons',
-      'src/theme',
-      'src/storybook',
-      'generator',
-      'src/shared/PreviewGallery',
+    'src/illustrations',
+    'src/icons',
+    'src/theme',
+    'src/storybook',
+    'generator',
+    'src/shared/PreviewGallery',
+    'src/contexts',
   ],
   coverageReporters: ['text-summary', 'html'],
   coverageDirectory: 'coverage',

package/lib/components/Image/Image.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 declare type Fit = 'cover' | 'contain';
-declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "height" | "width" | "alt" | "src" | "fit" | "isStacked"> & {
+declare type Background = 'white' | 'checkerboard';
+declare const Image: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "height" | "width" | "alt" | "src" | "fit" | "isStacked" | "background"> & {
     src: string | null;
     alt: string;
     width?: number | undefined;
     height?: number | undefined;
     fit?: Fit | undefined;
     isStacked?: boolean | undefined;
+    background?: Background | undefined;
 } & React.RefAttributes<HTMLImageElement>>;
 export { Image };

package/lib/components/Image/Image.js

@@ -53,7 +53,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
 var EMPTY_IMAGE = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
-var ImageContainer = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n"])), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('grey', 80), function (_a) {
+var ImageContainer = styled_components_1.default.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n  \n  ", "\n"], ["\n  border: 1px solid ", ";\n  object-fit: ", ";\n  box-sizing: border-box;\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), (0, theme_1.getColor)('grey', 80), function (_a) {
     var fit = _a.fit;
     return fit;
 }, function (_a) {
@@ -62,11 +62,15 @@ var ImageContainer = styled_components_1.default.img(templateObject_2 || (templa
 }, function (_a) {
     var isLoading = _a.isLoading;
     return isLoading && theme_1.placeholderStyle;
+}, function (_a) {
+    var background = _a.background;
+    return background === 'checkerboard'
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-image: linear-gradient(45deg, ", " 25%, transparent 25%),\n            linear-gradient(135deg, ", " 25%, transparent 25%),\n            linear-gradient(45deg, transparent 75%, ", " 75%),\n            linear-gradient(135deg, transparent 75%, ", " 75%);\n          background-size: 25px 25px; /* Must be a square */\n          background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */\n        "], ["\n          background-image: linear-gradient(45deg, ", " 25%, transparent 25%),\n            linear-gradient(135deg, ", " 25%, transparent 25%),\n            linear-gradient(45deg, transparent 75%, ", " 75%),\n            linear-gradient(135deg, transparent 75%, ", " 75%);\n          background-size: 25px 25px; /* Must be a square */\n          background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */\n        "])), (0, theme_1.getColor)('grey', 60), (0, theme_1.getColor)('grey', 60), (0, theme_1.getColor)('grey', 60), (0, theme_1.getColor)('grey', 60)) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background: ", ";\n        "], ["\n          background: ", ";\n        "])), (0, theme_1.getColor)(background));
 });
 var Image = react_1.default.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.fit, fit = _b === void 0 ? 'cover' : _b, _c = _a.isStacked, isStacked = _c === void 0 ? false : _c, src = _a.src, rest = __rest(_a, ["fit", "isStacked", "src"]);
-    return (react_1.default.createElement(ImageContainer, __assign({ isLoading: null === src, src: src !== null && src !== void 0 ? src : EMPTY_IMAGE, ref: forwardedRef, fit: fit, isStacked: isStacked }, rest)));
+    var _b = _a.fit, fit = _b === void 0 ? 'cover' : _b, _c = _a.isStacked, isStacked = _c === void 0 ? false : _c, _d = _a.background, background = _d === void 0 ? 'white' : _d, src = _a.src, rest = __rest(_a, ["fit", "isStacked", "background", "src"]);
+    return (react_1.default.createElement(ImageContainer, __assign({ isLoading: null === src, src: src !== null && src !== void 0 ? src : EMPTY_IMAGE, ref: forwardedRef, fit: fit, isStacked: isStacked, background: background }, rest)));
 });
 exports.Image = Image;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=Image.js.map

package/lib/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAiC;AACjC,qEAA8C;AAC9C,qCAAuD;AAIvD,IAAM,WAAW,GAAG,8DAA8D,CAAC;AAInF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,2LAMhC,kBACe,EAAiB,yBACX,EAAoB,mBAC1B,EAAc,oCAG1B,EAKC,QAED,EAA8C,IACjD,KAbe,IAAA,gBAAQ,EAAC,OAAO,CAAC,EACX,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC1B,UAAC,EAAK;QAAJ,GAAG,SAAA;IAAM,OAAA,GAAG;AAAH,CAAG,EAG1B,UAAC,EAAW;QAAV,SAAS,eAAA;IACX,OAAA,SAAS,QACT,uBAAG,oLAAA,mCAC0B,EAAiB,iBAAkB,EAAoB,0BACjE,EAAiB,iBAAkB,EAAoB,SACzE,KAF4B,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACjE,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CACzE;AAJD,CAIC,EAED,UAAC,EAAW;QAAV,SAAS,eAAA;IAAM,OAAA,SAAS,IAAI,wBAAgB;AAA7B,CAA6B,CACjD,CAAC;AAwCF,IAAM,KAAK,GAAG,eAAK,CAAC,UAAU,CAC5B,UAAC,EAA4D,EAAE,YAAmC;IAAhG,IAAA,WAAa,EAAb,GAAG,mBAAG,OAAO,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,GAAG,SAAA,EAAK,IAAI,cAA/C,2BAAgD,CAAD;IAC9C,OAAO,CACL,8BAAC,cAAc,aACb,SAAS,EAAE,IAAI,KAAK,GAAG,EACvB,GAAG,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,WAAW,EACvB,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,IAChB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,sBAAK"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAiC;AACjC,qEAA8C;AAC9C,qCAAuD;AAIvD,IAAM,WAAW,GAAG,8DAA8D,CAAC;AAMnF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,kLAOhC,wBACqB,EAAoB,mBAC1B,EAAc,oCAG1B,EAKC,QAED,EAA8C,UAE9C,EAYK,IACR,KA1BqB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC1B,UAAC,EAAK;QAAJ,GAAG,SAAA;IAAM,OAAA,GAAG;AAAH,CAAG,EAG1B,UAAC,EAAW;QAAV,SAAS,eAAA;IACX,OAAA,SAAS,QACT,uBAAG,oLAAA,mCAC0B,EAAiB,iBAAkB,EAAoB,0BACjE,EAAiB,iBAAkB,EAAoB,SACzE,KAF4B,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACjE,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAAkB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CACzE;AAJD,CAIC,EAED,UAAC,EAAW;QAAV,SAAS,eAAA;IAAM,OAAA,SAAS,IAAI,wBAAgB;AAA7B,CAA6B,EAE9C,UAAC,EAAY;QAAX,UAAU,gBAAA;IACZ,OAAA,UAAU,KAAK,cAAc;QAC3B,CAAC,KAAC,uBAAG,whBAAA,uDAC0C,EAAoB,+DACnC,EAAoB,+EACJ,EAAoB,+DACnB,EAAoB,wMAGlE,KAN4C,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACnC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACJ,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACnB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAIrE,CAAC,KAAC,uBAAG,6GAAA,0BACa,EAAoB,aACnC,KADe,IAAA,gBAAQ,EAAC,UAAU,CAAC,CACnC;AAXL,CAWK,CACR,CAAC;AA6CF,IAAM,KAAK,GAAG,eAAK,CAAC,UAAU,CAC5B,UACE,EAAkF,EAClF,YAAmC;IADlC,IAAA,WAAa,EAAb,GAAG,mBAAG,OAAO,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EAAE,GAAG,SAAA,EAAK,IAAI,cAArE,yCAAsE,CAAD;IAGrE,OAAO,CACL,8BAAC,cAAc,aACb,SAAS,EAAE,IAAI,KAAK,GAAG,EACvB,GAAG,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,WAAW,EACvB,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,IAClB,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,sBAAK"}

package/lib/components/Input/TableInput/TableInput.d.ts

@@ -15,12 +15,10 @@ declare const TableInput: {
     Body: React.ForwardRefExoticComponent<{
         children?: React.ReactNode;
     } & React.RefAttributes<HTMLTableSectionElement>>;
-    Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onDragEnd" | "onDragStart" | "highlighted" | "rowIndex"> & {
+    Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "highlighted" | "rowIndex"> & {
         children?: React.ReactNode;
         highlighted?: boolean | undefined;
         rowIndex?: number | undefined;
-        onDragStart?: ((rowIndex: number) => void) | undefined;
-        onDragEnd?: (() => void) | undefined;
     } & React.RefAttributes<HTMLTableRowElement>>;
     Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
     CellContent: {
@@ -87,3 +85,4 @@ declare const TableInput: {
     }>;
 };
 export { TableInput };
+export type { TableInputProps };

package/lib/components/Input/TableInput/TableInput.js

@@ -64,6 +64,7 @@ var TableInputSelect_1 = require("./TableInputSelect/TableInputSelect");
 var TableInputContext_1 = require("./TableInputContext");
 var TableInputCellContent_1 = require("./TableInputCellContent/TableInputCellContent");
 var TableInputMeasurement_1 = require("./TableInputMeasurement/TableInputMeasurement");
+var DraggedElementContext_1 = require("../../../contexts/DraggedElementContext");
 var TableInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  overflow: auto;\n"], ["\n  width: 100%;\n  overflow: auto;\n"])));
 var TableInputTable = styled_components_1.default.table(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-spacing: 0;\n  width: 100%;\n\n  & th:first-child {\n    transition: box-shadow 0.15s;\n  }\n  &.shadowed th:first-child {\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 7.5px 15px 0px;\n  }\n\n  ", "\n"], ["\n  border-spacing: 0;\n  width: 100%;\n\n  & th:first-child {\n    transition: box-shadow 0.15s;\n  }\n  &.shadowed th:first-child {\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 7.5px 15px 0px;\n  }\n\n  ", "\n"])), function (_a) {
     var isDragAndDroppable = _a.isDragAndDroppable;
@@ -78,7 +79,8 @@ var TableInput = function (_a) {
     };
     return (react_1.default.createElement(TableInputContext_1.TableInputContext.Provider, { value: { readOnly: readOnly, isDragAndDroppable: isDragAndDroppable, onReorder: onReorder } },
         react_1.default.createElement(TableInputContainer, __assign({ onScroll: handleScroll }, rest),
-            react_1.default.createElement(TableInputTable, { className: shadowed ? 'shadowed' : '', isDragAndDroppable: isDragAndDroppable }, children))));
+            react_1.default.createElement(DraggedElementContext_1.DraggedElementProvider, null,
+                react_1.default.createElement(TableInputTable, { className: shadowed ? 'shadowed' : '', isDragAndDroppable: isDragAndDroppable }, children)))));
 };
 exports.TableInput = TableInput;
 TableInput.Header = TableInputHeader_1.TableInputHeader;

package/lib/components/Input/TableInput/TableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableInput.js","sourceRoot":"","sources":["../../../../src/components/Input/TableInput/TableInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAuC;AACvC,qEAA8C;AAE9C,wEAAqE;AACrE,oFAAiF;AACjF,kEAA+D;AAC/D,kEAA+D;AAC/D,+DAA4D;AAC5D,kEAA+D;AAC/D,kEAA+D;AAC/D,wEAAqE;AACrE,2EAAwE;AACxE,wEAAqE;AACrE,yDAAsD;AAEtD,uFAAoF;AACpF,uFAAoF;AAEpF,IAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,0GAAA,uCAGrC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,KAAK,mRAAmD,0MAWnF,EAiBK,IACR,KAlBG,UAAC,EAAoB;QAAnB,kBAAkB,wBAAA;IACpB,OAAA,CAAC,kBAAkB;QACjB,CAAC,KAAC,uBAAG,mSAAA,+NAOF,KACH,CAAC,KAAC,uBAAG,qSAAA,iOAOF,IAAA;AAhBL,CAgBK,CACR,CAAC;AA+BF,IAAM,UAAU,GAAG,UAAC,EAA6F;IAA5F,IAAA,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA3E,2DAA4E,CAAD;IACvF,IAAA,KAA0B,eAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAAvD,QAAQ,QAAA,EAAE,WAAW,QAAkC,CAAC;IAC/D,IAAM,YAAY,GAAG,UAAC,KAAiC;QACrD,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,qCAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,QAAQ,UAAA,EAAE,kBAAkB,oBAAA,EAAE,SAAS,WAAA,EAAC;QAC1E,8BAAC,mBAAmB,aAAC,QAAQ,EAAE,YAAY,IAAM,IAAI;YACnD,8BAAC,eAAe,IAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,kBAAkB,EAAE,kBAAkB,IAC3F,QAAQ,CACO,CACE,CACK,CAC9B,CAAC;AACJ,CAAC,CAAC;AAeM,gCAAU;AAblB,UAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,UAAU,CAAC,UAAU,GAAG,2CAAoB,CAAC;AAC7C,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,GAAG,GAAG,6BAAa,CAAC;AAC/B,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,WAAW,GAAG,6CAAqB,CAAC;AAC/C,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,UAAU,CAAC,OAAO,GAAG,qCAAiB,CAAC;AACvC,UAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,UAAU,CAAC,WAAW,GAAG,6CAAqB,CAAC"}
+{"version":3,"file":"TableInput.js","sourceRoot":"","sources":["../../../../src/components/Input/TableInput/TableInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAuC;AACvC,qEAA8C;AAE9C,wEAAqE;AACrE,oFAAiF;AACjF,kEAA+D;AAC/D,kEAA+D;AAC/D,+DAA4D;AAC5D,kEAA+D;AAC/D,kEAA+D;AAC/D,wEAAqE;AACrE,2EAAwE;AACxE,wEAAqE;AACrE,yDAAsD;AAEtD,uFAAoF;AACpF,uFAAoF;AACpF,iFAA+E;AAE/E,IAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,0GAAA,uCAGrC,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,KAAK,mRAAmD,0MAWnF,EAiBK,IACR,KAlBG,UAAC,EAAoB;QAAnB,kBAAkB,wBAAA;IACpB,OAAA,CAAC,kBAAkB;QACjB,CAAC,KAAC,uBAAG,mSAAA,+NAOF,KACH,CAAC,KAAC,uBAAG,qSAAA,iOAOF,IAAA;AAhBL,CAgBK,CACR,CAAC;AA+BF,IAAM,UAAU,GAAG,UAAC,EAA6F;IAA5F,IAAA,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA3E,2DAA4E,CAAD;IACvF,IAAA,KAA0B,eAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAAvD,QAAQ,QAAA,EAAE,WAAW,QAAkC,CAAC;IAC/D,IAAM,YAAY,GAAG,UAAC,KAAiC;QACrD,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,qCAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,QAAQ,UAAA,EAAE,kBAAkB,oBAAA,EAAE,SAAS,WAAA,EAAC;QAC1E,8BAAC,mBAAmB,aAAC,QAAQ,EAAE,YAAY,IAAM,IAAI;YACnD,8BAAC,8CAAsB;gBACrB,8BAAC,eAAe,IAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,kBAAkB,EAAE,kBAAkB,IAC3F,QAAQ,CACO,CACK,CACL,CACK,CAC9B,CAAC;AACJ,CAAC,CAAC;AAeM,gCAAU;AAblB,UAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,UAAU,CAAC,UAAU,GAAG,2CAAoB,CAAC;AAC7C,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,GAAG,GAAG,6BAAa,CAAC;AAC/B,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,WAAW,GAAG,6CAAqB,CAAC;AAC/C,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,IAAI,GAAG,+BAAc,CAAC;AACjC,UAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,UAAU,CAAC,OAAO,GAAG,qCAAiB,CAAC;AACvC,UAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,UAAU,CAAC,WAAW,GAAG,6CAAqB,CAAC"}

package/lib/components/Input/TableInput/TableInputBody/TableInputBody.js

@@ -44,12 +44,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableInputBody = void 0;
 var react_1 = __importStar(require("react"));
 var TableInputContext_1 = require("../TableInputContext");
-var useDragElementIndex_1 = require("../../../../hooks/useDragElementIndex");
 var useDrop_1 = require("../../../../hooks/useDrop");
+var DraggedElementContext_1 = require("../../../../contexts/DraggedElementContext");
 var TableInputBody = react_1.default.forwardRef(function (_a, forwardedRef) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    var _b = (0, useDragElementIndex_1.useDragElementIndex)(), draggedElementIndex = _b[0], onDragStart = _b[1], onDragEnd = _b[2];
-    var _c = (0, react_1.useContext)(TableInputContext_1.TableInputContext), isDragAndDroppable = _c.isDragAndDroppable, onReorder = _c.onReorder;
+    var _b = (0, react_1.useContext)(TableInputContext_1.TableInputContext), isDragAndDroppable = _b.isDragAndDroppable, onReorder = _b.onReorder;
+    var draggedElementIndex = (0, react_1.useContext)(DraggedElementContext_1.DraggedElementContext).index;
     var decoratedChildren = react_1.Children.map(children, function (child, rowIndex) {
         if (!react_1.default.isValidElement(child)) {
             return null;
@@ -58,15 +58,13 @@ var TableInputBody = react_1.default.forwardRef(function (_a, forwardedRef) {
             ? (0, react_1.cloneElement)(child, {
                 rowIndex: rowIndex,
                 draggable: rowIndex === draggedElementIndex,
-                onDragStart: onDragStart,
-                onDragEnd: onDragEnd,
             })
             : (0, react_1.cloneElement)(child, {
                 rowIndex: rowIndex,
             });
     });
     var rowCount = react_1.Children.count(decoratedChildren);
-    var _d = (0, useDrop_1.useDrop)(rowCount, draggedElementIndex, onReorder), tableId = _d[0], onDrop = _d[1], onDragOver = _d[2];
+    var _c = (0, useDrop_1.useDrop)(rowCount, draggedElementIndex, onReorder), tableId = _c[0], onDrop = _c[1], onDragOver = _c[2];
     return (react_1.default.createElement("tbody", __assign({ "data-table-id": tableId, onDrop: onDrop, onDragOver: onDragOver, ref: forwardedRef }, rest), decoratedChildren));
 });
 exports.TableInputBody = TableInputBody;

package/lib/components/Input/TableInput/TableInputBody/TableInputBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableInputBody.js","sourceRoot":"","sources":["../../../../../src/components/Input/TableInput/TableInputBody/TableInputBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgF;AAChF,0DAAuD;AAEvD,6EAA0E;AAC1E,qDAAkD;AAMlD,IAAM,cAAc,GAAG,eAAK,CAAC,UAAU,CACrC,UAAC,EAAwC,EAAE,YAA0C;IAAnF,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACX,IAAA,KAAgD,IAAA,yCAAmB,GAAE,EAApE,mBAAmB,QAAA,EAAE,WAAW,QAAA,EAAE,SAAS,QAAyB,CAAC;IACtE,IAAA,KAAkC,IAAA,kBAAU,EAAC,qCAAiB,CAAC,EAA9D,kBAAkB,wBAAA,EAAE,SAAS,eAAiC,CAAC;IAEtE,IAAM,iBAAiB,GAAG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,QAAQ;QAC/D,IAAI,CAAC,eAAK,CAAC,cAAc,CAAqB,KAAK,CAAC,EAAE;YACpD,OAAO,IAAI,CAAC;SACb;QAED,OAAO,kBAAkB;YACvB,CAAC,CAAC,IAAA,oBAAY,EAAC,KAAK,EAAE;gBAClB,QAAQ,UAAA;gBACR,SAAS,EAAE,QAAQ,KAAK,mBAAmB;gBAC3C,WAAW,aAAA;gBACX,SAAS,WAAA;aACV,CAAC;YACJ,CAAC,CAAC,IAAA,oBAAY,EAAC,KAAK,EAAE;gBAClB,QAAQ,UAAA;aACT,CAAC,CAAC;IACT,CAAC,CAAC,CAAC;IAEH,IAAM,QAAQ,GAAG,gBAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC7C,IAAA,KAAgC,IAAA,iBAAO,EAAC,QAAQ,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAhF,OAAO,QAAA,EAAE,MAAM,QAAA,EAAE,UAAU,QAAqD,CAAC;IAExF,OAAO,CACL,mEAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,IAAM,IAAI,GAC/F,iBAAiB,CACZ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAIM,wCAAc;AAFtB,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"TableInputBody.js","sourceRoot":"","sources":["../../../../../src/components/Input/TableInput/TableInputBody/TableInputBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgF;AAChF,0DAAuD;AAEvD,qDAAkD;AAClD,oFAAiF;AAMjF,IAAM,cAAc,GAAG,eAAK,CAAC,UAAU,CACrC,UAAC,EAAwC,EAAE,YAA0C;IAAnF,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACX,IAAA,KAAkC,IAAA,kBAAU,EAAC,qCAAiB,CAAC,EAA9D,kBAAkB,wBAAA,EAAE,SAAS,eAAiC,CAAC;IAC/D,IAAO,mBAAmB,GAAI,IAAA,kBAAU,EAAC,6CAAqB,CAAC,MAArC,CAAsC;IAEvE,IAAM,iBAAiB,GAAG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,QAAQ;QAC/D,IAAI,CAAC,eAAK,CAAC,cAAc,CAAqB,KAAK,CAAC,EAAE;YACpD,OAAO,IAAI,CAAC;SACb;QAED,OAAO,kBAAkB;YACvB,CAAC,CAAC,IAAA,oBAAY,EAAC,KAAK,EAAE;gBAClB,QAAQ,UAAA;gBACR,SAAS,EAAE,QAAQ,KAAK,mBAAmB;aAC5C,CAAC;YACJ,CAAC,CAAC,IAAA,oBAAY,EAAC,KAAK,EAAE;gBAClB,QAAQ,UAAA;aACT,CAAC,CAAC;IACT,CAAC,CAAC,CAAC;IAEH,IAAM,QAAQ,GAAG,gBAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC7C,IAAA,KAAgC,IAAA,iBAAO,EAAC,QAAQ,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAhF,OAAO,QAAA,EAAE,MAAM,QAAA,EAAE,UAAU,QAAqD,CAAC;IAExF,OAAO,CACL,mEAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,IAAM,IAAI,GAC/F,iBAAiB,CACZ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAIM,wCAAc;AAFtB,cAAc,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/lib/components/Input/TableInput/TableInputContext.d.ts

@@ -1,7 +1,7 @@
 declare type TableInputContextType = {
     readOnly: boolean;
     isDragAndDroppable: boolean;
-    onReorder: ((reorderedIndices: number[]) => void) | undefined;
+    onReorder: ((reorderedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void) | undefined;
 };
 declare const TableInputContext: import("react").Context<TableInputContextType>;
 export { TableInputContext };

package/lib/components/Input/TableInput/TableInputRow/TableInputRow.d.ts

@@ -4,14 +4,10 @@ export declare type TableInputRowProps = Override<HTMLAttributes<HTMLTableRowEle
     children?: ReactNode;
     highlighted?: boolean;
     rowIndex?: number;
-    onDragStart?: (rowIndex: number) => void;
-    onDragEnd?: () => void;
 }>;
-declare const TableInputRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onDragEnd" | "onDragStart" | "highlighted" | "rowIndex"> & {
+declare const TableInputRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "highlighted" | "rowIndex"> & {
     children?: ReactNode;
     highlighted?: boolean | undefined;
     rowIndex?: number | undefined;
-    onDragStart?: ((rowIndex: number) => void) | undefined;
-    onDragEnd?: (() => void) | undefined;
 } & React.RefAttributes<HTMLTableRowElement>>;
 export { TableInputRow };

package/lib/components/Input/TableInput/TableInputRow/TableInputRow.js

@@ -53,6 +53,7 @@ var TableInputContext_1 = require("../TableInputContext");
 var icons_1 = require("../../../../icons");
 var TableInputCell_1 = require("../TableInputCell/TableInputCell");
 var usePlaceholderPosition_1 = require("../../../../hooks/usePlaceholderPosition");
+var DraggedElementContext_1 = require("../../../../contexts/DraggedElementContext");
 var getZebraBackgroundColor = function (highlighted, rowIndex) {
     return highlighted ? (0, theme_1.getColor)('blue', 10) : rowIndex % 2 === 0 ? (0, theme_1.getColor)('white') : (0, theme_1.getColor)('grey', 20);
 };
@@ -74,17 +75,18 @@ var TableInputTr = styled_components_1.default.tr(templateObject_6 || (templateO
 });
 var DragAndDropCell = (0, styled_components_1.default)(TableInputCell_1.TableInputCell)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  max-width: 26px;\n  min-width: 26px;\n  width: 26px;\n  color: ", ";\n  text-align: right;\n  cursor: grab;\n  vertical-align: middle;\n  line-height: 0px !important;\n  & > div {\n    height: 39px;\n    vertical-align: middle;\n    line-height: 44px;\n  }\n"], ["\n  max-width: 26px;\n  min-width: 26px;\n  width: 26px;\n  color: ", ";\n  text-align: right;\n  cursor: grab;\n  vertical-align: middle;\n  line-height: 0px !important;\n  & > div {\n    height: 39px;\n    vertical-align: middle;\n    line-height: 44px;\n  }\n"])), (0, theme_1.getColor)('grey', 100));
 var TableInputRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
-    var children = _a.children, _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, draggable = _a.draggable, _c = _a.highlighted, highlighted = _c === void 0 ? false : _c, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, rest = __rest(_a, ["children", "rowIndex", "draggable", "highlighted", "onDragStart", "onDragEnd"]);
+    var children = _a.children, _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, draggable = _a.draggable, _c = _a.highlighted, highlighted = _c === void 0 ? false : _c, rest = __rest(_a, ["children", "rowIndex", "draggable", "highlighted"]);
     var _d = (0, usePlaceholderPosition_1.usePlaceholderPosition)(rowIndex), placeholderPosition = _d[0], placeholderDragEnter = _d[1], placeholderDragLeave = _d[2], placeholderDragEnd = _d[3];
     var isDragAndDroppable = (0, react_1.useContext)(TableInputContext_1.TableInputContext).isDragAndDroppable;
-    var handleDragEnter = function (event) {
-        if (isDragAndDroppable) {
-            placeholderDragEnter(parseInt(event.dataTransfer.getData('text')));
+    var _e = (0, react_1.useContext)(DraggedElementContext_1.DraggedElementContext), draggedElementIndex = _e.index, onDragStart = _e.onDragStart, onDragEnd = _e.onDragEnd;
+    var handleDragEnter = function () {
+        if (isDragAndDroppable && null !== draggedElementIndex) {
+            placeholderDragEnter(draggedElementIndex);
         }
     };
     var handleDragStart = function (event) {
         if (isDragAndDroppable) {
-            event.dataTransfer.setData('text', rowIndex.toString());
+            event.dataTransfer.setData('text/plain', rowIndex.toString());
             onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(rowIndex);
         }
     };

package/lib/components/Input/TableInput/TableInputRow/TableInputRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableInputRow.js","sourceRoot":"","sources":["../../../../../src/components/Input/TableInput/TableInputRow/TableInputRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAA8C;AAC9C,6CAA+F;AAC/F,2CAA8D;AAE9D,0DAAuD;AACvD,2CAA0C;AAC1C,mEAAgE;AAChE,mFAAqG;AAErG,IAAM,uBAAuB,GAAqF,UAChH,WAAW,EACX,QAAQ;IAER,OAAO,WAAW,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC5G,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,2BAAM,CAAC,EAAE,obAO7B,uDAGuB,EAAoB,wMAYxC,EASC,oEAMD,EAUC,QAED,EAUC,UAED,EAMC,YAED,EAmBC,IACJ,KA/EuB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAYxC,UAAC,EAAoB;QAAnB,kBAAkB,wBAAA;IACpB,OAAA,kBAAkB,QAClB,uBAAG,mNAAA,+IAOF,IAAA;AARD,CAQC,EAMD,UAAC,EAA4C;QAA3C,mBAAmB,yBAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAC5C,OAAA,mBAAmB,KAAK,QAAQ,QAChC,uBAAG,mNAAA,uFAIK,EAAoB,mBACpB,EAA8C,iCAGrD,KAJO,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACpB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAGrD;AATD,CASC,EAED,UAAC,EAA4C;QAA3C,mBAAmB,yBAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAC5C,OAAA,mBAAmB,KAAK,KAAK,QAC7B,uBAAG,sNAAA,0FAIK,EAAoB,mBACpB,EAA8C,iCAGrD,KAJO,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACpB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAGrD;AATD,CASC,EAED,UAAC,EAA4C;QAA3C,mBAAmB,yBAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA;IAC5C,OAAA,mBAAmB,KAAK,MAAM,QAC9B,uBAAG,gIAAA,wCAEe,EAA8C,kBAE/D,KAFiB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAE/D;AALD,CAKC,EAED,UAAC,EAAa;QAAZ,WAAW,iBAAA;IACb,OAAA,WAAW,QACX,uBAAG,ydAAA,mGAI8B,EAAqB,kLAO3B,EAAqB,gCACvB,EAAqB,2DAElB,EAAqB,6BAGhD,KAbgC,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAO3B,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EACvB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAElB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAGhD;AAlBD,CAkBC,CACJ,CAAC;AAEF,IAAM,eAAe,GAAG,IAAA,2BAAM,EAAC,+BAAc,CAAC,2UAAA,qEAInC,EAAqB,iMAU/B,KAVU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAU/B,CAAC;AAgCF,IAAM,aAAa,GAAG,IAAA,kBAAU,EAC9B,UACE,EAA6G,EAC7G,YAAsC;IADrC,IAAA,QAAQ,cAAA,EAAE,gBAAY,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAA,EAAE,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAAxF,gFAAyF,CAAD;IAGlF,IAAA,KACJ,IAAA,+CAAsB,EAAC,QAAQ,CAAC,EAD3B,mBAAmB,QAAA,EAAE,oBAAoB,QAAA,EAAE,oBAAoB,QAAA,EAAE,kBAAkB,QACxD,CAAC;IAE5B,IAAA,kBAAkB,GAAI,IAAA,kBAAU,EAAC,qCAAiB,CAAC,mBAAjC,CAAkC;IAE3D,IAAM,eAAe,GAAG,UAAC,KAAqC;QAC5D,IAAI,kBAAkB,EAAE;YACtB,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACpE;IACH,CAAC,CAAC;IAEF,IAAM,eAAe,GAAG,UAAC,KAAqC;QAC5D,IAAI,kBAAkB,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;YACxD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,QAAQ,CAAC,CAAC;SACzB;IACH,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG;QACpB,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,EAAE,CAAC;YACrB,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAC;SACf;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,YAAY,aACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,kBAAkB,IAAI,SAAS,EAC1C,kBAAkB,EAAE,kBAAkB,0BAChB,QAAQ,EAC9B,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,oBAAoB,EACjC,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,YAAY,EACjB,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,QAAQ,IACd,IAAI;QAEP,kBAAkB,IAAI,CACrB,8BAAC,eAAe,IAAC,WAAW,EAAE,cAAM,OAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,QAAQ,CAAC,EAAvB,CAAuB,EAAE,SAAS,EAAE,SAAS,iBAAc,aAAa;YAC1G;gBACE,8BAAC,eAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CACjB,CACU,CACnB;QACA,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAIM,sCAAa;AAFrB,aAAa,CAAC,WAAW,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"TableInputRow.js","sourceRoot":"","sources":["../../../../../src/components/Input/TableInput/TableInputRow/TableInputRow.tsx"],"names":[],"mappings":"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"}

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,7 +6,7 @@ declare type ProgressIndicatorProps = Override<HTMLAttributes<HTMLUListElement>,
 }>;
 declare const ProgressIndicator: {
     ({ children, ...rest }: ProgressIndicatorProps): React.JSX.Element;
-    Step: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "current" | "disabled" | "children" | "state" | "index"> & {
+    Step: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "current" | "disabled" | "children" | "index" | "state"> & {
         current?: boolean | undefined;
         state?: StepState | undefined;
         disabled?: boolean | undefined;

package/lib/components/Table/Table.d.ts

@@ -11,7 +11,7 @@ declare type TableProps = Override<React.HTMLAttributes<HTMLTableElement>, {
     onReorder?: undefined;
 } | {
     isDragAndDroppable: boolean;
-    onReorder: (updatedIndices: number[]) => void;
+    onReorder: (updatedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void;
 })>;
 declare const Table: {
     ({ isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder, children, ...rest }: TableProps): React.JSX.Element;
@@ -23,15 +23,13 @@ declare const Table: {
         children?: React.ReactNode;
     } & React.RefAttributes<HTMLTableHeaderCellElement>>;
     Body: React.ForwardRefExoticComponent<import("./TableBody/TableBody").TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
-    Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
+    Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
         children?: React.ReactNode;
         onSelectToggle?: ((isSelected: boolean) => void) | undefined;
         isSelected?: boolean | "mixed" | undefined;
         level?: ("tertiary" | "warning") | undefined;
         onClick?: ((event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void) | undefined;
         rowIndex?: number | undefined;
-        onDragStart?: ((rowIndex: number) => void) | undefined;
-        onDragEnd?: (() => void) | undefined;
     } & React.RefAttributes<HTMLTableRowElement>>;
     Cell: React.ForwardRefExoticComponent<Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "children" | "rowTitle"> & {
         children?: React.ReactNode;
@@ -42,3 +40,4 @@ declare const Table: {
     } & React.RefAttributes<HTMLTableCellElement>>;
 };
 export { Table };
+export type { TableProps };

package/lib/components/Table/Table.js

@@ -58,12 +58,14 @@ var TableActionCell_1 = require("./TableActionCell/TableActionCell");
 var TableRow_1 = require("./TableRow/TableRow");
 var TableContext_1 = require("./TableContext");
 var TableBody_1 = require("./TableBody/TableBody");
+var DraggedElementContext_1 = require("../../contexts/DraggedElementContext");
 var TableContainer = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-collapse: collapse;\n  width: 100%;\n"], ["\n  border-collapse: collapse;\n  width: 100%;\n"])));
 var Table = function (_a) {
     var _b = _a.isSelectable, isSelectable = _b === void 0 ? false : _b, _c = _a.hasWarningRows, hasWarningRows = _c === void 0 ? false : _c, _d = _a.hasLockedRows, hasLockedRows = _d === void 0 ? false : _d, _e = _a.displayCheckbox, displayCheckbox = _e === void 0 ? false : _e, _f = _a.isDragAndDroppable, isDragAndDroppable = _f === void 0 ? false : _f, _g = _a.onReorder, onReorder = _g === void 0 ? undefined : _g, children = _a.children, rest = __rest(_a, ["isSelectable", "hasWarningRows", "hasLockedRows", "displayCheckbox", "isDragAndDroppable", "onReorder", "children"]);
     var providerValue = (0, react_1.useMemo)(function () { return ({ isSelectable: isSelectable, hasWarningRows: hasWarningRows, hasLockedRows: hasLockedRows, displayCheckbox: displayCheckbox, isDragAndDroppable: isDragAndDroppable, onReorder: onReorder }); }, [isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder]);
     return (react_1.default.createElement(TableContext_1.TableContext.Provider, { value: providerValue },
-        react_1.default.createElement(TableContainer, __assign({}, rest), children)));
+        react_1.default.createElement(DraggedElementContext_1.DraggedElementProvider, null,
+            react_1.default.createElement(TableContainer, __assign({}, rest), children))));
 };
 exports.Table = Table;
 TableHeader_1.TableHeader.displayName = 'Table.Header';

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgD;AAChD,wEAAuC;AACvC,mDAAgD;AAChD,yDAAsD;AACtD,qEAAkE;AAClE,qEAAkE;AAClE,gDAA6C;AAC7C,+CAA4C;AAC5C,mDAAgD;AAGhD,IAAM,cAAc,GAAG,2BAAM,CAAC,KAAK,qHAAA,kDAGlC,IAAA,CAAC;AAwDF,IAAM,KAAK,GAAG,UAAC,EASF;IARX,IAAA,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EACrB,QAAQ,cAAA,EACL,IAAI,cARM,qHASd,CADQ;IAEP,IAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,cAAM,OAAA,CAAC,EAAC,YAAY,cAAA,EAAE,cAAc,gBAAA,EAAE,aAAa,eAAA,EAAE,eAAe,iBAAA,EAAE,kBAAkB,oBAAA,EAAE,SAAS,WAAA,EAAC,CAAC,EAA/F,CAA+F,EACrG,CAAC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAC9F,CAAC;IAEF,OAAO,CACL,8BAAC,2BAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,8BAAC,cAAc,eAAK,IAAI,GAAG,QAAQ,CAAkB,CAC/B,CACzB,CAAC;AACJ,CAAC,CAAC;AAgBM,sBAAK;AAdb,yBAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AACjD,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,mBAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;AACnC,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAEjD,KAAK,CAAC,MAAM,GAAG,yBAAW,CAAC;AAC3B,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC;AACnC,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,GAAG,GAAG,mBAAQ,CAAC;AACrB,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgD;AAChD,wEAAuC;AACvC,mDAAgD;AAChD,yDAAsD;AACtD,qEAAkE;AAClE,qEAAkE;AAClE,gDAA6C;AAC7C,+CAA4C;AAC5C,mDAAgD;AAEhD,8EAA4E;AAE5E,IAAM,cAAc,GAAG,2BAAM,CAAC,KAAK,qHAAA,kDAGlC,IAAA,CAAC;AAwDF,IAAM,KAAK,GAAG,UAAC,EASF;IARX,IAAA,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EACrB,QAAQ,cAAA,EACL,IAAI,cARM,qHASd,CADQ;IAEP,IAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,cAAM,OAAA,CAAC,EAAC,YAAY,cAAA,EAAE,cAAc,gBAAA,EAAE,aAAa,eAAA,EAAE,eAAe,iBAAA,EAAE,kBAAkB,oBAAA,EAAE,SAAS,WAAA,EAAC,CAAC,EAA/F,CAA+F,EACrG,CAAC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAC9F,CAAC;IAEF,OAAO,CACL,8BAAC,2BAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,8BAAC,8CAAsB;YACrB,8BAAC,cAAc,eAAK,IAAI,GAAG,QAAQ,CAAkB,CAC9B,CACH,CACzB,CAAC;AACJ,CAAC,CAAC;AAgBM,sBAAK;AAdb,yBAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AACjD,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,mBAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;AACnC,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAEjD,KAAK,CAAC,MAAM,GAAG,yBAAW,CAAC;AAC3B,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC;AACnC,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,GAAG,GAAG,mBAAQ,CAAC;AACrB,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC"}

package/lib/components/Table/TableBody/TableBody.js

@@ -45,11 +45,11 @@ exports.TableBody = void 0;
 var react_1 = __importStar(require("react"));
 var TableContext_1 = require("../TableContext");
 var useDrop_1 = require("../../../hooks/useDrop");
-var useDragElementIndex_1 = require("../../../hooks/useDragElementIndex");
+var DraggedElementContext_1 = require("../../../contexts/DraggedElementContext");
 var TableBody = react_1.default.forwardRef(function (_a, forwardedRef) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    var _b = (0, useDragElementIndex_1.useDragElementIndex)(), draggedElementIndex = _b[0], onDragStart = _b[1], onDragEnd = _b[2];
-    var _c = (0, react_1.useContext)(TableContext_1.TableContext), isDragAndDroppable = _c.isDragAndDroppable, onReorder = _c.onReorder;
+    var _b = (0, react_1.useContext)(TableContext_1.TableContext), isDragAndDroppable = _b.isDragAndDroppable, onReorder = _b.onReorder;
+    var draggedElementIndex = (0, react_1.useContext)(DraggedElementContext_1.DraggedElementContext).index;
     var decoratedChildren = isDragAndDroppable
         ? react_1.Children.map(children, function (child, rowIndex) {
             if (!react_1.default.isValidElement(child)) {
@@ -58,13 +58,11 @@ var TableBody = react_1.default.forwardRef(function (_a, forwardedRef) {
             return (0, react_1.cloneElement)(child, {
                 rowIndex: rowIndex,
                 draggable: rowIndex === draggedElementIndex,
-                onDragStart: onDragStart,
-                onDragEnd: onDragEnd,
             });
         })
         : children;
     var rowCount = react_1.Children.count(children);
-    var _d = (0, useDrop_1.useDrop)(rowCount, draggedElementIndex, onReorder), tableId = _d[0], onDrop = _d[1], onDragOver = _d[2];
+    var _c = (0, useDrop_1.useDrop)(rowCount, draggedElementIndex, onReorder), tableId = _c[0], onDrop = _c[1], onDragOver = _c[2];
     return (react_1.default.createElement("tbody", __assign({ ref: forwardedRef, "data-table-id": tableId, onDrop: onDrop, onDragOver: onDragOver }, rest), decoratedChildren));
 });
 exports.TableBody = TableBody;

package/lib/components/Table/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmF;AAEnF,gDAA6C;AAC7C,kDAA+C;AAC/C,0EAAuE;AAWvE,IAAM,SAAS,GAAG,eAAK,CAAC,UAAU,CAChC,UAAC,EAAmC,EAAE,YAA0C;IAA9E,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACX,IAAA,KAAgD,IAAA,yCAAmB,GAAE,EAApE,mBAAmB,QAAA,EAAE,WAAW,QAAA,EAAE,SAAS,QAAyB,CAAC;IACtE,IAAA,KAAkC,IAAA,kBAAU,EAAC,2BAAY,CAAC,EAAzD,kBAAkB,wBAAA,EAAE,SAAS,eAA4B,CAAC;IACjE,IAAM,iBAAiB,GAAG,kBAAkB;QAC1C,CAAC,CAAC,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,QAAQ;YACrC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAgB,KAAK,CAAC,EAAE;gBAC/C,OAAO,IAAI,CAAC;aACb;YAED,OAAO,IAAA,oBAAY,EAAC,KAAK,EAAE;gBACzB,QAAQ,UAAA;gBACR,SAAS,EAAE,QAAQ,KAAK,mBAAmB;gBAC3C,WAAW,aAAA;gBACX,SAAS,WAAA;aACV,CAAC,CAAC;QACL,CAAC,CAAC;QACJ,CAAC,CAAC,QAAQ,CAAC;IAEb,IAAM,QAAQ,GAAG,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAA,KAAgC,IAAA,iBAAO,EAAC,QAAQ,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAhF,OAAO,QAAA,EAAE,MAAM,QAAA,EAAE,UAAU,QAAqD,CAAC;IAExF,OAAO,CACL,kDAAO,GAAG,EAAE,YAAY,mBAAiB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,IAAM,IAAI,GAC/F,iBAAiB,CACZ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,8BAAS"}
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmF;AAEnF,gDAA6C;AAC7C,kDAA+C;AAC/C,iFAA8E;AAW9E,IAAM,SAAS,GAAG,eAAK,CAAC,UAAU,CAChC,UAAC,EAAmC,EAAE,YAA0C;IAA9E,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACX,IAAA,KAAkC,IAAA,kBAAU,EAAC,2BAAY,CAAC,EAAzD,kBAAkB,wBAAA,EAAE,SAAS,eAA4B,CAAC;IAC1D,IAAO,mBAAmB,GAAI,IAAA,kBAAU,EAAC,6CAAqB,CAAC,MAArC,CAAsC;IACvE,IAAM,iBAAiB,GAAG,kBAAkB;QAC1C,CAAC,CAAC,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,QAAQ;YACrC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAgB,KAAK,CAAC,EAAE;gBAC/C,OAAO,IAAI,CAAC;aACb;YAED,OAAO,IAAA,oBAAY,EAAC,KAAK,EAAE;gBACzB,QAAQ,UAAA;gBACR,SAAS,EAAE,QAAQ,KAAK,mBAAmB;aAC5C,CAAC,CAAC;QACL,CAAC,CAAC;QACJ,CAAC,CAAC,QAAQ,CAAC;IAEb,IAAM,QAAQ,GAAG,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAA,KAAgC,IAAA,iBAAO,EAAC,QAAQ,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAhF,OAAO,QAAA,EAAE,MAAM,QAAA,EAAE,UAAU,QAAqD,CAAC;IAExF,OAAO,CACL,kDAAO,GAAG,EAAE,YAAY,mBAAiB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,IAAM,IAAI,GAC/F,iBAAiB,CACZ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,8BAAS"}

package/lib/components/Table/TableContext.d.ts

@@ -4,7 +4,7 @@ declare type TableContextType = {
     hasLockedRows: boolean;
     displayCheckbox: boolean;
     isDragAndDroppable: boolean;
-    onReorder: ((reorderedIndices: number[]) => void) | undefined;
+    onReorder: ((reorderedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void) | undefined;
 };
 declare const TableContext: import("react").Context<TableContextType>;
 export { TableContext };

package/lib/components/Table/TableRow/TableRow.d.ts

@@ -8,18 +8,14 @@ declare type TableRowProps = Override<HTMLAttributes<HTMLTableRowElement>, {
     level?: Level;
     onClick?: (event: MouseEvent<HTMLTableRowElement>) => void;
     rowIndex?: number;
-    onDragStart?: (rowIndex: number) => void;
-    onDragEnd?: () => void;
 }>;
-declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
     children?: ReactNode;
     onSelectToggle?: ((isSelected: boolean) => void) | undefined;
     isSelected?: boolean | "mixed" | undefined;
     level?: Level | undefined;
     onClick?: ((event: MouseEvent<HTMLTableRowElement>) => void) | undefined;
     rowIndex?: number | undefined;
-    onDragStart?: ((rowIndex: number) => void) | undefined;
-    onDragEnd?: (() => void) | undefined;
 } & React.RefAttributes<HTMLTableRowElement>>;
 export { TableRow };
 export type { TableRowProps };

package/lib/components/Table/TableRow/TableRow.js

@@ -54,6 +54,7 @@ var TableContext_1 = require("../TableContext");
 var TableCell_1 = require("../TableCell/TableCell");
 var icons_1 = require("../../../icons");
 var usePlaceholderPosition_1 = require("../../../hooks/usePlaceholderPosition");
+var DraggedElementContext_1 = require("../../../contexts/DraggedElementContext");
 var RowContainer = styled_components_1.default.tr(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover > td {\n    opacity: 1;\n    ", "\n  }\n\n  &:hover > td > div {\n    opacity: 1;\n  }\n\n  ", ";\n"], ["\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover > td {\n    opacity: 1;\n    ", "\n  }\n\n  &:hover > td > div {\n    opacity: 1;\n  }\n\n  ", ";\n"])), function (_a) {
     var isSelected = _a.isSelected;
     return isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      > td {\n        background-color: ", ";\n      }\n    "], ["\n      > td {\n        background-color: ", ";\n      }\n    "])), (0, theme_1.getColor)('blue', 20));
@@ -92,18 +93,21 @@ var getIcon = function (level) {
 };
 var WarningIcon = (0, styled_components_1.default)(icons_1.DangerIcon)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), (0, theme_1.getColor)('yellow', 120));
 var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
-    var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, level = _a.level, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "level", "onSelectToggle", "onClick", "draggable", "onDragStart", "onDragEnd", "children"]);
+    var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, level = _a.level, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "level", "onSelectToggle", "onClick", "draggable", "children"]);
     var _d = (0, usePlaceholderPosition_1.usePlaceholderPosition)(rowIndex), placeholderPosition = _d[0], placeholderDragEnter = _d[1], placeholderDragLeave = _d[2], placeholderDragEnd = _d[3];
     var _e = (0, react_1.useContext)(TableContext_1.TableContext), isSelectable = _e.isSelectable, displayCheckbox = _e.displayCheckbox, isDragAndDroppable = _e.isDragAndDroppable, hasWarningRows = _e.hasWarningRows, hasLockedRows = _e.hasLockedRows;
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
         throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
+    var _f = (0, react_1.useContext)(DraggedElementContext_1.DraggedElementContext), draggedElementIndex = _f.index, onDragStart = _f.onDragStart, onDragEnd = _f.onDragEnd;
     var handleCheckboxChange = function (event) {
         event.stopPropagation();
         onSelectToggle === null || onSelectToggle === void 0 ? void 0 : onSelectToggle(!isSelected);
     };
-    var handleDragEnter = function (event) {
-        placeholderDragEnter(parseInt(event.dataTransfer.getData('text')));
+    var handleDragEnter = function () {
+        if (null !== draggedElementIndex) {
+            placeholderDragEnter(draggedElementIndex);
+        }
     };
     var handleDragStart = function (event) {
         event.dataTransfer.setData('text', rowIndex.toString());

package/lib/components/Table/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"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"}

package/lib/contexts/DraggedElementContext.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import React from 'react';
+import { TableProps, TableInputProps } from '../components';
+declare type DraggedElementType = {
+    index: number | null;
+    onDragStart: (rowIndex: number) => void;
+    onDragEnd?: () => void;
+};
+declare const DraggedElementContext: React.Context<DraggedElementType>;
+declare const DraggedElementProvider: ({ children }: PropsWithChildren<TableProps | TableInputProps>) => React.JSX.Element;
+export { DraggedElementProvider, DraggedElementContext };

package/lib/contexts/DraggedElementContext.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggedElementContext = exports.DraggedElementProvider = void 0;
+var react_1 = require("react");
+var react_2 = __importDefault(require("react"));
+var DraggedElementContext = (0, react_1.createContext)({
+    index: null,
+    onDragStart: function () { return void 0; },
+    onDragEnd: function () { return void 0; },
+});
+exports.DraggedElementContext = DraggedElementContext;
+var DraggedElementProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(null), index = _b[0], setDraggedElementIndex = _b[1];
+    var onDragStart = (0, react_1.useCallback)(function (index) { return setDraggedElementIndex(index); }, []);
+    var onDragEnd = (0, react_1.useCallback)(function () { return setDraggedElementIndex(null); }, []);
+    return (react_2.default.createElement(DraggedElementContext.Provider, { value: { index: index, onDragStart: onDragStart, onDragEnd: onDragEnd } }, children));
+};
+exports.DraggedElementProvider = DraggedElementProvider;
+//# sourceMappingURL=DraggedElementContext.js.map

package/lib/contexts/DraggedElementContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggedElementContext.js","sourceRoot":"","sources":["../../src/contexts/DraggedElementContext.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA8E;AAC9E,gDAA0B;AAS1B,IAAM,qBAAqB,GAAG,IAAA,qBAAa,EAAqB;IAC9D,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,cAAM,OAAA,KAAK,CAAC,EAAN,CAAM;IACzB,SAAS,EAAE,cAAM,OAAA,KAAK,CAAC,EAAN,CAAM;CACxB,CAAC,CAAC;AAY6B,sDAAqB;AAVrD,IAAM,sBAAsB,GAAG,UAAC,EAA2D;QAA1D,QAAQ,cAAA;IACjC,IAAA,KAAkC,IAAA,gBAAQ,EAAgB,IAAI,CAAC,EAA9D,KAAK,QAAA,EAAE,sBAAsB,QAAiC,CAAC;IACtE,IAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,UAAC,KAAa,IAAK,OAAA,sBAAsB,CAAC,KAAK,CAAC,EAA7B,CAA6B,EAAE,EAAE,CAAC,CAAC;IACtF,IAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,cAAM,OAAA,sBAAsB,CAAC,IAAI,CAAC,EAA5B,CAA4B,EAAE,EAAE,CAAC,CAAC;IAEtE,OAAO,CACL,8BAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,KAAK,OAAA,EAAE,WAAW,aAAA,EAAE,SAAS,WAAA,EAAC,IAAG,QAAQ,CAAkC,CACpH,CAAC;AACJ,CAAC,CAAC;AAEM,wDAAsB"}

package/lib/hooks/useDrop.d.ts

@@ -1,3 +1,3 @@
 import { DragEvent } from 'react';
-declare const useDrop: (tableSize: number, draggedElementIndex: number | null, onReorder: ((reorderedIndices: number[]) => void) | undefined) => readonly [string, (event: DragEvent<HTMLTableSectionElement>) => void, (event: DragEvent<HTMLTableSectionElement>) => void];
+declare const useDrop: (tableSize: number, draggedElementIndex: number | null, onReorder: ((reorderedIndices: number[], draggedIndex?: number | undefined, droppedIndex?: number | undefined) => void) | undefined) => readonly [string, (event: DragEvent<HTMLTableSectionElement>) => void, (event: DragEvent<HTMLTableSectionElement>) => void];
 export { useDrop };

package/lib/hooks/useDrop.js

@@ -32,7 +32,12 @@ var useDrop = function (tableSize, draggedElementIndex, onReorder) {
         if (event.currentTarget.dataset.tableId === tableId && onReorder && null !== draggedElementIndex) {
             var droppedElementIndex = getDropRow(event.target);
             var newIndices = generateReorderedIndices(tableSize, draggedElementIndex, droppedElementIndex);
-            onReorder(newIndices);
+            if (onReorder.length === 1) {
+                onReorder(newIndices);
+            }
+            else {
+                onReorder(newIndices, draggedElementIndex, droppedElementIndex);
+            }
         }
     };
     var handleDragOver = function (event) {

package/lib/hooks/useDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDrop.js","sourceRoot":"","sources":["../../src/hooks/useDrop.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iCAA8B;AAM9B,IAAM,UAAU,GAAG,UAAC,OAA2B;IAC7C,IAAI,IAAI,KAAK,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;IAEpE,OAAO,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,cAAc;QACjD,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC;QAC1C,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,IAAM,wBAAwB,GAAG,UAAC,IAAY,EAAE,YAAoB,EAAE,YAAoB;IAExF,IAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAI,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,QAAE,IAAI,EAAE,CAAC,CAAC;IAGzE,IAAM,uBAAuB,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,KAAK,IAAI,OAAA,YAAY,KAAK,KAAK,EAAtB,CAAsB,CAAC,CAAC;IAGtF,uBAAuB,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;IAE9D,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAEF,IAAM,OAAO,GAAG,UACd,SAAiB,EACjB,mBAAkC,EAClC,SAA6D;IAE7D,IAAM,OAAO,GAAG,IAAA,aAAK,EAAC,QAAQ,CAAC,CAAC;IAEhC,IAAM,UAAU,GAAG,UAAC,KAAyC;QAC3D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,IAAI,SAAS,IAAI,IAAI,KAAK,mBAAmB,EAAE;YAChG,IAAM,mBAAmB,GAAG,UAAU,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAC;YACpE,IAAM,UAAU,GAAG,wBAAwB,CAAC,SAAS,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;YAEjG,SAAS,CAAC,UAAU,CAAC,CAAC;SACvB;IACH,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAyC;QAE/D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAU,CAAC;AACxD,CAAC,CAAC;AAEM,0BAAO"}
+{"version":3,"file":"useDrop.js","sourceRoot":"","sources":["../../src/hooks/useDrop.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iCAA8B;AAM9B,IAAM,UAAU,GAAG,UAAC,OAA2B;IAC7C,IAAI,IAAI,KAAK,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;IAEpE,OAAO,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,cAAc;QACjD,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC;QAC1C,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,IAAM,wBAAwB,GAAG,UAAC,IAAY,EAAE,YAAoB,EAAE,YAAoB;IAExF,IAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAI,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,QAAE,IAAI,EAAE,CAAC,CAAC;IAGzE,IAAM,uBAAuB,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,KAAK,IAAI,OAAA,YAAY,KAAK,KAAK,EAAtB,CAAsB,CAAC,CAAC;IAGtF,uBAAuB,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;IAE9D,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAEF,IAAM,OAAO,GAAG,UACd,SAAiB,EACjB,mBAAkC,EAClC,SAA2G;IAE3G,IAAM,OAAO,GAAG,IAAA,aAAK,EAAC,QAAQ,CAAC,CAAC;IAEhC,IAAM,UAAU,GAAG,UAAC,KAAyC;QAC3D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,IAAI,SAAS,IAAI,IAAI,KAAK,mBAAmB,EAAE;YAChG,IAAM,mBAAmB,GAAG,UAAU,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAC;YACpE,IAAM,UAAU,GAAG,wBAAwB,CAAC,SAAS,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;YAEjG,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC1B,SAAS,CAAC,UAAU,CAAC,CAAC;aACvB;iBAAM;gBACL,SAAS,CAAC,UAAU,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;aACjE;SACF;IACH,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,KAAyC;QAE/D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAU,CAAC;AACxD,CAAC,CAAC;AAEM,0BAAO"}

package/lib/hooks/usePlaceholderPosition.js

@@ -3,22 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlaceholderPosition = void 0;
 var react_1 = require("react");
 var usePlaceholderPosition = function (rowIndex) {
-    var _a = (0, react_1.useState)(0), overingCount = _a[0], setOveringCount = _a[1];
+    var _a = (0, react_1.useState)(0), hoveringCount = _a[0], setHoveringCount = _a[1];
     var _b = (0, react_1.useState)('none'), placeholderPosition = _b[0], setPlaceholderPosition = _b[1];
     (0, react_1.useEffect)(function () {
-        setOveringCount(0);
+        setHoveringCount(0);
     }, [rowIndex]);
     var dragEnter = (0, react_1.useCallback)(function (draggedElementIndex) {
-        setOveringCount(function (count) { return count + 1; });
+        setHoveringCount(function (count) { return (draggedElementIndex === rowIndex ? count : count + 1); });
         setPlaceholderPosition(draggedElementIndex >= rowIndex ? 'top' : 'bottom');
     }, [rowIndex]);
     var dragLeave = (0, react_1.useCallback)(function () {
-        setOveringCount(function (count) { return count - 1; });
+        setHoveringCount(function (count) { return count - 1; });
     }, []);
     var dragEnd = (0, react_1.useCallback)(function () {
-        setOveringCount(0);
+        setHoveringCount(0);
     }, []);
-    return [overingCount === 0 ? 'none' : placeholderPosition, dragEnter, dragLeave, dragEnd];
+    return [hoveringCount === 0 ? 'none' : placeholderPosition, dragEnter, dragLeave, dragEnd];
 };
 exports.usePlaceholderPosition = usePlaceholderPosition;
 //# sourceMappingURL=usePlaceholderPosition.js.map

package/lib/hooks/usePlaceholderPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePlaceholderPosition.js","sourceRoot":"","sources":["../../src/hooks/usePlaceholderPosition.ts"],"names":[],"mappings":";;;AAAA,+BAAuD;AAIvD,IAAM,sBAAsB,GAAG,UAAC,QAAgB;IACxC,IAAA,KAAkC,IAAA,gBAAQ,EAAS,CAAC,CAAC,EAApD,YAAY,QAAA,EAAE,eAAe,QAAuB,CAAC;IACtD,IAAA,KAAgD,IAAA,gBAAQ,EAAsB,MAAM,CAAC,EAApF,mBAAmB,QAAA,EAAE,sBAAsB,QAAyC,CAAC;IAE5F,IAAA,iBAAS,EAAC;QACR,eAAe,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAM,SAAS,GAAG,IAAA,mBAAW,EAC3B,UAAC,mBAA2B;QAC1B,eAAe,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,GAAG,CAAC,EAAT,CAAS,CAAC,CAAC;QACpC,sBAAsB,CAAC,mBAAmB,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7E,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,SAAS,GAAG,IAAA,mBAAW,EAAC;QAC5B,eAAe,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,GAAG,CAAC,EAAT,CAAS,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,OAAO,GAAG,IAAA,mBAAW,EAAC;QAC1B,eAAe,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC;AACrG,CAAC,CAAC;AAEM,wDAAsB"}
+{"version":3,"file":"usePlaceholderPosition.js","sourceRoot":"","sources":["../../src/hooks/usePlaceholderPosition.ts"],"names":[],"mappings":";;;AAAA,+BAAuD;AAIvD,IAAM,sBAAsB,GAAG,UAAC,QAAgB;IACxC,IAAA,KAAoC,IAAA,gBAAQ,EAAS,CAAC,CAAC,EAAtD,aAAa,QAAA,EAAE,gBAAgB,QAAuB,CAAC;IACxD,IAAA,KAAgD,IAAA,gBAAQ,EAAsB,MAAM,CAAC,EAApF,mBAAmB,QAAA,EAAE,sBAAsB,QAAyC,CAAC;IAE5F,IAAA,iBAAS,EAAC;QACR,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAM,SAAS,GAAG,IAAA,mBAAW,EAC3B,UAAC,mBAA2B;QAC1B,gBAAgB,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,EAAtD,CAAsD,CAAC,CAAC;QAClF,sBAAsB,CAAC,mBAAmB,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7E,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,SAAS,GAAG,IAAA,mBAAW,EAAC;QAC5B,gBAAgB,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,GAAG,CAAC,EAAT,CAAS,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,OAAO,GAAG,IAAA,mBAAW,EAAC;QAC1B,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC;AACtG,CAAC,CAAC;AAEM,wDAAsB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.239",
+  "version": "0.1.241",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Image/Image.stories.mdx

@@ -71,3 +71,21 @@ When the `src` prop is set to `null`, the Image will display itself as loading.
     }}
   </Story>
 </Canvas>
+
+## Variation on background
+
+When the `background` prop is set to `checkerboard`, the Image will display a checkerboard background behind the transparent image.
+The background will be white otherwise.
+
+<Canvas>
+  <Story name="Background">
+    {args => {
+      return (
+        <>
+          <Image {...args} background="white" src="https://doodleipsum.com/200x140/outline?i=63527485e69dea481bb541d7f1da73fe" />
+          <Image {...args} background="checkerboard" src="https://doodleipsum.com/200x140/outline?i=63527485e69dea481bb541d7f1da73fe" />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>

package/src/components/Image/Image.tsx

@@ -8,14 +8,16 @@ const EMPTY_IMAGE = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/
 
 type Fit = 'cover' | 'contain';
 
+type Background = 'white' | 'checkerboard';
+
 const ImageContainer = styled.img<
   {
     fit: Fit;
     isStacked: boolean;
     isLoading: boolean;
+    background: Background;
   } & AkeneoThemedProps
 >`
-  background: ${getColor('white')};
   border: 1px solid ${getColor('grey', 80)};
   object-fit: ${({fit}) => fit};
   box-sizing: border-box;
@@ -28,6 +30,20 @@ const ImageContainer = styled.img<
     `}
 
   ${({isLoading}) => isLoading && placeholderStyle}
+  
+  ${({background}) =>
+    background === 'checkerboard'
+      ? css`
+          background-image: linear-gradient(45deg, ${getColor('grey', 60)} 25%, transparent 25%),
+            linear-gradient(135deg, ${getColor('grey', 60)} 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, ${getColor('grey', 60)} 75%),
+            linear-gradient(135deg, transparent 75%, ${getColor('grey', 60)} 75%);
+          background-size: 25px 25px; /* Must be a square */
+          background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
+        `
+      : css`
+          background: ${getColor(background)};
+        `}
 `;
 
 type ImageProps = Override<
@@ -62,6 +78,11 @@ type ImageProps = Override<
      * Should the image appear as a stack of multiple images.
      */
     isStacked?: boolean;
+
+    /**
+     * Should the image appear with a background or not
+     */
+    background?: Background;
   }
 >;
 
@@ -69,7 +90,10 @@ type ImageProps = Override<
  * Image allow to embed an image in a page.
  */
 const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({fit = 'cover', isStacked = false, src, ...rest}: ImageProps, forwardedRef: Ref<HTMLImageElement>) => {
+  (
+    {fit = 'cover', isStacked = false, background = 'white', src, ...rest}: ImageProps,
+    forwardedRef: Ref<HTMLImageElement>
+  ) => {
     return (
       <ImageContainer
         isLoading={null === src}
@@ -77,6 +101,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
         ref={forwardedRef}
         fit={fit}
         isStacked={isStacked}
+        background={background}
         {...rest}
       />
     );

package/src/components/Input/TableInput/TableInput.tsx

@@ -15,6 +15,7 @@ import {TableInputContext} from './TableInputContext';
 import {AkeneoThemedProps} from '../../../theme';
 import {TableInputCellContent} from './TableInputCellContent/TableInputCellContent';
 import {TableInputMeasurement} from './TableInputMeasurement/TableInputMeasurement';
+import {DraggedElementProvider} from '../../../contexts/DraggedElementContext';
 
 const TableInputContainer = styled.div`
   width: 100%;
@@ -90,9 +91,11 @@ const TableInput = ({children, readOnly = false, isDragAndDroppable = false, onR
   return (
     <TableInputContext.Provider value={{readOnly, isDragAndDroppable, onReorder}}>
       <TableInputContainer onScroll={handleScroll} {...rest}>
-        <TableInputTable className={shadowed ? 'shadowed' : ''} isDragAndDroppable={isDragAndDroppable}>
-          {children}
-        </TableInputTable>
+        <DraggedElementProvider>
+          <TableInputTable className={shadowed ? 'shadowed' : ''} isDragAndDroppable={isDragAndDroppable}>
+            {children}
+          </TableInputTable>
+        </DraggedElementProvider>
       </TableInputContainer>
     </TableInputContext.Provider>
   );
@@ -112,3 +115,4 @@ TableInput.Select = TableInputSelect;
 TableInput.Measurement = TableInputMeasurement;
 
 export {TableInput};
+export type {TableInputProps};

package/src/components/Input/TableInput/TableInput.unit.tsx

@@ -37,7 +37,7 @@ test('it can drag and drop', () => {
   render(
     <TableInput isDragAndDroppable={true} onReorder={handleReorder}>
       <TableInput.Header>
-        <TableInput.HeaderCell>An header</TableInput.HeaderCell>
+        <TableInput.HeaderCell>A header</TableInput.HeaderCell>
         <TableInput.HeaderCell>Another header</TableInput.HeaderCell>
       </TableInput.Header>
       <TableInput.Body>
@@ -76,7 +76,7 @@ test('it can drag and drop', () => {
   fireEvent.drop(screen.getAllByRole('row')[3], {dataTransfer});
   fireEvent.dragEnd(screen.getAllByRole('row')[1], {dataTransfer});
 
-  expect(handleReorder).toHaveBeenCalledWith([1, 2, 0]);
+  expect(handleReorder).toHaveBeenCalledWith([1, 2, 0], 0, 2);
 });
 
 test('TableInput supports ...rest props', () => {

package/src/components/Input/TableInput/TableInputBody/TableInputBody.tsx

@@ -1,8 +1,8 @@
 import React, {Children, cloneElement, ReactNode, Ref, useContext} from 'react';
 import {TableInputContext} from '../TableInputContext';
 import {TableInputRowProps} from '../TableInputRow/TableInputRow';
-import {useDragElementIndex} from '../../../../hooks/useDragElementIndex';
 import {useDrop} from '../../../../hooks/useDrop';
+import {DraggedElementContext} from '../../../../contexts/DraggedElementContext';
 
 type TableInputBodyProps = {
   children?: ReactNode;
@@ -10,8 +10,8 @@ type TableInputBodyProps = {
 
 const TableInputBody = React.forwardRef<HTMLTableSectionElement, TableInputBodyProps>(
   ({children, ...rest}: TableInputBodyProps, forwardedRef: Ref<HTMLTableSectionElement>) => {
-    const [draggedElementIndex, onDragStart, onDragEnd] = useDragElementIndex();
     const {isDragAndDroppable, onReorder} = useContext(TableInputContext);
+    const {index: draggedElementIndex} = useContext(DraggedElementContext);
 
     const decoratedChildren = Children.map(children, (child, rowIndex) => {
       if (!React.isValidElement<TableInputRowProps>(child)) {
@@ -22,8 +22,6 @@ const TableInputBody = React.forwardRef<HTMLTableSectionElement, TableInputBodyP
         ? cloneElement(child, {
             rowIndex,
             draggable: rowIndex === draggedElementIndex,
-            onDragStart,
-            onDragEnd,
           })
         : cloneElement(child, {
             rowIndex,

package/src/components/Input/TableInput/TableInputContext.ts

@@ -3,7 +3,7 @@ import {createContext} from 'react';
 type TableInputContextType = {
   readOnly: boolean;
   isDragAndDroppable: boolean;
-  onReorder: ((reorderedIndices: number[]) => void) | undefined;
+  onReorder: ((reorderedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void) | undefined;
 };
 
 const TableInputContext = createContext<TableInputContextType>({

package/src/components/Input/TableInput/TableInputRow/TableInputRow.tsx

@@ -6,6 +6,7 @@ import {TableInputContext} from '../TableInputContext';
 import {RowIcon} from '../../../../icons';
 import {TableInputCell} from '../TableInputCell/TableInputCell';
 import {PlaceholderPosition, usePlaceholderPosition} from '../../../../hooks/usePlaceholderPosition';
+import {DraggedElementContext} from '../../../../contexts/DraggedElementContext';
 
 const getZebraBackgroundColor: (highlighted: boolean, rowIndex: number) => (props: AkeneoThemedProps) => string = (
   highlighted,
@@ -138,38 +139,29 @@ export type TableInputRowProps = Override<
      * @private
      */
     rowIndex?: number;
-
-    /**
-     * @private
-     */
-    onDragStart?: (rowIndex: number) => void;
-
-    /**
-     * @private
-     */
-    onDragEnd?: () => void;
   }
 >;
 
 const TableInputRow = forwardRef<HTMLTableRowElement, TableInputRowProps>(
   (
-    {children, rowIndex = 0, draggable, highlighted = false, onDragStart, onDragEnd, ...rest}: TableInputRowProps,
+    {children, rowIndex = 0, draggable, highlighted = false, ...rest}: TableInputRowProps,
     forwardedRef: Ref<HTMLTableRowElement>
   ) => {
     const [placeholderPosition, placeholderDragEnter, placeholderDragLeave, placeholderDragEnd] =
       usePlaceholderPosition(rowIndex);
 
     const {isDragAndDroppable} = useContext(TableInputContext);
+    const {index: draggedElementIndex, onDragStart, onDragEnd} = useContext(DraggedElementContext);
 
-    const handleDragEnter = (event: DragEvent<HTMLTableRowElement>) => {
-      if (isDragAndDroppable) {
-        placeholderDragEnter(parseInt(event.dataTransfer.getData('text')));
+    const handleDragEnter = () => {
+      if (isDragAndDroppable && null !== draggedElementIndex) {
+        placeholderDragEnter(draggedElementIndex);
       }
     };
 
     const handleDragStart = (event: DragEvent<HTMLTableRowElement>) => {
       if (isDragAndDroppable) {
-        event.dataTransfer.setData('text', rowIndex.toString());
+        event.dataTransfer.setData('text/plain', rowIndex.toString());
         onDragStart?.(rowIndex);
       }
     };

package/src/components/Table/Table.tsx

@@ -8,6 +8,7 @@ import {TableRow} from './TableRow/TableRow';
 import {TableContext} from './TableContext';
 import {TableBody} from './TableBody/TableBody';
 import {Override} from '../../shared';
+import {DraggedElementProvider} from '../../contexts/DraggedElementContext';
 
 const TableContainer = styled.table`
   border-collapse: collapse;
@@ -60,7 +61,7 @@ type TableProps = Override<
         /**
          * Called when an element has been dragged and dropped on the table.
          */
-        onReorder: (updatedIndices: number[]) => void;
+        onReorder: (updatedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void;
       }
   )
 >;
@@ -85,7 +86,9 @@ const Table = ({
 
   return (
     <TableContext.Provider value={providerValue}>
-      <TableContainer {...rest}>{children}</TableContainer>
+      <DraggedElementProvider>
+        <TableContainer {...rest}>{children}</TableContainer>
+      </DraggedElementProvider>
     </TableContext.Provider>
   );
 };
@@ -105,3 +108,4 @@ Table.Cell = TableCell;
 Table.ActionCell = TableActionCell;
 
 export {Table};
+export type {TableProps};

package/src/components/Table/Table.unit.tsx

@@ -132,7 +132,7 @@ test('it renders table with drag and drop', () => {
   fireEvent.drop(screen.getAllByRole('row')[3], {dataTransfer});
   fireEvent.dragEnd(screen.getAllByRole('row')[1], {dataTransfer});
 
-  expect(handleReorder).toHaveBeenCalledWith([1, 2, 0]);
+  expect(handleReorder).toHaveBeenCalledWith([1, 2, 0], 0, 2);
 });
 
 test('Table supports ...rest props', () => {

package/src/components/Table/TableBody/TableBody.tsx

@@ -2,7 +2,7 @@ import React, {Ref, cloneElement, Children, useContext, ReactElement} from 'reac
 import {TableRowProps} from '../TableRow/TableRow';
 import {TableContext} from '../TableContext';
 import {useDrop} from '../../../hooks/useDrop';
-import {useDragElementIndex} from '../../../hooks/useDragElementIndex';
+import {DraggedElementContext} from '../../../contexts/DraggedElementContext';
 
 type TableBodyChild = TableBodyChild[] | ReactElement<TableRowProps> | boolean | undefined;
 
@@ -15,8 +15,8 @@ type TableBodyProps = {
 
 const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({children, ...rest}: TableBodyProps, forwardedRef: Ref<HTMLTableSectionElement>) => {
-    const [draggedElementIndex, onDragStart, onDragEnd] = useDragElementIndex();
     const {isDragAndDroppable, onReorder} = useContext(TableContext);
+    const {index: draggedElementIndex} = useContext(DraggedElementContext);
     const decoratedChildren = isDragAndDroppable
       ? Children.map(children, (child, rowIndex) => {
           if (!React.isValidElement<TableRowProps>(child)) {
@@ -26,8 +26,6 @@ const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
           return cloneElement(child, {
             rowIndex,
             draggable: rowIndex === draggedElementIndex,
-            onDragStart,
-            onDragEnd,
           });
         })
       : children;

package/src/components/Table/TableContext.ts

@@ -6,7 +6,7 @@ type TableContextType = {
   hasLockedRows: boolean;
   displayCheckbox: boolean;
   isDragAndDroppable: boolean;
-  onReorder: ((reorderedIndices: number[]) => void) | undefined;
+  onReorder: ((reorderedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void) | undefined;
 };
 
 const TableContext = createContext<TableContextType>({

package/src/components/Table/TableRow/TableRow.tsx

@@ -16,6 +16,7 @@ import {TableContext} from '../TableContext';
 import {TableCell} from '../TableCell/TableCell';
 import {RowIcon, DangerIcon, LockIcon} from '../../../icons';
 import {PlaceholderPosition, usePlaceholderPosition} from '../../../hooks/usePlaceholderPosition';
+import {DraggedElementContext} from '../../../contexts/DraggedElementContext';
 
 type Level = 'warning' | 'tertiary';
 
@@ -164,33 +165,12 @@ type TableRowProps = Override<
      * @private
      */
     rowIndex?: number;
-
-    /**
-     * @private
-     */
-    onDragStart?: (rowIndex: number) => void;
-
-    /**
-     * @private
-     */
-    onDragEnd?: () => void;
   }
 >;
 
 const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   (
-    {
-      rowIndex = 0,
-      isSelected = false,
-      level,
-      onSelectToggle,
-      onClick,
-      draggable,
-      onDragStart,
-      onDragEnd,
-      children,
-      ...rest
-    }: TableRowProps,
+    {rowIndex = 0, isSelected = false, level, onSelectToggle, onClick, draggable, children, ...rest}: TableRowProps,
     forwardedRef: Ref<HTMLTableRowElement>
   ) => {
     const [placeholderPosition, placeholderDragEnter, placeholderDragLeave, placeholderDragEnd] =
@@ -200,14 +180,17 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
       throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
+    const {index: draggedElementIndex, onDragStart, onDragEnd} = useContext(DraggedElementContext);
 
     const handleCheckboxChange = (event: SyntheticEvent) => {
       event.stopPropagation();
       onSelectToggle?.(!isSelected);
     };
 
-    const handleDragEnter = (event: DragEvent<HTMLTableRowElement>) => {
-      placeholderDragEnter(parseInt(event.dataTransfer.getData('text')));
+    const handleDragEnter = () => {
+      if (null !== draggedElementIndex) {
+        placeholderDragEnter(draggedElementIndex);
+      }
     };
 
     const handleDragStart = (event: DragEvent<HTMLTableRowElement>) => {

package/src/contexts/DraggedElementContext.tsx

@@ -0,0 +1,27 @@
+import {createContext, PropsWithChildren, useCallback, useState} from 'react';
+import React from 'react';
+import {TableProps, TableInputProps} from '../components';
+
+type DraggedElementType = {
+  index: number | null;
+  onDragStart: (rowIndex: number) => void;
+  onDragEnd?: () => void;
+};
+
+const DraggedElementContext = createContext<DraggedElementType>({
+  index: null,
+  onDragStart: () => void 0,
+  onDragEnd: () => void 0,
+});
+
+const DraggedElementProvider = ({children}: PropsWithChildren<TableProps | TableInputProps>) => {
+  const [index, setDraggedElementIndex] = useState<number | null>(null);
+  const onDragStart = useCallback((index: number) => setDraggedElementIndex(index), []);
+  const onDragEnd = useCallback(() => setDraggedElementIndex(null), []);
+
+  return (
+    <DraggedElementContext.Provider value={{index, onDragStart, onDragEnd}}>{children}</DraggedElementContext.Provider>
+  );
+};
+
+export {DraggedElementProvider, DraggedElementContext};

package/src/hooks/useDrop.ts

@@ -28,7 +28,7 @@ const generateReorderedIndices = (size: number, draggedIndex: number, droppedInd
 const useDrop = (
   tableSize: number,
   draggedElementIndex: number | null,
-  onReorder: ((reorderedIndices: number[]) => void) | undefined
+  onReorder: ((reorderedIndices: number[], draggedIndex?: number, droppedIndex?: number) => void) | undefined
 ) => {
   const tableId = useId('table_');
 
@@ -40,7 +40,11 @@ const useDrop = (
       const droppedElementIndex = getDropRow(event.target as HTMLElement);
       const newIndices = generateReorderedIndices(tableSize, draggedElementIndex, droppedElementIndex);
 
-      onReorder(newIndices);
+      if (onReorder.length === 1) {
+        onReorder(newIndices); // backwards compatibility
+      } else {
+        onReorder(newIndices, draggedElementIndex, droppedElementIndex);
+      }
     }
   };
 

package/src/hooks/useDrop.unit.tsx

@@ -60,7 +60,45 @@ test('it does not on reorder callback when user drag and drop', () => {
   // @ts-ignore
   handleDrop(event);
 
-  expect(onReorder).toHaveBeenCalledWith([0, 2, 1, 3]);
+  expect(onReorder).toHaveBeenCalledWith([0, 2, 1, 3], 1, 2);
+  expect(stopPropagation).toHaveBeenCalled();
+  expect(preventDefault).toHaveBeenCalled();
+});
+
+test('it does on reorder callback with only one argument', () => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const onReorderWithOneArgument = jest.fn((newIndices: number[]) => {
+    newIndices.map(x => x);
+  });
+  const stopPropagation = jest.fn();
+  const preventDefault = jest.fn();
+  const {result} = renderHook(() => useDrop(4, 1, onReorderWithOneArgument));
+
+  const [tableId, handleDrop] = result.current;
+  const event = {
+    currentTarget: {
+      dataset: {
+        tableId,
+      },
+    },
+    target: {
+      dataset: {},
+      parentElement: {
+        dataset: {
+          draggableIndex: '2',
+        },
+      },
+    },
+    stopPropagation,
+    preventDefault,
+  };
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  handleDrop(event);
+
+  expect(onReorderWithOneArgument).toHaveBeenCalledWith([0, 2, 1, 3]);
   expect(stopPropagation).toHaveBeenCalled();
   expect(preventDefault).toHaveBeenCalled();
 });

package/src/hooks/usePlaceholderPosition.ts

@@ -3,30 +3,30 @@ import {useCallback, useEffect, useState} from 'react';
 type PlaceholderPosition = 'top' | 'bottom' | 'none';
 
 const usePlaceholderPosition = (rowIndex: number) => {
-  const [overingCount, setOveringCount] = useState<number>(0);
+  const [hoveringCount, setHoveringCount] = useState<number>(0);
   const [placeholderPosition, setPlaceholderPosition] = useState<PlaceholderPosition>('none');
 
   useEffect(() => {
-    setOveringCount(0);
+    setHoveringCount(0);
   }, [rowIndex]);
 
   const dragEnter = useCallback(
     (draggedElementIndex: number) => {
-      setOveringCount(count => count + 1);
+      setHoveringCount(count => (draggedElementIndex === rowIndex ? count : count + 1));
       setPlaceholderPosition(draggedElementIndex >= rowIndex ? 'top' : 'bottom');
     },
     [rowIndex]
   );
 
   const dragLeave = useCallback(() => {
-    setOveringCount(count => count - 1);
+    setHoveringCount(count => count - 1);
   }, []);
 
   const dragEnd = useCallback(() => {
-    setOveringCount(0);
+    setHoveringCount(0);
   }, []);
 
-  return [overingCount === 0 ? 'none' : placeholderPosition, dragEnter, dragLeave, dragEnd] as const;
+  return [hoveringCount === 0 ? 'none' : placeholderPosition, dragEnter, dragLeave, dragEnd] as const;
 };
 
 export {usePlaceholderPosition};

package/src/hooks/usePlaceholderPosition.unit.ts

@@ -41,5 +41,11 @@ test('it does not give placeholder when dragged element is the same than the dro
     dragEnter(2);
   });
 
-  expect(result.current[0]).toBe('top');
+  expect(result.current[0]).toBe('none');
+
+  void act(() => {
+    dragEnter(1);
+  });
+
+  expect(result.current[0]).toBe('bottom');
 });