@carbon/charts-react 0.52.4 → 0.53.3

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.2...v0.53.3) (2021-12-07)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
+## [0.53.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.1...v0.53.2) (2021-12-06)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
+## [0.53.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.0...v0.53.1) (2021-12-02)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
+# [0.53.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.52.4...v0.53.0) (2021-12-01)
+
+
+### Features
+
+* **react diagrams:** add support for applying a custom class to the outer node ([#1222](https://github.com/carbon-design-system/carbon-charts/issues/1222)) ([c7e8606](https://github.com/carbon-design-system/carbon-charts/commit/c7e8606e860702bf80ebfb9045a5965fcd2fa0ff)), closes [#1221](https://github.com/carbon-design-system/carbon-charts/issues/1221)
+
+
+
+
+
 ## [0.52.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.52.3...v0.52.4) (2021-12-01)
 
 **Note:** Version bump only for package @carbon/charts-react

package/diagrams/CardNode/CardNode.d.ts

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 declare const CardNode: {
-    ({ as, children, color, href, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, onClick, position, stacked, }: any): JSX.Element;
+    ({ as, children, className, color, href, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, onClick, position, stacked, }: any): JSX.Element;
     propTypes: {
         /** Provide a custom element to be rendered instead of the default */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
@@ -8,6 +8,10 @@ declare const CardNode: {
          * Pass in the children that will be rendered within the CardNode
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
         /**
          * Specify the node's border color
          */

package/diagrams/CardNode/CardNode.js

@@ -13,7 +13,7 @@ var prefix = settings_1.default.prefix;
 var namespace = prefix + "--cc--card-node";
 var CardNode = function (_a) {
     var _b;
-    var _c = _a.as, as = _c === void 0 ? 'div' : _c, children = _a.children, color = _a.color, _d = _a.href, href = _d === void 0 ? null : _d, _e = _a.onMouseEnter, onMouseEnter = _e === void 0 ? null : _e, _f = _a.onMouseOver, onMouseOver = _f === void 0 ? null : _f, _g = _a.onMouseOut, onMouseOut = _g === void 0 ? null : _g, _h = _a.onMouseLeave, onMouseLeave = _h === void 0 ? null : _h, _j = _a.onMouseMove, onMouseMove = _j === void 0 ? null : _j, _k = _a.onClick, onClick = _k === void 0 ? null : _k, _l = _a.position, position = _l === void 0 ? 'static' : _l, stacked = _a.stacked;
+    var _c = _a.as, as = _c === void 0 ? 'div' : _c, children = _a.children, className = _a.className, color = _a.color, _d = _a.href, href = _d === void 0 ? null : _d, _e = _a.onMouseEnter, onMouseEnter = _e === void 0 ? null : _e, _f = _a.onMouseOver, onMouseOver = _f === void 0 ? null : _f, _g = _a.onMouseOut, onMouseOut = _g === void 0 ? null : _g, _h = _a.onMouseLeave, onMouseLeave = _h === void 0 ? null : _h, _j = _a.onMouseMove, onMouseMove = _j === void 0 ? null : _j, _k = _a.onClick, onClick = _k === void 0 ? null : _k, _l = _a.position, position = _l === void 0 ? 'static' : _l, stacked = _a.stacked;
     var Component = 'div';
     if (as !== 'div') {
         Component = as;
@@ -27,6 +27,7 @@ var CardNode = function (_a) {
     var cardClasses = classnames_1.default(namespace, (_b = {},
         _b[namespace + "--stacked"] = stacked,
         _b[namespace + "--" + Component] = Component,
+        _b[className] = className,
         _b));
     return (
     // @ts-ignore
@@ -40,6 +41,10 @@ CardNode.propTypes = {
      * Pass in the children that will be rendered within the CardNode
      */
     children: prop_types_1.default.node,
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
     /**
      * Specify the node's border color
      */

package/diagrams/CardNode/CardNodeColumn.d.ts

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
 declare const CardNodeColumn: {
-    ({ children, farsideColumn }: any): JSX.Element;
+    ({ children, className, farsideColumn }: any): JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the CardNodeColumn
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
         /**
          * Specify whether this is the last column
          */

package/diagrams/CardNode/CardNodeColumn.js

@@ -7,12 +7,19 @@ exports.CardNodeColumn = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
+var classnames_1 = __importDefault(require("classnames"));
+// @ts-ignore
 var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
 var prefix = settings_1.default.prefix;
 var namespace = prefix + "--cc--card-node";
 var CardNodeColumn = function (_a) {
-    var children = _a.children, farsideColumn = _a.farsideColumn;
-    return (react_1.default.createElement("div", { className: namespace + "__column " + (farsideColumn && namespace + "__column--farside") }, children));
+    var _b;
+    var children = _a.children, className = _a.className, farsideColumn = _a.farsideColumn;
+    var classes = classnames_1.default(namespace + "__column", (_b = {},
+        _b[namespace + "__column--farside"] = farsideColumn,
+        _b[className] = className,
+        _b));
+    return react_1.default.createElement("div", { className: classes }, children);
 };
 exports.CardNodeColumn = CardNodeColumn;
 CardNodeColumn.propTypes = {
@@ -20,6 +27,10 @@ CardNodeColumn.propTypes = {
      * Pass in the children that will be rendered within the CardNodeColumn
      */
     children: prop_types_1.default.node,
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
     /**
      * Specify whether this is the last column
      */

package/diagrams/CardNode/CardNodeLabel.d.ts

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
 declare const CardNodeLabel: {
-    ({ children }: any): JSX.Element;
+    ({ children, className }: any): JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the CardNodeLabel
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
     };
 };
 export { CardNodeLabel };

package/diagrams/CardNode/CardNodeLabel.js

@@ -7,12 +7,18 @@ exports.CardNodeLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
+var classnames_1 = __importDefault(require("classnames"));
+// @ts-ignore
 var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
 var prefix = settings_1.default.prefix;
 var namespace = prefix + "--cc--card-node";
 var CardNodeLabel = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement("label", { className: namespace + "__label" }, children));
+    var _b;
+    var children = _a.children, className = _a.className;
+    var classes = classnames_1.default(namespace + "__label", (_b = {},
+        _b[className] = className,
+        _b));
+    return react_1.default.createElement("label", { className: classes }, children);
 };
 exports.CardNodeLabel = CardNodeLabel;
 CardNodeLabel.propTypes = {
@@ -20,4 +26,8 @@ CardNodeLabel.propTypes = {
      * Pass in the children that will be rendered within the CardNodeLabel
      */
     children: prop_types_1.default.node,
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
 };

package/diagrams/CardNode/CardNodeSubtitle.d.ts

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
 declare const CardNodeSubtitle: {
-    ({ children }: any): JSX.Element;
+    ({ children, className }: any): JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the CardNodeSubtitle
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
     };
 };
 export { CardNodeSubtitle };

package/diagrams/CardNode/CardNodeSubtitle.js

@@ -7,12 +7,18 @@ exports.CardNodeSubtitle = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
+var classnames_1 = __importDefault(require("classnames"));
+// @ts-ignore
 var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
 var prefix = settings_1.default.prefix;
 var namespace = prefix + "--cc--card-node";
 var CardNodeSubtitle = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement("div", { className: namespace + "__subtitle" }, children));
+    var _b;
+    var children = _a.children, className = _a.className;
+    var classes = classnames_1.default(namespace + "__subtitle", (_b = {},
+        _b[className] = className,
+        _b));
+    return react_1.default.createElement("div", { className: classes }, children);
 };
 exports.CardNodeSubtitle = CardNodeSubtitle;
 CardNodeSubtitle.propTypes = {
@@ -20,4 +26,8 @@ CardNodeSubtitle.propTypes = {
      * Pass in the children that will be rendered within the CardNodeSubtitle
      */
     children: prop_types_1.default.node,
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
 };

package/diagrams/CardNode/CardNodeTitle.d.ts

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
 declare const CardNodeTitle: {
-    ({ children }: any): JSX.Element;
+    ({ children, className }: any): JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the CardNodeTitle
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
     };
 };
 export { CardNodeTitle };

package/diagrams/CardNode/CardNodeTitle.js

@@ -7,12 +7,18 @@ exports.CardNodeTitle = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
+var classnames_1 = __importDefault(require("classnames"));
+// @ts-ignore
 var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
 var prefix = settings_1.default.prefix;
 var namespace = prefix + "--cc--card-node";
 var CardNodeTitle = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement("div", { className: namespace + "__title" }, children));
+    var _b;
+    var children = _a.children, className = _a.className;
+    var classes = classnames_1.default(namespace + "__title", (_b = {},
+        _b[className] = className,
+        _b));
+    return react_1.default.createElement("div", { className: classes }, children);
 };
 exports.CardNodeTitle = CardNodeTitle;
 CardNodeTitle.propTypes = {
@@ -20,4 +26,8 @@ CardNodeTitle.propTypes = {
      * Pass in the children that will be rendered within the CardNodeTitle
      */
     children: prop_types_1.default.node,
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
 };

package/diagrams/Edge/Edge.d.ts

@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
 declare const Edge: {
-    ({ color, markerEnd, markerStart, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, path, source, target, variant, }: any): JSX.Element;
+    ({ className, color, markerEnd, markerStart, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, path, source, target, variant, }: any): JSX.Element;
     propTypes: {
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
         /**
          * Specify the edge's color
          */

package/diagrams/Edge/Edge.js

@@ -13,10 +13,11 @@ var buildPaths_1 = require("@carbon/charts/components/diagrams/buildPaths");
 var prefix = settings_1.default.prefix;
 var Edge = function (_a) {
     var _b;
-    var color = _a.color, markerEnd = _a.markerEnd, markerStart = _a.markerStart, _c = _a.onMouseEnter, onMouseEnter = _c === void 0 ? null : _c, _d = _a.onMouseOver, onMouseOver = _d === void 0 ? null : _d, _e = _a.onMouseOut, onMouseOut = _e === void 0 ? null : _e, _f = _a.onMouseLeave, onMouseLeave = _f === void 0 ? null : _f, _g = _a.onMouseMove, onMouseMove = _g === void 0 ? null : _g, path = _a.path, source = _a.source, target = _a.target, _h = _a.variant, variant = _h === void 0 ? null : _h;
+    var className = _a.className, color = _a.color, markerEnd = _a.markerEnd, markerStart = _a.markerStart, _c = _a.onMouseEnter, onMouseEnter = _c === void 0 ? null : _c, _d = _a.onMouseOver, onMouseOver = _d === void 0 ? null : _d, _e = _a.onMouseOut, onMouseOut = _e === void 0 ? null : _e, _f = _a.onMouseLeave, onMouseLeave = _f === void 0 ? null : _f, _g = _a.onMouseMove, onMouseMove = _g === void 0 ? null : _g, path = _a.path, source = _a.source, target = _a.target, _h = _a.variant, variant = _h === void 0 ? null : _h;
     var namespace = prefix + "--cc--edge";
     var pathClasses = classnames_1.default(namespace, (_b = {},
         _b[namespace + "--" + variant] = variant,
+        _b[className] = className,
         _b));
     var d = path || buildPaths_1.buildStraightPathString(source, target);
     return (react_1.default.createElement("g", { className: pathClasses, onMouseEnter: onMouseEnter, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove },
@@ -26,6 +27,10 @@ var Edge = function (_a) {
 };
 exports.default = Edge;
 Edge.propTypes = {
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
     /**
      * Specify the edge's color
      */

package/diagrams/Marker/Marker.d.ts

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 declare const Marker: {
-    ({ d, color, id, orient, height, width, position, refX, refY, }: any): JSX.Element;
+    ({ className, color, d, id, orient, height, width, position, refX, refY, }: any): JSX.Element;
     propTypes: {
         /**
-         * Specify a path string
+         * Provide an optional class to be applied on the outer element
          */
-        d: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
         /**
          * Specify the marker's color
          */
         color: PropTypes.Requireable<string>;
+        /**
+         * Specify a path string
+         */
+        d: PropTypes.Requireable<string>;
         /**
          * Specify an ID for the marker
          */

package/diagrams/Marker/Marker.js

@@ -29,15 +29,21 @@ exports.TeeMarker = exports.SquareMarker = exports.DiamondMarker = exports.Circl
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
+var classnames_1 = __importDefault(require("classnames"));
+// @ts-ignore
 var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
 var markerDefinitions_1 = require("@carbon/charts/components/diagrams/markerDefinitions");
 var prefix = settings_1.default.prefix;
 var Marker = function (_a) {
-    var d = _a.d, color = _a.color, id = _a.id, _b = _a.orient, orient = _b === void 0 ? 'auto' : _b, height = _a.height, width = _a.width, _c = _a.position, position = _c === void 0 ? 'end' : _c, refX = _a.refX, refY = _a.refY;
+    var _b;
+    var className = _a.className, color = _a.color, d = _a.d, id = _a.id, _c = _a.orient, orient = _c === void 0 ? 'auto' : _c, height = _a.height, width = _a.width, _d = _a.position, position = _d === void 0 ? 'end' : _d, refX = _a.refX, refY = _a.refY;
     var namespace = prefix + "--cc--marker";
+    var classes = classnames_1.default(namespace, (_b = {},
+        _b[className] = className,
+        _b));
     var xPos = position === 'end' ? width / 2 + 0.5 : 0.5;
     var yPos = height / 2;
-    return (react_1.default.createElement("marker", { className: namespace, markerHeight: height, markerWidth: width, orient: orient, id: id, refX: refX || xPos, refY: refY || yPos, markerUnits: "userSpaceOnUse" },
+    return (react_1.default.createElement("marker", { className: classes, markerHeight: height, markerWidth: width, orient: orient, id: id, refX: refX || xPos, refY: refY || yPos, markerUnits: "userSpaceOnUse" },
         react_1.default.createElement("path", { d: d, style: { fill: color } })));
 };
 exports.default = Marker;
@@ -73,13 +79,17 @@ var TeeMarker = function (_a) {
 exports.TeeMarker = TeeMarker;
 Marker.propTypes = {
     /**
-     * Specify a path string
+     * Provide an optional class to be applied on the outer element
      */
-    d: prop_types_1.default.string,
+    className: prop_types_1.default.string,
     /**
      * Specify the marker's color
      */
     color: prop_types_1.default.string,
+    /**
+     * Specify a path string
+     */
+    d: prop_types_1.default.string,
     /**
      * Specify an ID for the marker
      */

package/diagrams/ShapeNode/ShapeNode.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 declare const ShapeNode: {
-    ({ as, href, onClick, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, position, bodyPosition, renderIcon, size, stacked, shape, subtitle, title, }: any): JSX.Element;
+    ({ as, className, href, onClick, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, position, bodyPosition, renderIcon, size, stacked, shape, subtitle, title, }: any): JSX.Element;
     propTypes: {
         /** Provide a custom element to be rendered instead of the default */
         as: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional class to be applied on the outer element
+         */
+        className: PropTypes.Requireable<string>;
         /**
          * Optionally specify an href for the CardNode to become an `<a>` element
          */

package/diagrams/ShapeNode/ShapeNode.js

@@ -12,7 +12,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var prefix = settings_1.default.prefix;
 var ShapeNode = function (_a) {
     var _b;
-    var _c = _a.as, as = _c === void 0 ? 'div' : _c, _d = _a.href, href = _d === void 0 ? null : _d, _e = _a.onClick, onClick = _e === void 0 ? null : _e, _f = _a.onMouseEnter, onMouseEnter = _f === void 0 ? null : _f, _g = _a.onMouseOver, onMouseOver = _g === void 0 ? null : _g, _h = _a.onMouseOut, onMouseOut = _h === void 0 ? null : _h, _j = _a.onMouseLeave, onMouseLeave = _j === void 0 ? null : _j, _k = _a.onMouseMove, onMouseMove = _k === void 0 ? null : _k, _l = _a.position, position = _l === void 0 ? 'fixed' : _l, _m = _a.bodyPosition, bodyPosition = _m === void 0 ? 'absolute' : _m, renderIcon = _a.renderIcon, _o = _a.size, size = _o === void 0 ? 48 : _o, stacked = _a.stacked, _p = _a.shape, shape = _p === void 0 ? 'circle' : _p, subtitle = _a.subtitle, title = _a.title;
+    var _c = _a.as, as = _c === void 0 ? 'div' : _c, className = _a.className, _d = _a.href, href = _d === void 0 ? null : _d, _e = _a.onClick, onClick = _e === void 0 ? null : _e, _f = _a.onMouseEnter, onMouseEnter = _f === void 0 ? null : _f, _g = _a.onMouseOver, onMouseOver = _g === void 0 ? null : _g, _h = _a.onMouseOut, onMouseOut = _h === void 0 ? null : _h, _j = _a.onMouseLeave, onMouseLeave = _j === void 0 ? null : _j, _k = _a.onMouseMove, onMouseMove = _k === void 0 ? null : _k, _l = _a.position, position = _l === void 0 ? 'fixed' : _l, _m = _a.bodyPosition, bodyPosition = _m === void 0 ? 'absolute' : _m, renderIcon = _a.renderIcon, _o = _a.size, size = _o === void 0 ? 48 : _o, stacked = _a.stacked, _p = _a.shape, shape = _p === void 0 ? 'circle' : _p, subtitle = _a.subtitle, title = _a.title;
     var namespace = prefix + "--cc--shape-node";
     var Component = 'div';
     if (href) {
@@ -25,6 +25,7 @@ var ShapeNode = function (_a) {
         _b[namespace + "--stacked"] = stacked,
         _b[namespace + "--" + shape] = shape,
         _b[namespace + "--" + Component] = Component,
+        _b[className] = className,
         _b));
     var titleElement = title ? (react_1.default.createElement("div", { className: namespace + "__title" }, title)) : null;
     var subtitleElement = subtitle ? (react_1.default.createElement("div", { className: namespace + "__subtitle" }, subtitle)) : null;
@@ -39,6 +40,10 @@ var ShapeNode = function (_a) {
 ShapeNode.propTypes = {
     /** Provide a custom element to be rendered instead of the default */
     as: prop_types_1.default.oneOf(['div', 'a', 'button']),
+    /**
+     * Provide an optional class to be applied on the outer element
+     */
+    className: prop_types_1.default.string,
     /**
      * Optionally specify an href for the CardNode to become an `<a>` element
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts-react",
-  "version": "0.52.4",
+  "version": "0.53.3",
   "description": "Carbon charting components for React",
   "main": "./bundle.js",
   "module": "./index.js",
@@ -49,7 +49,7 @@
   },
   "homepage": "https://github.com/carbon-design-system/carbon-charts#readme",
   "dependencies": {
-    "@carbon/charts": "^0.52.4",
+    "@carbon/charts": "^0.53.3",
     "@carbon/icons-react": "^10.32.0",
     "@carbon/telemetry": "0.0.0-alpha.6"
   },