@reltio/components 1.4.2040 → 1.4.2042

package/BasicAttributeSelector/BasicAttributeSelector.js

@@ -8,7 +8,7 @@ import { AttributeTitle } from './components/AttributeTitle';
 import { SelectAttributesList } from '../SelectAttributesList';
 import { flattenGroupedItemsData } from '../VirtualGroupedList';
 import { filterSelectedAttributes, getAttributeIndex, getContainerWidth, getOnEnterHandler, prepareGroupsForSelectAttributeList } from './helpers';
-import { ATTRIBUTES_LIST_WIDTH, ATTRIBUTES_LIST_HEIGHT, ATTRIBUTES_POPUP_HEIGHT } from './constants';
+import { ATTRIBUTES_LIST_WIDTH, ATTRIBUTES_LIST_HEIGHT, ATTRIBUTES_POPUP_HEIGHT, ATTRIBUTES_LIST_MAX_WIDTH } from './constants';
 import { useStyles } from './styles';
 var BasicAttributeSelector = function (_a) {
     var className = _a.className, itemsGroups = _a.itemsGroups, value = _a.value, getLabel = _a.getLabel, onSelect = _a.onSelect, _b = _a.onRestoreFocus, onRestoreFocus = _b === void 0 ? identity : _b, _c = _a.onOpenPopup, onOpenPopup = _c === void 0 ? identity : _c, _d = _a.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? false : _d, _e = _a.disableEnforceFocus, disableEnforceFocus = _e === void 0 ? false : _e, _f = _a.single, single = _f === void 0 ? false : _f, _g = _a.ungroup, ungroup = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.hideCheckBox, hideCheckBox = _j === void 0 ? false : _j;
@@ -28,7 +28,9 @@ var BasicAttributeSelector = function (_a) {
     var items = useMemo(function () {
         return pipe(when(always(ungroup), chain(pipe(prop('items'), flatten, map(pick(['item', 'level']))))), flattenGroupedItemsData)(filteredItemsGroups);
     }, [ungroup, filteredItemsGroups]);
-    var containerWidth = useMemo(function () { return Math.max(getContainerWidth(filteredItemsGroups), ATTRIBUTES_LIST_WIDTH); }, [filteredItemsGroups]);
+    var containerWidth = useMemo(function () {
+        return Math.min(Math.max(getContainerWidth(filteredItemsGroups), ATTRIBUTES_LIST_WIDTH), ATTRIBUTES_LIST_MAX_WIDTH);
+    }, [filteredItemsGroups]);
     var handleOnClose = pipe(tap(pipe(clearSelectedAttributes, clearFilterText, closePopup)), onRestoreFocus);
     var searchInputRef = useRef();
     var onListItemClick = useCallback(function (attribute, checked) {

package/BasicAttributeSelector/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const ATTRIBUTES_LIST_HEIGHT = 400;
 export declare const ATTRIBUTES_LIST_WIDTH = 308;
+export declare const ATTRIBUTES_LIST_MAX_WIDTH = 620;
 export declare const ATTRIBUTES_POPUP_HEIGHT = 507;

package/BasicAttributeSelector/constants.js

@@ -1,3 +1,4 @@
 export var ATTRIBUTES_LIST_HEIGHT = 400;
 export var ATTRIBUTES_LIST_WIDTH = 308;
+export var ATTRIBUTES_LIST_MAX_WIDTH = 620;
 export var ATTRIBUTES_POPUP_HEIGHT = 507;

package/SelectAttributesList/SelectAttributesList.js

@@ -28,17 +28,16 @@ import { Highlighter } from '../Highlighter';
 import { AttributeGroupIcon } from '../AttributeGroupIcon';
 import { useMdmMetadata } from '../contexts/MdmModuleContext';
 import { checkAttributeIncludes } from '../helpers/attributesView';
-import { useStyles } from './styles';
+import styles from './SelectAttributesList.module.css';
 var ITEM_HEIGHT = 28;
 var ITEM_GROUP_TITLE_HEIGHT = 40;
 var SelectAttributesList = function (_a) {
     var selectedAttributes = _a.selectedAttributes, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, hideCheckBox = _a.hideCheckBox, otherProps = __rest(_a, ["selectedAttributes", "onItemClick", "focusIndex", "hideCheckBox"]);
-    var styles = useStyles();
     var metadata = useMdmMetadata();
     var getItemSize = function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : ITEM_HEIGHT); };
     var renderGroupTitle = function (style, item) { return (React.createElement(ListItem, { component: 'div', className: styles.subHeader, style: style, key: "group-".concat(item.item.id) },
         item.item.needGroupIcon && React.createElement(AttributeGroupIcon, { group: item.item, metadata: metadata }),
-        item.item.title)); };
+        React.createElement("div", { className: styles.subHeaderTitle }, item.item.title))); };
     var renderItem = function (style, _a, index) {
         var item = _a.item, level = _a.level, groupId = _a.groupId, groupName = _a.groupName;
         var checked = checkAttributeIncludes(item, selectedAttributes);

package/SelectAttributesList/SelectAttributesList.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"subHeader":"SelectAttributesList-subHeader--3ac0v","subHeaderTitle":"SelectAttributesList-subHeaderTitle--Vazfd"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.SelectAttributesList-subHeader--3ac0v{align-items:center;background-color:#f5f5f5;color:rgba(0,0,0,.84);display:flex;font-size:14px;font-weight:500;margin:0;padding:0 16px}.SelectAttributesList-subHeaderTitle--Vazfd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/BasicAttributeSelector/BasicAttributeSelector.js

@@ -56,7 +56,9 @@ var BasicAttributeSelector = function (_a) {
     var items = (0, react_1.useMemo)(function () {
         return (0, ramda_1.pipe)((0, ramda_1.when)((0, ramda_1.always)(ungroup), (0, ramda_1.chain)((0, ramda_1.pipe)((0, ramda_1.prop)('items'), ramda_1.flatten, (0, ramda_1.map)((0, ramda_1.pick)(['item', 'level']))))), VirtualGroupedList_1.flattenGroupedItemsData)(filteredItemsGroups);
     }, [ungroup, filteredItemsGroups]);
-    var containerWidth = (0, react_1.useMemo)(function () { return Math.max((0, helpers_1.getContainerWidth)(filteredItemsGroups), constants_1.ATTRIBUTES_LIST_WIDTH); }, [filteredItemsGroups]);
+    var containerWidth = (0, react_1.useMemo)(function () {
+        return Math.min(Math.max((0, helpers_1.getContainerWidth)(filteredItemsGroups), constants_1.ATTRIBUTES_LIST_WIDTH), constants_1.ATTRIBUTES_LIST_MAX_WIDTH);
+    }, [filteredItemsGroups]);
     var handleOnClose = (0, ramda_1.pipe)((0, ramda_1.tap)((0, ramda_1.pipe)(clearSelectedAttributes, clearFilterText, closePopup)), onRestoreFocus);
     var searchInputRef = (0, react_1.useRef)();
     var onListItemClick = (0, react_1.useCallback)(function (attribute, checked) {

package/cjs/BasicAttributeSelector/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const ATTRIBUTES_LIST_HEIGHT = 400;
 export declare const ATTRIBUTES_LIST_WIDTH = 308;
+export declare const ATTRIBUTES_LIST_MAX_WIDTH = 620;
 export declare const ATTRIBUTES_POPUP_HEIGHT = 507;

package/cjs/BasicAttributeSelector/constants.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ATTRIBUTES_POPUP_HEIGHT = exports.ATTRIBUTES_LIST_WIDTH = exports.ATTRIBUTES_LIST_HEIGHT = void 0;
+exports.ATTRIBUTES_POPUP_HEIGHT = exports.ATTRIBUTES_LIST_MAX_WIDTH = exports.ATTRIBUTES_LIST_WIDTH = exports.ATTRIBUTES_LIST_HEIGHT = void 0;
 exports.ATTRIBUTES_LIST_HEIGHT = 400;
 exports.ATTRIBUTES_LIST_WIDTH = 308;
+exports.ATTRIBUTES_LIST_MAX_WIDTH = 620;
 exports.ATTRIBUTES_POPUP_HEIGHT = 507;

package/cjs/SelectAttributesList/SelectAttributesList.js

@@ -56,17 +56,16 @@ var Highlighter_1 = require("../Highlighter");
 var AttributeGroupIcon_1 = require("../AttributeGroupIcon");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var attributesView_1 = require("../helpers/attributesView");
-var styles_1 = require("./styles");
+var SelectAttributesList_module_css_1 = __importDefault(require("./SelectAttributesList.module.css"));
 var ITEM_HEIGHT = 28;
 var ITEM_GROUP_TITLE_HEIGHT = 40;
 var SelectAttributesList = function (_a) {
     var selectedAttributes = _a.selectedAttributes, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, hideCheckBox = _a.hideCheckBox, otherProps = __rest(_a, ["selectedAttributes", "onItemClick", "focusIndex", "hideCheckBox"]);
-    var styles = (0, styles_1.useStyles)();
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var getItemSize = function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : ITEM_HEIGHT); };
-    var renderGroupTitle = function (style, item) { return (react_1.default.createElement(ListItem_1.default, { component: 'div', className: styles.subHeader, style: style, key: "group-".concat(item.item.id) },
+    var renderGroupTitle = function (style, item) { return (react_1.default.createElement(ListItem_1.default, { component: 'div', className: SelectAttributesList_module_css_1.default.subHeader, style: style, key: "group-".concat(item.item.id) },
         item.item.needGroupIcon && react_1.default.createElement(AttributeGroupIcon_1.AttributeGroupIcon, { group: item.item, metadata: metadata }),
-        item.item.title)); };
+        react_1.default.createElement("div", { className: SelectAttributesList_module_css_1.default.subHeaderTitle }, item.item.title))); };
     var renderItem = function (style, _a, index) {
         var item = _a.item, level = _a.level, groupId = _a.groupId, groupName = _a.groupName;
         var checked = (0, attributesView_1.checkAttributeIncludes)(item, selectedAttributes);

package/cjs/SelectAttributesList/SelectAttributesList.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"subHeader":"SelectAttributesList-subHeader--3ac0v","subHeaderTitle":"SelectAttributesList-subHeaderTitle--Vazfd"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.SelectAttributesList-subHeader--3ac0v{align-items:center;background-color:#f5f5f5;color:rgba(0,0,0,.84);display:flex;font-size:14px;font-weight:500;margin:0;padding:0 16px}.SelectAttributesList-subHeaderTitle--Vazfd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/constants/theme.d.ts

@@ -45,6 +45,10 @@ export declare const theme: {
             hint: string;
         };
         divider: string;
+        SnackbarContent: {
+            color: string;
+            bg: string;
+        };
     };
     components: {
         MuiButton: {

package/cjs/constants/theme.js

@@ -22,7 +22,11 @@ exports.theme = {
             disabled: 'rgba(0,0,0,0.26)',
             hint: 'rgba(0,0,0,0.38)'
         },
-        divider: 'rgba(0,0,0,0.38)'
+        divider: 'rgba(0,0,0,0.38)',
+        SnackbarContent: {
+            color: '#FFF',
+            bg: '#121212'
+        }
     },
     components: {
         MuiButton: {

package/cjs/hooks/useMatchesColumnsData/useMatchesColumnsData.d.ts

@@ -2,11 +2,12 @@ import { Metadata } from '@reltio/mdm-sdk';
 import { ColumnData, GroupedColumnsData } from '../../types/basicTable';
 type MatchesColumnsDataProps<TColumnData> = {
     defaultColumnsData: TColumnData[];
+    defaultVisibleColumns?: string[];
     additionalColumnsData?: TColumnData[];
     metadata: Metadata;
     entityTypeUri: string;
 };
-export declare const useMatchesColumnsData: <TColumnData extends ColumnData>({ defaultColumnsData, additionalColumnsData, metadata, entityTypeUri }: MatchesColumnsDataProps<TColumnData>) => {
+export declare const useMatchesColumnsData: <TColumnData extends ColumnData>({ defaultColumnsData, defaultVisibleColumns, additionalColumnsData, metadata, entityTypeUri }: MatchesColumnsDataProps<TColumnData>) => {
     allColumnsData: TColumnData[];
     groupedColumnsData: GroupedColumnsData<TColumnData>[];
     defaultColumns: string[];

package/cjs/hooks/useMatchesColumnsData/useMatchesColumnsData.js

@@ -6,7 +6,7 @@ var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var helpers_1 = require("./helpers");
 var useMatchesColumnsData = function (_a) {
-    var defaultColumnsData = _a.defaultColumnsData, additionalColumnsData = _a.additionalColumnsData, metadata = _a.metadata, entityTypeUri = _a.entityTypeUri;
+    var defaultColumnsData = _a.defaultColumnsData, defaultVisibleColumns = _a.defaultVisibleColumns, additionalColumnsData = _a.additionalColumnsData, metadata = _a.metadata, entityTypeUri = _a.entityTypeUri;
     return (0, react_1.useMemo)(function () {
         var attrColumnsData = (0, helpers_1.getColumnsData)(metadata, entityTypeUri);
         var allColumnsData = defaultColumnsData
@@ -14,8 +14,8 @@ var useMatchesColumnsData = function (_a) {
             .concat(attrColumnsData);
         var matchAttributes = (0, mdm_sdk_1.getEntityTypeMatchAttributes)(metadata, entityTypeUri);
         var groupedColumnsData = (0, helpers_1.groupColumnsDataByMatchAttributes)(matchAttributes, allColumnsData);
-        var defaultColumns = (0, ramda_1.pipe)(helpers_1.getMatchAttrColumns, (0, ramda_1.concat)(defaultColumnsData), (0, ramda_1.pluck)('id'))(matchAttributes, attrColumnsData);
+        var defaultColumns = (0, ramda_1.pipe)(helpers_1.getMatchAttrColumns, (0, ramda_1.pluck)('id'), (0, ramda_1.concat)(defaultVisibleColumns || (0, ramda_1.pluck)('id', defaultColumnsData)))(matchAttributes, attrColumnsData);
         return { allColumnsData: allColumnsData, groupedColumnsData: groupedColumnsData, defaultColumns: defaultColumns };
-    }, [defaultColumnsData, additionalColumnsData, metadata, entityTypeUri]);
+    }, [defaultColumnsData, additionalColumnsData, metadata, entityTypeUri, defaultVisibleColumns]);
 };
 exports.useMatchesColumnsData = useMatchesColumnsData;

package/constants/theme.d.ts

@@ -45,6 +45,10 @@ export declare const theme: {
             hint: string;
         };
         divider: string;
+        SnackbarContent: {
+            color: string;
+            bg: string;
+        };
     };
     components: {
         MuiButton: {

package/constants/theme.js

@@ -19,7 +19,11 @@ export var theme = {
             disabled: 'rgba(0,0,0,0.26)',
             hint: 'rgba(0,0,0,0.38)'
         },
-        divider: 'rgba(0,0,0,0.38)'
+        divider: 'rgba(0,0,0,0.38)',
+        SnackbarContent: {
+            color: '#FFF',
+            bg: '#121212'
+        }
     },
     components: {
         MuiButton: {

package/hooks/useMatchesColumnsData/useMatchesColumnsData.d.ts

@@ -2,11 +2,12 @@ import { Metadata } from '@reltio/mdm-sdk';
 import { ColumnData, GroupedColumnsData } from '../../types/basicTable';
 type MatchesColumnsDataProps<TColumnData> = {
     defaultColumnsData: TColumnData[];
+    defaultVisibleColumns?: string[];
     additionalColumnsData?: TColumnData[];
     metadata: Metadata;
     entityTypeUri: string;
 };
-export declare const useMatchesColumnsData: <TColumnData extends ColumnData>({ defaultColumnsData, additionalColumnsData, metadata, entityTypeUri }: MatchesColumnsDataProps<TColumnData>) => {
+export declare const useMatchesColumnsData: <TColumnData extends ColumnData>({ defaultColumnsData, defaultVisibleColumns, additionalColumnsData, metadata, entityTypeUri }: MatchesColumnsDataProps<TColumnData>) => {
     allColumnsData: TColumnData[];
     groupedColumnsData: GroupedColumnsData<TColumnData>[];
     defaultColumns: string[];

package/hooks/useMatchesColumnsData/useMatchesColumnsData.js

@@ -3,7 +3,7 @@ import { concat, pipe, pluck } from 'ramda';
 import { getEntityTypeMatchAttributes } from '@reltio/mdm-sdk';
 import { getColumnsData, getMatchAttrColumns, groupColumnsDataByMatchAttributes } from './helpers';
 export var useMatchesColumnsData = function (_a) {
-    var defaultColumnsData = _a.defaultColumnsData, additionalColumnsData = _a.additionalColumnsData, metadata = _a.metadata, entityTypeUri = _a.entityTypeUri;
+    var defaultColumnsData = _a.defaultColumnsData, defaultVisibleColumns = _a.defaultVisibleColumns, additionalColumnsData = _a.additionalColumnsData, metadata = _a.metadata, entityTypeUri = _a.entityTypeUri;
     return useMemo(function () {
         var attrColumnsData = getColumnsData(metadata, entityTypeUri);
         var allColumnsData = defaultColumnsData
@@ -11,7 +11,7 @@ export var useMatchesColumnsData = function (_a) {
             .concat(attrColumnsData);
         var matchAttributes = getEntityTypeMatchAttributes(metadata, entityTypeUri);
         var groupedColumnsData = groupColumnsDataByMatchAttributes(matchAttributes, allColumnsData);
-        var defaultColumns = pipe(getMatchAttrColumns, concat(defaultColumnsData), pluck('id'))(matchAttributes, attrColumnsData);
+        var defaultColumns = pipe(getMatchAttrColumns, pluck('id'), concat(defaultVisibleColumns || pluck('id', defaultColumnsData)))(matchAttributes, attrColumnsData);
         return { allColumnsData: allColumnsData, groupedColumnsData: groupedColumnsData, defaultColumns: defaultColumns };
-    }, [defaultColumnsData, additionalColumnsData, metadata, entityTypeUri]);
+    }, [defaultColumnsData, additionalColumnsData, metadata, entityTypeUri, defaultVisibleColumns]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2040",
+  "version": "1.4.2042",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/SelectAttributesList/styles.d.ts

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

package/SelectAttributesList/styles.js

@@ -1,13 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    subHeader: {
-        backgroundColor: '#f5f5f5',
-        padding: '0 16px',
-        margin: 0,
-        display: 'flex',
-        alignItems: 'center',
-        color: 'rgba(0,0,0,0.84)',
-        fontSize: '14px',
-        fontWeight: 500
-    }
-});

package/cjs/SelectAttributesList/styles.d.ts

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

package/cjs/SelectAttributesList/styles.js

@@ -1,16 +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)({
-    subHeader: {
-        backgroundColor: '#f5f5f5',
-        padding: '0 16px',
-        margin: 0,
-        display: 'flex',
-        alignItems: 'center',
-        color: 'rgba(0,0,0,0.84)',
-        fontSize: '14px',
-        fontWeight: 500
-    }
-});