@reltio/components 1.4.1916 → 1.4.1918

package/cjs/GaugeChart/GaugeChart.test.js

@@ -0,0 +1,193 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_2 = require("@testing-library/react");
+var GaugeChart_1 = require("./GaugeChart");
+var defaultProps = {
+    width: 400,
+    height: 300,
+    data: [
+        { color: 'rgba(241, 35, 35, 1)', value: 30 },
+        { color: 'rgba(255, 109, 26, 1)', value: 40 },
+        { color: 'rgba(255, 238, 54, 1)', value: 20 },
+        { color: 'rgba(147, 244, 87, 1)', value: 10 }
+    ],
+    value: 50,
+    label: 'Label',
+    isAnimationActive: false
+};
+var removeExtraSpaces = function (str) { return str.replace(/\s{2,}/g, ' '); };
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var result = (0, react_2.render)(react_1.default.createElement(GaugeChart_1.GaugeChart, __assign({}, props)));
+    return __assign(__assign({}, result), { rerender: function (newProps) { return result.rerender(react_1.default.createElement(GaugeChart_1.GaugeChart, __assign({}, props, newProps))); } });
+};
+describe('Gauge chart behaviour', function () {
+    it('should render chart correctly in basic scenario', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, pieChart, pie, sectors, indicator, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = react_2.screen.getByTestId('gauge-chart-text');
+            Object.defineProperty((0, react_2.within)(text).getByText('Label'), 'clientHeight', { configurable: true, value: 16 });
+            rerender(defaultProps);
+            gaugeChart = react_2.screen.getByTestId('gauge-chart');
+            pieChart = gaugeChart.querySelector('.recharts-wrapper');
+            expect(gaugeChart).toHaveStyle({ width: '400px', height: '300px' });
+            expect(pieChart).toHaveStyle({ width: '400px', height: '300px' });
+            pie = gaugeChart.querySelector('.recharts-surface');
+            expect(pie).toHaveStyle({ width: '100%', height: '100%' });
+            expect(pie).toHaveAttribute('width', '400');
+            expect(pie).toHaveAttribute('height', '300');
+            expect(pie).toHaveAttribute('cx', '50%');
+            expect(pie).toHaveAttribute('cy', '50%');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            indicator = react_2.screen.getByTestId('gauge-chart-indicator');
+            expect(sectors).toHaveLength(4);
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('fill', 'rgba(241, 35, 35, 1)');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,249.99999999999997 A 200,200,0, 0,1, 82.4429495415054,88.19660112501052 L 105.95435963320432,120.55728090000841 A 160,160,0, 0,0, 40,249.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('fill', 'rgba(255, 109, 26, 1)');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,88.19660112501052 A 200,200,0, 0,1, 317.55705045849464,88.19660112501052 L 294.04564036679574,120.55728090000841 A 160,160,0, 0,0, 105.95435963320432,120.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('fill', 'rgba(255, 238, 54, 1)');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,88.19660112501052 A 200,200,0, 0,1, 390.21130325903073,188.19660112501052 L 352.1690426072246,200.5572809000084 A 160,160,0, 0,0, 294.04564036679574,120.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('fill', 'rgba(147, 244, 87, 1)');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,188.19660112501052 A 200,200,0, 0,1, 400,250 L 360,250 A 160,160,0, 0,0, 352.1690426072246,200.5572809000084 Z');
+            expect(indicator).toHaveStyle({ opacity: 1 });
+            expect(indicator).toHaveAttribute('d', 'M198 98L202 98 L200 36 L198 98');
+            expect(text).toHaveStyle({ top: '30%', bottom: 'calc(16.666666666666664% - 0px)', left: '10%', right: '10%' });
+            (0, react_2.within)(text).getByText('50');
+            (0, react_2.within)(text).getByText('Label');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render chart correctly if the label height is more than 16 pixels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, indicator, sectors, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = react_2.screen.getByTestId('gauge-chart-text');
+            Object.defineProperty((0, react_2.within)(text).getByText('Label'), 'clientHeight', { configurable: true, value: 48 });
+            rerender(defaultProps);
+            gaugeChart = react_2.screen.getByTestId('gauge-chart');
+            indicator = react_2.screen.getByTestId('gauge-chart-indicator');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,233.99999999999997 A 200,200,0, 0,1, 82.4429495415054,72.19660112501052 L 105.95435963320432,104.55728090000841 A 160,160,0, 0,0, 40,233.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,72.19660112501052 A 200,200,0, 0,1, 317.55705045849464,72.19660112501052 L 294.04564036679574,104.55728090000841 A 160,160,0, 0,0, 105.95435963320432,104.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,72.19660112501052 A 200,200,0, 0,1, 390.21130325903073,172.19660112501052 L 352.1690426072246,184.5572809000084 A 160,160,0, 0,0, 294.04564036679574,104.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '234');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,172.19660112501052 A 200,200,0, 0,1, 400,234 L 360,234 A 160,160,0, 0,0, 352.1690426072246,184.5572809000084 Z');
+            expect(indicator).toHaveAttribute('d', 'M198 82L202 82 L200 20 L198 82');
+            expect(text).toHaveStyle({ top: '24.666666666666668%', bottom: 'calc(22% - 32px)', left: '10%', right: '10%' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render chart correctly if the label height is less than 16 pixels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var rerender, text, gaugeChart, indicator, sectors, firstSector, secondSector, thirdSector, fourthSector;
+        return __generator(this, function (_a) {
+            rerender = setUp(__assign(__assign({}, defaultProps), { width: 0, height: 0 })).rerender;
+            text = react_2.screen.getByTestId('gauge-chart-text');
+            Object.defineProperty((0, react_2.within)(text).getByText('Label'), 'clientHeight', { configurable: true, value: 6 });
+            rerender(defaultProps);
+            gaugeChart = react_2.screen.getByTestId('gauge-chart');
+            indicator = react_2.screen.getByTestId('gauge-chart-indicator');
+            sectors = gaugeChart.querySelectorAll('.recharts-pie-sector');
+            firstSector = sectors[0].querySelector('.recharts-sector');
+            expect(firstSector).toHaveAttribute('cx', '200');
+            expect(firstSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(firstSector.getAttribute('d'))).toBe('M 0,249.99999999999997 A 200,200,0, 0,1, 82.4429495415054,88.19660112501052 L 105.95435963320432,120.55728090000841 A 160,160,0, 0,0, 40,249.99999999999997 Z');
+            secondSector = sectors[1].querySelector('.recharts-sector');
+            expect(secondSector).toHaveAttribute('cx', '200');
+            expect(secondSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(secondSector.getAttribute('d'))).toBe('M 82.4429495415054,88.19660112501052 A 200,200,0, 0,1, 317.55705045849464,88.19660112501052 L 294.04564036679574,120.55728090000841 A 160,160,0, 0,0, 105.95435963320432,120.55728090000841 Z');
+            thirdSector = sectors[2].querySelector('.recharts-sector');
+            expect(thirdSector).toHaveAttribute('cx', '200');
+            expect(thirdSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(thirdSector.getAttribute('d'))).toBe('M 317.55705045849464,88.19660112501052 A 200,200,0, 0,1, 390.21130325903073,188.19660112501052 L 352.1690426072246,200.5572809000084 A 160,160,0, 0,0, 294.04564036679574,120.55728090000841 Z');
+            fourthSector = sectors[3].querySelector('.recharts-sector');
+            expect(fourthSector).toHaveAttribute('cx', '200');
+            expect(fourthSector).toHaveAttribute('cy', '250');
+            expect(removeExtraSpaces(fourthSector.getAttribute('d'))).toBe('M 390.21130325903073,188.19660112501052 A 200,200,0, 0,1, 400,250 L 360,250 A 160,160,0, 0,0, 352.1690426072246,200.5572809000084 Z');
+            expect(indicator).toHaveAttribute('d', 'M198 98L202 98 L200 36 L198 98');
+            expect(text).toHaveStyle({ top: '30%', bottom: 'calc(16.666666666666664% - -10px)', left: '10%', right: '10%' });
+            return [2 /*return*/];
+        });
+    }); });
+    it('should render custom label correctly', function () {
+        var props = __assign(__assign({}, defaultProps), { value: 78.4, renderValue: function (value) { return react_1.default.createElement("span", { "data-reltio-id": "custom-label" },
+                Math.round(value),
+                "%"); } });
+        setUp(props);
+        expect(react_2.screen.getByTestId('custom-label')).toHaveTextContent('78%');
+    });
+});

package/cjs/GaugeChart/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_RADIUS = 200;
+export declare const RADIAN: number;
+export declare const ARC_WIDTH_AS_PERCENTAGES = 0.2;
+export declare const BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;
+export declare const TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.07;
+export declare const INDICATOR_WIDTH_AS_PERCENTAGES = 0.01;

package/cjs/GaugeChart/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INDICATOR_WIDTH_AS_PERCENTAGES = exports.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = exports.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = exports.ARC_WIDTH_AS_PERCENTAGES = exports.RADIAN = exports.MAX_RADIUS = void 0;
+exports.MAX_RADIUS = 200;
+exports.RADIAN = Math.PI / 180;
+exports.ARC_WIDTH_AS_PERCENTAGES = 0.2;
+exports.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.04;
+exports.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES = 0.07;
+exports.INDICATOR_WIDTH_AS_PERCENTAGES = 0.01;

package/cjs/GaugeChart/helpers.d.ts

@@ -0,0 +1,9 @@
+import { GaugeItem } from './types';
+export declare const getGaugeIndicatorCoords: (value: number, data: GaugeItem[], cx: number, cy: number, oR: number, iR: number) => {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x3: number;
+    y3: number;
+};

package/cjs/GaugeChart/helpers.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGaugeIndicatorCoords = void 0;
+var constants_1 = require("./constants");
+var getGaugeIndicatorCoords = function (value, data, cx, cy, oR, iR) {
+    var total = data.reduce(function (sum, _a) {
+        var value = _a.value;
+        return sum + value;
+    }, 0);
+    var angle = 180.0 * (1 - value / total);
+    var width = constants_1.INDICATOR_WIDTH_AS_PERCENTAGES * oR;
+    var sin = Math.sin(-constants_1.RADIAN * angle);
+    var cos = Math.cos(-constants_1.RADIAN * angle);
+    var x1 = cx + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos + width * sin;
+    var y1 = cy + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin - width * cos;
+    var x2 = cx + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos - width * sin;
+    var y2 = cy + (iR - constants_1.BOTTOM_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin + width * cos;
+    var x3 = cx + (oR + constants_1.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * cos;
+    var y3 = cy + (oR + constants_1.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * oR) * sin;
+    return { x1: x1, y1: y1, x2: x2, y2: y2, x3: x3, y3: y3 };
+};
+exports.getGaugeIndicatorCoords = getGaugeIndicatorCoords;

package/cjs/GaugeChart/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/GaugeChart/helpers.test.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var helpers_1 = require("./helpers");
+describe('gauge chart helpers behaviour', function () {
+    it('should calc gauge indicator coordinates correctly', function () {
+        expect((0, helpers_1.getGaugeIndicatorCoords)(75, [
+            { color: 'rgba(241, 35, 35, 1)', value: 30 },
+            { color: 'rgba(255, 109, 26, 1)', value: 40 },
+            { color: 'rgba(255, 238, 54, 1)', value: 20 },
+            { color: 'rgba(147, 244, 87, 1)', value: 10 }
+        ], 200, 250, 200, 180)).toEqual({
+            x1: 320.2081528017131,
+            x2: 323.0365799264593,
+            x3: 351.32085117392114,
+            y1: 126.96342007354075,
+            y2: 129.79184719828694,
+            y3: 98.67914882607883
+        });
+        expect((0, helpers_1.getGaugeIndicatorCoords)(30, [
+            { color: 'rgba(241, 35, 35, 1)', value: 50 },
+            { color: 'rgba(255, 109, 26, 1)', value: 50 }
+        ], 300, 360, 120, 130)).toEqual({
+            x1: 225.43846601973246,
+            x2: 227.38010680623233,
+            x3: 224.52837360564646,
+            y1: 259.41641460700754,
+            y2: 258.0057300015056,
+            y3: 256.1222179222567
+        });
+        expect((0, helpers_1.getGaugeIndicatorCoords)(30, [
+            { color: 'rgba(241, 35, 35, 1)', value: 40 },
+            { color: 'rgba(255, 109, 26, 1)', value: 50 },
+            { color: 'rgba(147, 244, 87, 1)', value: 70 }
+        ], 200, 200, 180, 150)).toEqual({
+            x1: 80.26611294376123,
+            x2: 82.2661657826318,
+            x3: 39.85895267052976,
+            y1: 122.16121602694538,
+            y2: 119.16792542265621,
+            y3: 92.99717312042462
+        });
+    });
+});

package/cjs/GaugeChart/index.d.ts

@@ -0,0 +1 @@
+export { GaugeChart } from './GaugeChart';

package/cjs/GaugeChart/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = void 0;
+var GaugeChart_1 = require("./GaugeChart");
+Object.defineProperty(exports, "GaugeChart", { enumerable: true, get: function () { return GaugeChart_1.GaugeChart; } });

package/cjs/GaugeChart/styles.d.ts

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

package/cjs/GaugeChart/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    root: {
+        position: 'relative',
+        display: 'flex'
+    },
+    pie: {
+        '& .recharts-sector:focus': {
+            outline: 'none'
+        }
+    },
+    text: {
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: '0 10px',
+        transition: 'opacity 0.5s',
+        textAlign: 'center'
+    },
+    indicator: {
+        fill: 'rgb(0, 0, 102)',
+        stroke: 'none',
+        transition: 'opacity 0.5s'
+    },
+    value: {
+        marginBottom: '2px',
+        fontSize: '28px',
+        lineHeight: '33px',
+        fontWeight: 400,
+        color: theme.palette.text.primary
+    },
+    label: {
+        width: '100%',
+        fontSize: '14px',
+        lineHeight: '16px',
+        fontWeight: 400,
+        color: theme.palette.text.secondary
+    }
+}); });

package/cjs/GaugeChart/types.d.ts

@@ -0,0 +1,5 @@
+export type GaugeItem = {
+    name?: string | number;
+    color: string;
+    value: number;
+};

package/cjs/GaugeChart/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/HOCs/withFilter/components/ColumnFilter/ColumnFilter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataTypeDefinition } from '@reltio/mdm-sdk';
 import { OnFilter, ColumnFilter as ColumnFilterType, ColumnFilterOptions } from '../../../../types/basicTable';
 type Props = {

package/cjs/HOCs/withFilter/components/FilterChip/FilterChip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataTypeDefinition, SearchValue } from '@reltio/mdm-sdk';
 type Props = {
     filterOption: {

package/cjs/HOCs/withReactSelectMuiSkin/components/ReactSelectClearIndicator/ReactSelectClearIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material/IconButton';
 type Props = {
     innerProps: Omit<IconButtonProps, 'size' | 'className'>;

package/cjs/HOCs/withReactSelectMuiSkin/helpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const reactSelectComponents: {
     ClearIndicator: ({ selectProps: { classes }, innerProps }: {
         innerProps: Omit<import("@mui/material").IconButtonProps, "size" | "className">;

package/cjs/HOCs/withReactSelectMuiSkin/withReactSelectMuiSkin.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OptionTypeBase, Props } from 'react-select';
 export declare const withReactSelectMuiSkin: <OptionType extends OptionTypeBase>(SelectComponent: any) => {
     (props: any): JSX.Element;

package/cjs/HierarchicalAttributeTooltip/HierarchicalAttributeTooltip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipProps } from '@mui/material/Tooltip';
 type Props = Omit<TooltipProps, 'title'> & {
     pathToTitle?: string[];

package/cjs/HierarchyNodeTitle/HierarchyNodeTitle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type NodeTitleProps = {
     title: string;
     entityUri: string;

package/cjs/Highlighter/Highlighter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     text?: string;
     highlight?: string;

package/cjs/IgnoreButton/IgnoreButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     isIgnored: boolean;
     onClick: () => void;

package/cjs/ImageActionsOverlay/components/CheckedIcon/CheckedIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     checked: boolean;
     className?: string;

package/cjs/ImageAttributesGallery/ImageAttributesGallery.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue, AttributeItem } from '@reltio/mdm-sdk';
 export type Props = {
     attributeValues: ImageAttributeValue[];

package/cjs/ImageAttributesGallery/components/GalleryView/GalleryView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageItem } from '../../types';
 type Props = {
     items: ImageItem[];

package/cjs/ImageAttributesGallery/components/HeaderLeft/HeaderLeft.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageItem } from '../../types';
 type Props = {
     onSelectAll: () => void;

package/cjs/ImageAttributesGallery/components/HeaderRight/HeaderRight.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onDownload?: () => void;
     onShare?: () => void;

package/cjs/ImageAttributesLine/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageAttributeValue } from '@reltio/mdm-sdk';
 export type ImageRenderProps = {
     onDownload?: (url: string[]) => void;

package/cjs/ImageAttributesLineEditor/ImageAttributesLineEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue, Paging, AttributeItem, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
 import { ImageAttributeSize } from '../types';
 type Props = {

package/cjs/ImageDetailsView/ImageDetailsView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
 type Props = {
     attributeValues: ImageAttributeValue[];

package/cjs/ImageDetailsView/components/ImageDetailsViewCarousel/ImageDetailsViewCarousel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageAttributeValue } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;

package/cjs/ImageDetailsView/components/ImageDetailsViewSidebar/ImageDetailsViewSidebar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;

package/cjs/ImageDetailsView/components/MetaInfo/MetaInfo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
 import { ImageAttributeFieldsOrder } from '../../types';
 type Props = {

package/cjs/ImageDetailsView/components/MetaInfoForm/MetaInfoForm.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue, Mode, AttributeItem } from '@reltio/mdm-sdk';
 import { ImageAttributeFieldsOrder } from '../../types';
 type Props = {

package/cjs/ImageDetailsView/components/MetaInfoHeader/MetaInfoHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, AttributeItem } from '@reltio/mdm-sdk';
 type Props = {
     attributeType: AttributeType;

package/cjs/ImageDetailsView/components/MetaInfoList/MetaInfoList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
 import { ImageAttributeFieldsOrder } from '../../types';
 type Props = {

package/cjs/ImageDetailsView/components/Thumbnails/Thumbnails.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ImageAttributeValue } from '@reltio/mdm-sdk';
 type Props = {
     attributeValueIndex: number;

package/cjs/InlineAttributesList/InlineAttributesList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, RecordAttributesType } from '@reltio/mdm-sdk';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../types/inlineAttributes';
 import { CrosswalksMap } from '../types';

package/cjs/InlineAttributesPager/InlineAttributesPager.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, AttributeValue, Paging } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../types/inlineAttributes';

package/cjs/InlineAttributesPager/components/InlineImageAttributesBlock/InlineImageAttributesBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';

package/cjs/InlineAttributesPager/components/InlineNestedAttributesBlock/InlineNestedAttributesBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, NestedAttributeValue } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';

package/cjs/InlineAttributesPager/components/InlineReferenceAttributesBlock/InlineReferenceAttributesBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ReferenceAttributeValue } from '@reltio/mdm-sdk';
 import { RelationCrosswalksMap } from '../../../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';

package/cjs/InlineAttributesPager/components/InlineSimpleAttributesBlock/InlineSimpleAttributesBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';

package/cjs/InlineComplexAttribute/components/CrosswalkIcon/CrosswalkIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Crosswalk } from '@reltio/mdm-sdk';
 type Props = {
     crosswalk: Crosswalk;

package/cjs/InlineImageAttribute/InlineImageAttribute.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ImageAttributeValue } from '@reltio/mdm-sdk';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../types/inlineAttributes';
 import { CrosswalksMap } from '../types';

package/cjs/InlineNestedAttribute/InlineNestedAttribute.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, NestedAttributeValue } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../types/inlineAttributes';

package/cjs/InlineReferenceAttribute/InlineReferenceAttribute.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, ReferenceAttributeValue } from '@reltio/mdm-sdk';
 import { RelationCrosswalksMap } from '../types';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../types/inlineAttributes';

package/cjs/InlineSimpleAttribute/InlineSimpleAttribute.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeType, Crosswalk, RelationCrosswalk, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import { DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../types/inlineAttributes';
 type Props = {

package/cjs/LightArrowTooltip/LightArrowTooltip.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TooltipProps } from '@mui/material/Tooltip';
 export declare const LightArrowTooltip: (props: TooltipProps) => JSX.Element;

package/cjs/LineChart/LineChart.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ChartType, LineChartOptions } from '@reltio/mdm-sdk';
 import { BaseChartProps } from '../types/charts';
 type Props = BaseChartProps & {

package/cjs/LinearLoadIndicator/LinearLoadIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     transparent?: boolean;
     relativePosition?: boolean;

package/cjs/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     className?: string;
 };

package/cjs/LogicOperator/LogicOperator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SearchOperator } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;