@reltio/components 1.4.1388 → 1.4.1390

package/cjs/components/SelectionPopup/helpers.d.ts

@@ -15,7 +15,7 @@ declare type Props = {
         groupData: Item['item'];
     }) => void;
     selectedItems: string[];
-    onClose: (event: React.KeyboardEvent) => void;
+    onClose?: (event: React.KeyboardEvent) => void;
 };
 declare const useKeyboardNavigation: ({ items, open, onSelectFocusedItem, selectedItems, onClose }: Props) => {
     focusIndex: number;

package/cjs/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.d.ts

@@ -1,20 +1,12 @@
+/// <reference types="react" />
+import { AttributeType } from '@reltio/mdm-sdk';
+declare type Props = {
+    label: string;
+    popupTitle?: string;
+    data: AttributeType[];
+    parent?: AttributeType;
+    dense?: boolean;
+    onApply: (attributeTypes: AttributeType[]) => void;
+};
+declare const MoreAttributesButton: ({ label, popupTitle, data, parent, dense, onApply }: Props) => JSX.Element;
 export default MoreAttributesButton;
-declare function MoreAttributesButton({ label, popupTitle, data, parent, dense, onApply }: {
-    label: any;
-    popupTitle?: any;
-    data: any;
-    parent: any;
-    dense: any;
-    onApply: any;
-}): JSX.Element;
-declare namespace MoreAttributesButton {
-    namespace propTypes {
-        const label: PropTypes.Requireable<string>;
-        const popupTitle: PropTypes.Requireable<string>;
-        const data: PropTypes.Requireable<any[]>;
-        const parent: PropTypes.Requireable<object>;
-        const dense: PropTypes.Requireable<boolean>;
-        const onApply: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";

package/cjs/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.js

@@ -27,21 +27,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var classnames_1 = __importDefault(require("classnames"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var ramda_1 = require("ramda");
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var ListItem_1 = __importDefault(require("@material-ui/core/ListItem"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var styles_1 = require("./styles");
-var SelectionPopup_1 = __importDefault(require("../../../SelectionPopup/SelectionPopup"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var AttributeListItem_1 = __importDefault(require("../../../AttributeListItem/AttributeListItem"));
-var VirtualGroupedList_1 = __importDefault(require("../../../VirtualGroupedList/VirtualGroupedList"));
-var helpers_1 = require("../../../SelectionPopup/helpers");
+var SelectionPopup_1 = __importDefault(require("../../../SelectionPopup/SelectionPopup"));
 var Add_1 = __importDefault(require("@material-ui/icons/Add"));
 var Highlighter_1 = __importDefault(require("../../../Highlighter/Highlighter"));
+var helpers_1 = require("../../../SelectionPopup/helpers");
+var VirtualGroupedList_1 = __importDefault(require("../../../VirtualGroupedList/VirtualGroupedList"));
 var useMoreAttributesItems_1 = require("./useMoreAttributesItems");
+var styles_1 = require("./styles");
 var ITEM_HEIGHT = 28;
 var ITEM_GROUP_TITLE_HEIGHT = 40;
 var LIST_CONTAINER_WIDTH = 320;
@@ -99,16 +98,8 @@ var MoreAttributesButton = function (_a) {
             react_1.default.createElement(Add_1.default, { classes: { root: styles.icon } }),
             react_1.default.createElement("div", { className: styles.buttonLabel }, label)),
         react_1.default.createElement(SelectionPopup_1.default, { open: isOpen, className: (0, classnames_1.default)(styles.moreAttributesPopup, styles.popupContainer), anchorEl: inputRef.current, onClose: (0, ramda_1.pipe)(addSelectedAttributes, closePopup, clearFilter, clearSelectedItems), onSearch: setFilter, containerHeight: containerHeight, title: popupTitle, containerWidth: LIST_CONTAINER_WIDTH, searchInputOnKeyDown: handleKeyDown },
-            react_1.default.createElement(VirtualGroupedList_1.default, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, containerWidth: LIST_CONTAINER_WIDTH, focusIndex: focusIndex }),
+            react_1.default.createElement(VirtualGroupedList_1.default, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, focusIndex: focusIndex }),
             items.length === 0 && (react_1.default.createElement("div", { className: styles.noResultsCaptionContainer },
                 react_1.default.createElement(Typography_1.default, { variant: "caption", display: "block", gutterBottom: true }, ui_i18n_1.default.text('No results found')))))));
 };
-MoreAttributesButton.propTypes = {
-    label: prop_types_1.default.string,
-    popupTitle: prop_types_1.default.string,
-    data: prop_types_1.default.array,
-    parent: prop_types_1.default.object,
-    dense: prop_types_1.default.bool,
-    onApply: prop_types_1.default.func
-};
 exports.default = MoreAttributesButton;

package/cjs/components/attributes/editMode/MoreAttributesButton/helpers.d.ts

@@ -3,6 +3,7 @@ import { GroupedItem } from './useMoreAttributesItems';
 declare type Props = {
     attrTypes: AttributeType[];
     filter?: string;
+    sortingFn: (item1: AttributeType, item2: AttributeType) => number;
 };
-declare const preparedGroupedItems: ({ attrTypes, filter }: Props) => GroupedItem[];
-export { preparedGroupedItems };
+export declare const preparedGroupedItems: ({ attrTypes, filter, sortingFn }: Props) => GroupedItem[];
+export {};

package/cjs/components/attributes/editMode/MoreAttributesButton/helpers.js

@@ -6,8 +6,8 @@ var filterItems = (0, ramda_1.curry)(function (filterText, items) {
     return (0, ramda_1.filter)(function (item) { return (item.label || item.name).toLowerCase().includes(filterText.toLowerCase()); })(items);
 });
 var preparedGroupedItems = function (_a) {
-    var attrTypes = _a.attrTypes, _b = _a.filter, filter = _b === void 0 ? '' : _b;
-    return (0, ramda_1.pipe)(filterItems(filter), (0, ramda_1.map)(function (attrType) { return ({
+    var attrTypes = _a.attrTypes, _b = _a.filter, filter = _b === void 0 ? '' : _b, sortingFn = _a.sortingFn;
+    return (0, ramda_1.pipe)(filterItems(filter), (0, ramda_1.sort)(sortingFn), (0, ramda_1.map)(function (attrType) { return ({
         item: {
             id: attrType.uri,
             label: attrType.label || attrType.name,

package/cjs/components/attributes/editMode/MoreAttributesButton/index.d.ts

@@ -1 +1 @@
-export { default } from "./MoreAttributesButton";
+export { default } from './MoreAttributesButton';

package/cjs/components/attributes/editMode/MoreAttributesButton/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dense" | "icon" | "moreButton" | "buttonLabel" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "subHeader" | "noResultsCaptionContainer">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dense" | "icon" | "moreButton" | "buttonLabel" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "subHeader" | "noResultsCaptionContainer">;

package/cjs/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMoreAttributesItems = void 0;
 var react_1 = require("react");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var helpers_1 = require("../../../VirtualGroupedList/helpers");
 var helpers_2 = require("./helpers");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var react_redux_1 = require("react-redux");
 var GROUP_NAMES;
 (function (GROUP_NAMES) {
     GROUP_NAMES["parent"] = "parent";
@@ -16,7 +19,16 @@ var GROUP_NAMES;
 var useMoreAttributesItems = function (_a) {
     var data = _a.data, parent = _a.parent, filter = _a.filter;
     var hasGroups = Boolean(parent);
-    var preparedParentGroupItem = (0, react_1.useMemo)(function () { return (hasGroups ? (0, helpers_2.preparedGroupedItems)({ attrTypes: [parent], filter: filter }) : []); }, [hasGroups, parent, filter]);
+    var strategy = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getAttributesSortingStrategy);
+    var sortingFn = (0, react_1.useMemo)(function () {
+        switch (strategy) {
+            case mdm_sdk_1.SortingStrategy.ASC_BY_NAME:
+                return function (item1, item2) { var _a; return (_a = item1 === null || item1 === void 0 ? void 0 : item1.label) === null || _a === void 0 ? void 0 : _a.localeCompare(item2 === null || item2 === void 0 ? void 0 : item2.label); };
+            default:
+                return function (_item1, _item2) { return 0; };
+        }
+    }, [strategy]);
+    var preparedParentGroupItem = (0, react_1.useMemo)(function () { return (hasGroups ? (0, helpers_2.preparedGroupedItems)({ attrTypes: [parent], filter: filter, sortingFn: sortingFn }) : []); }, [hasGroups, parent, filter, sortingFn]);
     var parentGroup = (0, react_1.useMemo)(function () {
         return hasGroups && (preparedParentGroupItem === null || preparedParentGroupItem === void 0 ? void 0 : preparedParentGroupItem.length)
             ? [
@@ -33,9 +45,10 @@ var useMoreAttributesItems = function (_a) {
     var preparedAttributesGroupItems = (0, react_1.useMemo)(function () {
         return (0, helpers_2.preparedGroupedItems)({
             attrTypes: data,
-            filter: filter
+            filter: filter,
+            sortingFn: sortingFn
         });
-    }, [data, filter]);
+    }, [data, filter, sortingFn]);
     var attributesGroup = (0, react_1.useMemo)(function () {
         return hasGroups && (preparedAttributesGroupItems === null || preparedAttributesGroupItems === void 0 ? void 0 : preparedAttributesGroupItems.length)
             ? [
@@ -49,10 +62,7 @@ var useMoreAttributesItems = function (_a) {
             ]
             : preparedAttributesGroupItems;
     }, [hasGroups, preparedAttributesGroupItems]);
-    var items = (0, react_1.useMemo)(function () { return (0, helpers_1.flattenGroupedItemsData)((parentGroup || []).concat(attributesGroup)); }, [
-        parentGroup,
-        attributesGroup
-    ]);
+    var items = (0, react_1.useMemo)(function () { return (0, helpers_1.flattenGroupedItemsData)((parentGroup || []).concat(attributesGroup)); }, [parentGroup, attributesGroup]);
     var parentGroupLength = parentGroup.length;
     var attributesGroupLength = attributesGroup.length;
     return { items: items, hasGroups: hasGroups, parentGroupLength: parentGroupLength, attributesGroupLength: attributesGroupLength };

package/cjs/hooks/useCustomScripts.js

@@ -182,7 +182,7 @@ var useCustomScripts = function (config) {
                 url: fakeURL,
                 method: options.method,
                 headers: __assign(__assign({}, options.headers), { origin: 'ui', requestId: requestId, actionId: actionId }),
-                data: options.body
+                data: options.body || options.data
             });
         }
         else {

package/esm/components/SelectionPopup/helpers.d.ts

@@ -15,7 +15,7 @@ declare type Props = {
         groupData: Item['item'];
     }) => void;
     selectedItems: string[];
-    onClose: (event: React.KeyboardEvent) => void;
+    onClose?: (event: React.KeyboardEvent) => void;
 };
 declare const useKeyboardNavigation: ({ items, open, onSelectFocusedItem, selectedItems, onClose }: Props) => {
     focusIndex: number;

package/esm/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.d.ts

@@ -1,20 +1,12 @@
+/// <reference types="react" />
+import { AttributeType } from '@reltio/mdm-sdk';
+declare type Props = {
+    label: string;
+    popupTitle?: string;
+    data: AttributeType[];
+    parent?: AttributeType;
+    dense?: boolean;
+    onApply: (attributeTypes: AttributeType[]) => void;
+};
+declare const MoreAttributesButton: ({ label, popupTitle, data, parent, dense, onApply }: Props) => JSX.Element;
 export default MoreAttributesButton;
-declare function MoreAttributesButton({ label, popupTitle, data, parent, dense, onApply }: {
-    label: any;
-    popupTitle?: any;
-    data: any;
-    parent: any;
-    dense: any;
-    onApply: any;
-}): JSX.Element;
-declare namespace MoreAttributesButton {
-    namespace propTypes {
-        const label: PropTypes.Requireable<string>;
-        const popupTitle: PropTypes.Requireable<string>;
-        const data: PropTypes.Requireable<any[]>;
-        const parent: PropTypes.Requireable<object>;
-        const dense: PropTypes.Requireable<boolean>;
-        const onApply: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";

package/esm/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.js

@@ -1,19 +1,18 @@
 import React, { useCallback, useRef, useState } from 'react';
-import i18n from 'ui-i18n';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { always, any, append, ifElse, not, pipe, pluck, propEq, reject } from 'ramda';
 import Button from '@material-ui/core/Button';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
-import { useStyles } from './styles';
-import SelectionPopup from '../../../SelectionPopup/SelectionPopup';
+import classnames from 'classnames';
+import { always, any, append, ifElse, not, pipe, pluck, propEq, reject } from 'ramda';
+import i18n from 'ui-i18n';
 import AttributeListItem from '../../../AttributeListItem/AttributeListItem';
-import VirtualGroupedList from '../../../VirtualGroupedList/VirtualGroupedList';
-import { useKeyboardNavigation } from '../../../SelectionPopup/helpers';
+import SelectionPopup from '../../../SelectionPopup/SelectionPopup';
 import AddIcon from '@material-ui/icons/Add';
 import Highlighter from '../../../Highlighter/Highlighter';
+import { useKeyboardNavigation } from '../../../SelectionPopup/helpers';
+import VirtualGroupedList from '../../../VirtualGroupedList/VirtualGroupedList';
 import { useMoreAttributesItems } from './useMoreAttributesItems';
+import { useStyles } from './styles';
 var ITEM_HEIGHT = 28;
 var ITEM_GROUP_TITLE_HEIGHT = 40;
 var LIST_CONTAINER_WIDTH = 320;
@@ -71,16 +70,8 @@ var MoreAttributesButton = function (_a) {
             React.createElement(AddIcon, { classes: { root: styles.icon } }),
             React.createElement("div", { className: styles.buttonLabel }, label)),
         React.createElement(SelectionPopup, { open: isOpen, className: classnames(styles.moreAttributesPopup, styles.popupContainer), anchorEl: inputRef.current, onClose: pipe(addSelectedAttributes, closePopup, clearFilter, clearSelectedItems), onSearch: setFilter, containerHeight: containerHeight, title: popupTitle, containerWidth: LIST_CONTAINER_WIDTH, searchInputOnKeyDown: handleKeyDown },
-            React.createElement(VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, containerWidth: LIST_CONTAINER_WIDTH, focusIndex: focusIndex }),
+            React.createElement(VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, focusIndex: focusIndex }),
             items.length === 0 && (React.createElement("div", { className: styles.noResultsCaptionContainer },
                 React.createElement(Typography, { variant: "caption", display: "block", gutterBottom: true }, i18n.text('No results found')))))));
 };
-MoreAttributesButton.propTypes = {
-    label: PropTypes.string,
-    popupTitle: PropTypes.string,
-    data: PropTypes.array,
-    parent: PropTypes.object,
-    dense: PropTypes.bool,
-    onApply: PropTypes.func
-};
 export default MoreAttributesButton;

package/esm/components/attributes/editMode/MoreAttributesButton/helpers.d.ts

@@ -3,6 +3,7 @@ import { GroupedItem } from './useMoreAttributesItems';
 declare type Props = {
     attrTypes: AttributeType[];
     filter?: string;
+    sortingFn: (item1: AttributeType, item2: AttributeType) => number;
 };
-declare const preparedGroupedItems: ({ attrTypes, filter }: Props) => GroupedItem[];
-export { preparedGroupedItems };
+export declare const preparedGroupedItems: ({ attrTypes, filter, sortingFn }: Props) => GroupedItem[];
+export {};

package/esm/components/attributes/editMode/MoreAttributesButton/helpers.js

@@ -1,10 +1,10 @@
-import { curry, filter, map, pipe } from 'ramda';
+import { curry, filter, map, pipe, sort } from 'ramda';
 var filterItems = curry(function (filterText, items) {
     return filter(function (item) { return (item.label || item.name).toLowerCase().includes(filterText.toLowerCase()); })(items);
 });
-var preparedGroupedItems = function (_a) {
-    var attrTypes = _a.attrTypes, _b = _a.filter, filter = _b === void 0 ? '' : _b;
-    return pipe(filterItems(filter), map(function (attrType) { return ({
+export var preparedGroupedItems = function (_a) {
+    var attrTypes = _a.attrTypes, _b = _a.filter, filter = _b === void 0 ? '' : _b, sortingFn = _a.sortingFn;
+    return pipe(filterItems(filter), sort(sortingFn), map(function (attrType) { return ({
         item: {
             id: attrType.uri,
             label: attrType.label || attrType.name,
@@ -12,4 +12,3 @@ var preparedGroupedItems = function (_a) {
         }
     }); }))(attrTypes);
 };
-export { preparedGroupedItems };

package/esm/components/attributes/editMode/MoreAttributesButton/index.d.ts

@@ -1 +1 @@
-export { default } from "./MoreAttributesButton";
+export { default } from './MoreAttributesButton';

package/esm/components/attributes/editMode/MoreAttributesButton/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dense" | "icon" | "moreButton" | "buttonLabel" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "subHeader" | "noResultsCaptionContainer">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dense" | "icon" | "moreButton" | "buttonLabel" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "subHeader" | "noResultsCaptionContainer">;

package/esm/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.js

@@ -1,7 +1,10 @@
 import { useMemo } from 'react';
 import i18n from 'ui-i18n';
+import { SortingStrategy } from '@reltio/mdm-sdk';
 import { flattenGroupedItemsData } from '../../../VirtualGroupedList/helpers';
 import { preparedGroupedItems } from './helpers';
+import mdmModule from '@reltio/mdm-module';
+import { useSelector } from 'react-redux';
 var GROUP_NAMES;
 (function (GROUP_NAMES) {
     GROUP_NAMES["parent"] = "parent";
@@ -10,7 +13,16 @@ var GROUP_NAMES;
 export var useMoreAttributesItems = function (_a) {
     var data = _a.data, parent = _a.parent, filter = _a.filter;
     var hasGroups = Boolean(parent);
-    var preparedParentGroupItem = useMemo(function () { return (hasGroups ? preparedGroupedItems({ attrTypes: [parent], filter: filter }) : []); }, [hasGroups, parent, filter]);
+    var strategy = useSelector(mdmModule.selectors.getAttributesSortingStrategy);
+    var sortingFn = useMemo(function () {
+        switch (strategy) {
+            case SortingStrategy.ASC_BY_NAME:
+                return function (item1, item2) { var _a; return (_a = item1 === null || item1 === void 0 ? void 0 : item1.label) === null || _a === void 0 ? void 0 : _a.localeCompare(item2 === null || item2 === void 0 ? void 0 : item2.label); };
+            default:
+                return function (_item1, _item2) { return 0; };
+        }
+    }, [strategy]);
+    var preparedParentGroupItem = useMemo(function () { return (hasGroups ? preparedGroupedItems({ attrTypes: [parent], filter: filter, sortingFn: sortingFn }) : []); }, [hasGroups, parent, filter, sortingFn]);
     var parentGroup = useMemo(function () {
         return hasGroups && (preparedParentGroupItem === null || preparedParentGroupItem === void 0 ? void 0 : preparedParentGroupItem.length)
             ? [
@@ -27,9 +39,10 @@ export var useMoreAttributesItems = function (_a) {
     var preparedAttributesGroupItems = useMemo(function () {
         return preparedGroupedItems({
             attrTypes: data,
-            filter: filter
+            filter: filter,
+            sortingFn: sortingFn
         });
-    }, [data, filter]);
+    }, [data, filter, sortingFn]);
     var attributesGroup = useMemo(function () {
         return hasGroups && (preparedAttributesGroupItems === null || preparedAttributesGroupItems === void 0 ? void 0 : preparedAttributesGroupItems.length)
             ? [
@@ -43,10 +56,7 @@ export var useMoreAttributesItems = function (_a) {
             ]
             : preparedAttributesGroupItems;
     }, [hasGroups, preparedAttributesGroupItems]);
-    var items = useMemo(function () { return flattenGroupedItemsData((parentGroup || []).concat(attributesGroup)); }, [
-        parentGroup,
-        attributesGroup
-    ]);
+    var items = useMemo(function () { return flattenGroupedItemsData((parentGroup || []).concat(attributesGroup)); }, [parentGroup, attributesGroup]);
     var parentGroupLength = parentGroup.length;
     var attributesGroupLength = attributesGroup.length;
     return { items: items, hasGroups: hasGroups, parentGroupLength: parentGroupLength, attributesGroupLength: attributesGroupLength };

package/esm/hooks/useCustomScripts.js

@@ -153,7 +153,7 @@ export var useCustomScripts = function (config) {
                 url: fakeURL,
                 method: options.method,
                 headers: __assign(__assign({}, options.headers), { origin: 'ui', requestId: requestId, actionId: actionId }),
-                data: options.body
+                data: options.body || options.data
             });
         }
         else {

package/package.json

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