carbon-react 104.5.0 → 104.6.0

package/lib/components/draggable/draggable-container.component.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDnd = require("react-dnd");
 
-var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -96,7 +96,7 @@ const DraggableContainer = ({
 
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
-    backend: _reactDndHtml5Backend.default
+    backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement(DropTarget, _extends({
     getOrder: getItemsId
   }, marginProps), draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {

package/lib/components/draggable/draggable-item.component.js

@@ -35,8 +35,8 @@ const DraggableItem = ({
   const [{
     isDragging
   }, drag] = (0, _reactDnd.useDrag)({
+    type: "draggableItem",
     item: {
-      type: "draggableItem",
       id,
       originalIndex
     },

package/lib/components/draggable/draggable-test.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _draggableContainer = _interopRequireDefault(require("./draggable-container.component"));
+
+var _draggableItem = _interopRequireDefault(require("./draggable-item.component"));
+
+var _checkbox = require("../checkbox");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: "Draggable/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+exports.default = _default;
+
+const Default = () => {
+  const handleUpdate = items => {
+    (0, _addonActions.action)("onUpdate")(items);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_draggableContainer.default, {
+    getOrder: handleUpdate
+  }, /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "1",
+    id: 1
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label One"
+  })), /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "2",
+    id: 2
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label Two"
+  })), /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "3",
+    id: 3
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label Three"
+  })), /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "4",
+    id: 4
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label Four"
+  })));
+};
+
+exports.Default = Default;
+Default.story = {
+  name: "default"
+};

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDnd = require("react-dnd");
 
-var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -45,6 +45,11 @@ const DropTarget = ({
   }, rest), children);
 };
 
+DropTarget.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  getOrder: _propTypes.default.func
+};
+
 const FlatTableBodyDraggable = ({
   children,
   getOrder
@@ -88,15 +93,14 @@ const FlatTableBodyDraggable = ({
   };
 
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
-    backend: _reactDndHtml5Backend.default
+    backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement(DropTarget, {
     getOrder: getItemsId
   }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,
-    draggable: true,
-    key: `${item.props.id}`
+    draggable: true
   }, [/*#__PURE__*/_react.default.createElement(_flatTableCell.default, {
     key: item.props.id
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -108,9 +112,5 @@ FlatTableBodyDraggable.propTypes = {
   getOrder: _propTypes.default.func,
   children: _propTypes.default.node.isRequired
 };
-DropTarget.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  getOrder: _propTypes.default.func
-};
 var _default = FlatTableBodyDraggable;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.d.ts

@@ -5,6 +5,7 @@ declare function FlatTableRowDraggable({ children, id, findItem, moveItem }: {
     findItem: any;
     moveItem: any;
 }): React.DetailedReactHTMLElement<{
+    key: any;
     id: any;
     isDragging: boolean;
     ref: (node: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -23,8 +23,8 @@ const FlatTableRowDraggable = ({
   const [{
     isDragging
   }, drag] = (0, _reactDnd.useDrag)({
+    type: "flatTableRow",
     item: {
-      type: "flatTableRow",
       id,
       originalIndex
     },
@@ -60,6 +60,7 @@ const FlatTableRowDraggable = ({
 
   });
   return /*#__PURE__*/_react.default.cloneElement(children, {
+    key: originalIndex,
     id,
     isDragging,
     ref: node => drag(drop(node))

package/lib/components/sidebar/sidebar.style.js

@@ -26,7 +26,7 @@ const SidebarStyle = _styledComponents.default.div`
   size,
   theme
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.disabled.input};
+    background: var(--colorsUtilityMajor025);
     border-radius: 1px;
     bottom: 0;
     position: fixed;
@@ -40,7 +40,7 @@ const SidebarStyle = _styledComponents.default.div`
     `}
 
     ${position && (0, _styledComponents.css)`
-      box-shadow: ${theme.shadows.depth3};
+      box-shadow: var(--boxShadow300);
       ${position}: 0;
     `}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.5.0",
+  "version": "104.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -171,8 +171,8 @@
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~7.4.10",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^14.0.5",
+    "react-dnd-html5-backend": "^14.1.0",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "styled-system": "^5.1.5",