@reltio/components 1.4.1916 → 1.4.1918

package/cjs/ActionsPanel/ActionsPanel.d.ts

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

package/cjs/ActionsPanel/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type Action = {
     ActionButton?: (props: any) => JSX.Element;
     show?: boolean;

package/cjs/ArrowExpandButton/ArrowExpandButton.d.ts

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

package/cjs/AsyncReactSelect/AsyncReactSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const AsyncReactSelect: {
     (props: any): JSX.Element;
     displayName: string;

package/cjs/AttributeGroupIcon/AttributeGroupIcon.d.ts

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

package/cjs/AttributeListItem/components/AttrTypeIcon/AttrTypeIcon.d.ts

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

package/cjs/AttributeSelector/AttributeSelector.d.ts

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

package/cjs/AttributeTitle/AttributeTitle.d.ts

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

package/cjs/AttributesErrorsPanel/AttributesErrorsPanel.d.ts

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

package/cjs/AttributesFiltersButton/components/ActionButtons/ActionButtons.d.ts

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

package/cjs/AttributesView/AttributesView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Entity, Mode, PinnedAttribute } from '@reltio/mdm-sdk';
 export type AttributesViewProps = {
     attributesCount?: number;

package/cjs/AvatarWithFallback/AvatarWithFallback.d.ts

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

package/cjs/BarChart/BarChart.d.ts

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

package/cjs/BasicAttributeSelector/components/AttributeTitle/AttributeTitle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AttributeSelectorItem } from '../../../types';
 type Value = {
     fieldName: string;

package/cjs/BasicViewHeader/BasicViewHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToolbarProps } from '@mui/material/Toolbar';
 type Props = ToolbarProps & {
     title?: string;

package/cjs/BooleanRadioEditor/BooleanRadioEditor.d.ts

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

package/cjs/BooleanRadioEditor/components/BooleanEditor/BooleanEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckboxProps } from '@mui/material/Checkbox';
 type Props = Omit<CheckboxProps, 'checked' | 'onChange'> & {
     onChange?: (checked: boolean) => void;

package/cjs/BubbleChart/BubbleChart.d.ts

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

package/cjs/CardinalityMessage/CardinalityMessage.d.ts

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

package/cjs/ChartLegend/ChartLegend.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LegendProps } from 'recharts';
 type Props = LegendProps & {
     alignRight: boolean;

package/cjs/ChartTooltip/ChartTooltip.d.ts

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

package/cjs/CloudChart/CloudChart.d.ts

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

package/cjs/CollaborationItem/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AvatarProps } from '@mui/material/Avatar';
 type Props = Omit<AvatarProps, 'children'> & {
     children: string;

package/cjs/CollaborationItem/components/Comment/Comment.d.ts

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

package/cjs/CollaborationItem/components/CommentContent/CommentContent.d.ts

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

package/cjs/CollaborationItem/components/CommentTarget/CommentTarget.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment } from '@reltio/mdm-sdk';
 type Props = {
     comment: Pick<Comment, 'objectType' | 'objectId' | 'relatedObjectUris'>;

package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MentionsInputProps } from 'react-mentions';
 type Props = Omit<MentionsInputProps, 'children' | 'onChange'> & {
     onChange?: (value: string, plainTextValue: string, mentions: string[]) => void;

package/cjs/CollapseRowButton/CollapseRowButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RowValue } from '../types/basicTable';
 type Props = {
     rowIndex: number;

package/cjs/ColorBar/ColorBar.d.ts

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

package/cjs/ColumnsSettings/ColumnsSettings.d.ts

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

package/cjs/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupedColumnsData } from '../../../types/basicTable';
 type Props = {
     anchorEl: HTMLElement;

package/cjs/CommentsContainer/CommentsContainer.d.ts

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

package/cjs/ConfirmDeleteDialog/ConfirmDeleteDialog.d.ts

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

package/cjs/ConnectionEditor/ConnectionEditor.d.ts

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

package/cjs/ControlAttributeIcon/ControlAttributeIcon.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ControlAttributeIcon: () => JSX.Element;

package/cjs/CreatableReactSelect/CreatableReactSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const CreatableReactSelect: {
     (props: any): JSX.Element;
     displayName: string;

package/cjs/CustomDateRangeEditor/CustomDateRangeEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type DateValues = [Date, Date];
 type Props = {
     values: DateValues;

package/cjs/DataTenantBadge/DataTenantBadge.d.ts

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

package/cjs/DateEditor/DateEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Moment } from 'moment';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 type Props = Omit<DatePickerProps<Moment>, 'value' | 'minDate' | 'maxDate' | 'onChange'> & {

package/cjs/DateIntervalSelector/DateIntervalSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     interval: [number, string];
     onChange: ([number, string]: [any, any]) => void;

package/cjs/DeleteButton/DeleteButton.d.ts

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

package/cjs/DependentLookupEditor/DependentLookupEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Lookups, LookupValue } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
 export declare const DEBOUNCE_INTERVAL = 400;

package/cjs/DescriptionIcon/DescriptionIcon.d.ts

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

package/cjs/Drawer/Drawer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DrawerProps } from '@mui/material/Drawer';
 type Props = DrawerProps;
 export declare const Drawer: {

package/cjs/EditModeAttributesView/EditModeAttributesView.d.ts

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

package/cjs/EntityAvatar/EntityAvatar.d.ts

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

package/cjs/EntityCreator/EntityCreator.d.ts

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

package/cjs/EntitySelector/EntitySelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ConnectionEntity, Mode, Metadata, GlobalSearchRequestOptions, TEntityType, AttributeType, PrimitiveValue } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
 import { EntityOption as EntityOptionType } from './types';

package/cjs/EntitySelector/components/SingleValue/SingleValue.d.ts

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

package/cjs/EntityTypeBadge/EntityTypeBadge.d.ts

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

package/cjs/EntityTypeIcon/EntityTypeIcon.d.ts

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

package/cjs/ErrorMessage/ErrorMessage.d.ts

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

package/cjs/ErrorPopup/ErrorPopup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type AddError = (error: {
     title: string;
     message: string;

package/cjs/ExpandableSearchInput/ExpandableSearchInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     query: string;
     onChange: (value: string) => void;

package/cjs/FileTypeEditor/FileTypeEditor.d.ts

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

package/cjs/FilterButton/FilterButton.d.ts

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

package/cjs/FilterValueEditor/FilterValueEditor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataTypeDefinition, DatePeriod, SearchFilter, SearchValue } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
 type Props = {

package/cjs/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { GaugeItem } from './types';
+type Props = {
+    width: number;
+    height: number;
+    data: GaugeItem[];
+    value: number;
+    label?: React.ReactNode;
+    renderValue?: (value: number) => React.ReactNode;
+    isAnimationActive?: boolean;
+};
+export declare const GaugeChart: ({ width, height, data, value, label, renderValue, isAnimationActive }: Props) => JSX.Element;
+export {};

package/cjs/GaugeChart/GaugeChart.js

@@ -0,0 +1,87 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var recharts_1 = require("recharts");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var helpers_1 = require("./helpers");
+var constants_1 = require("./constants");
+var styles_1 = require("./styles");
+var GaugeChart = function (_a) {
+    var width = _a.width, height = _a.height, data = _a.data, value = _a.value, label = _a.label, _b = _a.renderValue, renderValue = _b === void 0 ? ramda_1.identity : _b, _c = _a.isAnimationActive, isAnimationActive = _c === void 0 ? true : _c;
+    var styles = (0, styles_1.useStyles)();
+    var labelElRef = (0, react_1.useRef)();
+    var _d = (0, react_1.useState)(!isAnimationActive), animationIsEnd = _d[0], setAnimationIsEnd = _d[1];
+    var _e = (0, react_1.useState)({ bottom: 0, top: 0, left: 0, right: 0 }), margin = _e[0], setMargin = _e[1];
+    var _f = (0, react_1.useState)(0), textOffset = _f[0], setTextOffset = _f[1];
+    var widthWithoutMargin = width - margin.left - margin.right;
+    var heightWithoutMargin = height - margin.top - margin.bottom - (textOffset > 0 ? textOffset : 0);
+    var outerRadius = Math.min(widthWithoutMargin / 2, heightWithoutMargin, constants_1.MAX_RADIUS);
+    var innerRadius = outerRadius - constants_1.ARC_WIDTH_AS_PERCENTAGES * outerRadius;
+    var cx = widthWithoutMargin / 2 + margin.left;
+    var cy = heightWithoutMargin / 2 + outerRadius / 2 + margin.top;
+    var chartData = data.map(function (item, name) { return (__assign(__assign({}, item), { name: name })); });
+    var _g = (0, helpers_1.getGaugeIndicatorCoords)(value, chartData, cx, cy, outerRadius, innerRadius), x1 = _g.x1, y1 = _g.y1, x2 = _g.x2, y2 = _g.y2, x3 = _g.x3, y3 = _g.y3;
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (animationIsEnd) {
+            var clientHeight = ((_a = labelElRef === null || labelElRef === void 0 ? void 0 : labelElRef.current) !== null && _a !== void 0 ? _a : { clientHeight: 0 }).clientHeight;
+            var textOffset_1 = Math.ceil(clientHeight) - 16;
+            var verticalMargin_1 = Math.ceil(constants_1.TOP_INDICATOR_HEIGHT_AS_PERCENTAGES * outerRadius);
+            setTextOffset(textOffset_1);
+            setMargin(function (prevMargin) { return (__assign(__assign({}, prevMargin), { bottom: verticalMargin_1, top: verticalMargin_1 })); });
+        }
+    }, [width, height, animationIsEnd]);
+    return (react_1.default.createElement("div", { "data-reltio-id": "gauge-chart", className: styles.root, style: { width: width, height: height } },
+        react_1.default.createElement(recharts_1.PieChart, { margin: { top: 0, bottom: 0, left: 0, right: 0 }, width: width, height: height },
+            react_1.default.createElement(recharts_1.Pie, { className: styles.pie, dataKey: "value", startAngle: 180, endAngle: 0, data: chartData, cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius, stroke: "none", isAnimationActive: isAnimationActive, onAnimationEnd: function () { return setAnimationIsEnd(true); } }, data.map(function (entry, idx) { return (react_1.default.createElement(recharts_1.Cell, { key: idx, fill: entry.color })); })),
+            react_1.default.createElement("path", { "data-reltio-id": "gauge-chart-indicator", className: styles.indicator, style: { opacity: animationIsEnd ? 1 : 0 }, d: "M".concat(x1, " ").concat(y1, "L").concat(x2, " ").concat(y2, " L").concat(x3, " ").concat(y3, " L").concat(x1, " ").concat(y1) })),
+        react_1.default.createElement("div", { "data-reltio-id": "gauge-chart-text", className: styles.text, style: {
+                top: "".concat(((cy - innerRadius) / height) * 100, "%"),
+                bottom: "calc(".concat(((height - cy) / height) * 100, "% - ").concat(textOffset, "px)"),
+                left: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
+                right: "".concat(((width - innerRadius * 2) / width / 2) * 100, "%"),
+                opacity: animationIsEnd ? 1 : 0
+            } },
+            react_1.default.createElement(Typography_1.default, { className: styles.value }, renderValue(value)),
+            label && (react_1.default.createElement("div", { ref: labelElRef, className: styles.label }, label)))));
+};
+exports.GaugeChart = GaugeChart;

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

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