@auth0/quantum-charts 0.2.2 → 0.3.3

package/bar-chart/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IBaseChartProps } from '../common/chart';
 export interface IBarChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     layout?: 'horizontal' | 'vertical';
     isStacked?: boolean;
 }
-export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): JSX.Element;
+export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): React.JSX.Element;

package/bar-chart/index.js

@@ -64,7 +64,7 @@ var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 function BarChart(props) {
-    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems;
     var theme = (0, quantum_product_1.useTheme)();
     // Function to know how many bars we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -105,7 +105,7 @@ function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
         React.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(recharts_1.BarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
                 top: 24,
                 right: 10,

package/chart-card/index.d.ts

@@ -4,4 +4,4 @@ export interface IChartCardProps extends IChartSummaryProps {
     children?: React.ReactChild;
     height?: number | string;
 }
-export declare function ChartCard(props: IChartCardProps): JSX.Element;
+export declare function ChartCard(props: IChartCardProps): React.JSX.Element;

package/chart-card/index.js

@@ -28,9 +28,9 @@ var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
 function ChartCard(props) {
-    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
+    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
     return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
-        React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
+        React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
         children));
 }
 exports.ChartCard = ChartCard;

package/chart-summary/data-table-chart.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface IDataTableChartProps {
     title?: string;
     isOpen: boolean;
     toggleIsOpen: () => void;
     data: any;
 }
-export declare function DataTableChart(props: IDataTableChartProps): JSX.Element;
+export declare function DataTableChart(props: IDataTableChartProps): React.JSX.Element;

package/chart-summary/data-table-chart.js

@@ -102,16 +102,18 @@ function DataTableChart(props) {
                 React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
                         { field: 'name', title: 'Group' },
                         { title: 'value', render: function (_a) {
+                                var _b;
                                 var item = _a.item;
-                                return item.value || 'N/A';
+                                return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                             } },
                     ] })) : (Object.values(groups).map(function (item, index) {
                     return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[0].group },
                         React.createElement(quantum_product_1.DataTable, { items: item, columns: [
                                 { field: 'group', title: 'Group' },
                                 { title: 'value', render: function (_a) {
+                                        var _b;
                                         var item = _a.item;
-                                        return item.value || 'N/A';
+                                        return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                                     } },
                                 {
                                     title: hasKey ? 'key' : 'date',

package/chart-summary/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DropdownMenuListItemValue } from '@auth0/quantum-product';
 export interface IChartSummaryProps {
     title?: string;
     value?: string | number;
@@ -6,5 +7,7 @@ export interface IChartSummaryProps {
     /** Renders help icon with tooltip as passed value **/
     helperText?: React.ReactNode;
     dataTable?: any;
+    headerAction?: React.ReactElement;
+    additionalMenuItems?: DropdownMenuListItemValue[];
 }
-export declare function ChartSummary(props: IChartSummaryProps): JSX.Element;
+export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;

package/chart-summary/index.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,6 +53,15 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartSummary = void 0;
 var React = __importStar(require("react"));
@@ -55,11 +75,47 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
     return theme.typography.h4.fontSize;
 });
 function ChartSummary(props) {
-    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable;
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
     var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
     var toggleIsOpen = function () {
         setIsOpen(function (prev) { return !prev; });
     };
+    var menuItems = React.useMemo(function () {
+        var menuItems = [];
+        if (dataTable && dataTable[0]) {
+            menuItems = [
+                {
+                    type: 'item',
+                    endIcon: React.createElement(quantum_product_1.ListIcon, null),
+                    onClick: function () {
+                        setIsOpen(true);
+                    },
+                    title: 'View list',
+                },
+            ];
+        }
+        if (additionalMenuItems) {
+            if (menuItems.length > 0)
+                menuItems.unshift({ type: 'divider' });
+            menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
+        }
+        var handleClick = function (cb) {
+            return function (event) {
+                cb(event);
+                if (menuProps.onClose) {
+                    menuProps.onClose(event, 'itemSelect');
+                }
+            };
+        };
+        menuItems = menuItems.map(function (item) {
+            if (item.type === 'item' && item.onClick) {
+                item.onClick = handleClick(item.onClick);
+            }
+            return item;
+        });
+        return menuItems;
+    }, [dataTable, additionalMenuItems, menuProps]);
     return (React.createElement("div", null,
         React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
@@ -73,8 +129,12 @@ function ChartSummary(props) {
                                     color: 'textSecondary',
                                 } },
                                 React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
-                dataTable && dataTable[0] && (React.createElement(quantum_product_1.IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
-                    React.createElement(quantum_product_1.ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
+                React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
+                    headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
+                    menuItems.length > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement(quantum_product_1.IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
+                            React.createElement(quantum_product_1.MoreVerticalIcon, null)),
+                        React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),
         dataTable && dataTable[0] && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));

package/common/chart.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import { TooltipProps } from 'recharts';
 import { IChartCardProps } from '../chart-card';
-export declare type ScaleType = 'date' | 'datetime' | 'label' | 'number';
+import { DropdownMenuListItemValue } from '@auth0/quantum-product';
+export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
 export interface ICustomTooltipProps extends TooltipProps<number, string> {
     scaleType?: 'datetime' | 'date';
 }
 export interface ILegendOptions {
     enabled?: boolean;
 }
-export declare type IChartDataPoint<DataType = unknown> = {
+export type IChartDataPoint<DataType = unknown> = {
     group: string;
     value?: number;
     key?: string;
@@ -26,8 +27,10 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
     leftAxis: IAxisOptions<DataType>;
     legend?: ILegendOptions;
     color?: 'categorical' | 'sequential';
+    additionalMenuItems?: DropdownMenuListItemValue[];
+    headerAction?: React.ReactElement;
 }
-export declare type IDonutChartDataPoint<DataType = unknown> = {
+export type IDonutChartDataPoint<DataType = unknown> = {
     name: string;
     value?: number;
 } & DataType;

package/common/custom-legend.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const CustomLegend: (props: any) => JSX.Element;
+import * as React from 'react';
+export declare const CustomLegend: (props: any) => React.JSX.Element;

package/common/custom-tooltip.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ICustomTooltipProps } from './chart';
-declare const CustomTooltip: (props: ICustomTooltipProps) => JSX.Element | null;
+declare const CustomTooltip: (props: ICustomTooltipProps) => React.JSX.Element | null;
 export default CustomTooltip;

package/compare-aggregate/compare-aggregate.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { DeltaDirection, DeltaDisplayType } from '../delta';
 export interface ICompareAggregateProps {
     /** Current Value **/
@@ -16,4 +16,4 @@ export interface ICompareAggregateProps {
       **/
     direction?: DeltaDirection;
 }
-export declare function CompareAggregate(props: ICompareAggregateProps): JSX.Element;
+export declare function CompareAggregate(props: ICompareAggregateProps): React.JSX.Element;

package/delta/delta.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-export declare type DeltaDirection = 'upIsGood' | 'upIsBad' | 'neutral';
-export declare type DeltaDisplayType = 'percent' | 'number';
-export declare type DeltaEmphasis = 'bad' | 'good' | 'neutral';
+export type DeltaDirection = 'upIsGood' | 'upIsBad' | 'neutral';
+export type DeltaDisplayType = 'percent' | 'number';
+export type DeltaEmphasis = 'bad' | 'good' | 'neutral';
 export interface IDeltaProps {
     value: number;
     comparedValue: number;

package/donut-chart/center.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type CenterProps = {
+type CenterProps = {
     data: any;
     activeIndex?: number;
     displayType: 'absolute' | 'percent';

package/donut-chart/decoupled-legend.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IDonutChartDataPoint } from '../common/chart';
-export declare type IDecoupledLegendProps<DataType = unknown> = {
+export type IDecoupledLegendProps<DataType = unknown> = {
     data: IDonutChartDataPoint<DataType>[];
     activeIndex?: number;
     setActiveIndex: (index: number | undefined) => void;
     color?: 'categorical' | 'sequential';
 };
-declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): JSX.Element;
+declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): React.JSX.Element;
 export default DecoupledLegend;

package/donut-chart/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IChartCardProps } from '../chart-card';
 import { IDonutChartDataPoint } from '../common/chart';
 interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
@@ -8,5 +8,5 @@ interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
     color?: 'categorical' | 'sequential';
     height?: number | string;
 }
-export declare function DonutChart(props: IDonutChartProps): JSX.Element;
+export declare function DonutChart(props: IDonutChartProps): React.JSX.Element;
 export {};

package/donut-chart/index.js

@@ -71,11 +71,11 @@ var ResponsiveChartCard = (0, quantum_product_1.styled)(quantum_product_1.StackL
     })));
 });
 function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c;
+    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
     var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var theme = (0, quantum_product_1.useTheme)();
     var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                     height: '150px',

package/esm/bar-chart/index.js

@@ -35,7 +35,7 @@ import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 export function BarChart(props) {
-    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems;
     var theme = useTheme();
     // Function to know how many bars we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -76,7 +76,7 @@ export function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(RechartsBarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
                 top: 24,
                 right: 10,

package/esm/chart-card/index.js

@@ -2,8 +2,8 @@ import { Card } from '@auth0/quantum-product';
 import * as React from 'react';
 import { ChartSummary } from '../chart-summary';
 export function ChartCard(props) {
-    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
+    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
     return (React.createElement(Card, { sx: { height: height, padding: 3 } },
-        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
+        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
         children));
 }

package/esm/chart-summary/data-table-chart.js

@@ -73,16 +73,18 @@ export function DataTableChart(props) {
                 React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
                         { field: 'name', title: 'Group' },
                         { title: 'value', render: function (_a) {
+                                var _b;
                                 var item = _a.item;
-                                return item.value || 'N/A';
+                                return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                             } },
                     ] })) : (Object.values(groups).map(function (item, index) {
                     return (React.createElement(TabPanel, { key: index, value: item[0].group },
                         React.createElement(DataTable, { items: item, columns: [
                                 { field: 'group', title: 'Group' },
                                 { title: 'value', render: function (_a) {
+                                        var _b;
                                         var item = _a.item;
-                                        return item.value || 'N/A';
+                                        return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                                     } },
                                 {
                                     title: hasKey ? 'key' : 'date',

package/esm/chart-summary/index.js

@@ -2,6 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -18,8 +29,17 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import * as React from 'react';
-import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, } from '@auth0/quantum-product';
+import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, } from '@auth0/quantum-product';
 import { DataTableChart } from './data-table-chart';
 var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -29,11 +49,47 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
     return theme.typography.h4.fontSize;
 });
 export function ChartSummary(props) {
-    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable;
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
     var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = useDropdownMenuState({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
     var toggleIsOpen = function () {
         setIsOpen(function (prev) { return !prev; });
     };
+    var menuItems = React.useMemo(function () {
+        var menuItems = [];
+        if (dataTable && dataTable[0]) {
+            menuItems = [
+                {
+                    type: 'item',
+                    endIcon: React.createElement(ListIcon, null),
+                    onClick: function () {
+                        setIsOpen(true);
+                    },
+                    title: 'View list',
+                },
+            ];
+        }
+        if (additionalMenuItems) {
+            if (menuItems.length > 0)
+                menuItems.unshift({ type: 'divider' });
+            menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
+        }
+        var handleClick = function (cb) {
+            return function (event) {
+                cb(event);
+                if (menuProps.onClose) {
+                    menuProps.onClose(event, 'itemSelect');
+                }
+            };
+        };
+        menuItems = menuItems.map(function (item) {
+            if (item.type === 'item' && item.onClick) {
+                item.onClick = handleClick(item.onClick);
+            }
+            return item;
+        });
+        return menuItems;
+    }, [dataTable, additionalMenuItems, menuProps]);
     return (React.createElement("div", null,
         React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(StackLayout, { gutter: 1 },
@@ -47,8 +103,12 @@ export function ChartSummary(props) {
                                     color: 'textSecondary',
                                 } },
                                 React.createElement(HelpCircleIcon, { size: "16" })))))),
-                dataTable && dataTable[0] && (React.createElement(IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
-                    React.createElement(ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
+                React.createElement(StackLayout, { gutter: 1 },
+                    headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
+                    menuItems.length > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement(IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
+                            React.createElement(MoreVerticalIcon, null)),
+                        React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),
         dataTable && dataTable[0] && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));

package/esm/donut-chart/index.js

@@ -42,11 +42,11 @@ var ResponsiveChartCard = styled(StackLayout)(function (_a) {
     })));
 });
 export function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c;
+    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
     var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var theme = useTheme();
     var BASE_COLORS = getColorScale(theme)[color]['base'];
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(StackLayoutItem, { sx: {
                     height: '150px',

package/esm/line-chart/index.js

@@ -36,7 +36,7 @@ import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 export function LineChart(props) {
-    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems;
     var theme = useTheme();
     // Function to know how many lines we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -77,7 +77,7 @@ export function LineChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(RechartsLineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
                 right: 10,

package/line-chart/custom-active-dot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { DotProps } from 'recharts';
-declare const CustomActiveDot: (onMouseOver?: DotProps['onMouseOver']) => (props: Omit<DotProps, 'ref'>) => JSX.Element;
+declare const CustomActiveDot: (onMouseOver?: DotProps['onMouseOver']) => (props: Omit<DotProps, 'ref'>) => React.JSX.Element;
 export default CustomActiveDot;

package/line-chart/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IBaseChartProps } from '../common/chart';
 export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     syncId?: number | string;
 }
-export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): JSX.Element;
+export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;

package/line-chart/index.js

@@ -65,7 +65,7 @@ var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 function LineChart(props) {
-    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems;
     var theme = (0, quantum_product_1.useTheme)();
     // Function to know how many lines we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -106,7 +106,7 @@ function LineChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction, additionalMenuItems: additionalMenuItems },
         React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.LineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
                 right: 10,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.2.2",
+  "version": "0.3.3",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@auth0/quantum-product": "^1.10.1",
+    "@auth0/quantum-product": "^2.0.0",
     "@formatjs/intl": "^2.5.1",
     "date-fns": "^2.29.3",
     "recharts": "^2.0.7"

package/scorecard/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IChartSummaryProps } from '../chart-summary';
 interface IScoreCardProps {
     data: IChartSummaryProps[];
 }
-export declare function ScoreCard(props: IScoreCardProps): JSX.Element;
+export declare function ScoreCard(props: IScoreCardProps): React.JSX.Element;
 export {};

package/styles.d.ts

@@ -1,4 +1,4 @@
-export declare type IChartContainerProps = {
+export type IChartContainerProps = {
     height?: number | 'initial';
     marginTop?: number;
 };