@reltio/components 1.4.1682 → 1.4.1684

package/cjs/components/attributes/readMode/AttributesPager/styles.js

@@ -53,7 +53,8 @@ exports.useOneLineStyles = (0, styles_1.makeStyles)(__assign({ wrapper: {
     }, collaborationWrapper: {
         display: 'flex',
         alignItems: 'start',
-        minHeight: '18px'
+        minHeight: '18px',
+        justifyContent: 'space-between'
     }, attribute: {
         marginLeft: '8px',
         paddingLeft: '4px',

package/cjs/components/charts/BarChart/getBarChartSettings.d.ts

@@ -1,12 +1,13 @@
-import { BarChartProps, BarProps, CartesianGridProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import React from 'react';
+import { BarChart, BarProps, CartesianGridProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 import { BarChartOptions } from '../types';
 type BarChartSettings = {
-    barChart: BarChartProps;
-    bar: BarProps;
+    barChart: React.ComponentProps<typeof BarChart>;
+    bar: Omit<BarProps, 'ref'>;
     xAxis: XAxisProps;
     yAxis: YAxisProps;
-    cartesianGrid: CartesianGridProps;
-    tooltip: TooltipProps;
+    cartesianGrid: Omit<CartesianGridProps, 'ref'>;
+    tooltip: TooltipProps<number, string>;
 };
 declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions) => BarChartSettings;
 export default getBarChartSettings;

package/cjs/components/charts/BarChart/getBarChartSettings.js

@@ -32,7 +32,7 @@ var getBarChartSettings = function (_a) {
                 opacity: isHorizontal ? '0.87' : '0.54',
                 width: isHorizontal ? 150 : undefined
             },
-            tickFormatter: mdm_sdk_1.formatNumberAsMetric,
+            tickFormatter: function (value) { return (0, mdm_sdk_1.formatNumberAsMetric)(value); },
             stroke: '#666',
             tickCount: 8,
             mirror: isHorizontal

package/cjs/components/charts/BubbleChart/BubbleChart.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Margin } from 'recharts';
+import { LegendProps } from 'recharts';
 import { ChartProps } from '../types';
 type Props = ChartProps & {
     options?: {
         showLegend?: boolean;
-        margin?: Margin;
+        margin?: LegendProps['margin'];
     };
 };
 export declare const BubbleChart: ({ width, height, data, options, onItemClick }: Props) => JSX.Element;
@@ -12,7 +12,12 @@ declare const _default: {
     ({ data, ...otherProps }: ChartProps & {
         options?: {
             showLegend?: boolean;
-            margin?: Margin;
+            margin?: {
+                top?: number;
+                left?: number;
+                bottom?: number;
+                right?: number;
+            };
         };
     }): JSX.Element;
     displayName: string;

package/cjs/components/charts/BubbleChart/BubbleChart.js

@@ -39,17 +39,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BubbleChart = void 0;
 var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var recharts_1 = require("recharts");
-var useBubbles_1 = __importDefault(require("./useBubbles"));
 var getLegendProps_1 = __importDefault(require("../CustomLegend/getLegendProps"));
+var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
 var helpers_1 = require("./helpers");
 var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
-var ramda_1 = require("ramda");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
 var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
-var styles_1 = require("./styles");
 var useClickableStyle_1 = require("../hooks/useClickableStyle");
+var useBubbles_1 = __importDefault(require("./useBubbles"));
+var styles_1 = require("./styles");
 var BubbleChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var styles = (0, styles_1.useStyles)();

package/cjs/components/charts/BubbleChart/helpers.d.ts

@@ -1,6 +1,7 @@
-import { LegendProps, ViewBox } from 'recharts';
-declare const adjustRectWithLegend: (rect: ViewBox, legendProps: LegendProps, legendBox: ViewBox) => {
-    rect: ViewBox;
-    legendProps: LegendProps;
+import { CartesianAxisProps, LegendProps } from 'recharts';
+type ViewBox = CartesianAxisProps['viewBox'];
+declare const adjustRectWithLegend: (rect: ViewBox, legendProps: Omit<LegendProps, 'ref'>, legendBox: ViewBox) => {
+    rect: import("recharts/types/util/types").CartesianViewBox;
+    legendProps: Omit<LegendProps, "ref">;
 };
 export { adjustRectWithLegend };

package/cjs/components/charts/CloudChart/CloudChart.js

@@ -39,14 +39,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CloudChart = void 0;
 var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var recharts_1 = require("recharts");
+var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
+var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
+var useClickableStyle_1 = require("../hooks/useClickableStyle");
 var useCloud_1 = __importDefault(require("./useCloud"));
 var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var styles_1 = require("./styles");
-var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
-var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var useClickableStyle_1 = require("../hooks/useClickableStyle");
 var CloudChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = (0, useTooltipState_1.default)(), tooltipState = _c.tooltipState, showTooltip = _c.showTooltip, hideTooltip = _c.hideTooltip;

package/cjs/components/charts/CustomLegend/CustomLegend.js

@@ -10,7 +10,7 @@ var CustomLegend = function (_a) {
     var payload = _a.payload, alignRight = _a.alignRight;
     var isTwoCols = payload.length > 8;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.wrapper, { isTwoCols: isTwoCols }, { alignRight: alignRight }) }, payload.map(function (item) { return (react_1.default.createElement("div", { key: item.id, className: styles.item },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.wrapper, { isTwoCols: isTwoCols, alignRight: alignRight }) }, payload.map(function (item) { return (react_1.default.createElement("div", { key: item.id, className: styles.item },
         react_1.default.createElement("div", { style: { background: item.color }, className: styles.itemColor }),
         react_1.default.createElement("span", { className: styles.value }, item.value))); })));
 };

package/cjs/components/charts/CustomLegend/getLegendProps.d.ts

@@ -1,3 +1,3 @@
 import { LegendProps } from 'recharts';
-declare const getLegendProps: (width: number) => LegendProps;
+declare const getLegendProps: (width: number) => Omit<LegendProps, 'ref'>;
 export default getLegendProps;

package/cjs/components/charts/CustomTooltip/CustomTooltip.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TooltipProps } from 'recharts';
-export declare const CustomTooltip: ({ payload, active }: TooltipProps) => JSX.Element;
+export declare const CustomTooltip: ({ payload, active }: TooltipProps<number, string>) => JSX.Element;

package/cjs/components/charts/CustomTooltip/CustomTooltip.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomTooltip = void 0;
-var styles_1 = require("./styles");
 var react_1 = __importDefault(require("react"));
 var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
 var CustomTooltip = function (_a) {
     var _b;
     var payload = _a.payload, active = _a.active;

package/cjs/components/charts/LineChart/LineChart.js

@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -30,19 +19,15 @@ var recharts_1 = require("recharts");
 var getLineChartSettings_1 = __importDefault(require("./getLineChartSettings"));
 var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
 var useClickableStyle_1 = require("../hooks/useClickableStyle");
-var CustomDot = function (_a) {
-    var payload = _a.payload, onClick = _a.onClick, otherProps = __rest(_a, ["payload", "onClick"]);
-    var clickable = (0, useClickableStyle_1.useClickableStyle)(onClick);
-    return (react_1.default.createElement(recharts_1.Dot, __assign({ className: clickable, payload: payload, onClick: onClick && (function () { return onClick(payload.group); }) }, otherProps)));
-};
 var LineChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = (0, getLineChartSettings_1.default)(options), cartesianGrid = _c.cartesianGrid, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis, lineChart = _c.lineChart, line = _c.line;
+    var clickable = (0, useClickableStyle_1.useClickableStyle)(onItemClick);
     return (react_1.default.createElement(recharts_1.LineChart, __assign({ width: width, height: height, data: data }, lineChart),
         react_1.default.createElement(recharts_1.CartesianGrid, __assign({}, cartesianGrid)),
         react_1.default.createElement(recharts_1.XAxis, __assign({}, xAxis)),
         react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxis)),
         react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) }, tooltip)),
-        react_1.default.createElement(recharts_1.Line, __assign({}, line, { activeDot: react_1.default.createElement(CustomDot, __assign({}, line.activeDot, { onClick: onItemClick })) }))));
+        react_1.default.createElement(recharts_1.Line, __assign({}, line, { activeDot: __assign(__assign({}, line.activeDot), { className: clickable, onClick: function (_, event) { return onItemClick(event.payload.group); } }) }))));
 };
 exports.default = LineChart;

package/cjs/components/charts/LineChart/getLineChartSettings.d.ts

@@ -1,12 +1,13 @@
-import { CartesianGridProps, LineChartProps, LineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import React from 'react';
+import { CartesianGridProps, LineChart, LineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 import { LineChartOptions } from '../types/LineChartOptions';
 type LineChartSettings = {
-    lineChart: LineChartProps;
+    lineChart: React.ComponentProps<typeof LineChart>;
     xAxis: XAxisProps;
     yAxis: YAxisProps;
-    cartesianGrid: CartesianGridProps;
-    tooltip: TooltipProps;
-    line: LineProps;
+    cartesianGrid: Omit<CartesianGridProps, 'ref'>;
+    tooltip: TooltipProps<number, string>;
+    line: Omit<LineProps, 'ref'>;
 };
 declare const getLineChartSettings: ({ margin, isLabelRotated }: LineChartOptions) => LineChartSettings;
 export default getLineChartSettings;

package/cjs/components/charts/LineChart/getLineChartSettings.js

@@ -27,7 +27,7 @@ var getLineChartSettings = function (_a) {
                 opacity: '0.54',
                 width: undefined
             },
-            tickFormatter: mdm_sdk_1.formatNumberAsMetric,
+            tickFormatter: function (value) { return (0, mdm_sdk_1.formatNumberAsMetric)(value); },
             stroke: '#666',
             tickCount: 8
         },

package/cjs/components/charts/MapChart/MapChart.js

@@ -39,7 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapChart = exports.LEGEND_WIDTH = void 0;
 var react_1 = __importStar(require("react"));
-var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var recharts_1 = require("recharts");
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 var react_simple_maps_1 = require("react-simple-maps");
@@ -47,14 +49,12 @@ var d3_scale_1 = require("d3-scale");
 var d3Geo = __importStar(require("d3-geo"));
 var topojson_client_1 = require("topojson-client");
 var useGeography_1 = __importDefault(require("./useGeography"));
-var ramda_1 = require("ramda");
 var Legend_1 = __importDefault(require("./Legend/Legend"));
 var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var recharts_1 = require("recharts");
 var useTooltipState_1 = __importDefault(require("../hooks/useTooltipState"));
-var classnames_1 = __importDefault(require("classnames"));
-var styles_1 = require("./styles");
 var useClickableStyle_1 = require("../hooks/useClickableStyle");
+var withPercents_1 = __importDefault(require("../HOCs/withPercents"));
+var styles_1 = require("./styles");
 var USA_MAP = 'https://s3.amazonaws.com/reltio-ui-files/map_resources/us-albers.json';
 var MAP_COLORS = ['#CDE0FE', '#0160AD'];
 exports.LEGEND_WIDTH = 75;

package/cjs/components/charts/PieChart/PieChart.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { Margin } from 'recharts';
+import React from 'react';
+import { PieChart as PieChartWidget } from 'recharts';
 import { ChartProps } from '../types';
 type Props = ChartProps & {
     options?: {
-        margin?: Margin;
+        margin?: React.ComponentProps<typeof PieChartWidget>['margin'];
         showLegend?: boolean;
         showActiveShape?: boolean;
     };
@@ -13,7 +13,7 @@ export declare const PieChart: ({ width, height, data, options, isDonut, onItemC
 declare const _default: {
     ({ data, ...otherProps }: ChartProps & {
         options?: {
-            margin?: Margin;
+            margin?: import("recharts/types/util/types").Margin;
             showLegend?: boolean;
             showActiveShape?: boolean;
         };

package/cjs/components/charts/PieChart/PieChart.js

@@ -46,9 +46,11 @@ var getLegendProps_1 = __importDefault(require("../CustomLegend/getLegendProps")
 var ActiveShape_1 = __importDefault(require("../ActiveShape/ActiveShape"));
 var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
 var useClickableStyle_1 = require("../hooks/useClickableStyle");
+var styles_1 = require("./styles");
 var PieChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, isDonut = _a.isDonut, onItemClick = _a.onItemClick;
     var _c = options.showLegend, showLegend = _c === void 0 ? true : _c, margin = options.margin, showActiveShape = options.showActiveShape;
+    var styles = (0, styles_1.useStyles)();
     var _d = (0, react_1.useState)(-1), activeId = _d[0], setActiveId = _d[1];
     var onPieEnter = function (_, index) { return setActiveId(index); };
     var onPieLeave = function () { return setActiveId(-1); };
@@ -65,7 +67,7 @@ var PieChart = function (_a) {
                 color: (0, mdm_sdk_1.getChartItemColor)(item.label),
                 value: "".concat(item.label, " (").concat(item.percent, "%)")
             }); }) }))),
-        react_1.default.createElement(recharts_1.Pie, { dataKey: "value", data: data, activeIndex: activeId, activeShape: showActiveShape ? ActiveShape_1.default : undefined, onMouseEnter: showActiveShape ? onPieEnter : undefined, onMouseLeave: showActiveShape ? onPieLeave : undefined, innerRadius: isDonut ? (showActiveShape ? '50%' : '60%') : 0, outerRadius: showActiveShape ? '70%' : '80%', onClick: onPieClick }, (data || []).map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: index, fill: (0, mdm_sdk_1.getChartItemColor)(entry.label), className: clickable })); }))));
+        react_1.default.createElement(recharts_1.Pie, { dataKey: "value", data: data, activeIndex: activeId, activeShape: showActiveShape ? ActiveShape_1.default : undefined, onMouseEnter: showActiveShape ? onPieEnter : undefined, onMouseLeave: showActiveShape ? onPieLeave : undefined, innerRadius: isDonut ? (showActiveShape ? '50%' : '60%') : 0, outerRadius: showActiveShape ? '70%' : '80%', onClick: onPieClick, className: styles.pie }, (data || []).map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: index, fill: (0, mdm_sdk_1.getChartItemColor)(entry.label), className: clickable })); }))));
 };
 exports.PieChart = PieChart;
 exports.default = (0, withPercents_1.default)(exports.PieChart);

package/cjs/components/charts/PieChart/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"pie">;

package/cjs/components/charts/PieChart/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    pie: {
+        '& .recharts-sector:focus': {
+            outline: 'none'
+        }
+    }
+});

package/cjs/components/charts/TreeChart/TreeChart.js

@@ -35,33 +35,38 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var nanoid_1 = require("nanoid");
 var recharts_1 = require("recharts");
 var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
-var styles_1 = require("./styles");
 var useClickableStyle_1 = require("../hooks/useClickableStyle");
-var nanoid_1 = require("nanoid");
+var styles_1 = require("./styles");
 var CustomizedContent = function (_a) {
     var x = _a.x, y = _a.y, width = _a.width, height = _a.height, label = _a.label, onClick = _a.onClick, group = _a.group;
     var styles = (0, styles_1.useStyles)();
     var clickable = (0, useClickableStyle_1.useClickableStyle)(onClick);
     var clipPathId = (0, react_1.useRef)((0, nanoid_1.nanoid)()).current;
     var strokeWidth = 2;
-    return (react_1.default.createElement("g", { className: clickable, onClick: onClick && (function () { return onClick(group); }) },
+    var handleClick = function () {
+        if (!onClick)
+            return;
+        onClick(group);
+    };
+    return (react_1.default.createElement("g", { className: clickable, onClick: handleClick },
         react_1.default.createElement("clipPath", { id: clipPathId },
             react_1.default.createElement("rect", { x: x + strokeWidth, y: y + strokeWidth, width: Math.max(width - strokeWidth * 2, 0), height: Math.max(height - strokeWidth * 2, 0) })),
         react_1.default.createElement("rect", { x: x, y: y, width: width, height: height, strokeWidth: strokeWidth, className: styles.treeBlock }),
-        react_1.default.createElement(recharts_1.Text, { clipPath: "url(#".concat(clipPathId, ")"), textAnchor: 'middle', verticalAnchor: 'middle', width: width, x: x + width / 2, y: y + height / 2, className: styles.treeLabel }, label)));
-};
-var normalizeValues = function (data) {
-    var dataTotal = data.reduce(function (acc, item) { return acc + item.value; }, 0);
-    var threshold = dataTotal / (data.length * 10);
-    return data.map(function (item) {
-        return __assign(__assign({}, item), { normalizedValue: item.value < threshold ? threshold : item.value });
-    });
+        react_1.default.createElement(recharts_1.Text, { clipPath: "url(#".concat(clipPathId, ")"), textAnchor: "middle", verticalAnchor: "middle", width: width, x: x + width / 2, y: y + height / 2, className: styles.treeLabel }, label)));
 };
 var TreeChart = function (_a) {
     var data = _a.data, width = _a.width, height = _a.height, onItemClick = _a.onItemClick;
-    return (react_1.default.createElement(recharts_1.Treemap, { dataKey: "normalizedValue", nameKey: "label", content: react_1.default.createElement(CustomizedContent, { onClick: onItemClick }), data: normalizeValues(data), width: width, animationDuration: 500, height: height },
+    var normalizedData = (0, react_1.useMemo)(function () {
+        var dataTotal = data.reduce(function (acc, item) { return acc + item.value; }, 0);
+        var threshold = dataTotal / (data.length * 10);
+        return data.map(function (item) {
+            return __assign(__assign({}, item), { normalizedValue: item.value < threshold ? threshold : item.value });
+        });
+    }, [data]);
+    return (react_1.default.createElement(recharts_1.Treemap, { dataKey: "normalizedValue", nameKey: "label", content: react_1.default.createElement(CustomizedContent, { onClick: onItemClick }), data: normalizedData, width: width, animationDuration: 500, height: height },
         react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) })));
 };
 exports.default = TreeChart;

package/cjs/components/charts/hooks/useTooltipState.d.ts

@@ -1,8 +1,8 @@
-import { Coordinate, TooltipProps } from 'recharts';
+import { TooltipProps } from 'recharts';
 import { ChartData } from '../types';
 declare const useTooltipState: () => {
-    tooltipState: TooltipProps;
-    showTooltip: (data: ChartData, coordinate: Coordinate) => void;
+    tooltipState: TooltipProps<number, string>;
+    showTooltip: (data: ChartData, coordinate: TooltipProps<number, string>['coordinate']) => void;
     hideTooltip: () => void;
 };
 export default useTooltipState;

package/cjs/components/charts/types/BarChartOptions.d.ts

@@ -1,6 +1,7 @@
-import { Margin } from 'recharts';
+import React from 'react';
+import { BarChart } from 'recharts';
 export type BarChartOptions = {
-    margin?: Margin;
+    margin?: React.ComponentProps<typeof BarChart>['margin'];
     isLabelRotated?: boolean;
     isHorizontal?: boolean;
 };

package/cjs/components/charts/types/LineChartOptions.d.ts

@@ -1,5 +1,6 @@
-import { Margin } from 'recharts';
+import React from 'react';
+import { LineChart } from 'recharts';
 export type LineChartOptions = {
-    margin?: Margin;
+    margin?: React.ComponentProps<typeof LineChart>['margin'];
     isLabelRotated?: boolean;
 };

package/esm/components/attributes/readMode/AttributesPager/styles.js

@@ -50,7 +50,8 @@ export var useOneLineStyles = makeStyles(__assign({ wrapper: {
     }, collaborationWrapper: {
         display: 'flex',
         alignItems: 'start',
-        minHeight: '18px'
+        minHeight: '18px',
+        justifyContent: 'space-between'
     }, attribute: {
         marginLeft: '8px',
         paddingLeft: '4px',

package/esm/components/charts/BarChart/getBarChartSettings.d.ts

@@ -1,12 +1,13 @@
-import { BarChartProps, BarProps, CartesianGridProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import React from 'react';
+import { BarChart, BarProps, CartesianGridProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 import { BarChartOptions } from '../types';
 type BarChartSettings = {
-    barChart: BarChartProps;
-    bar: BarProps;
+    barChart: React.ComponentProps<typeof BarChart>;
+    bar: Omit<BarProps, 'ref'>;
     xAxis: XAxisProps;
     yAxis: YAxisProps;
-    cartesianGrid: CartesianGridProps;
-    tooltip: TooltipProps;
+    cartesianGrid: Omit<CartesianGridProps, 'ref'>;
+    tooltip: TooltipProps<number, string>;
 };
 declare const getBarChartSettings: ({ margin, isHorizontal, isLabelRotated }: BarChartOptions) => BarChartSettings;
 export default getBarChartSettings;

package/esm/components/charts/BarChart/getBarChartSettings.js

@@ -30,7 +30,7 @@ var getBarChartSettings = function (_a) {
                 opacity: isHorizontal ? '0.87' : '0.54',
                 width: isHorizontal ? 150 : undefined
             },
-            tickFormatter: formatNumberAsMetric,
+            tickFormatter: function (value) { return formatNumberAsMetric(value); },
             stroke: '#666',
             tickCount: 8,
             mirror: isHorizontal

package/esm/components/charts/BubbleChart/BubbleChart.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Margin } from 'recharts';
+import { LegendProps } from 'recharts';
 import { ChartProps } from '../types';
 type Props = ChartProps & {
     options?: {
         showLegend?: boolean;
-        margin?: Margin;
+        margin?: LegendProps['margin'];
     };
 };
 export declare const BubbleChart: ({ width, height, data, options, onItemClick }: Props) => JSX.Element;
@@ -12,7 +12,12 @@ declare const _default: {
     ({ data, ...otherProps }: ChartProps & {
         options?: {
             showLegend?: boolean;
-            margin?: Margin;
+            margin?: {
+                top?: number;
+                left?: number;
+                bottom?: number;
+                right?: number;
+            };
         };
     }): JSX.Element;
     displayName: string;

package/esm/components/charts/BubbleChart/BubbleChart.js

@@ -10,17 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useMemo, useState } from 'react';
+import { propOr } from 'ramda';
+import { getChartItemColor } from '@reltio/mdm-sdk';
 import { Legend, Tooltip } from 'recharts';
-import useBubbles from './useBubbles';
 import getLegendProps from '../CustomLegend/getLegendProps';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
 import { adjustRectWithLegend } from './helpers';
 import withPercents from '../HOCs/withPercents';
-import { propOr } from 'ramda';
-import { getChartItemColor } from '@reltio/mdm-sdk';
-import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
 import useTooltipState from '../hooks/useTooltipState';
-import { useStyles } from './styles';
 import { useClickableStyle } from '../hooks/useClickableStyle';
+import useBubbles from './useBubbles';
+import { useStyles } from './styles';
 export var BubbleChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var styles = useStyles();

package/esm/components/charts/BubbleChart/helpers.d.ts

@@ -1,6 +1,7 @@
-import { LegendProps, ViewBox } from 'recharts';
-declare const adjustRectWithLegend: (rect: ViewBox, legendProps: LegendProps, legendBox: ViewBox) => {
-    rect: ViewBox;
-    legendProps: LegendProps;
+import { CartesianAxisProps, LegendProps } from 'recharts';
+type ViewBox = CartesianAxisProps['viewBox'];
+declare const adjustRectWithLegend: (rect: ViewBox, legendProps: Omit<LegendProps, 'ref'>, legendBox: ViewBox) => {
+    rect: import("recharts/types/util/types").CartesianViewBox;
+    legendProps: Omit<LegendProps, "ref">;
 };
 export { adjustRectWithLegend };

package/esm/components/charts/CloudChart/CloudChart.js

@@ -10,14 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useMemo } from 'react';
+import { getChartItemColor } from '@reltio/mdm-sdk';
 import { Tooltip } from 'recharts';
+import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
+import useTooltipState from '../hooks/useTooltipState';
+import { useClickableStyle } from '../hooks/useClickableStyle';
 import useCloud from './useCloud';
 import withPercents from '../HOCs/withPercents';
-import { getChartItemColor } from '@reltio/mdm-sdk';
 import { useStyles } from './styles';
-import useTooltipState from '../hooks/useTooltipState';
-import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
-import { useClickableStyle } from '../hooks/useClickableStyle';
 export var CloudChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = useTooltipState(), tooltipState = _c.tooltipState, showTooltip = _c.showTooltip, hideTooltip = _c.hideTooltip;

package/esm/components/charts/CustomLegend/CustomLegend.js

@@ -5,7 +5,7 @@ var CustomLegend = function (_a) {
     var payload = _a.payload, alignRight = _a.alignRight;
     var isTwoCols = payload.length > 8;
     var styles = useStyles();
-    return (React.createElement("div", { className: classnames(styles.wrapper, { isTwoCols: isTwoCols }, { alignRight: alignRight }) }, payload.map(function (item) { return (React.createElement("div", { key: item.id, className: styles.item },
+    return (React.createElement("div", { className: classnames(styles.wrapper, { isTwoCols: isTwoCols, alignRight: alignRight }) }, payload.map(function (item) { return (React.createElement("div", { key: item.id, className: styles.item },
         React.createElement("div", { style: { background: item.color }, className: styles.itemColor }),
         React.createElement("span", { className: styles.value }, item.value))); })));
 };

package/esm/components/charts/CustomLegend/getLegendProps.d.ts

@@ -1,3 +1,3 @@
 import { LegendProps } from 'recharts';
-declare const getLegendProps: (width: number) => LegendProps;
+declare const getLegendProps: (width: number) => Omit<LegendProps, 'ref'>;
 export default getLegendProps;

package/esm/components/charts/CustomTooltip/CustomTooltip.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TooltipProps } from 'recharts';
-export declare const CustomTooltip: ({ payload, active }: TooltipProps) => JSX.Element;
+export declare const CustomTooltip: ({ payload, active }: TooltipProps<number, string>) => JSX.Element;

package/esm/components/charts/CustomTooltip/CustomTooltip.js

@@ -1,6 +1,6 @@
-import { useStyles } from './styles';
 import React from 'react';
 import { isNil } from 'ramda';
+import { useStyles } from './styles';
 export var CustomTooltip = function (_a) {
     var _b;
     var payload = _a.payload, active = _a.active;

package/esm/components/charts/LineChart/LineChart.js

@@ -9,35 +9,20 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
-};
 import React from 'react';
-import { CartesianGrid, Dot, Line, LineChart as LineChartWidget, Tooltip, XAxis, YAxis } from 'recharts';
+import { CartesianGrid, Line, LineChart as LineChartWidget, Tooltip, XAxis, YAxis } from 'recharts';
 import getLineChartSettings from './getLineChartSettings';
 import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
 import { useClickableStyle } from '../hooks/useClickableStyle';
-var CustomDot = function (_a) {
-    var payload = _a.payload, onClick = _a.onClick, otherProps = __rest(_a, ["payload", "onClick"]);
-    var clickable = useClickableStyle(onClick);
-    return (React.createElement(Dot, __assign({ className: clickable, payload: payload, onClick: onClick && (function () { return onClick(payload.group); }) }, otherProps)));
-};
 var LineChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, onItemClick = _a.onItemClick;
     var _c = getLineChartSettings(options), cartesianGrid = _c.cartesianGrid, tooltip = _c.tooltip, xAxis = _c.xAxis, yAxis = _c.yAxis, lineChart = _c.lineChart, line = _c.line;
+    var clickable = useClickableStyle(onItemClick);
     return (React.createElement(LineChartWidget, __assign({ width: width, height: height, data: data }, lineChart),
         React.createElement(CartesianGrid, __assign({}, cartesianGrid)),
         React.createElement(XAxis, __assign({}, xAxis)),
         React.createElement(YAxis, __assign({}, yAxis)),
         React.createElement(Tooltip, __assign({ content: React.createElement(CustomTooltip, null) }, tooltip)),
-        React.createElement(Line, __assign({}, line, { activeDot: React.createElement(CustomDot, __assign({}, line.activeDot, { onClick: onItemClick })) }))));
+        React.createElement(Line, __assign({}, line, { activeDot: __assign(__assign({}, line.activeDot), { className: clickable, onClick: function (_, event) { return onItemClick(event.payload.group); } }) }))));
 };
 export default LineChart;

package/esm/components/charts/LineChart/getLineChartSettings.d.ts

@@ -1,12 +1,13 @@
-import { CartesianGridProps, LineChartProps, LineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import React from 'react';
+import { CartesianGridProps, LineChart, LineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 import { LineChartOptions } from '../types/LineChartOptions';
 type LineChartSettings = {
-    lineChart: LineChartProps;
+    lineChart: React.ComponentProps<typeof LineChart>;
     xAxis: XAxisProps;
     yAxis: YAxisProps;
-    cartesianGrid: CartesianGridProps;
-    tooltip: TooltipProps;
-    line: LineProps;
+    cartesianGrid: Omit<CartesianGridProps, 'ref'>;
+    tooltip: TooltipProps<number, string>;
+    line: Omit<LineProps, 'ref'>;
 };
 declare const getLineChartSettings: ({ margin, isLabelRotated }: LineChartOptions) => LineChartSettings;
 export default getLineChartSettings;

package/esm/components/charts/LineChart/getLineChartSettings.js

@@ -25,7 +25,7 @@ var getLineChartSettings = function (_a) {
                 opacity: '0.54',
                 width: undefined
             },
-            tickFormatter: formatNumberAsMetric,
+            tickFormatter: function (value) { return formatNumberAsMetric(value); },
             stroke: '#666',
             tickCount: 8
         },

package/esm/components/charts/MapChart/MapChart.js

@@ -10,7 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useMemo, useCallback } from 'react';
-import withPercents from '../HOCs/withPercents';
+import { pluck } from 'ramda';
+import classnames from 'classnames';
+import { Tooltip } from 'recharts';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Geographies, Geography, MapProvider } from 'react-simple-maps';
@@ -18,14 +20,12 @@ import { scaleLog } from 'd3-scale';
 import * as d3Geo from 'd3-geo';
 import { feature } from 'topojson-client';
 import useGeography from './useGeography';
-import { pluck } from 'ramda';
 import Legend from './Legend/Legend';
 import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
-import { Tooltip } from 'recharts';
 import useTooltipState from '../hooks/useTooltipState';
-import classnames from 'classnames';
-import { useStyles } from './styles';
 import { useClickableStyle } from '../hooks/useClickableStyle';
+import withPercents from '../HOCs/withPercents';
+import { useStyles } from './styles';
 var USA_MAP = 'https://s3.amazonaws.com/reltio-ui-files/map_resources/us-albers.json';
 var MAP_COLORS = ['#CDE0FE', '#0160AD'];
 export var LEGEND_WIDTH = 75;

package/esm/components/charts/PieChart/PieChart.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { Margin } from 'recharts';
+import React from 'react';
+import { PieChart as PieChartWidget } from 'recharts';
 import { ChartProps } from '../types';
 type Props = ChartProps & {
     options?: {
-        margin?: Margin;
+        margin?: React.ComponentProps<typeof PieChartWidget>['margin'];
         showLegend?: boolean;
         showActiveShape?: boolean;
     };
@@ -13,7 +13,7 @@ export declare const PieChart: ({ width, height, data, options, isDonut, onItemC
 declare const _default: {
     ({ data, ...otherProps }: ChartProps & {
         options?: {
-            margin?: Margin;
+            margin?: import("recharts/types/util/types").Margin;
             showLegend?: boolean;
             showActiveShape?: boolean;
         };

package/esm/components/charts/PieChart/PieChart.js

@@ -17,9 +17,11 @@ import getLegendProps from '../CustomLegend/getLegendProps';
 import ActiveShape from '../ActiveShape/ActiveShape';
 import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
 import { useClickableStyle } from '../hooks/useClickableStyle';
+import { useStyles } from './styles';
 export var PieChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, isDonut = _a.isDonut, onItemClick = _a.onItemClick;
     var _c = options.showLegend, showLegend = _c === void 0 ? true : _c, margin = options.margin, showActiveShape = options.showActiveShape;
+    var styles = useStyles();
     var _d = useState(-1), activeId = _d[0], setActiveId = _d[1];
     var onPieEnter = function (_, index) { return setActiveId(index); };
     var onPieLeave = function () { return setActiveId(-1); };
@@ -36,6 +38,6 @@ export var PieChart = function (_a) {
                 color: getChartItemColor(item.label),
                 value: "".concat(item.label, " (").concat(item.percent, "%)")
             }); }) }))),
-        React.createElement(Pie, { dataKey: "value", data: data, activeIndex: activeId, activeShape: showActiveShape ? ActiveShape : undefined, onMouseEnter: showActiveShape ? onPieEnter : undefined, onMouseLeave: showActiveShape ? onPieLeave : undefined, innerRadius: isDonut ? (showActiveShape ? '50%' : '60%') : 0, outerRadius: showActiveShape ? '70%' : '80%', onClick: onPieClick }, (data || []).map(function (entry, index) { return (React.createElement(Cell, { key: index, fill: getChartItemColor(entry.label), className: clickable })); }))));
+        React.createElement(Pie, { dataKey: "value", data: data, activeIndex: activeId, activeShape: showActiveShape ? ActiveShape : undefined, onMouseEnter: showActiveShape ? onPieEnter : undefined, onMouseLeave: showActiveShape ? onPieLeave : undefined, innerRadius: isDonut ? (showActiveShape ? '50%' : '60%') : 0, outerRadius: showActiveShape ? '70%' : '80%', onClick: onPieClick, className: styles.pie }, (data || []).map(function (entry, index) { return (React.createElement(Cell, { key: index, fill: getChartItemColor(entry.label), className: clickable })); }))));
 };
 export default withPercents(PieChart);

package/esm/components/charts/PieChart/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"pie">;

package/esm/components/charts/PieChart/styles.js

@@ -0,0 +1,8 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    pie: {
+        '& .recharts-sector:focus': {
+            outline: 'none'
+        }
+    }
+});

package/esm/components/charts/TreeChart/TreeChart.js

@@ -9,34 +9,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
+import { nanoid } from 'nanoid';
 import { Text, Tooltip, Treemap } from 'recharts';
 import { CustomTooltip } from '../CustomTooltip/CustomTooltip';
-import { useStyles } from './styles';
 import { useClickableStyle } from '../hooks/useClickableStyle';
-import { nanoid } from 'nanoid';
+import { useStyles } from './styles';
 var CustomizedContent = function (_a) {
     var x = _a.x, y = _a.y, width = _a.width, height = _a.height, label = _a.label, onClick = _a.onClick, group = _a.group;
     var styles = useStyles();
     var clickable = useClickableStyle(onClick);
     var clipPathId = useRef(nanoid()).current;
     var strokeWidth = 2;
-    return (React.createElement("g", { className: clickable, onClick: onClick && (function () { return onClick(group); }) },
+    var handleClick = function () {
+        if (!onClick)
+            return;
+        onClick(group);
+    };
+    return (React.createElement("g", { className: clickable, onClick: handleClick },
         React.createElement("clipPath", { id: clipPathId },
             React.createElement("rect", { x: x + strokeWidth, y: y + strokeWidth, width: Math.max(width - strokeWidth * 2, 0), height: Math.max(height - strokeWidth * 2, 0) })),
         React.createElement("rect", { x: x, y: y, width: width, height: height, strokeWidth: strokeWidth, className: styles.treeBlock }),
-        React.createElement(Text, { clipPath: "url(#".concat(clipPathId, ")"), textAnchor: 'middle', verticalAnchor: 'middle', width: width, x: x + width / 2, y: y + height / 2, className: styles.treeLabel }, label)));
-};
-var normalizeValues = function (data) {
-    var dataTotal = data.reduce(function (acc, item) { return acc + item.value; }, 0);
-    var threshold = dataTotal / (data.length * 10);
-    return data.map(function (item) {
-        return __assign(__assign({}, item), { normalizedValue: item.value < threshold ? threshold : item.value });
-    });
+        React.createElement(Text, { clipPath: "url(#".concat(clipPathId, ")"), textAnchor: "middle", verticalAnchor: "middle", width: width, x: x + width / 2, y: y + height / 2, className: styles.treeLabel }, label)));
 };
 var TreeChart = function (_a) {
     var data = _a.data, width = _a.width, height = _a.height, onItemClick = _a.onItemClick;
-    return (React.createElement(Treemap, { dataKey: "normalizedValue", nameKey: "label", content: React.createElement(CustomizedContent, { onClick: onItemClick }), data: normalizeValues(data), width: width, animationDuration: 500, height: height },
+    var normalizedData = useMemo(function () {
+        var dataTotal = data.reduce(function (acc, item) { return acc + item.value; }, 0);
+        var threshold = dataTotal / (data.length * 10);
+        return data.map(function (item) {
+            return __assign(__assign({}, item), { normalizedValue: item.value < threshold ? threshold : item.value });
+        });
+    }, [data]);
+    return (React.createElement(Treemap, { dataKey: "normalizedValue", nameKey: "label", content: React.createElement(CustomizedContent, { onClick: onItemClick }), data: normalizedData, width: width, animationDuration: 500, height: height },
         React.createElement(Tooltip, { content: React.createElement(CustomTooltip, null) })));
 };
 export default TreeChart;

package/esm/components/charts/hooks/useTooltipState.d.ts

@@ -1,8 +1,8 @@
-import { Coordinate, TooltipProps } from 'recharts';
+import { TooltipProps } from 'recharts';
 import { ChartData } from '../types';
 declare const useTooltipState: () => {
-    tooltipState: TooltipProps;
-    showTooltip: (data: ChartData, coordinate: Coordinate) => void;
+    tooltipState: TooltipProps<number, string>;
+    showTooltip: (data: ChartData, coordinate: TooltipProps<number, string>['coordinate']) => void;
     hideTooltip: () => void;
 };
 export default useTooltipState;

package/esm/components/charts/types/BarChartOptions.d.ts

@@ -1,6 +1,7 @@
-import { Margin } from 'recharts';
+import React from 'react';
+import { BarChart } from 'recharts';
 export type BarChartOptions = {
-    margin?: Margin;
+    margin?: React.ComponentProps<typeof BarChart>['margin'];
     isLabelRotated?: boolean;
     isHorizontal?: boolean;
 };

package/esm/components/charts/types/LineChartOptions.d.ts

@@ -1,5 +1,6 @@
-import { Margin } from 'recharts';
+import React from 'react';
+import { LineChart } from 'recharts';
 export type LineChartOptions = {
-    margin?: Margin;
+    margin?: React.ComponentProps<typeof LineChart>['margin'];
     isLabelRotated?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1682",
+  "version": "1.4.1684",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@date-io/moment": "^1.3.5",
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1682",
+    "@reltio/mdm-sdk": "^1.4.1684",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
@@ -34,7 +34,7 @@
     "react-split-pane": "^0.1.89",
     "react-virtualized": "^9.21.2",
     "react-window": "^1.8.5",
-    "recharts": "^1.8.5",
+    "recharts": "^2.8.0",
     "sanitize-html": "2.7.1",
     "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
   },