@reltio/components 1.4.1636 → 1.4.1638

package/cjs/components/CollaborationItem/Comment/Comment.js

@@ -41,6 +41,7 @@ var CommentTarget_1 = require("../CommentTarget/CommentTarget");
 var CommentContent_1 = require("../CommentContent/CommentContent");
 var Avatar_1 = require("../Avatar/Avatar");
 var contexts_1 = require("../../../contexts");
+var hooks_1 = require("../../../hooks");
 var utils_1 = require("../utils");
 var SendMessageArea_1 = require("../SendMessageArea/SendMessageArea");
 var styles_1 = require("./styles");
@@ -56,13 +57,7 @@ var Comment = function (_a) {
     var commentUri = (0, utils_1.createEditedCommentUri)(comment);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingComment = (0, react_1.useCallback)(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    (0, react_1.useEffect)(function () {
-        if (isEditing) {
-            var position = inputRef.current.value.length;
-            inputRef.current.focus();
-            inputRef.current.setSelectionRange(position, position);
-        }
-    }, [isEditing]);
+    (0, hooks_1.useAutoFocus)(inputRef, isEditing);
     var menuItems = (0, react_1.useMemo)(function () {
         return isResolved
             ? [

package/cjs/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -39,6 +39,7 @@ var Avatar_1 = require("../Avatar/Avatar");
 var CommentContent_1 = require("../CommentContent/CommentContent");
 var utils_1 = require("../utils");
 var contexts_1 = require("../../../contexts");
+var hooks_1 = require("../../../hooks");
 var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var SendMessageArea_1 = require("../SendMessageArea/SendMessageArea");
@@ -53,11 +54,7 @@ var RepliedComment = function (_a) {
     var commentUri = (0, utils_1.createEditedReplyUri)(comment, reply);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingReply = (0, react_1.useCallback)(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    (0, react_1.useEffect)(function () {
-        if (isEditing) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
+    (0, hooks_1.useAutoFocus)(inputRef, isEditing);
     var styles = (0, styles_1.useStyles)();
     var menuItems = (0, react_1.useMemo)(function () { return [
         {

package/cjs/components/StepNavigation/ProgressButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = {
+    isInProgress: boolean;
+    disabled: boolean;
+    onClick: () => void;
+    circularColor?: 'primary' | 'secondary' | 'inherit';
+    children: React.ReactNode;
+    className?: string;
+    [key: string]: any;
+};
+declare const ProgressButton: ({ isInProgress, disabled, circularColor, className, children, onClick, ...otherButtonProps }: Props) => JSX.Element;
+export default ProgressButton;

package/cjs/components/StepNavigation/ProgressButton.js

@@ -0,0 +1,41 @@
+"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 __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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+var styles_1 = require("./styles");
+var ProgressButton = function (_a) {
+    var isInProgress = _a.isInProgress, disabled = _a.disabled, _b = _a.circularColor, circularColor = _b === void 0 ? 'primary' : _b, className = _a.className, children = _a.children, onClick = _a.onClick, otherButtonProps = __rest(_a, ["isInProgress", "disabled", "circularColor", "className", "children", "onClick"]);
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement(Button_1.default, __assign({}, otherButtonProps, { className: (0, classnames_1.default)(styles.progressButtonWrapper, className), onClick: onClick, disabled: disabled || isInProgress }),
+        children,
+        isInProgress && (react_1.default.createElement("div", { className: styles.progress, "data-reltio-id": "reltio-circular-load-indicator" },
+            react_1.default.createElement(CircularProgress_1.default, { size: 24, color: circularColor })))));
+};
+exports.default = ProgressButton;

package/cjs/components/StepNavigation/StepNavigation.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    activeStep: number;
+    steps: Array<{
+        label: string;
+        enabled?: boolean;
+    }>;
+    isPending?: boolean;
+    onConfirm?: () => void;
+    onChangeStep: (step: number) => void;
+};
+declare const StepNavigation: ({ activeStep, steps, isPending, onConfirm, onChangeStep }: Props) => JSX.Element;
+export default StepNavigation;

package/cjs/components/StepNavigation/StepNavigation.js

@@ -0,0 +1,62 @@
+"use strict";
+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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var Stepper_1 = __importDefault(require("@mui/material/Stepper"));
+var Step_1 = __importDefault(require("@mui/material/Step"));
+var StepButton_1 = __importDefault(require("@mui/material/StepButton"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var ProgressButton_1 = __importDefault(require("./ProgressButton"));
+var styles_1 = require("./styles");
+var StepNavigation = function (_a) {
+    var activeStep = _a.activeStep, steps = _a.steps, _b = _a.isPending, isPending = _b === void 0 ? false : _b, onConfirm = _a.onConfirm, onChangeStep = _a.onChangeStep;
+    var styles = (0, styles_1.useStyles)();
+    var isLastStep = activeStep === steps.length - 1;
+    var setActiveStep = function (step) {
+        if (step !== activeStep) {
+            onChangeStep(step);
+        }
+    };
+    var isEnabled = (0, ramda_1.propOr)(true, 'enabled');
+    var onBack = function (currentStep) {
+        if (currentStep > 0) {
+            var prevStep = currentStep - 1;
+            if (isEnabled(steps[prevStep])) {
+                setActiveStep(prevStep);
+            }
+            else {
+                onBack(prevStep);
+            }
+        }
+    };
+    var onNext = function (currentStep) {
+        if (currentStep < steps.length - 1) {
+            var nextStep = currentStep + 1;
+            if (isEnabled(steps[nextStep])) {
+                setActiveStep(nextStep);
+            }
+            else {
+                onNext(nextStep);
+            }
+        }
+    };
+    var showConfirm = isLastStep && !!onConfirm;
+    var isNextButtonEnabled = showConfirm || (0, ramda_1.any)(isEnabled, (0, ramda_1.drop)(activeStep + 1, steps));
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement("div", { className: styles.placeholder }),
+        react_1.default.createElement(Stepper_1.default, { nonLinear: true, activeStep: activeStep, className: styles.stepper }, steps.map(function (_a, index) {
+            var label = _a.label, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+            var disabledStep = !enabled || isPending;
+            var completedStep = !disabledStep && index < activeStep;
+            return (react_1.default.createElement(Step_1.default, { key: label, completed: completedStep, disabled: disabledStep },
+                react_1.default.createElement(StepButton_1.default, { className: styles.stepButton, onClick: function () { return setActiveStep(index); }, "data-reltio-id": "reltio-search-bulk-update-".concat(index) }, label)));
+        })),
+        react_1.default.createElement("div", { className: styles.buttons },
+            activeStep > 0 && (react_1.default.createElement(Button_1.default, { variant: "outlined", className: styles.backButton, onClick: function () { return onBack(activeStep); }, disabled: isPending, "data-reltio-id": "reltio-search-bulk-update-back" }, ui_i18n_1.default.text('Back'))),
+            react_1.default.createElement(ProgressButton_1.default, { variant: "contained", color: "primary", disabled: !isNextButtonEnabled, isInProgress: isPending, onClick: isLastStep ? onConfirm : function () { return onNext(activeStep); }, "data-reltio-id": "reltio-search-bulk-update-".concat(isLastStep ? 'confirm' : 'continue') }, showConfirm ? ui_i18n_1.default.text('Confirm') : ui_i18n_1.default.text('Continue')))));
+};
+exports.default = StepNavigation;

package/cjs/components/StepNavigation/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"progress" | "container" | "placeholder" | "buttons" | "stepper" | "stepButton" | "backButton" | "progressButtonWrapper">;
+export { useStyles };

package/cjs/components/StepNavigation/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var useStyles = (0, styles_1.makeStyles)(function () { return ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+    },
+    placeholder: {
+        flex: 1
+    },
+    stepper: {
+        padding: '0 24px',
+        flex: 2
+    },
+    stepButton: {
+        margin: '-20px -16px',
+        padding: '20px 16px',
+        '& svg text': {
+            textAnchor: 'middle'
+        }
+    },
+    buttons: {
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'flex-end'
+    },
+    backButton: {
+        marginRight: '8px',
+        border: '1px solid rgba(0, 0, 0, 0.23)'
+    },
+    progressButtonWrapper: {
+        position: 'relative'
+    },
+    progress: {
+        position: 'absolute',
+        left: 'calc(50% - 12px)',
+        top: 'calc(50% - 12px)'
+    }
+}); });
+exports.useStyles = useStyles;

package/cjs/components/TenantLabel/TenantLabel.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+};
+declare const TenantLabel: ({ className }: Props) => JSX.Element;
+export default TenantLabel;

package/cjs/components/TenantLabel/TenantLabel.js

@@ -0,0 +1,23 @@
+"use strict";
+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_redux_1 = require("react-redux");
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var Tenant_1 = __importDefault(require("../../icons/Tenant"));
+var styles_1 = require("./styles");
+var TenantLabel = function (_a) {
+    var className = _a.className;
+    var styles = (0, styles_1.useStyles)();
+    var customerTenantLabel = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getTenantName);
+    var environmentName = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getEnvironment);
+    var tenantLabelWithEnv = "".concat(customerTenantLabel).concat(environmentName ? ' - ' + environmentName.toUpperCase() : '');
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.labelWrapper, className) },
+        react_1.default.createElement(Tenant_1.default, { className: styles.tenantIcon, "data-reltio-id": "reltio-tenant-icon" }),
+        react_1.default.createElement(Typography_1.default, { className: styles.tenantLabel }, tenantLabelWithEnv)));
+};
+exports.default = TenantLabel;

package/cjs/components/TenantLabel/styles.d.ts

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

package/cjs/components/TenantLabel/styles.js

@@ -0,0 +1,22 @@
+"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 () { return ({
+    labelWrapper: {
+        height: '24px',
+        display: 'inline-flex',
+        alignItems: 'center'
+    },
+    tenantIcon: {
+        height: '24px',
+        width: '24px',
+        marginRight: '4px',
+        opacity: 0.38
+    },
+    tenantLabel: {
+        lineHeight: '15px',
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.38)'
+    }
+}); });

package/cjs/components/index.d.ts

@@ -150,3 +150,5 @@ export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';
 export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
 export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
+export { default as TenantLabel } from './TenantLabel/TenantLabel';
+export { default as StepNavigation } from './StepNavigation/StepNavigation';

package/cjs/components/index.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = 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.DescriptionIcon = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = 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.SimpleMatchRulesBlock = exports.MatchRuleVariant = 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 = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
 exports.MultilineMenuItem = exports.RelevanceScoreBadge = exports.RequiredMark = exports.HierarchyNodeTitle = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = 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.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = void 0;
+exports.StepNavigation = exports.TenantLabel = 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; } });
@@ -322,3 +323,7 @@ var RelevanceScoreBadge_1 = require("./RelevanceScoreBadge/RelevanceScoreBadge")
 Object.defineProperty(exports, "RelevanceScoreBadge", { enumerable: true, get: function () { return RelevanceScoreBadge_1.RelevanceScoreBadge; } });
 var MultilineMenuItem_1 = require("./MultilineMenuItem/MultilineMenuItem");
 Object.defineProperty(exports, "MultilineMenuItem", { enumerable: true, get: function () { return __importDefault(MultilineMenuItem_1).default; } });
+var TenantLabel_1 = require("./TenantLabel/TenantLabel");
+Object.defineProperty(exports, "TenantLabel", { enumerable: true, get: function () { return __importDefault(TenantLabel_1).default; } });
+var StepNavigation_1 = require("./StepNavigation/StepNavigation");
+Object.defineProperty(exports, "StepNavigation", { enumerable: true, get: function () { return __importDefault(StepNavigation_1).default; } });

package/cjs/hooks/index.d.ts

@@ -25,3 +25,4 @@ export { useSavedStateForEntityType } from './useSavedStateForEntityType';
 export { useSnackbar } from './useSnackbar';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLayoutResetter } from './useLayoutResetter';
+export { useAutoFocus } from './useAutoFocus';

package/cjs/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
+exports.useAutoFocus = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
 var useScrollToAttributeError_1 = require("./useScrollToAttributeError/useScrollToAttributeError");
 Object.defineProperty(exports, "useScrollToAttributeError", { enumerable: true, get: function () { return useScrollToAttributeError_1.useScrollToAttributeError; } });
 var useActions_1 = require("./useActions");
@@ -55,3 +55,5 @@ var useIsMountedRef_1 = require("./useIsMountedRef");
 Object.defineProperty(exports, "useIsMountedRef", { enumerable: true, get: function () { return useIsMountedRef_1.useIsMountedRef; } });
 var useLayoutResetter_1 = require("./useLayoutResetter");
 Object.defineProperty(exports, "useLayoutResetter", { enumerable: true, get: function () { return useLayoutResetter_1.useLayoutResetter; } });
+var useAutoFocus_1 = require("./useAutoFocus");
+Object.defineProperty(exports, "useAutoFocus", { enumerable: true, get: function () { return useAutoFocus_1.useAutoFocus; } });

package/cjs/hooks/useAutoFocus.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useAutoFocus: (inputRef: MutableRefObject<HTMLInputElement>, isEditing: boolean) => void;

package/cjs/hooks/useAutoFocus.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoFocus = void 0;
+var react_1 = require("react");
+var useAutoFocus = function (inputRef, isEditing) {
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        if (isEditing) {
+            var position = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length;
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.setSelectionRange(position, position);
+        }
+    }, [inputRef, isEditing]);
+};
+exports.useAutoFocus = useAutoFocus;

package/cjs/icons/Tenant.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgTenant: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgTenant;

package/cjs/icons/Tenant.js

@@ -0,0 +1,22 @@
+"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 __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 SvgTenant = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M2 0h13v2H8v19h12V6h-9V4h11v19H2V0zm9 8h7v2h-7V8zm0 4h7v2h-7v-2zm0 4h7v2h-7v-2zM4 4v2h2V4H4zm0 8v2h2v-2H4zm0-4v2h2V8H4zm0 8v2h2v-2H4z", fill: "#000", stroke: "none", strokeWidth: 1, fillRule: "evenodd" })));
+};
+exports.default = SvgTenant;

package/esm/components/CollaborationItem/Comment/Comment.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useContext, useRef, useEffect, useCallback } from 'react';
+import React, { useMemo, useContext, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import Link from '@mui/material/Link';
@@ -12,6 +12,7 @@ import { CommentTarget } from '../CommentTarget/CommentTarget';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { Avatar } from '../Avatar/Avatar';
 import { CollaborationContext } from '../../../contexts';
+import { useAutoFocus } from '../../../hooks';
 import { createEditedCommentUri, formatDate } from '../utils';
 import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 import { useStyles } from './styles';
@@ -27,13 +28,7 @@ export var Comment = function (_a) {
     var commentUri = createEditedCommentUri(comment);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingComment = useCallback(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    useEffect(function () {
-        if (isEditing) {
-            var position = inputRef.current.value.length;
-            inputRef.current.focus();
-            inputRef.current.setSelectionRange(position, position);
-        }
-    }, [isEditing]);
+    useAutoFocus(inputRef, isEditing);
     var menuItems = useMemo(function () {
         return isResolved
             ? [

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useMemo, useEffect, useCallback } from 'react';
+import React, { useRef, useContext, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
@@ -10,6 +10,7 @@ import { Avatar } from '../Avatar/Avatar';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { createEditedReplyUri, formatDate } from '../utils';
 import { CollaborationContext } from '../../../contexts';
+import { useAutoFocus } from '../../../hooks';
 import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
@@ -24,11 +25,7 @@ export var RepliedComment = function (_a) {
     var commentUri = createEditedReplyUri(comment, reply);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingReply = useCallback(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    useEffect(function () {
-        if (isEditing) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
+    useAutoFocus(inputRef, isEditing);
     var styles = useStyles();
     var menuItems = useMemo(function () { return [
         {

package/esm/components/StepNavigation/ProgressButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = {
+    isInProgress: boolean;
+    disabled: boolean;
+    onClick: () => void;
+    circularColor?: 'primary' | 'secondary' | 'inherit';
+    children: React.ReactNode;
+    className?: string;
+    [key: string]: any;
+};
+declare const ProgressButton: ({ isInProgress, disabled, circularColor, className, children, onClick, ...otherButtonProps }: Props) => JSX.Element;
+export default ProgressButton;

package/esm/components/StepNavigation/ProgressButton.js

@@ -0,0 +1,36 @@
+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 __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 classnames from 'classnames';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useStyles } from './styles';
+var ProgressButton = function (_a) {
+    var isInProgress = _a.isInProgress, disabled = _a.disabled, _b = _a.circularColor, circularColor = _b === void 0 ? 'primary' : _b, className = _a.className, children = _a.children, onClick = _a.onClick, otherButtonProps = __rest(_a, ["isInProgress", "disabled", "circularColor", "className", "children", "onClick"]);
+    var styles = useStyles();
+    return (React.createElement(Button, __assign({}, otherButtonProps, { className: classnames(styles.progressButtonWrapper, className), onClick: onClick, disabled: disabled || isInProgress }),
+        children,
+        isInProgress && (React.createElement("div", { className: styles.progress, "data-reltio-id": "reltio-circular-load-indicator" },
+            React.createElement(CircularProgress, { size: 24, color: circularColor })))));
+};
+export default ProgressButton;

package/esm/components/StepNavigation/StepNavigation.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    activeStep: number;
+    steps: Array<{
+        label: string;
+        enabled?: boolean;
+    }>;
+    isPending?: boolean;
+    onConfirm?: () => void;
+    onChangeStep: (step: number) => void;
+};
+declare const StepNavigation: ({ activeStep, steps, isPending, onConfirm, onChangeStep }: Props) => JSX.Element;
+export default StepNavigation;

package/esm/components/StepNavigation/StepNavigation.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import { any, drop, propOr } from 'ramda';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepButton from '@mui/material/StepButton';
+import Button from '@mui/material/Button';
+import ProgressButton from './ProgressButton';
+import { useStyles } from './styles';
+var StepNavigation = function (_a) {
+    var activeStep = _a.activeStep, steps = _a.steps, _b = _a.isPending, isPending = _b === void 0 ? false : _b, onConfirm = _a.onConfirm, onChangeStep = _a.onChangeStep;
+    var styles = useStyles();
+    var isLastStep = activeStep === steps.length - 1;
+    var setActiveStep = function (step) {
+        if (step !== activeStep) {
+            onChangeStep(step);
+        }
+    };
+    var isEnabled = propOr(true, 'enabled');
+    var onBack = function (currentStep) {
+        if (currentStep > 0) {
+            var prevStep = currentStep - 1;
+            if (isEnabled(steps[prevStep])) {
+                setActiveStep(prevStep);
+            }
+            else {
+                onBack(prevStep);
+            }
+        }
+    };
+    var onNext = function (currentStep) {
+        if (currentStep < steps.length - 1) {
+            var nextStep = currentStep + 1;
+            if (isEnabled(steps[nextStep])) {
+                setActiveStep(nextStep);
+            }
+            else {
+                onNext(nextStep);
+            }
+        }
+    };
+    var showConfirm = isLastStep && !!onConfirm;
+    var isNextButtonEnabled = showConfirm || any(isEnabled, drop(activeStep + 1, steps));
+    return (React.createElement("div", { className: styles.container },
+        React.createElement("div", { className: styles.placeholder }),
+        React.createElement(Stepper, { nonLinear: true, activeStep: activeStep, className: styles.stepper }, steps.map(function (_a, index) {
+            var label = _a.label, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
+            var disabledStep = !enabled || isPending;
+            var completedStep = !disabledStep && index < activeStep;
+            return (React.createElement(Step, { key: label, completed: completedStep, disabled: disabledStep },
+                React.createElement(StepButton, { className: styles.stepButton, onClick: function () { return setActiveStep(index); }, "data-reltio-id": "reltio-search-bulk-update-".concat(index) }, label)));
+        })),
+        React.createElement("div", { className: styles.buttons },
+            activeStep > 0 && (React.createElement(Button, { variant: "outlined", className: styles.backButton, onClick: function () { return onBack(activeStep); }, disabled: isPending, "data-reltio-id": "reltio-search-bulk-update-back" }, i18n.text('Back'))),
+            React.createElement(ProgressButton, { variant: "contained", color: "primary", disabled: !isNextButtonEnabled, isInProgress: isPending, onClick: isLastStep ? onConfirm : function () { return onNext(activeStep); }, "data-reltio-id": "reltio-search-bulk-update-".concat(isLastStep ? 'confirm' : 'continue') }, showConfirm ? i18n.text('Confirm') : i18n.text('Continue')))));
+};
+export default StepNavigation;

package/esm/components/StepNavigation/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"progress" | "container" | "placeholder" | "buttons" | "stepper" | "stepButton" | "backButton" | "progressButtonWrapper">;
+export { useStyles };

package/esm/components/StepNavigation/styles.js

@@ -0,0 +1,41 @@
+import { makeStyles } from '@mui/styles';
+var useStyles = makeStyles(function () { return ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+    },
+    placeholder: {
+        flex: 1
+    },
+    stepper: {
+        padding: '0 24px',
+        flex: 2
+    },
+    stepButton: {
+        margin: '-20px -16px',
+        padding: '20px 16px',
+        '& svg text': {
+            textAnchor: 'middle'
+        }
+    },
+    buttons: {
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'flex-end'
+    },
+    backButton: {
+        marginRight: '8px',
+        border: '1px solid rgba(0, 0, 0, 0.23)'
+    },
+    progressButtonWrapper: {
+        position: 'relative'
+    },
+    progress: {
+        position: 'absolute',
+        left: 'calc(50% - 12px)',
+        top: 'calc(50% - 12px)'
+    }
+}); });
+export { useStyles };

package/esm/components/TenantLabel/TenantLabel.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+};
+declare const TenantLabel: ({ className }: Props) => JSX.Element;
+export default TenantLabel;

package/esm/components/TenantLabel/TenantLabel.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Typography from '@mui/material/Typography';
+import classnames from 'classnames';
+import mdmModule from '@reltio/mdm-module';
+import TenantIcon from '../../icons/Tenant';
+import { useStyles } from './styles';
+var TenantLabel = function (_a) {
+    var className = _a.className;
+    var styles = useStyles();
+    var customerTenantLabel = useSelector(mdmModule.selectors.getTenantName);
+    var environmentName = useSelector(mdmModule.selectors.getEnvironment);
+    var tenantLabelWithEnv = "".concat(customerTenantLabel).concat(environmentName ? ' - ' + environmentName.toUpperCase() : '');
+    return (React.createElement("div", { className: classnames(styles.labelWrapper, className) },
+        React.createElement(TenantIcon, { className: styles.tenantIcon, "data-reltio-id": "reltio-tenant-icon" }),
+        React.createElement(Typography, { className: styles.tenantLabel }, tenantLabelWithEnv)));
+};
+export default TenantLabel;

package/esm/components/TenantLabel/styles.d.ts

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

package/esm/components/TenantLabel/styles.js

@@ -0,0 +1,19 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles(function () { return ({
+    labelWrapper: {
+        height: '24px',
+        display: 'inline-flex',
+        alignItems: 'center'
+    },
+    tenantIcon: {
+        height: '24px',
+        width: '24px',
+        marginRight: '4px',
+        opacity: 0.38
+    },
+    tenantLabel: {
+        lineHeight: '15px',
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.38)'
+    }
+}); });

package/esm/components/index.d.ts

@@ -150,3 +150,5 @@ export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';
 export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
 export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
+export { default as TenantLabel } from './TenantLabel/TenantLabel';
+export { default as StepNavigation } from './StepNavigation/StepNavigation';

package/esm/components/index.js

@@ -150,3 +150,5 @@ export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';
 export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
 export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
+export { default as TenantLabel } from './TenantLabel/TenantLabel';
+export { default as StepNavigation } from './StepNavigation/StepNavigation';

package/esm/hooks/index.d.ts

@@ -25,3 +25,4 @@ export { useSavedStateForEntityType } from './useSavedStateForEntityType';
 export { useSnackbar } from './useSnackbar';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLayoutResetter } from './useLayoutResetter';
+export { useAutoFocus } from './useAutoFocus';

package/esm/hooks/index.js

@@ -25,3 +25,4 @@ export { useSavedStateForEntityType } from './useSavedStateForEntityType';
 export { useSnackbar } from './useSnackbar';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLayoutResetter } from './useLayoutResetter';
+export { useAutoFocus } from './useAutoFocus';

package/esm/hooks/useAutoFocus.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useAutoFocus: (inputRef: MutableRefObject<HTMLInputElement>, isEditing: boolean) => void;

package/esm/hooks/useAutoFocus.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+export var useAutoFocus = function (inputRef, isEditing) {
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (isEditing) {
+            var position = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length;
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.setSelectionRange(position, position);
+        }
+    }, [inputRef, isEditing]);
+};

package/esm/icons/Tenant.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgTenant: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgTenant;

package/esm/icons/Tenant.js

@@ -0,0 +1,17 @@
+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);
+};
+import React from 'react';
+var SvgTenant = function (props) {
+    return (React.createElement("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M2 0h13v2H8v19h12V6h-9V4h11v19H2V0zm9 8h7v2h-7V8zm0 4h7v2h-7v-2zm0 4h7v2h-7v-2zM4 4v2h2V4H4zm0 8v2h2v-2H4zm0-4v2h2V8H4zm0 8v2h2v-2H4z", fill: "#000", stroke: "none", strokeWidth: 1, fillRule: "evenodd" })));
+};
+export default SvgTenant;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1636",
+  "version": "1.4.1638",
   "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.1636",
-    "@reltio/mdm-sdk": "^1.4.1636",
+    "@reltio/mdm-module": "^1.4.1638",
+    "@reltio/mdm-sdk": "^1.4.1638",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",