@reltio/components 1.4.1154 → 1.4.1157

package/cjs/components/DragAndDrop/DragAndDrop.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    children?: React.ReactNode;
+};
+export declare const DragAndDrop: (props: Props) => JSX.Element;
+export {};

package/cjs/components/DragAndDrop/DragAndDrop.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.DragAndDrop = void 0;
+// This component fixes "Cannot have two HTML5 backends at the same time" error.
+// Check issue and solution https://github.com/react-dnd/react-dnd/issues/186#issuecomment-561631584
+var react_dnd_1 = require("react-dnd");
+var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
+var react_1 = __importStar(require("react"));
+var RNDContext = react_dnd_1.createDndContext(react_dnd_html5_backend_1.default);
+var useDNDProviderElement = function (props) {
+    var manager = react_1.useRef(RNDContext);
+    if (!props.children)
+        return null;
+    return react_1.default.createElement(react_dnd_1.DndProvider, { manager: manager.current.dragDropManager }, props.children);
+};
+var DragAndDrop = function (props) {
+    var DNDElement = useDNDProviderElement(props);
+    return react_1.default.createElement(react_1.default.Fragment, null, DNDElement);
+};
+exports.DragAndDrop = DragAndDrop;

package/cjs/components/ReactSortableTree/react-sortable-tree.js

@@ -55,9 +55,9 @@ var react_virtualized_1 = require("react-virtualized");
 var ramda_1 = require("ramda");
 var frontend_collective_react_dnd_scrollzone_1 = __importStar(require("frontend-collective-react-dnd-scrollzone"));
 var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
 var react_lifecycles_compat_1 = require("react-lifecycles-compat");
 var styles_1 = require("@material-ui/core/styles");
+var DragAndDrop_1 = require("../DragAndDrop/DragAndDrop");
 var tree_node_1 = __importDefault(require("./tree-node"));
 var node_renderer_default_1 = __importDefault(require("./node-renderer-default"));
 var tree_placeholder_1 = __importDefault(require("./tree-placeholder"));
@@ -804,10 +804,8 @@ var SortableTreeWithoutDndContext = function (props) { return (react_1.default.c
     return dragDropManager === undefined ? null : (react_1.default.createElement(StyledReactSortableTree, __assign({}, props, { dragDropManager: dragDropManager })));
 })); };
 exports.SortableTreeWithoutDndContext = SortableTreeWithoutDndContext;
-var dndContext = react_dnd_1.createDndContext(react_dnd_html5_backend_1.default);
 var SortableTree = function (props) {
-    var manager = react_1.useRef(dndContext);
-    return (react_1.default.createElement(react_dnd_1.DndProvider, { manager: manager.current.dragDropManager },
+    return (react_1.default.createElement(DragAndDrop_1.DragAndDrop, null,
         react_1.default.createElement(SortableTreeWithoutDndContext, __assign({}, props))));
 };
 exports.default = SortableTree;

package/cjs/components/UploadImageDialog/UploadImageDialog.js

@@ -28,8 +28,6 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var react_redux_1 = require("react-redux");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
 var Box_1 = __importDefault(require("@material-ui/core/Box"));
 var Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
@@ -40,6 +38,7 @@ var DividerWithText_1 = require("./DividerWithText/DividerWithText");
 var ErrorSnackbar_1 = require("./ErrorSnackbar/ErrorSnackbar");
 var constants_1 = require("./constants");
 var styles_1 = require("./styles");
+var DragAndDrop_1 = require("../DragAndDrop/DragAndDrop");
 var UploadImageDialog = function (_a) {
     var open = _a.open, onClose = _a.onClose, onUpload = _a.onUpload;
     var styles = styles_1.useStyles();
@@ -74,7 +73,7 @@ var UploadImageDialog = function (_a) {
     var handleSendImage = function (url) {
         uploadImage(url);
     };
-    return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default },
+    return (react_1.default.createElement(DragAndDrop_1.DragAndDrop, null,
         react_1.default.createElement(Dialog_1.default, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
             react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Add new image')),
             react_1.default.createElement(Box_1.default, { className: styles.body },

package/cjs/components/index.d.ts

@@ -131,3 +131,4 @@ export { default as AttributeGroupIcon } from './AttributeGroupIcon/AttributeGro
 export { default as AttributesFiltersButton } from './AttributesFiltersButton/AttributesFiltersButton';
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
+export { DragAndDrop } from './DragAndDrop/DragAndDrop';

package/cjs/components/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = void 0;
-exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = void 0;
+exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -281,3 +281,5 @@ var AttributesFiltersBuilder_1 = require("./AttributesFiltersBuilder/AttributesF
 Object.defineProperty(exports, "AttributesFiltersBuilder", { enumerable: true, get: function () { return __importDefault(AttributesFiltersBuilder_1).default; } });
 var ConnectionEditor_1 = require("./ConnectionEditor");
 Object.defineProperty(exports, "ConnectionEditor", { enumerable: true, get: function () { return ConnectionEditor_1.ConnectionEditor; } });
+var DragAndDrop_1 = require("./DragAndDrop/DragAndDrop");
+Object.defineProperty(exports, "DragAndDrop", { enumerable: true, get: function () { return DragAndDrop_1.DragAndDrop; } });

package/cjs/hooks/useSnackbar.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
-export declare const useSnackbar: () => {
+import { SnackbarOrigin } from '@material-ui/core/Snackbar';
+declare type SnackbarOptions = {
+    anchorOrigin?: SnackbarOrigin;
+    showDismiss?: boolean;
+};
+export declare const useSnackbar: (options?: SnackbarOptions) => {
     SnackbarRenderer: () => JSX.Element;
     showSnackbarMessage: (message: any) => void;
 };
+export {};

package/cjs/hooks/useSnackbar.js

@@ -24,9 +24,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSnackbar = void 0;
 var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var Snackbar_1 = __importDefault(require("@material-ui/core/Snackbar"));
-var useSnackbar = function () {
+var useSnackbar = function (options) {
+    if (options === void 0) { options = {}; }
+    var anchorOrigin = options.anchorOrigin, showDismiss = options.showDismiss;
     var _a = react_1.useState(false), isOpenSnackbar = _a[0], setIsOpenSnackbar = _a[1];
     var _b = react_1.useState(''), snackbarMessage = _b[0], setSnackbarMessage = _b[1];
     var closeSnackbar = react_1.useCallback(function () {
@@ -39,7 +43,7 @@ var useSnackbar = function () {
     }, []);
     var SnackbarRenderer = react_1.useCallback(function () {
         return (react_1.default.createElement(Portal_1.default, { container: document.body },
-            react_1.default.createElement(Snackbar_1.default, { open: isOpenSnackbar, autoHideDuration: 5000, onClose: closeSnackbar, message: snackbarMessage })));
+            react_1.default.createElement(Snackbar_1.default, { open: isOpenSnackbar, anchorOrigin: anchorOrigin, autoHideDuration: 5000, onClose: closeSnackbar, message: snackbarMessage, action: showDismiss ? (react_1.default.createElement(Button_1.default, { color: "primary", onClick: closeSnackbar }, ui_i18n_1.default.text('Dismiss'))) : undefined })));
     }, [isOpenSnackbar, closeSnackbar, snackbarMessage]);
     return { SnackbarRenderer: SnackbarRenderer, showSnackbarMessage: showSnackbarMessage };
 };

package/esm/components/DragAndDrop/DragAndDrop.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    children?: React.ReactNode;
+};
+export declare const DragAndDrop: (props: Props) => JSX.Element;
+export {};

package/esm/components/DragAndDrop/DragAndDrop.js

@@ -0,0 +1,16 @@
+// This component fixes "Cannot have two HTML5 backends at the same time" error.
+// Check issue and solution https://github.com/react-dnd/react-dnd/issues/186#issuecomment-561631584
+import { DndProvider, createDndContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import React, { useRef } from 'react';
+var RNDContext = createDndContext(HTML5Backend);
+var useDNDProviderElement = function (props) {
+    var manager = useRef(RNDContext);
+    if (!props.children)
+        return null;
+    return React.createElement(DndProvider, { manager: manager.current.dragDropManager }, props.children);
+};
+export var DragAndDrop = function (props) {
+    var DNDElement = useDNDProviderElement(props);
+    return React.createElement(React.Fragment, null, DNDElement);
+};

package/esm/components/ReactSortableTree/react-sortable-tree.js

@@ -24,15 +24,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { Component, useRef } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { AutoSizer, List } from 'react-virtualized';
 import { equals, append, when, always, gt, uniqWith, eqBy, pipe } from 'ramda';
 import withScrolling, { createScrollingComponent, createVerticalStrength, createHorizontalStrength } from 'frontend-collective-react-dnd-scrollzone';
-import { DndProvider, DndContext, createDndContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { DndContext } from 'react-dnd';
 import { polyfill } from 'react-lifecycles-compat';
 import { withStyles } from '@material-ui/core/styles';
+import { DragAndDrop } from '../DragAndDrop/DragAndDrop';
 import TreeNode from './tree-node';
 import NodeRendererDefault from './node-renderer-default';
 import TreePlaceholder from './tree-placeholder';
@@ -778,10 +778,8 @@ var SortableTreeWithoutDndContext = function (props) { return (React.createEleme
     var dragDropManager = _a.dragDropManager;
     return dragDropManager === undefined ? null : (React.createElement(StyledReactSortableTree, __assign({}, props, { dragDropManager: dragDropManager })));
 })); };
-var dndContext = createDndContext(HTML5Backend);
 var SortableTree = function (props) {
-    var manager = useRef(dndContext);
-    return (React.createElement(DndProvider, { manager: manager.current.dragDropManager },
+    return (React.createElement(DragAndDrop, null,
         React.createElement(SortableTreeWithoutDndContext, __assign({}, props))));
 };
 // Export the tree component without the react-dnd DragDropContext,

package/esm/components/UploadImageDialog/UploadImageDialog.js

@@ -3,8 +3,6 @@ import i18n from 'ui-i18n';
 import { useSelector } from 'react-redux';
 import { uploadImage as uploadImageRequest } from '@reltio/mdm-sdk';
 import mdm from '@reltio/mdm-module';
-import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import Box from '@material-ui/core/Box';
 import Dialog from '@material-ui/core/Dialog';
 import Typography from '@material-ui/core/Typography';
@@ -15,6 +13,7 @@ import { DividerWithText } from './DividerWithText/DividerWithText';
 import { ErrorSnackbar } from './ErrorSnackbar/ErrorSnackbar';
 import { IMAGE_TYPES, MAX_IMAGE_SIZE } from './constants';
 import { useStyles } from './styles';
+import { DragAndDrop } from '../DragAndDrop/DragAndDrop';
 export var UploadImageDialog = function (_a) {
     var open = _a.open, onClose = _a.onClose, onUpload = _a.onUpload;
     var styles = useStyles();
@@ -49,7 +48,7 @@ export var UploadImageDialog = function (_a) {
     var handleSendImage = function (url) {
         uploadImage(url);
     };
-    return (React.createElement(DndProvider, { backend: HTML5Backend },
+    return (React.createElement(DragAndDrop, null,
         React.createElement(Dialog, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
             React.createElement(Typography, { className: styles.title }, i18n.text('Add new image')),
             React.createElement(Box, { className: styles.body },

package/esm/components/index.d.ts

@@ -131,3 +131,4 @@ export { default as AttributeGroupIcon } from './AttributeGroupIcon/AttributeGro
 export { default as AttributesFiltersButton } from './AttributesFiltersButton/AttributesFiltersButton';
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
+export { DragAndDrop } from './DragAndDrop/DragAndDrop';

package/esm/components/index.js

@@ -131,3 +131,4 @@ export { default as AttributeGroupIcon } from './AttributeGroupIcon/AttributeGro
 export { default as AttributesFiltersButton } from './AttributesFiltersButton/AttributesFiltersButton';
 export { default as AttributesFiltersBuilder } from './AttributesFiltersBuilder/AttributesFiltersBuilder';
 export { ConnectionEditor } from './ConnectionEditor';
+export { DragAndDrop } from './DragAndDrop/DragAndDrop';

package/esm/hooks/useSnackbar.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
-export declare const useSnackbar: () => {
+import { SnackbarOrigin } from '@material-ui/core/Snackbar';
+declare type SnackbarOptions = {
+    anchorOrigin?: SnackbarOrigin;
+    showDismiss?: boolean;
+};
+export declare const useSnackbar: (options?: SnackbarOptions) => {
     SnackbarRenderer: () => JSX.Element;
     showSnackbarMessage: (message: any) => void;
 };
+export {};

package/esm/hooks/useSnackbar.js

@@ -1,7 +1,11 @@
 import React, { useCallback, useState } from 'react';
+import i18n from 'ui-i18n';
 import Portal from '@material-ui/core/Portal';
+import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
-export var useSnackbar = function () {
+export var useSnackbar = function (options) {
+    if (options === void 0) { options = {}; }
+    var anchorOrigin = options.anchorOrigin, showDismiss = options.showDismiss;
     var _a = useState(false), isOpenSnackbar = _a[0], setIsOpenSnackbar = _a[1];
     var _b = useState(''), snackbarMessage = _b[0], setSnackbarMessage = _b[1];
     var closeSnackbar = useCallback(function () {
@@ -14,7 +18,7 @@ export var useSnackbar = function () {
     }, []);
     var SnackbarRenderer = useCallback(function () {
         return (React.createElement(Portal, { container: document.body },
-            React.createElement(Snackbar, { open: isOpenSnackbar, autoHideDuration: 5000, onClose: closeSnackbar, message: snackbarMessage })));
+            React.createElement(Snackbar, { open: isOpenSnackbar, anchorOrigin: anchorOrigin, autoHideDuration: 5000, onClose: closeSnackbar, message: snackbarMessage, action: showDismiss ? (React.createElement(Button, { color: "primary", onClick: closeSnackbar }, i18n.text('Dismiss'))) : undefined })));
     }, [isOpenSnackbar, closeSnackbar, snackbarMessage]);
     return { SnackbarRenderer: SnackbarRenderer, showSnackbarMessage: showSnackbarMessage };
 };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1154",
+  "version": "1.4.1157",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1154",
-    "@reltio/mdm-sdk": "^1.4.1154",
+    "@reltio/mdm-module": "^1.4.1157",
+    "@reltio/mdm-sdk": "^1.4.1157",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",