carbon-react 105.1.0 → 105.1.1

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -5,7 +5,7 @@ import { useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import PropTypes from "prop-types";
 import StyledIcon from "../../icon/icon.style";
-import FlatTableBody from "../flat-table-body/flat-table-body.component";
+import StyledFlatTableBodyDraggable from "./flat-table-body-draggable.style";
 import FlatTableCell from "../flat-table-cell/flat-table-cell.component";
 
 const DropTarget = ({
@@ -13,16 +13,23 @@ const DropTarget = ({
   getOrder,
   ...rest
 }) => {
+  const [isDragging, setIsDragging] = useState(false);
   const [, drop] = useDrop({
     accept: "flatTableRow",
+    hover: (_, monitor) => {
+      if (!isDragging && monitor.isOver()) setIsDragging(true);
+    },
 
     drop() {
+      setIsDragging(false);
       getOrder();
     }
 
   });
-  return /*#__PURE__*/React.createElement(FlatTableBody, _extends({
-    ref: drop
+  return /*#__PURE__*/React.createElement(StyledFlatTableBodyDraggable, _extends({
+    "data-testid": "flat-table-body-draggable",
+    ref: drop,
+    isDragging: isDragging
   }, rest), children);
 };
 

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledFlatTableBodyDraggable;
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {}, never>;

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js

@@ -0,0 +1,9 @@
+import styled, { css } from "styled-components";
+const StyledFlatTableBodyDraggable = styled.tbody`
+  ${({
+  isDragging
+}) => isDragging && css`
+      cursor: grabbing;
+    `}
+`;
+export default StyledFlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -248,7 +248,6 @@ const StyledFlatTableRow = styled.tr`
       ${isDragging && css`
         border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
           2px solid;
-        cursor: grabbing;
         ${allCellTypes} {
           background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
         }

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
-var _flatTableBody = _interopRequireDefault(require("../flat-table-body/flat-table-body.component"));
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.style"));
 
 var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
 
@@ -32,16 +32,23 @@ const DropTarget = ({
   getOrder,
   ...rest
 }) => {
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
   const [, drop] = (0, _reactDnd.useDrop)({
     accept: "flatTableRow",
+    hover: (_, monitor) => {
+      if (!isDragging && monitor.isOver()) setIsDragging(true);
+    },
 
     drop() {
+      setIsDragging(false);
       getOrder();
     }
 
   });
-  return /*#__PURE__*/_react.default.createElement(_flatTableBody.default, _extends({
-    ref: drop
+  return /*#__PURE__*/_react.default.createElement(_flatTableBodyDraggable.default, _extends({
+    "data-testid": "flat-table-body-draggable",
+    ref: drop,
+    isDragging: isDragging
   }, rest), children);
 };
 

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledFlatTableBodyDraggable;
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {}, never>;

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledFlatTableBodyDraggable = _styledComponents.default.tbody`
+  ${({
+  isDragging
+}) => isDragging && (0, _styledComponents.css)`
+      cursor: grabbing;
+    `}
+`;
+var _default = StyledFlatTableBodyDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -269,7 +269,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       ${isDragging && (0, _styledComponents.css)`
         border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
           2px solid;
-        cursor: grabbing;
         ${allCellTypes} {
           background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "105.1.0",
+  "version": "105.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -84,6 +84,8 @@
     "@storybook/components": "^6.4.18",
     "@storybook/react": "^6.4.18",
     "@storybook/theming": "^6.4.18",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^26.0.19",
@@ -172,8 +174,8 @@
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~7.4.10",
-    "react-dnd": "^14.0.5",
-    "react-dnd-html5-backend": "^14.1.0",
+    "react-dnd": "^15.1.1",
+    "react-dnd-html5-backend": "^15.1.2",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "styled-system": "^5.1.5",