@reltio/components 1.4.808 → 1.4.812

package/components/ProfileBand/styles.d.ts

@@ -1,2 +1,2 @@
 export default useStyles;
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "entityType" | "inactive" | "secondaryLabel" | "profileIcon" | "badge" | "profileBandWrapper" | "profileBand" | "imageProfileIcon" | "profileInfo" | "businessCard" | "specialInfo" | "entityId" | "scores">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "secondaryLabel" | "entityType" | "inactive" | "profileIcon" | "badge" | "profileBandWrapper" | "profileBand" | "imageProfileIcon" | "profileInfo" | "businessCard" | "specialInfo" | "entityId" | "scores">;

package/components/ReltioMap/EntityMarker/EntityMarker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MarkerProps } from '@react-google-maps/api';
+import { EntityMarker as EntityMarkerType } from '../types';
+declare type Props = {
+    marker: EntityMarkerType;
+    onClick: (marker: EntityMarkerType) => void;
+} & Omit<MarkerProps, 'onClick' | 'icon' | 'position' | 'visible' | 'onMouseOver' | 'onMouseOut'>;
+declare const _default: React.MemoExoticComponent<({ marker, onClick, ...otherProps }: Props) => JSX.Element>;
+export default _default;

package/components/ReltioMap/EntityMarker/EntityMarker.js

@@ -0,0 +1,91 @@
+"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;
+    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 __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 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+var ProfileCard_1 = __importDefault(require("../../ProfileCard/ProfileCard"));
+var Popper_1 = __importDefault(require("../../Popper/Popper"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../contexts");
+var marker_inline_svg_1 = __importDefault(require("./icons/marker.inline.svg"));
+var marker_hover_inline_svg_1 = __importDefault(require("./icons/marker-hover.inline.svg"));
+var styles_1 = require("./styles");
+var HIDE_DEBOUNCE_INTERVAL = 50;
+var MARKER_WIDTH = 22;
+var MARKER_HEIGHT = 32;
+var MARKER_CARD_MARGIN = 8;
+var EntityMarker = function (_a) {
+    var marker = _a.marker, onClick = _a.onClick, otherProps = __rest(_a, ["marker", "onClick"]);
+    var styles = styles_1.useStyles();
+    var popperAnchor = react_1.useRef();
+    var _b = react_1.useState(false), hovered = _b[0], setHovered = _b[1];
+    var activeEntityUri = react_1.useContext(contexts_1.EntityMarkerContext).activeEntityUri;
+    var isActive = ramda_1.pathEq(['entity', 'uri'], activeEntityUri, marker);
+    var position = { lat: marker.point.lat, lng: marker.point.lng };
+    var setHoveredDebounced = react_1.useCallback(mdm_sdk_1.debounce(setHovered, HIDE_DEBOUNCE_INTERVAL), []);
+    var onMouseOver = react_1.useCallback(function () { return setHoveredDebounced(true); }, [setHoveredDebounced]);
+    var onMouseOut = react_1.useCallback(function () { return setHoveredDebounced(false); }, [setHoveredDebounced]);
+    var handleClick = react_1.useCallback(function () { return onClick(marker); }, [onClick, marker]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Popper_1.default, { anchorEl: popperAnchor.current, open: hovered, className: styles.popper, modal: false, placement: "top" },
+            react_1.default.createElement(ProfileCard_1.default, { entity: marker.entity, onMouseOver: onMouseOver, onMouseOut: onMouseOut })),
+        react_1.default.createElement(api_1.Marker, __assign({ icon: {
+                url: hovered || isActive ? marker_hover_inline_svg_1.default : marker_inline_svg_1.default,
+                // needed for IE:
+                scaledSize: new google.maps.Size(MARKER_WIDTH, MARKER_HEIGHT) //eslint-disable-line
+            }, position: position, onClick: handleClick, visible: marker.visible !== false, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, otherProps)),
+        react_1.default.createElement(api_1.InfoBox, { options: {
+                alignBottom: true,
+                pane: 'mapPane',
+                pixelOffset: new google.maps.Size(0, -(MARKER_HEIGHT + MARKER_CARD_MARGIN)),
+                closeBoxURL: '',
+                enableEventPropagation: true,
+                disableAutoPan: true
+            }, position: position },
+            react_1.default.createElement("span", { ref: popperAnchor }))));
+};
+exports.default = react_1.memo(EntityMarker);

package/components/ReltioMap/EntityMarker/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"popper">;

package/components/ReltioMap/EntityMarker/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    popper: {
+        maxWidth: '263px',
+        minWidth: '150px',
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
+        backgroundColor: 'white',
+        borderRadius: '2px'
+    }
+});

package/components/ReltioMap/MapControls/MapControlContainer/MapControlContrainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MapInstance } from '../../types';
+declare type Props = {
+    children: React.ReactNode;
+    className?: string;
+    position: number;
+    map: MapInstance;
+};
+export declare const MapControlContainer: ({ children, className, position, map }: Props) => React.ReactPortal;
+export {};

package/components/ReltioMap/MapControls/MapControlContainer/MapControlContrainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapControlContainer = void 0;
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var MapControlContainer = function (_a) {
+    var children = _a.children, className = _a.className, position = _a.position, map = _a.map;
+    var _b = react_1.useState(null), controlElement = _b[0], setControlElement = _b[1];
+    react_1.useEffect(function () {
+        var controlDiv = document.createElement('div');
+        var divIndex = map.controls[position].length;
+        map.controls[position].push(controlDiv);
+        setControlElement(controlDiv);
+        return function () {
+            map.controls[position].removeAt(divIndex);
+        };
+    }, [map, position]);
+    react_1.useEffect(function () {
+        if (controlElement && className) {
+            controlElement.classList.add(className);
+        }
+    }, [className, controlElement]);
+    if (controlElement) {
+        return react_dom_1.createPortal(children, controlElement);
+    }
+    return null;
+};
+exports.MapControlContainer = MapControlContainer;

package/components/ReltioMap/MapControls/TopCenterMapControls/TopCenterMapControls.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    isSearchOnMapMove: boolean;
+    onChangeIsSearchOnMapMove: (value: boolean) => void;
+};
+export declare const TopCenterMapControls: ({ isSearchOnMapMove, onChangeIsSearchOnMapMove }: Props) => JSX.Element;
+export {};

package/components/ReltioMap/MapControls/TopCenterMapControls/TopCenterMapControls.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 });
+exports.TopCenterMapControls = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var styles_1 = require("./styles");
+var TopCenterMapControls = function (_a) {
+    var isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
+    var styles = styles_1.useStyles();
+    var onChange = function (event) {
+        onChangeIsSearchOnMapMove(event.target.checked);
+    };
+    return (react_1.default.createElement(FormControlLabel_1.default, { classes: {
+            root: styles.container,
+            label: styles.label
+        }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, color: "primary", className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') }));
+};
+exports.TopCenterMapControls = TopCenterMapControls;

package/components/ReltioMap/MapControls/TopCenterMapControls/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "checkbox" | "container">;

package/components/ReltioMap/MapControls/TopCenterMapControls/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        height: '28px',
+        marginRight: '7px',
+        marginLeft: 0
+    },
+    label: {
+        fontSize: '11px',
+        alignSelf: 'center',
+        lineHeight: '13px',
+        marginLeft: '2px',
+        letterSpacing: 0
+    },
+    checkbox: {
+        width: '20px',
+        height: '20px',
+        padding: '5px',
+        '& svg': {
+            width: '16px',
+            height: '16px'
+        }
+    }
+});

package/components/ReltioMap/MapControls/TopRightMapControls/TopRightMapControls.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DrawingMode, DrawingModes } from '../../types';
+export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, never>> & Partial<import("prop-types").InferPropsInner<Pick<{
+    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+    tooltipPlacement: import("prop-types").Requireable<string>;
+    showForDisabled: import("prop-types").Requireable<boolean>;
+}, "tooltipTitle" | "tooltipPlacement" | "showForDisabled">>> & {
+    children?: React.ReactNode;
+    color?: import("@material-ui/core").PropTypes.Color;
+    disabled?: boolean;
+    disableElevation?: boolean;
+    disableFocusRipple?: boolean;
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    href?: string;
+    size?: "medium" | "large" | "small";
+    startIcon?: React.ReactNode;
+    variant?: "text" | "outlined" | "contained";
+} & {
+    action?: React.Ref<import("@material-ui/core").ButtonBaseActions>;
+    buttonRef?: React.Ref<unknown>;
+    centerRipple?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    disableRipple?: boolean;
+    disableTouchRipple?: boolean;
+    focusRipple?: boolean;
+    focusVisibleClassName?: string;
+    onFocusVisible?: React.FocusEventHandler<any>;
+    tabIndex?: string | number;
+    TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps>;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core/Button").ButtonTypeMap<{}, "button">>> & Pick<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}, "type" | "hidden" | "name" | "prefix" | "value" | "defaultValue" | "id" | "title" | "translate" | "ref" | "onScroll" | "form" | "slot" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget">>;
+declare type Props = {
+    onDrawingModeChanged: (value: DrawingMode | null) => void;
+    drawingMode: DrawingMode | null;
+    drawingModes: DrawingModes;
+    hasActiveOverlay: boolean;
+    onClearOverlay: () => void;
+};
+export declare const TopRightMapControls: ({ drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => JSX.Element;
+export {};

package/components/ReltioMap/MapControls/TopRightMapControls/TopRightMapControls.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopRightMapControls = exports.ButtonWithTooltip = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var HOCs_1 = require("../../../../HOCs");
+var HighlightOff_1 = __importDefault(require("@material-ui/icons/HighlightOff"));
+var constants_1 = require("../../constants");
+var radius_svg_1 = __importDefault(require("./icons/radius.svg"));
+var draw_svg_1 = __importDefault(require("./icons/draw.svg"));
+var styles_1 = require("./styles");
+exports.ButtonWithTooltip = HOCs_1.withTooltip(Button_1.default);
+var getIcon = function (mode) {
+    switch (mode) {
+        case constants_1.MAP_DRAWING_MODES.CIRCLE:
+            return radius_svg_1.default;
+        case constants_1.MAP_DRAWING_MODES.POLYGON:
+            return draw_svg_1.default;
+        default:
+            return null;
+    }
+};
+var TopRightMapControls = function (_a) {
+    var drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
+    var styles = styles_1.useStyles();
+    var changeDrawingModeTo = function (drawingMode) { return function () {
+        onDrawingModeChanged(drawingMode);
+    }; };
+    return (react_1.default.createElement("div", { className: styles.container }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
+        react_1.default.createElement(HighlightOff_1.default, { className: styles.icon }))) : (drawingModes.map(function (mode) {
+        var Icon = getIcon(mode);
+        return (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
+            react_1.default.createElement(Icon, { className: styles.icon })));
+    }))));
+};
+exports.TopRightMapControls = TopRightMapControls;

package/components/ReltioMap/MapControls/TopRightMapControls/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "icon" | "container">;

package/components/ReltioMap/MapControls/TopRightMapControls/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        margin: '2px',
+        display: 'flex',
+        alignItems: 'center'
+    },
+    button: {
+        color: 'rgba(0,0,0,0.54)',
+        padding: 0,
+        height: '24px',
+        width: '24px',
+        minWidth: 0
+    },
+    icon: {
+        width: '20px',
+        height: '20px'
+    }
+});

package/components/ReltioMap/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const MAP_DRAWING_MODES: {
+    CIRCLE: string;
+    POLYGON: string;
+};
+export declare const DEFAULT_OVERLAY_OPTIONS: {
+    fillColor: string;
+    fillOpacity: number;
+    strokeWeight: number;
+    strokeColor: string;
+    clickable: boolean;
+    editable: boolean;
+    zIndex: number;
+};
+export declare const MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.MAP_DRAWING_MODES = void 0;
+exports.MAP_DRAWING_MODES = {
+    CIRCLE: 'circle',
+    POLYGON: 'polygon'
+};
+exports.DEFAULT_OVERLAY_OPTIONS = {
+    fillColor: 'rgb(242,82,82)',
+    fillOpacity: 0.1,
+    strokeWeight: 2,
+    strokeColor: '#F25252',
+    clickable: false,
+    editable: true,
+    zIndex: 1
+};
+exports.MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/helpers/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="google.maps" />
+import { DrawingMode, EntityMarker, Overlay, MapInstance } from '../types';
+export declare const getMapBoundsPolygon: (map: MapInstance) => any[];
+export declare const getDrawingMode: (drawingMode: DrawingMode) => google.maps.drawing.OverlayType.CIRCLE | google.maps.drawing.OverlayType.POLYGON;
+export declare const fitMapBoundsForMarkers: (markers: EntityMarker[], map: MapInstance, overlay: Overlay) => void;
+export declare const fitMapBoundsForOverlay: (map: MapInstance, overlay: Overlay, existingBounds?: any) => void;

package/components/ReltioMap/helpers/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitMapBoundsForOverlay = exports.fitMapBoundsForMarkers = exports.getDrawingMode = exports.getMapBoundsPolygon = void 0;
+var constants_1 = require("../constants");
+var getMapBoundsPolygon = function (map) {
+    var bounds = map.getBounds();
+    var ne = bounds.getNorthEast();
+    var sw = bounds.getSouthWest();
+    var neLat = ne.lat(), neLng = ne.lng(), swLat = sw.lat(), swLng = sw.lng();
+    var additionalPoint1 = [];
+    var additionalPoint2 = [];
+    if (!((neLng === 180 && swLng === -180) || (neLng === -180 && swLng === 180))) {
+        // excluding corner case when we see more than one "map unfolding" (in this case google maps automatically set 180 and -180),
+        // we can't describe map bounds as just rectangle, because lng distance can be more than 180",
+        // so we need to add additional points to have correct polygon
+        var center = bounds.getCenter();
+        additionalPoint1.push([neLat, center.lng()]);
+        additionalPoint2.push([swLat, center.lng()]);
+    }
+    return __spreadArray(__spreadArray(__spreadArray(__spreadArray([[neLat, neLng]], additionalPoint1), [[neLat, swLng], [swLat, swLng]]), additionalPoint2), [[swLat, neLng]]);
+};
+exports.getMapBoundsPolygon = getMapBoundsPolygon;
+var getDrawingMode = function (drawingMode) {
+    switch (drawingMode) {
+        case constants_1.MAP_DRAWING_MODES.CIRCLE:
+            return window.google.maps.drawing.OverlayType.CIRCLE;
+        case constants_1.MAP_DRAWING_MODES.POLYGON:
+            return window.google.maps.drawing.OverlayType.POLYGON;
+        default:
+            return null;
+    }
+};
+exports.getDrawingMode = getDrawingMode;
+var fitMapBoundsForMarkers = function (markers, map, overlay) {
+    var bounds = new window.google.maps.LatLngBounds();
+    markers.forEach(function (marker) { return bounds.extend(marker.point); });
+    if (markers.length === 1) {
+        var center = bounds.getCenter();
+        bounds.extend(new window.google.maps.LatLng(center.lat() + constants_1.MAP_MINIMUM_SCALE_RADIUS, center.lng() + constants_1.MAP_MINIMUM_SCALE_RADIUS));
+        bounds.extend(new window.google.maps.LatLng(center.lat() - constants_1.MAP_MINIMUM_SCALE_RADIUS, center.lng() - constants_1.MAP_MINIMUM_SCALE_RADIUS));
+    }
+    map.fitBounds(bounds);
+    if (overlay) {
+        exports.fitMapBoundsForOverlay(map, overlay, bounds);
+    }
+};
+exports.fitMapBoundsForMarkers = fitMapBoundsForMarkers;
+var fitMapBoundsForOverlay = function (map, overlay, existingBounds) {
+    if (overlay.path) {
+        var bounds_1 = existingBounds || new window.google.maps.LatLngBounds();
+        overlay.path.forEach(function (_a) {
+            var lat = _a.lat, lng = _a.lng;
+            return bounds_1.extend(new window.google.maps.LatLng(lat, lng));
+        });
+        map.fitBounds(bounds_1);
+    }
+};
+exports.fitMapBoundsForOverlay = fitMapBoundsForOverlay;

package/components/ReltioMap/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+/// <reference types="google.maps" />
+import { GoogleMapProps, MarkerClustererProps } from '@react-google-maps/api';
+import { DrawingModes, EntityMarker as Marker, MapBounds, Overlay, OverlayPath } from './types';
+declare type Props = {
+    markers: Marker[];
+    mapKey: string;
+    defaultZoom: GoogleMapProps['zoom'];
+    defaultCenter: GoogleMapProps['center'];
+    loadingElement: JSX.Element;
+    isSearchOnMapMove?: boolean;
+    isSearchEnabled?: boolean;
+    activeOverlay?: Overlay;
+    overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
+    drawingModes?: DrawingModes;
+    markerClusterer?: boolean;
+    markerClustererOptions?: MarkerClustererProps['options'];
+    mapContainerClassName: string;
+    onMapBoundsChanged?: (value: MapBounds | null) => void;
+    onOverlayUpdated?: (value: {
+        data: OverlayPath;
+        type: string;
+    }) => void;
+    onMarkerClicked?: (value: Marker) => void;
+};
+export declare const ReltioMap: ({ markers, mapKey, defaultZoom, defaultCenter, loadingElement, isSearchOnMapMove, isSearchEnabled, activeOverlay, overlayOptions, drawingModes, markerClusterer, markerClustererOptions, mapContainerClassName, onMapBoundsChanged, onOverlayUpdated, onMarkerClicked }: Props) => JSX.Element;
+export {};