carbon-react 144.10.0 → 144.11.0

package/esm/components/draggable/draggable-container.component.d.ts

@@ -10,9 +10,14 @@ export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "da
      * `<DraggableItem />` is required to make `Draggable` works
      */
     children?: React.ReactNode;
+    /**
+     * Defines the direction in which the draggable items contents are placed.
+     * Can be either "row" or "row-reverse".
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableContainer: {
-    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, flexDirection, ...rest }: DraggableContainerProps): JSX.Element;
     displayName: string;
 };
 export default DraggableContainer;

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

@@ -12,6 +12,7 @@ const DraggableContainer = ({
   "data-role": dataRole = "draggable-container",
   children,
   getOrder,
+  flexDirection = "row",
   ...rest
 }) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
@@ -67,7 +68,8 @@ const DraggableContainer = ({
     return /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
       id: `${item.props.id}`,
       findItem,
-      moveItem
+      moveItem,
+      flexDirection
     }, [item.props.children]);
   })));
 };
@@ -76,6 +78,7 @@ if (process.env.NODE_ENV !== "production") {
     "children": PropTypes.node,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
+    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "getOrder": PropTypes.func,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

package/esm/components/draggable/draggable-item/draggable-item.component.d.ts

@@ -22,9 +22,14 @@ export interface DraggableItemProps extends PaddingProps {
      * @ignore
      */
     moveItem?: (droppedId: string | number, overIndex: number | undefined) => void;
+    /**
+     * @private
+     * @ignore
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableItem: {
-    ({ id, findItem, moveItem, children, py, ...rest }: DraggableItemProps): JSX.Element;
+    ({ id, findItem, moveItem, children, py, flexDirection, ...rest }: DraggableItemProps): JSX.Element;
     displayName: string;
 };
 export default DraggableItem;

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

@@ -3,13 +3,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
+import { StyledDraggableItem } from "./draggable-item.style";
+import Icon from "../../icon";
 const DraggableItem = ({
   id,
   findItem,
   moveItem,
   children,
   py = 1,
+  flexDirection,
   ...rest
 }) => {
   let originalIndex;
@@ -60,8 +62,9 @@ const DraggableItem = ({
     "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
-    py: py
-  }, paddingProps), children, /*#__PURE__*/React.createElement(StyledIcon, {
+    py: py,
+    flexDirection: flexDirection
+  }, paddingProps), children, /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
   }));
 };
@@ -69,6 +72,7 @@ if (process.env.NODE_ENV !== "production") {
   DraggableItem.propTypes = {
     "children": PropTypes.node,
     "findItem": PropTypes.func,
+    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     "moveItem": PropTypes.func,
     "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/draggable/draggable-item/draggable-item.style.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { PaddingProps } from "styled-system";
 declare const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledDraggableItemProps extends PaddingProps {
     isDragging?: boolean;
+    flexDirection?: "row" | "row-reverse";
 }
 declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

package/esm/components/draggable/draggable-item/draggable-item.style.js

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 import { padding, margin } from "styled-system";
 import { baseTheme } from "../../../style/themes";
-import Icon from "../../icon";
 const StyledDraggableContainer = styled.div`
   ${margin}
 `;
@@ -11,18 +10,18 @@ const StyledDraggableItem = styled.div`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${padding}
   cursor: move;
-
+  justify-content: space-between;
+  flex-direction: ${({
+  flexDirection
+}) => flexDirection};
   opacity: ${({
   isDragging
 }) => isDragging ? "0" : "1"};
 `;
-const StyledIcon = styled(Icon)`
-  margin-left: auto;
-`;
 StyledDraggableContainer.defaultProps = {
   theme: baseTheme
 };
 StyledDraggableItem.defaultProps = {
   theme: baseTheme
 };
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

package/lib/components/draggable/draggable-container.component.d.ts

@@ -10,9 +10,14 @@ export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "da
      * `<DraggableItem />` is required to make `Draggable` works
      */
     children?: React.ReactNode;
+    /**
+     * Defines the direction in which the draggable items contents are placed.
+     * Can be either "row" or "row-reverse".
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableContainer: {
-    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, flexDirection, ...rest }: DraggableContainerProps): JSX.Element;
     displayName: string;
 };
 export default DraggableContainer;

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

@@ -21,6 +21,7 @@ const DraggableContainer = ({
   "data-role": dataRole = "draggable-container",
   children,
   getOrder,
+  flexDirection = "row",
   ...rest
 }) => {
   const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
@@ -76,7 +77,8 @@ const DraggableContainer = ({
     return /*#__PURE__*/_react.default.isValidElement(item) && /*#__PURE__*/_react.default.cloneElement(item, {
       id: `${item.props.id}`,
       findItem,
-      moveItem
+      moveItem,
+      flexDirection
     }, [item.props.children]);
   })));
 };
@@ -85,6 +87,7 @@ if (process.env.NODE_ENV !== "production") {
     "children": _propTypes.default.node,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
+    "flexDirection": _propTypes.default.oneOf(["row-reverse", "row"]),
     "getOrder": _propTypes.default.func,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,

package/lib/components/draggable/draggable-item/draggable-item.component.d.ts

@@ -22,9 +22,14 @@ export interface DraggableItemProps extends PaddingProps {
      * @ignore
      */
     moveItem?: (droppedId: string | number, overIndex: number | undefined) => void;
+    /**
+     * @private
+     * @ignore
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableItem: {
-    ({ id, findItem, moveItem, children, py, ...rest }: DraggableItemProps): JSX.Element;
+    ({ id, findItem, moveItem, children, py, flexDirection, ...rest }: DraggableItemProps): JSX.Element;
     displayName: string;
 };
 export default DraggableItem;

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

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _utils = require("../../../style/utils");
 var _draggableItem = require("./draggable-item.style");
+var _icon = _interopRequireDefault(require("../../icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const DraggableItem = ({
@@ -17,6 +18,7 @@ const DraggableItem = ({
   moveItem,
   children,
   py = 1,
+  flexDirection,
   ...rest
 }) => {
   let originalIndex;
@@ -67,8 +69,9 @@ const DraggableItem = ({
     "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
-    py: py
-  }, paddingProps), children, /*#__PURE__*/_react.default.createElement(_draggableItem.StyledIcon, {
+    py: py,
+    flexDirection: flexDirection
+  }, paddingProps), children, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "drag"
   }));
 };
@@ -76,6 +79,7 @@ if (process.env.NODE_ENV !== "production") {
   DraggableItem.propTypes = {
     "children": _propTypes.default.node,
     "findItem": _propTypes.default.func,
+    "flexDirection": _propTypes.default.oneOf(["row-reverse", "row"]),
     "id": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     "moveItem": _propTypes.default.func,
     "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

package/lib/components/draggable/draggable-item/draggable-item.style.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { PaddingProps } from "styled-system";
 declare const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledDraggableItemProps extends PaddingProps {
     isDragging?: boolean;
+    flexDirection?: "row" | "row-reverse";
 }
 declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

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

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledIcon = exports.StyledDraggableItem = exports.StyledDraggableContainer = void 0;
+exports.StyledDraggableItem = exports.StyledDraggableContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../../style/themes");
-var _icon = _interopRequireDefault(require("../../icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledDraggableContainer = exports.StyledDraggableContainer = _styledComponents.default.div`
   ${_styledSystem.margin}
@@ -18,14 +17,14 @@ const StyledDraggableItem = exports.StyledDraggableItem = _styledComponents.defa
   border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${_styledSystem.padding}
   cursor: move;
-
+  justify-content: space-between;
+  flex-direction: ${({
+  flexDirection
+}) => flexDirection};
   opacity: ${({
   isDragging
 }) => isDragging ? "0" : "1"};
 `;
-const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.default)`
-  margin-left: auto;
-`;
 StyledDraggableContainer.defaultProps = {
   theme: _themes.baseTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.10.0",
+  "version": "144.11.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",