@carbon/charts-react 0.41.68 → 0.41.72

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.41.68](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.67...v0.41.68) (2021-06-08)
+## [0.41.72](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.71...v0.41.72) (2021-06-23)
 
 **Note:** Version bump only for package @carbon/charts-react
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.41.67](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.66...v0.41.67) (2021-05-31)
+## [0.41.71](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.70...v0.41.71) (2021-06-21)
 
 **Note:** Version bump only for package @carbon/charts-react
 
@@ -19,7 +19,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.41.66](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.65...v0.41.66) (2021-05-25)
+## [0.41.70](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.69...v0.41.70) (2021-06-21)
 
 **Note:** Version bump only for package @carbon/charts-react
 
@@ -27,13 +27,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.41.65](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.64...v0.41.65) (2021-05-19)
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.41.69](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.68...v0.41.69) (2021-06-21)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.41.68](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.67...v0.41.68) (2021-06-08)
 
 **Note:** Version bump only for package @carbon/charts-react
 
+## [0.41.67](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.66...v0.41.67) (2021-05-31)
 
+**Note:** Version bump only for package @carbon/charts-react
 
+## [0.41.66](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.65...v0.41.66) (2021-05-25)
 
+**Note:** Version bump only for package @carbon/charts-react
+
+## [0.41.65](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.64...v0.41.65) (2021-05-19)
+
+**Note:** Version bump only for package @carbon/charts-react
 
 # Change Log
 
@@ -96,19 +118,7 @@ All notable changes to this project will be documented in this file. See
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.41.56](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.55...v0.41.56) (2021-04-16)
-
-**Note:** Version bump only for package @carbon/charts-react
-
-## [0.41.55](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.54...v0.41.55) (2021-04-14)
-
-**Note:** Version bump only for package @carbon/charts-react
-
-## [0.41.54](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.53...v0.41.54) (2021-04-14)
-
-**Note:** Version bump only for package @carbon/charts-react
-
-## [0.41.53](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.52...v0.41.53) (2021-04-13)
+## [0.41.57](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.56...v0.41.57) (2021-04-20)
 
 **Note:** Version bump only for package @carbon/charts-react
 

package/diagrams/CardNode/CardNode.d.ts

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+declare const CardNode: {
+    ({ as, children, color, href, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, onClick, stacked, }: any): JSX.Element;
+    propTypes: {
+        /** Provide a custom element to be rendered instead of the default */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Pass in the children that will be rendered within the CardNode
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the node's border color
+         */
+        color: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify an href for the CardNode to become an `<a>` element
+         */
+        href: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the CardNode
+         * is clicked, turning the CardNode into a `<button>` element
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseEnter event
+         */
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseOver event
+         */
+        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseOut event
+         */
+        onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseLeave event
+         */
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseMove event
+         */
+        onMouseMove: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify whether the node displays a stacked effect
+         */
+        stacked: PropTypes.Requireable<boolean>;
+    };
+};
+export default CardNode;

package/diagrams/CardNode/CardNode.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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, stacked = _a.stacked;
+    var Component = 'div';
+    if (as !== 'div') {
+        Component = as;
+    }
+    else if (href) {
+        Component = 'a';
+    }
+    else if (onClick) {
+        Component = 'button';
+    }
+    var cardClasses = classnames_1.default(namespace, (_b = {},
+        _b[namespace + "--stacked"] = stacked,
+        _b[namespace + "--" + Component] = Component,
+        _b));
+    return (
+    // @ts-ignore
+    react_1.default.createElement(Component, { className: cardClasses, onClick: onClick, onMouseEnter: onMouseEnter, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, style: { borderColor: color }, tabIndex: 0 }, children));
+};
+exports.default = CardNode;
+CardNode.propTypes = {
+    /** Provide a custom element to be rendered instead of the default */
+    as: prop_types_1.default.elementType,
+    /**
+     * Pass in the children that will be rendered within the CardNode
+     */
+    children: prop_types_1.default.node,
+    /**
+     * Specify the node's border color
+     */
+    color: prop_types_1.default.string,
+    /**
+     * Optionally specify an href for the CardNode to become an `<a>` element
+     */
+    href: prop_types_1.default.string,
+    /**
+     * Provide an optional function to be called when the CardNode
+     * is clicked, turning the CardNode into a `<button>` element
+     */
+    onClick: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseEnter event
+     */
+    onMouseEnter: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseOver event
+     */
+    onMouseOver: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseOut event
+     */
+    onMouseOut: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseLeave event
+     */
+    onMouseLeave: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseMove event
+     */
+    onMouseMove: prop_types_1.default.func,
+    /**
+     * Specify whether the node displays a stacked effect
+     */
+    stacked: prop_types_1.default.bool,
+};

package/diagrams/CardNode/CardNodeColumn.d.ts

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+declare const CardNodeColumn: {
+    ({ children, farsideColumn }: any): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the CardNodeColumn
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether this is the last column
+         */
+        farsideColumn: PropTypes.Requireable<boolean>;
+    };
+};
+export { CardNodeColumn };

package/diagrams/CardNode/CardNodeColumn.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardNodeColumn = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @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));
+};
+exports.CardNodeColumn = CardNodeColumn;
+CardNodeColumn.propTypes = {
+    /**
+     * Pass in the children that will be rendered within the CardNodeColumn
+     */
+    children: prop_types_1.default.node,
+    /**
+     * Specify whether this is the last column
+     */
+    farsideColumn: prop_types_1.default.bool,
+};

package/diagrams/CardNode/CardNodeLabel.d.ts

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+declare const CardNodeLabel: {
+    ({ children }: any): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the CardNodeLabel
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export { CardNodeLabel };

package/diagrams/CardNode/CardNodeLabel.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.CardNodeLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @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));
+};
+exports.CardNodeLabel = CardNodeLabel;
+CardNodeLabel.propTypes = {
+    /**
+     * Pass in the children that will be rendered within the CardNodeLabel
+     */
+    children: prop_types_1.default.node,
+};

package/diagrams/CardNode/CardNodeSubtitle.d.ts

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+declare const CardNodeSubtitle: {
+    ({ children }: any): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the CardNodeSubtitle
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export { CardNodeSubtitle };

package/diagrams/CardNode/CardNodeSubtitle.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.CardNodeSubtitle = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @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));
+};
+exports.CardNodeSubtitle = CardNodeSubtitle;
+CardNodeSubtitle.propTypes = {
+    /**
+     * Pass in the children that will be rendered within the CardNodeSubtitle
+     */
+    children: prop_types_1.default.node,
+};

package/diagrams/CardNode/CardNodeTitle.d.ts

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+declare const CardNodeTitle: {
+    ({ children }: any): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the CardNodeTitle
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export { CardNodeTitle };

package/diagrams/CardNode/CardNodeTitle.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.CardNodeTitle = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @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));
+};
+exports.CardNodeTitle = CardNodeTitle;
+CardNodeTitle.propTypes = {
+    /**
+     * Pass in the children that will be rendered within the CardNodeTitle
+     */
+    children: prop_types_1.default.node,
+};

package/diagrams/CardNode/index.d.ts

@@ -0,0 +1,6 @@
+import CardNode from './CardNode';
+import { CardNodeColumn } from './CardNodeColumn';
+import { CardNodeLabel } from './CardNodeLabel';
+import { CardNodeSubtitle } from './CardNodeSubtitle';
+import { CardNodeTitle } from './CardNodeTitle';
+export { CardNode as default, CardNodeColumn, CardNodeSubtitle, CardNodeTitle, CardNodeLabel, };

package/diagrams/CardNode/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardNodeLabel = exports.CardNodeTitle = exports.CardNodeSubtitle = exports.CardNodeColumn = exports.default = void 0;
+var CardNode_1 = __importDefault(require("./CardNode"));
+exports.default = CardNode_1.default;
+var CardNodeColumn_1 = require("./CardNodeColumn");
+Object.defineProperty(exports, "CardNodeColumn", { enumerable: true, get: function () { return CardNodeColumn_1.CardNodeColumn; } });
+var CardNodeLabel_1 = require("./CardNodeLabel");
+Object.defineProperty(exports, "CardNodeLabel", { enumerable: true, get: function () { return CardNodeLabel_1.CardNodeLabel; } });
+var CardNodeSubtitle_1 = require("./CardNodeSubtitle");
+Object.defineProperty(exports, "CardNodeSubtitle", { enumerable: true, get: function () { return CardNodeSubtitle_1.CardNodeSubtitle; } });
+var CardNodeTitle_1 = require("./CardNodeTitle");
+Object.defineProperty(exports, "CardNodeTitle", { enumerable: true, get: function () { return CardNodeTitle_1.CardNodeTitle; } });

package/diagrams/Edge/Edge.d.ts

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+declare const Edge: {
+    ({ color, markerEnd, markerStart, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, path, source, target, variant, }: any): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the edge's color
+         */
+        color: PropTypes.Requireable<string>;
+        /**
+         * Specify an ID for a corresponding end marker
+         */
+        markerEnd: PropTypes.Requireable<string>;
+        /**
+         * Specify an ID for a corresponding start marker
+         */
+        markerStart: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called for the onMouseEnter event
+         */
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseOver event
+         */
+        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseOut event
+         */
+        onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseLeave event
+         */
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseMove event
+         */
+        onMouseMove: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify a path string
+         */
+        path: PropTypes.Requireable<string>;
+        /**
+         * Coordinates for the source element
+         */
+        source: PropTypes.Requireable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<number>;
+            y: PropTypes.Requireable<number>;
+        }>>;
+        /**
+         * Coordinates for the target element
+         */
+        target: PropTypes.Requireable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<number>;
+            y: PropTypes.Requireable<number>;
+        }>>;
+        /**
+         * Specify the variant of the edge
+         */
+        variant: PropTypes.Requireable<string>;
+    };
+};
+export default Edge;

package/diagrams/Edge/Edge.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @ts-ignore
+var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
+// @ts-ignore
+var classnames_1 = __importDefault(require("classnames"));
+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 namespace = prefix + "--cc--edge";
+    var pathClasses = classnames_1.default(namespace, (_b = {},
+        _b[namespace + "--" + variant] = variant,
+        _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 },
+        react_1.default.createElement("path", { d: d, className: namespace + "__container" }),
+        react_1.default.createElement("path", { d: d, className: namespace + "__outer" }),
+        react_1.default.createElement("path", { d: d, className: namespace + "__inner", markerEnd: "url(#" + markerEnd + ")", markerStart: "url(#" + markerStart + ")", style: { stroke: color } })));
+};
+exports.default = Edge;
+Edge.propTypes = {
+    /**
+     * Specify the edge's color
+     */
+    color: prop_types_1.default.string,
+    /**
+     * Specify an ID for a corresponding end marker
+     */
+    markerEnd: prop_types_1.default.string,
+    /**
+     * Specify an ID for a corresponding start marker
+     */
+    markerStart: prop_types_1.default.string,
+    /**
+     * Provide an optional function to be called for the onMouseEnter event
+     */
+    onMouseEnter: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseOver event
+     */
+    onMouseOver: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseOut event
+     */
+    onMouseOut: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseLeave event
+     */
+    onMouseLeave: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseMove event
+     */
+    onMouseMove: prop_types_1.default.func,
+    /**
+     * Specify a path string
+     */
+    path: prop_types_1.default.string,
+    /**
+     * Coordinates for the source element
+     */
+    source: prop_types_1.default.shape({
+        x: prop_types_1.default.number,
+        y: prop_types_1.default.number,
+    }),
+    /**
+     * Coordinates for the target element
+     */
+    target: prop_types_1.default.shape({
+        x: prop_types_1.default.number,
+        y: prop_types_1.default.number,
+    }),
+    /**
+     * Specify the variant of the edge
+     */
+    variant: prop_types_1.default.oneOf([
+        'dash-sm',
+        'dash-md',
+        'dash-lg',
+        'dash-xl',
+        'double',
+        'tunnel',
+    ]),
+};

package/diagrams/Edge/index.d.ts

@@ -0,0 +1,2 @@
+import Edge from './Edge';
+export default Edge;

package/diagrams/Edge/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Edge_1 = __importDefault(require("./Edge"));
+exports.default = Edge_1.default;

package/diagrams/Marker/Marker.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const Marker: {
+    ({ d, color, id, orient, height, width, position, refX, refY, }: any): JSX.Element;
+    propTypes: {
+        /**
+         * Specify a path string
+         */
+        d: PropTypes.Requireable<string>;
+        /**
+         * Specify the marker's color
+         */
+        color: PropTypes.Requireable<string>;
+        /**
+         * Specify an ID for the marker
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Specify the orient attribute for the marker
+         */
+        orient: PropTypes.Requireable<React.ReactText>;
+        /**
+         * Specify the height attribute for the marker
+         */
+        height: PropTypes.Requireable<React.ReactText>;
+        /**
+         * Specify the width attribute for the marker
+         */
+        width: PropTypes.Requireable<React.ReactText>;
+        /**
+         * Specify whether this marker appears at the start or end of a line
+         */
+        position: PropTypes.Requireable<string>;
+        /**
+         * Specify the refX attribute for the marker
+         */
+        refX: PropTypes.Requireable<React.ReactText>;
+        /**
+         * Specify the refY attribute for the marker
+         */
+        refY: PropTypes.Requireable<React.ReactText>;
+    };
+};
+declare const ArrowLeftMarker: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const ArrowRightMarker: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const CircleMarker: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const DiamondMarker: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const SquareMarker: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const TeeMarker: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export { Marker as default, ArrowLeftMarker, ArrowRightMarker, CircleMarker, DiamondMarker, SquareMarker, TeeMarker, };

package/diagrams/Marker/Marker.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeeMarker = exports.SquareMarker = exports.DiamondMarker = exports.CircleMarker = exports.ArrowRightMarker = exports.ArrowLeftMarker = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @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 namespace = prefix + "--cc--marker";
+    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" },
+        react_1.default.createElement("path", { d: d, style: { fill: color } })));
+};
+exports.default = Marker;
+var ArrowLeftMarker = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement(Marker, __assign({}, markerDefinitions_1.arrowLeft, rest));
+};
+exports.ArrowLeftMarker = ArrowLeftMarker;
+var ArrowRightMarker = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement(Marker, __assign({}, markerDefinitions_1.arrowRight, rest));
+};
+exports.ArrowRightMarker = ArrowRightMarker;
+var CircleMarker = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement(Marker, __assign({}, markerDefinitions_1.circle, rest));
+};
+exports.CircleMarker = CircleMarker;
+var DiamondMarker = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement(Marker, __assign({}, markerDefinitions_1.diamond, rest));
+};
+exports.DiamondMarker = DiamondMarker;
+var SquareMarker = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement(Marker, __assign({}, markerDefinitions_1.square, rest));
+};
+exports.SquareMarker = SquareMarker;
+var TeeMarker = function (_a) {
+    var rest = __rest(_a, []);
+    return react_1.default.createElement(Marker, __assign({}, markerDefinitions_1.tee, rest));
+};
+exports.TeeMarker = TeeMarker;
+Marker.propTypes = {
+    /**
+     * Specify a path string
+     */
+    d: prop_types_1.default.string,
+    /**
+     * Specify the marker's color
+     */
+    color: prop_types_1.default.string,
+    /**
+     * Specify an ID for the marker
+     */
+    id: prop_types_1.default.string,
+    /**
+     * Specify the orient attribute for the marker
+     */
+    orient: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    /**
+     * Specify the height attribute for the marker
+     */
+    height: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    /**
+     * Specify the width attribute for the marker
+     */
+    width: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    /**
+     * Specify whether this marker appears at the start or end of a line
+     */
+    position: prop_types_1.default.oneOf(['end', 'start']),
+    /**
+     * Specify the refX attribute for the marker
+     */
+    refX: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    /**
+     * Specify the refY attribute for the marker
+     */
+    refY: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+};

package/diagrams/Marker/index.d.ts

@@ -0,0 +1 @@
+export { default, ArrowLeftMarker, ArrowRightMarker, CircleMarker, DiamondMarker, SquareMarker, TeeMarker, } from './Marker';

package/diagrams/Marker/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeeMarker = exports.SquareMarker = exports.DiamondMarker = exports.CircleMarker = exports.ArrowRightMarker = exports.ArrowLeftMarker = exports.default = void 0;
+var Marker_1 = require("./Marker");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Marker_1).default; } });
+Object.defineProperty(exports, "ArrowLeftMarker", { enumerable: true, get: function () { return Marker_1.ArrowLeftMarker; } });
+Object.defineProperty(exports, "ArrowRightMarker", { enumerable: true, get: function () { return Marker_1.ArrowRightMarker; } });
+Object.defineProperty(exports, "CircleMarker", { enumerable: true, get: function () { return Marker_1.CircleMarker; } });
+Object.defineProperty(exports, "DiamondMarker", { enumerable: true, get: function () { return Marker_1.DiamondMarker; } });
+Object.defineProperty(exports, "SquareMarker", { enumerable: true, get: function () { return Marker_1.SquareMarker; } });
+Object.defineProperty(exports, "TeeMarker", { enumerable: true, get: function () { return Marker_1.TeeMarker; } });

package/diagrams/ShapeNode/ShapeNode.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const ShapeNode: {
+    ({ as, href, onClick, onMouseEnter, onMouseOver, onMouseOut, onMouseLeave, onMouseMove, 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>;
+        /**
+         * Optionally specify an href for the CardNode to become an `<a>` element
+         */
+        href: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the CardNode
+         * is clicked, turning the CardNode into a `<button>` element
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseEnter event
+         */
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseOver event
+         */
+        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseOut event
+         */
+        onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseLeave event
+         */
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called for the onMouseMove event
+         */
+        onMouseMove: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function to render your own icon in the underlying button
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the height and width of the shape
+         * Can be defined using any CSS length unit (px, %, rem)
+         */
+        size: PropTypes.Requireable<React.ReactText>;
+        /**
+         * Specify whether the node displays a stacked effect
+         */
+        stacked: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the shape of the node
+         */
+        shape: PropTypes.Requireable<string>;
+        /**
+         * Specify the node's subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+        /**
+         * Specify the node's title
+         */
+        title: PropTypes.Requireable<string>;
+    };
+};
+export default ShapeNode;

package/diagrams/ShapeNode/ShapeNode.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+// @ts-ignore
+var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
+// @ts-ignore
+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, renderIcon = _a.renderIcon, _l = _a.size, size = _l === void 0 ? 48 : _l, stacked = _a.stacked, _m = _a.shape, shape = _m === void 0 ? 'circle' : _m, subtitle = _a.subtitle, title = _a.title;
+    var namespace = prefix + "--cc--shape-node";
+    var Component = 'div';
+    if (href) {
+        Component = 'a';
+    }
+    else if (onClick) {
+        Component = 'button';
+    }
+    var circleClasses = classnames_1.default(namespace, (_b = {},
+        _b[namespace + "--stacked"] = stacked,
+        _b[namespace + "--" + shape] = shape,
+        _b[namespace + "--" + Component] = Component,
+        _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;
+    return (
+    // @ts-ignore
+    react_1.default.createElement(Component, { className: circleClasses, onClick: onClick, onMouseEnter: onMouseEnter, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, style: { height: size, width: size }, tabIndex: 0 },
+        react_1.default.createElement("div", { className: namespace + "__icon" }, renderIcon),
+        react_1.default.createElement("div", { className: namespace + "__body" },
+            titleElement,
+            subtitleElement)));
+};
+ShapeNode.propTypes = {
+    /** Provide a custom element to be rendered instead of the default */
+    as: prop_types_1.default.oneOf(['div', 'a', 'button']),
+    /**
+     * Optionally specify an href for the CardNode to become an `<a>` element
+     */
+    href: prop_types_1.default.string,
+    /**
+     * Provide an optional function to be called when the CardNode
+     * is clicked, turning the CardNode into a `<button>` element
+     */
+    onClick: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseEnter event
+     */
+    onMouseEnter: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseOver event
+     */
+    onMouseOver: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseOut event
+     */
+    onMouseOut: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseLeave event
+     */
+    onMouseLeave: prop_types_1.default.func,
+    /**
+     * Provide an optional function to be called for the onMouseMove event
+     */
+    onMouseMove: prop_types_1.default.func,
+    /**
+     * Function to render your own icon in the underlying button
+     */
+    renderIcon: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.object]),
+    /**
+     * Specify the height and width of the shape
+     * Can be defined using any CSS length unit (px, %, rem)
+     */
+    size: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
+    /**
+     * Specify whether the node displays a stacked effect
+     */
+    stacked: prop_types_1.default.bool,
+    /**
+     * Specify the shape of the node
+     */
+    shape: prop_types_1.default.oneOf(['circle', 'square', 'rounded-square']),
+    /**
+     * Specify the node's subtitle
+     */
+    subtitle: prop_types_1.default.string,
+    /**
+     * Specify the node's title
+     */
+    title: prop_types_1.default.string,
+};
+exports.default = ShapeNode;

package/diagrams/ShapeNode/index.d.ts

@@ -0,0 +1,2 @@
+import ShapeNode from './ShapeNode';
+export default ShapeNode;

package/diagrams/ShapeNode/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ShapeNode_1 = __importDefault(require("./ShapeNode"));
+exports.default = ShapeNode_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts-react",
-  "version": "0.41.68",
+  "version": "0.41.72",
   "description": "Carbon charting components for React",
   "main": "./bundle.js",
   "module": "./index.js",
@@ -49,12 +49,13 @@
   },
   "homepage": "https://github.com/carbon-design-system/carbon-charts#readme",
   "dependencies": {
-    "@carbon/charts": "^0.41.68",
+    "@carbon/charts": "^0.41.72",
+    "@carbon/icons-react": "^10.32.0",
     "@carbon/telemetry": "0.0.0-alpha.6"
   },
   "peerDependencies": {
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@storybook/addon-knobs": "5.3.12",
@@ -73,8 +74,8 @@
     "base64-inline-loader": "1.1.0",
     "css-loader": "0.28.7",
     "img-loader": "2.0.0",
-    "react": "16.6.3",
-    "react-dom": "16.6.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rollup": "1.27.10",
     "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-node-resolve": "5.2.0",