@reltio/components 1.4.2105 → 1.4.2107

package/ColumnsSettings/ColumnsSettings.d.ts

@@ -7,6 +7,7 @@ type Props = {
     title?: string;
     tooltipTitle?: string;
     inputPlaceholder?: string;
+    disabled?: boolean;
 };
-export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle, inputPlaceholder }: Props) => React.JSX.Element;
+export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle, inputPlaceholder, disabled }: Props) => React.JSX.Element;
 export {};

package/ColumnsSettings/ColumnsSettings.js

@@ -6,7 +6,7 @@ import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import { ColumnsSettingsPopup } from './components/ColumnsSettingsPopup';
 import { getChildColumns, isColumnSelected } from './helpers';
 export var ColumnsSettings = function (_a) {
-    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder;
+    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder, disabled = _a.disabled;
     var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
     var closePopup = function () { return setAnchorEl(null); };
@@ -18,6 +18,6 @@ export var ColumnsSettings = function (_a) {
             : uniq(concat(selectedColumns, changedColumns)));
     }, [selectedColumns, onChangeColumns]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || i18n.text('Show/hide columns'), size: "L", icon: TableIcon, onClick: openPopup }),
+        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || i18n.text('Show/hide columns'), size: "L", icon: TableIcon, onClick: openPopup, disabled: disabled }),
         React.createElement(ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, inputPlaceholder: inputPlaceholder, selectedColumns: selectedColumns })));
 };

package/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.js

@@ -7,7 +7,7 @@ import { SelectionPopup } from '../../../SelectionPopup';
 import { buildColumnItems, isColumnSelected, isGroupColumn } from '../../helpers';
 import { useKeyboardNavigation } from '../../../hooks/useKeyboardNavigation';
 import { ColumnListItem } from '../ColumnListItem';
-import { useStyles } from './styles';
+import styles from './ColumnsSettingsPopup.module.css';
 var ITEM_HEIGHT = 32;
 var MAX_LIST_CONTAINER_HEIGHT = 300;
 var DEFAULT_MIN_CONTAINER_WIDTH = 308;
@@ -15,7 +15,6 @@ var CONTAINER_HEADER_HEIGHT = 108;
 var MIN_CONTAINER_HEIGHT = 140;
 export var ColumnsSettingsPopup = function (_a) {
     var anchorEl = _a.anchorEl, onClose = _a.onClose, title = _a.title, inputPlaceholder = _a.inputPlaceholder, columnsData = _a.columnsData, onColumnClick = _a.onColumnClick, selectedColumns = _a.selectedColumns, hideCheckBox = _a.hideCheckBox;
-    var styles = useStyles();
     var _b = useState(''), filterText = _b[0], setFilterText = _b[1];
     var clearFilter = function () { return setFilterText(''); };
     var groupedItems = useMemo(function () { return buildColumnItems(columnsData, filterText); }, [columnsData, filterText]);

package/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"popup":"ColumnsSettingsPopup-popup--BggX-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ColumnsSettingsPopup-popup--BggX-{min-width:"200px"}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/ColumnsSettings/ColumnsSettings.d.ts

@@ -7,6 +7,7 @@ type Props = {
     title?: string;
     tooltipTitle?: string;
     inputPlaceholder?: string;
+    disabled?: boolean;
 };
-export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle, inputPlaceholder }: Props) => React.JSX.Element;
+export declare const ColumnsSettings: ({ columnsData, selectedColumns, onChangeColumns, title, tooltipTitle, inputPlaceholder, disabled }: Props) => React.JSX.Element;
 export {};

package/cjs/ColumnsSettings/ColumnsSettings.js

@@ -35,7 +35,7 @@ var SmallIconButton_1 = require("../SmallIconButton");
 var ColumnsSettingsPopup_1 = require("./components/ColumnsSettingsPopup");
 var helpers_1 = require("./helpers");
 var ColumnsSettings = function (_a) {
-    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder;
+    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder, disabled = _a.disabled;
     var _b = (0, react_1.useState)(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
     var closePopup = function () { return setAnchorEl(null); };
@@ -47,7 +47,7 @@ var ColumnsSettings = function (_a) {
             : (0, ramda_1.uniq)((0, ramda_1.concat)(selectedColumns, changedColumns)));
     }, [selectedColumns, onChangeColumns]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Show/hide columns'), size: "L", icon: Table_1.default, onClick: openPopup }),
+        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || ui_i18n_1.default.text('Show/hide columns'), size: "L", icon: Table_1.default, onClick: openPopup, disabled: disabled }),
         react_1.default.createElement(ColumnsSettingsPopup_1.ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, inputPlaceholder: inputPlaceholder, selectedColumns: selectedColumns })));
 };
 exports.ColumnsSettings = ColumnsSettings;

package/cjs/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.js

@@ -36,7 +36,7 @@ var SelectionPopup_1 = require("../../../SelectionPopup");
 var helpers_1 = require("../../helpers");
 var useKeyboardNavigation_1 = require("../../../hooks/useKeyboardNavigation");
 var ColumnListItem_1 = require("../ColumnListItem");
-var styles_1 = require("./styles");
+var ColumnsSettingsPopup_module_css_1 = __importDefault(require("./ColumnsSettingsPopup.module.css"));
 var ITEM_HEIGHT = 32;
 var MAX_LIST_CONTAINER_HEIGHT = 300;
 var DEFAULT_MIN_CONTAINER_WIDTH = 308;
@@ -44,7 +44,6 @@ var CONTAINER_HEADER_HEIGHT = 108;
 var MIN_CONTAINER_HEIGHT = 140;
 var ColumnsSettingsPopup = function (_a) {
     var anchorEl = _a.anchorEl, onClose = _a.onClose, title = _a.title, inputPlaceholder = _a.inputPlaceholder, columnsData = _a.columnsData, onColumnClick = _a.onColumnClick, selectedColumns = _a.selectedColumns, hideCheckBox = _a.hideCheckBox;
-    var styles = (0, styles_1.useStyles)();
     var _b = (0, react_1.useState)(''), filterText = _b[0], setFilterText = _b[1];
     var clearFilter = function () { return setFilterText(''); };
     var groupedItems = (0, react_1.useMemo)(function () { return (0, helpers_1.buildColumnItems)(columnsData, filterText); }, [columnsData, filterText]);
@@ -68,7 +67,7 @@ var ColumnsSettingsPopup = function (_a) {
     };
     var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * items.length);
     var containerHeight = Math.max(MIN_CONTAINER_HEIGHT, listHeight + CONTAINER_HEADER_HEIGHT);
-    return (react_1.default.createElement(SelectionPopup_1.SelectionPopup, { className: styles.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, onSearch: setFilterText, inputPlaceholder: inputPlaceholder, title: title || ui_i18n_1.default.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
+    return (react_1.default.createElement(SelectionPopup_1.SelectionPopup, { className: ColumnsSettingsPopup_module_css_1.default.popup, open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, onSearch: setFilterText, inputPlaceholder: inputPlaceholder, title: title || ui_i18n_1.default.text('Show/hide columns'), containerWidth: containerWidth, containerHeight: containerHeight, searchInputOnKeyDown: handleKeyDown },
         react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, { fixedTitle: false, height: listHeight, renderItem: renderColumnItem, items: items, getItemSize: function () { return ITEM_HEIGHT; }, focusIndex: focusIndex })));
 };
 exports.ColumnsSettingsPopup = ColumnsSettingsPopup;

package/cjs/ColumnsSettings/components/ColumnsSettingsPopup/ColumnsSettingsPopup.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"popup":"ColumnsSettingsPopup-popup--BggX-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ColumnsSettingsPopup-popup--BggX-{min-width:"200px"}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/hooks/useSegmentsLoader/useSegmentsLoader.d.ts

@@ -4,9 +4,10 @@ type Props = {
     sorting?: SortingField;
     rowsPerPage: number;
     page: number;
+    enabled: boolean;
     filters?: SegmentationFilters;
 };
-export declare const useSegmentsLoader: ({ sorting, rowsPerPage, page, filters }: Props) => {
+export declare const useSegmentsLoader: ({ sorting, rowsPerPage, page, filters, enabled }: Props) => {
     state: RequestStates;
     segments: NewSegment[];
     total: number;

package/cjs/hooks/useSegmentsLoader/useSegmentsLoader.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -44,11 +55,12 @@ var types_1 = require("../../types");
 var segments_1 = require("../../helpers/segments");
 var PageRequestsAbortingContext_1 = require("../../contexts/PageRequestsAbortingContext");
 var useSegmentsLoader = function (_a) {
-    var sorting = _a.sorting, rowsPerPage = _a.rowsPerPage, page = _a.page, filters = _a.filters;
+    var sorting = _a.sorting, rowsPerPage = _a.rowsPerPage, page = _a.page, filters = _a.filters, enabled = _a.enabled;
     var signal = (0, react_1.useContext)(PageRequestsAbortingContext_1.PageRequestsAbortingContext);
     var _b = (0, react_1.useState)(types_1.RequestStates.INIT), requestState = _b[0], setRequestState = _b[1];
     var _c = (0, react_1.useState)([]), segments = _c[0], setSegments = _c[1];
     var _d = (0, react_1.useState)(0), total = _d[0], setTotal = _d[1];
+    var controllerRef = (0, react_1.useRef)(null);
     var _e = sorting || {}, sort = _e.field, order = _e.order;
     var filterString = (0, segments_1.buildSegmentsFilterString)(filters);
     var params = (0, react_1.useMemo)(function () {
@@ -62,28 +74,32 @@ var useSegmentsLoader = function (_a) {
         });
     }, [sort, order, rowsPerPage, page, filterString, signal]);
     var loadRequest = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var controller, response, error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
+                    (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+                    controller = new AbortController();
+                    controllerRef.current = controller;
                     setRequestState(types_1.RequestStates.LOADING);
-                    _a.label = 1;
+                    _b.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, (0, mdm_sdk_1.getSegments)(params)];
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, (0, mdm_sdk_1.getSegments)(__assign(__assign({}, params), { signal: controller.signal }))];
                 case 2:
-                    response = _a.sent();
+                    response = _b.sent();
                     setSegments(response.segments || []);
                     setTotal(response.total);
                     setRequestState(types_1.RequestStates.LOADED);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_1 = _a.sent();
+                    error_1 = _b.sent();
+                    if ((0, mdm_sdk_1.isAbortError)(error_1))
+                        return [2 /*return*/];
                     console.warn(error_1);
-                    if (!(0, mdm_sdk_1.isAbortError)(error_1)) {
-                        setSegments([]);
-                        setTotal(0);
-                    }
+                    setSegments([]);
+                    setTotal(0);
                     setRequestState(types_1.RequestStates.ERROR);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
@@ -91,8 +107,14 @@ var useSegmentsLoader = function (_a) {
         });
     }); }, [params]);
     (0, react_1.useEffect)(function () {
-        loadRequest();
-    }, [loadRequest]);
+        if (enabled) {
+            loadRequest();
+        }
+        return function () {
+            var _a;
+            (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        };
+    }, [loadRequest, enabled]);
     return {
         state: requestState,
         segments: segments,

package/hooks/useSegmentsLoader/useSegmentsLoader.d.ts

@@ -4,9 +4,10 @@ type Props = {
     sorting?: SortingField;
     rowsPerPage: number;
     page: number;
+    enabled: boolean;
     filters?: SegmentationFilters;
 };
-export declare const useSegmentsLoader: ({ sorting, rowsPerPage, page, filters }: Props) => {
+export declare const useSegmentsLoader: ({ sorting, rowsPerPage, page, filters, enabled }: Props) => {
     state: RequestStates;
     segments: NewSegment[];
     total: number;

package/hooks/useSegmentsLoader/useSegmentsLoader.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -34,18 +45,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
 import { reject } from 'ramda';
 import { getSegments, isAbortError, isEmptyValue } from '@reltio/mdm-sdk';
 import { RequestStates } from '../../types';
 import { buildSegmentsFilterString } from '../../helpers/segments';
 import { PageRequestsAbortingContext } from '../../contexts/PageRequestsAbortingContext';
 export var useSegmentsLoader = function (_a) {
-    var sorting = _a.sorting, rowsPerPage = _a.rowsPerPage, page = _a.page, filters = _a.filters;
+    var sorting = _a.sorting, rowsPerPage = _a.rowsPerPage, page = _a.page, filters = _a.filters, enabled = _a.enabled;
     var signal = useContext(PageRequestsAbortingContext);
     var _b = useState(RequestStates.INIT), requestState = _b[0], setRequestState = _b[1];
     var _c = useState([]), segments = _c[0], setSegments = _c[1];
     var _d = useState(0), total = _d[0], setTotal = _d[1];
+    var controllerRef = useRef(null);
     var _e = sorting || {}, sort = _e.field, order = _e.order;
     var filterString = buildSegmentsFilterString(filters);
     var params = useMemo(function () {
@@ -59,28 +71,32 @@ export var useSegmentsLoader = function (_a) {
         });
     }, [sort, order, rowsPerPage, page, filterString, signal]);
     var loadRequest = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var controller, response, error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
+                    (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+                    controller = new AbortController();
+                    controllerRef.current = controller;
                     setRequestState(RequestStates.LOADING);
-                    _a.label = 1;
+                    _b.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, getSegments(params)];
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, getSegments(__assign(__assign({}, params), { signal: controller.signal }))];
                 case 2:
-                    response = _a.sent();
+                    response = _b.sent();
                     setSegments(response.segments || []);
                     setTotal(response.total);
                     setRequestState(RequestStates.LOADED);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_1 = _a.sent();
+                    error_1 = _b.sent();
+                    if (isAbortError(error_1))
+                        return [2 /*return*/];
                     console.warn(error_1);
-                    if (!isAbortError(error_1)) {
-                        setSegments([]);
-                        setTotal(0);
-                    }
+                    setSegments([]);
+                    setTotal(0);
                     setRequestState(RequestStates.ERROR);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
@@ -88,8 +104,14 @@ export var useSegmentsLoader = function (_a) {
         });
     }); }, [params]);
     useEffect(function () {
-        loadRequest();
-    }, [loadRequest]);
+        if (enabled) {
+            loadRequest();
+        }
+        return function () {
+            var _a;
+            (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        };
+    }, [loadRequest, enabled]);
     return {
         state: requestState,
         segments: segments,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2105",
+  "version": "1.4.2107",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1942",
+    "@reltio/mdm-sdk": "^1.4.1944",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",

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

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

package/ColumnsSettings/components/ColumnsSettingsPopup/styles.js

@@ -1,6 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    popup: {
-        minWidth: '200px'
-    }
-});

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

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

package/cjs/ColumnsSettings/components/ColumnsSettingsPopup/styles.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)({
-    popup: {
-        minWidth: '200px'
-    }
-});