@reltio/components 1.4.2039 → 1.4.2041

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/DateEditor/DateEditor.js

@@ -24,16 +24,19 @@ import React, { useMemo } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
 import { mergeDeepLeft, isNil } from 'ramda';
+import { useTheme } from '@mui/styles';
 import { utils } from '@reltio/mdm-sdk';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { useDateEditor } from '../hooks/useDateEditor';
 import { useStyles } from './styles';
 export var DateEditor = function (_a) {
     var _b;
+    var _c;
     var minDate = _a.minDate, maxDate = _a.maxDate, valueProp = _a.value, format = _a.format, label = _a.label, onChange = _a.onChange, slotProps = _a.slotProps, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["minDate", "maxDate", "value", "format", "label", "onChange", "slotProps", "isCrossedOut"]);
     var styles = useStyles();
     var value = useMemo(function () { return (isNil(valueProp) ? null : utils.dates.clearDateTime(valueProp)); }, [valueProp]);
-    var _c = useDateEditor({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _c.errorMessage, editorValue = _c.editorValue, editorMaxDate = _c.editorMaxDate, editorMinDate = _c.editorMinDate, onError = _c.onError, handleChange = _c.onChange;
+    var _d = useDateEditor({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _d.errorMessage, editorValue = _d.editorValue, editorMaxDate = _d.editorMaxDate, editorMinDate = _d.editorMinDate, onError = _d.onError, handleChange = _d.onChange;
+    var currentTheme = useTheme();
     var basicSlotProps = {
         textField: {
             size: 'small',
@@ -50,6 +53,9 @@ export var DateEditor = function (_a) {
         },
         popper: {
             placement: 'bottom-start',
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
             modifiers: [
                 {
                     name: 'viewHeightModifier',

package/ImageDetailsView/components/MetaInfo/MetaInfo.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import { MetaInfoHeader } from '../MetaInfoHeader';
 import { MetaInfoList } from '../MetaInfoList';
 import { MetaInfoForm } from '../MetaInfoForm';
-import { darkTheme } from './theme';
+import { darkTheme } from '../../../constants/theme';
 import { useEditMetaInfo } from './useEditMetaInfo';
 import { useMdmIsEditableMode, useMdmMode } from '../../../contexts/MdmModuleContext';
 var darkMuiTheme = createTheme(darkTheme);
@@ -14,7 +14,7 @@ export var MetaInfo = function (_a) {
     var isEditableMode = useMdmIsEditableMode();
     var _b = useEditMetaInfo({ attributeType: attributeType, initialAttributeValue: initialAttributeValue }), addAttributes = _b.addAttributes, changeAttribute = _b.changeAttribute, deleteAttribute = _b.deleteAttribute, clearLocalChanges = _b.clearLocalChanges, applyLocalChanges = _b.applyLocalChanges, attributeValue = _b.attributeValue, hasChanges = _b.hasChanges;
     return (React.createElement(ThemeProvider, { theme: darkMuiTheme },
-        React.createElement(Box, null,
+        React.createElement(Box, { "data-mui-color-scheme": "dark" },
             React.createElement(MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
             React.createElement(MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
             isEditableMode && (React.createElement(MetaInfoForm, { mode: mode, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeType: attributeType, attributeValue: attributeValue, hasChanges: hasChanges, onDeleteAttribute: deleteAttribute, onChangeAttribute: changeAttribute, onAddAttributes: addAttributes, onCancel: clearLocalChanges, onApply: applyLocalChanges })))));

package/Popper/Popper.js

@@ -27,14 +27,17 @@ import Portal from '@mui/material/Portal';
 import MUIPopper from '@mui/material/Popper';
 import { resizeBackdrops } from './helpers';
 import { useStyles } from './styles';
+import { useTheme } from '@mui/styles';
 export var Popper = forwardRef(function (_a, ref) {
-    var open = _a.open, anchorEl = _a.anchorEl, className = _a.className, _b = _a.modal, modal = _b === void 0 ? true : _b, _c = _a.excludeAnchorFromBackdrop, excludeAnchorFromBackdrop = _c === void 0 ? true : _c, _d = _a.onClose, onClose = _d === void 0 ? identity : _d, otherProps = __rest(_a, ["open", "anchorEl", "className", "modal", "excludeAnchorFromBackdrop", "onClose"]);
+    var _b;
+    var open = _a.open, anchorEl = _a.anchorEl, className = _a.className, _c = _a.modal, modal = _c === void 0 ? true : _c, _d = _a.excludeAnchorFromBackdrop, excludeAnchorFromBackdrop = _d === void 0 ? true : _d, _e = _a.onClose, onClose = _e === void 0 ? identity : _e, otherProps = __rest(_a, ["open", "anchorEl", "className", "modal", "excludeAnchorFromBackdrop", "onClose"]);
     var styles = useStyles();
     var leftBackdropRef = useRef();
     var rightBackdropRef = useRef();
     var topBackdropRef = useRef();
     var bottomBackdropRef = useRef();
     var rafIdRef = useRef();
+    var currentTheme = useTheme();
     useEffect(function () {
         if (open && modal) {
             resizeBackdrops({
@@ -54,6 +57,6 @@ export var Popper = forwardRef(function (_a, ref) {
             React.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
             React.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
             React.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))) : (React.createElement("div", { className: styles.backdrop, onClick: onClose })))),
-        React.createElement(MUIPopper, __assign({ open: open, anchorEl: anchorEl }, otherProps, { className: classnames(className, styles.popper), ref: ref }))));
+        React.createElement(MUIPopper, __assign({ "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode, open: open, anchorEl: anchorEl }, otherProps, { className: classnames(className, styles.popper), ref: ref }))));
 });
 Popper.displayName = 'Popper';

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/SelectionPopup/SelectionPopup.js

@@ -26,19 +26,22 @@ import i18n from 'ui-i18n';
 import Popover from '@mui/material/Popover';
 import { SearchInput } from '../SearchInput';
 import { useStyles } from './styles';
+import { useTheme } from '@mui/styles';
 export var SelectionPopup = function (_a) {
-    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _b = _a.headerPlacement, headerPlacement = _b === void 0 ? 'top' : _b, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _c = _a.anchorOrigin, anchorOrigin = _c === void 0 ? {
+    var _b;
+    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _d = _a.anchorOrigin, anchorOrigin = _d === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
-    } : _c, _d = _a.transformOrigin, transformOrigin = _d === void 0 ? {
+    } : _d, _e = _a.transformOrigin, transformOrigin = _e === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
-    } : _d, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
+    } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
     var classes = useStyles({ containerWidth: containerWidth, containerHeight: containerHeight });
+    var currentTheme = useTheme();
     var header = (React.createElement(React.Fragment, null,
         !hideTitle && React.createElement("div", { className: classes.header }, title),
         !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: i18n.text('Search & add attributes'), height: 40 }))));
-    return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, otherProps),
+    return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
         React.createElement("div", { className: classnames(classes.container, className), style: { width: containerWidth } },
             headerPlacement === 'top' && header,
             React.createElement("div", { className: classes.list }, children),

package/TimestampEditor/TimestampEditor.js

@@ -23,6 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import classnames from 'classnames';
 import { isNil, mergeDeepLeft } from 'ramda';
+import { useTheme } from '@mui/styles';
 import { getLocaleFormat } from '@reltio/mdm-sdk';
 import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
@@ -30,9 +31,11 @@ import { useDateEditor } from '../hooks/useDateEditor';
 import { useStyles } from './styles';
 export var TimestampEditor = function (_a) {
     var _b;
+    var _c;
     var minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, label = _a.label, slotProps = _a.slotProps, onChange = _a.onChange, format = _a.format, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["minDate", "maxDate", "value", "label", "slotProps", "onChange", "format", "isCrossedOut"]);
     var styles = useStyles();
-    var _c = useDateEditor({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _c.errorMessage, editorValue = _c.editorValue, editorMaxDate = _c.editorMaxDate, editorMinDate = _c.editorMinDate, onError = _c.onError, handleChange = _c.onChange;
+    var _d = useDateEditor({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _d.errorMessage, editorValue = _d.editorValue, editorMaxDate = _d.editorMaxDate, editorMinDate = _d.editorMinDate, onError = _d.onError, handleChange = _d.onChange;
+    var currentTheme = useTheme();
     var basicSlotProps = {
         textField: {
             size: 'small',
@@ -49,6 +52,9 @@ export var TimestampEditor = function (_a) {
         },
         popper: {
             placement: 'bottom-start',
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
             modifiers: [
                 {
                     name: 'viewHeightModifier',

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/DateEditor/DateEditor.js

@@ -53,16 +53,19 @@ var react_1 = __importStar(require("react"));
 var moment_1 = __importDefault(require("moment"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
+var styles_1 = require("@mui/styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
 var useDateEditor_1 = require("../hooks/useDateEditor");
-var styles_1 = require("./styles");
+var styles_2 = require("./styles");
 var DateEditor = function (_a) {
     var _b;
+    var _c;
     var minDate = _a.minDate, maxDate = _a.maxDate, valueProp = _a.value, format = _a.format, label = _a.label, onChange = _a.onChange, slotProps = _a.slotProps, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["minDate", "maxDate", "value", "format", "label", "onChange", "slotProps", "isCrossedOut"]);
-    var styles = (0, styles_1.useStyles)();
+    var styles = (0, styles_2.useStyles)();
     var value = (0, react_1.useMemo)(function () { return ((0, ramda_1.isNil)(valueProp) ? null : mdm_sdk_1.utils.dates.clearDateTime(valueProp)); }, [valueProp]);
-    var _c = (0, useDateEditor_1.useDateEditor)({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _c.errorMessage, editorValue = _c.editorValue, editorMaxDate = _c.editorMaxDate, editorMinDate = _c.editorMinDate, onError = _c.onError, handleChange = _c.onChange;
+    var _d = (0, useDateEditor_1.useDateEditor)({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _d.errorMessage, editorValue = _d.editorValue, editorMaxDate = _d.editorMaxDate, editorMinDate = _d.editorMinDate, onError = _d.onError, handleChange = _d.onChange;
+    var currentTheme = (0, styles_1.useTheme)();
     var basicSlotProps = {
         textField: {
             size: 'small',
@@ -79,6 +82,9 @@ var DateEditor = function (_a) {
         },
         popper: {
             placement: 'bottom-start',
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
             modifiers: [
                 {
                     name: 'viewHeightModifier',

package/cjs/ImageDetailsView/components/MetaInfo/MetaInfo.js

@@ -10,7 +10,7 @@ var Box_1 = __importDefault(require("@mui/material/Box"));
 var MetaInfoHeader_1 = require("../MetaInfoHeader");
 var MetaInfoList_1 = require("../MetaInfoList");
 var MetaInfoForm_1 = require("../MetaInfoForm");
-var theme_1 = require("./theme");
+var theme_1 = require("../../../constants/theme");
 var useEditMetaInfo_1 = require("./useEditMetaInfo");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var darkMuiTheme = (0, styles_1.createTheme)(theme_1.darkTheme);
@@ -20,7 +20,7 @@ var MetaInfo = function (_a) {
     var isEditableMode = (0, MdmModuleContext_1.useMdmIsEditableMode)();
     var _b = (0, useEditMetaInfo_1.useEditMetaInfo)({ attributeType: attributeType, initialAttributeValue: initialAttributeValue }), addAttributes = _b.addAttributes, changeAttribute = _b.changeAttribute, deleteAttribute = _b.deleteAttribute, clearLocalChanges = _b.clearLocalChanges, applyLocalChanges = _b.applyLocalChanges, attributeValue = _b.attributeValue, hasChanges = _b.hasChanges;
     return (react_1.default.createElement(styles_1.ThemeProvider, { theme: darkMuiTheme },
-        react_1.default.createElement(Box_1.default, null,
+        react_1.default.createElement(Box_1.default, { "data-mui-color-scheme": "dark" },
             react_1.default.createElement(MetaInfoHeader_1.MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
             react_1.default.createElement(MetaInfoList_1.MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
             isEditableMode && (react_1.default.createElement(MetaInfoForm_1.MetaInfoForm, { mode: mode, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeType: attributeType, attributeValue: attributeValue, hasChanges: hasChanges, onDeleteAttribute: deleteAttribute, onChangeAttribute: changeAttribute, onAddAttributes: addAttributes, onCancel: clearLocalChanges, onApply: applyLocalChanges })))));

package/cjs/Popper/Popper.js

@@ -56,14 +56,17 @@ var Portal_1 = __importDefault(require("@mui/material/Portal"));
 var Popper_1 = __importDefault(require("@mui/material/Popper"));
 var helpers_1 = require("./helpers");
 var styles_1 = require("./styles");
+var styles_2 = require("@mui/styles");
 exports.Popper = (0, react_1.forwardRef)(function (_a, ref) {
-    var open = _a.open, anchorEl = _a.anchorEl, className = _a.className, _b = _a.modal, modal = _b === void 0 ? true : _b, _c = _a.excludeAnchorFromBackdrop, excludeAnchorFromBackdrop = _c === void 0 ? true : _c, _d = _a.onClose, onClose = _d === void 0 ? ramda_1.identity : _d, otherProps = __rest(_a, ["open", "anchorEl", "className", "modal", "excludeAnchorFromBackdrop", "onClose"]);
+    var _b;
+    var open = _a.open, anchorEl = _a.anchorEl, className = _a.className, _c = _a.modal, modal = _c === void 0 ? true : _c, _d = _a.excludeAnchorFromBackdrop, excludeAnchorFromBackdrop = _d === void 0 ? true : _d, _e = _a.onClose, onClose = _e === void 0 ? ramda_1.identity : _e, otherProps = __rest(_a, ["open", "anchorEl", "className", "modal", "excludeAnchorFromBackdrop", "onClose"]);
     var styles = (0, styles_1.useStyles)();
     var leftBackdropRef = (0, react_1.useRef)();
     var rightBackdropRef = (0, react_1.useRef)();
     var topBackdropRef = (0, react_1.useRef)();
     var bottomBackdropRef = (0, react_1.useRef)();
     var rafIdRef = (0, react_1.useRef)();
+    var currentTheme = (0, styles_2.useTheme)();
     (0, react_1.useEffect)(function () {
         if (open && modal) {
             (0, helpers_1.resizeBackdrops)({
@@ -83,6 +86,6 @@ exports.Popper = (0, react_1.forwardRef)(function (_a, ref) {
             react_1.default.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
             react_1.default.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
             react_1.default.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))) : (react_1.default.createElement("div", { className: styles.backdrop, onClick: onClose })))),
-        react_1.default.createElement(Popper_1.default, __assign({ open: open, anchorEl: anchorEl }, otherProps, { className: (0, classnames_1.default)(className, styles.popper), ref: ref }))));
+        react_1.default.createElement(Popper_1.default, __assign({ "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode, open: open, anchorEl: anchorEl }, otherProps, { className: (0, classnames_1.default)(className, styles.popper), ref: ref }))));
 });
 exports.Popper.displayName = 'Popper';

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/SelectionPopup/SelectionPopup.js

@@ -32,19 +32,22 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Popover_1 = __importDefault(require("@mui/material/Popover"));
 var SearchInput_1 = require("../SearchInput");
 var styles_1 = require("./styles");
+var styles_2 = require("@mui/styles");
 var SelectionPopup = function (_a) {
-    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _b = _a.headerPlacement, headerPlacement = _b === void 0 ? 'top' : _b, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _c = _a.anchorOrigin, anchorOrigin = _c === void 0 ? {
+    var _b;
+    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _d = _a.anchorOrigin, anchorOrigin = _d === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
-    } : _c, _d = _a.transformOrigin, transformOrigin = _d === void 0 ? {
+    } : _d, _e = _a.transformOrigin, transformOrigin = _e === void 0 ? {
         vertical: 'top',
         horizontal: 'right'
-    } : _d, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
+    } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
     var classes = (0, styles_1.useStyles)({ containerWidth: containerWidth, containerHeight: containerHeight });
+    var currentTheme = (0, styles_2.useTheme)();
     var header = (react_1.default.createElement(react_1.default.Fragment, null,
         !hideTitle && react_1.default.createElement("div", { className: classes.header }, title),
         !hideSearchInput && (react_1.default.createElement(SearchInput_1.SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: ui_i18n_1.default.text('Search & add attributes'), height: 40 }))));
-    return (react_1.default.createElement(Popover_1.default, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, otherProps),
+    return (react_1.default.createElement(Popover_1.default, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
         react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.container, className), style: { width: containerWidth } },
             headerPlacement === 'top' && header,
             react_1.default.createElement("div", { className: classes.list }, children),

package/cjs/TimestampEditor/TimestampEditor.js

@@ -29,16 +29,19 @@ exports.TimestampEditor = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
+var styles_1 = require("@mui/styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var timeViewRenderers_1 = require("@mui/x-date-pickers/timeViewRenderers");
 var DateTimePicker_1 = require("@mui/x-date-pickers/DateTimePicker");
 var useDateEditor_1 = require("../hooks/useDateEditor");
-var styles_1 = require("./styles");
+var styles_2 = require("./styles");
 var TimestampEditor = function (_a) {
     var _b;
+    var _c;
     var minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, label = _a.label, slotProps = _a.slotProps, onChange = _a.onChange, format = _a.format, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["minDate", "maxDate", "value", "label", "slotProps", "onChange", "format", "isCrossedOut"]);
-    var styles = (0, styles_1.useStyles)();
-    var _c = (0, useDateEditor_1.useDateEditor)({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _c.errorMessage, editorValue = _c.editorValue, editorMaxDate = _c.editorMaxDate, editorMinDate = _c.editorMinDate, onError = _c.onError, handleChange = _c.onChange;
+    var styles = (0, styles_2.useStyles)();
+    var _d = (0, useDateEditor_1.useDateEditor)({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _d.errorMessage, editorValue = _d.editorValue, editorMaxDate = _d.editorMaxDate, editorMinDate = _d.editorMinDate, onError = _d.onError, handleChange = _d.onChange;
+    var currentTheme = (0, styles_1.useTheme)();
     var basicSlotProps = {
         textField: {
             size: 'small',
@@ -55,6 +58,9 @@ var TimestampEditor = function (_a) {
         },
         popper: {
             placement: 'bottom-start',
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
             modifiers: [
                 {
                     name: 'viewHeightModifier',

package/cjs/constants/index.d.ts

@@ -6,4 +6,4 @@ export { COMMON_TEXT_FIELD_PROPS } from './textField';
 export { POPUP_Z_INDEX } from './common';
 export { ReactSelectOptionFilters } from './reactSelect';
 export { editingModeOption, suggestingModeOption, viewingModeOption } from './modeOptions';
-export { theme } from './theme';
+export { theme, darkTheme } from './theme';

package/cjs/constants/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.theme = exports.viewingModeOption = exports.suggestingModeOption = exports.editingModeOption = exports.ReactSelectOptionFilters = exports.POPUP_Z_INDEX = exports.COMMON_TEXT_FIELD_PROPS = exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.DEFAULT_GOOGLE_MAP_OPTIONS = exports.MAP_DRAWING_MODES = exports.FIXED_TYPE_URIS = exports.COMMENTS_CONTAINER_VISIBILITY_AREA = exports.QueryBuilderAttributeType = exports.SortingType = void 0;
+exports.darkTheme = exports.theme = exports.viewingModeOption = exports.suggestingModeOption = exports.editingModeOption = exports.ReactSelectOptionFilters = exports.POPUP_Z_INDEX = exports.COMMON_TEXT_FIELD_PROPS = exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.DEFAULT_GOOGLE_MAP_OPTIONS = exports.MAP_DRAWING_MODES = exports.FIXED_TYPE_URIS = exports.COMMENTS_CONTAINER_VISIBILITY_AREA = exports.QueryBuilderAttributeType = exports.SortingType = void 0;
 var prop_types_1 = require("./prop-types");
 Object.defineProperty(exports, "SortingType", { enumerable: true, get: function () { return prop_types_1.SortingType; } });
 Object.defineProperty(exports, "QueryBuilderAttributeType", { enumerable: true, get: function () { return prop_types_1.QueryBuilderAttributeType; } });
@@ -25,3 +25,4 @@ Object.defineProperty(exports, "suggestingModeOption", { enumerable: true, get:
 Object.defineProperty(exports, "viewingModeOption", { enumerable: true, get: function () { return modeOptions_1.viewingModeOption; } });
 var theme_1 = require("./theme");
 Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.theme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });

package/cjs/constants/theme.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material/styles';
+import { Theme, ThemeOptions } from '@mui/material/styles';
 import '@mui/styles';
 type ReltioTheme = Theme & {
     inactiveBackground: string;
@@ -175,4 +175,5 @@ export declare const theme: {
     };
     suggested: string;
 };
+export declare const darkTheme: ThemeOptions;
 export {};

package/cjs/constants/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.theme = void 0;
+exports.darkTheme = exports.theme = void 0;
 require("@mui/styles");
 exports.theme = {
     palette: {
@@ -151,3 +151,10 @@ exports.theme = {
     },
     suggested: 'rgb(237, 246, 251)'
 };
+exports.darkTheme = {
+    palette: {
+        mode: 'dark',
+        primary: exports.theme.palette.primary,
+        secondary: exports.theme.palette.secondary
+    }
+};

package/cjs/contexts/ThemeProvider/ThemeProvider.d.ts

@@ -3,6 +3,7 @@ import { Theme } from '@mui/material/styles';
 type Props = {
     children: ReactNode;
     theme: Theme;
+    darkTheme?: Theme;
 };
-export declare const ThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
+export declare const ThemeProvider: ({ children, theme, darkTheme }: Props) => React.JSX.Element;
 export {};

package/cjs/contexts/ThemeProvider/ThemeProvider.js

@@ -39,14 +39,15 @@ var react_1 = __importStar(require("react"));
 var styles_1 = require("@mui/styles");
 var styles_2 = require("@mui/material/styles");
 var ThemeProvider = function (_a) {
-    var children = _a.children, theme = _a.theme;
+    var children = _a.children, theme = _a.theme, darkTheme = _a.darkTheme;
     var reltioTheme = (0, react_1.useMemo)(function () {
         return (0, styles_2.experimental_extendTheme)({
             colorSchemes: {
-                light: __assign({}, theme)
+                light: __assign({}, theme),
+                dark: __assign({}, darkTheme)
             }
         });
-    }, [theme]);
+    }, [theme, darkTheme]);
     return (react_1.default.createElement(styles_2.Experimental_CssVarsProvider, { theme: reltioTheme },
         react_1.default.createElement(styles_1.ThemeProvider, { theme: theme }, children)));
 };

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/index.d.ts

@@ -6,4 +6,4 @@ export { COMMON_TEXT_FIELD_PROPS } from './textField';
 export { POPUP_Z_INDEX } from './common';
 export { ReactSelectOptionFilters } from './reactSelect';
 export { editingModeOption, suggestingModeOption, viewingModeOption } from './modeOptions';
-export { theme } from './theme';
+export { theme, darkTheme } from './theme';

package/constants/index.js

@@ -6,4 +6,4 @@ export { COMMON_TEXT_FIELD_PROPS } from './textField';
 export { POPUP_Z_INDEX } from './common';
 export { ReactSelectOptionFilters } from './reactSelect';
 export { editingModeOption, suggestingModeOption, viewingModeOption } from './modeOptions';
-export { theme } from './theme';
+export { theme, darkTheme } from './theme';

package/constants/theme.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material/styles';
+import { Theme, ThemeOptions } from '@mui/material/styles';
 import '@mui/styles';
 type ReltioTheme = Theme & {
     inactiveBackground: string;
@@ -175,4 +175,5 @@ export declare const theme: {
     };
     suggested: string;
 };
+export declare const darkTheme: ThemeOptions;
 export {};

package/constants/theme.js

@@ -148,3 +148,10 @@ export var theme = {
     },
     suggested: 'rgb(237, 246, 251)'
 };
+export var darkTheme = {
+    palette: {
+        mode: 'dark',
+        primary: theme.palette.primary,
+        secondary: theme.palette.secondary
+    }
+};

package/contexts/ThemeProvider/ThemeProvider.d.ts

@@ -3,6 +3,7 @@ import { Theme } from '@mui/material/styles';
 type Props = {
     children: ReactNode;
     theme: Theme;
+    darkTheme?: Theme;
 };
-export declare const ThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
+export declare const ThemeProvider: ({ children, theme, darkTheme }: Props) => React.JSX.Element;
 export {};

package/contexts/ThemeProvider/ThemeProvider.js

@@ -13,14 +13,15 @@ import React, { useMemo } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/styles';
 import { experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
 export var ThemeProvider = function (_a) {
-    var children = _a.children, theme = _a.theme;
+    var children = _a.children, theme = _a.theme, darkTheme = _a.darkTheme;
     var reltioTheme = useMemo(function () {
         return extendTheme({
             colorSchemes: {
-                light: __assign({}, theme)
+                light: __assign({}, theme),
+                dark: __assign({}, darkTheme)
             }
         });
-    }, [theme]);
+    }, [theme, darkTheme]);
     return (React.createElement(CssVarsProvider, { theme: reltioTheme },
         React.createElement(MuiThemeProvider, { theme: theme }, children)));
 };

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.2039",
+  "version": "1.4.2041",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/ImageDetailsView/components/MetaInfo/theme.d.ts

@@ -1,2 +0,0 @@
-import { ThemeOptions } from '@mui/material/styles';
-export declare const darkTheme: ThemeOptions;

package/ImageDetailsView/components/MetaInfo/theme.js

@@ -1,8 +0,0 @@
-import { theme } from '../../../constants';
-export var darkTheme = {
-    palette: {
-        mode: 'dark',
-        primary: theme.palette.primary,
-        secondary: theme.palette.secondary
-    }
-};

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/ImageDetailsView/components/MetaInfo/theme.d.ts

@@ -1,2 +0,0 @@
-import { ThemeOptions } from '@mui/material/styles';
-export declare const darkTheme: ThemeOptions;

package/cjs/ImageDetailsView/components/MetaInfo/theme.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = void 0;
-var constants_1 = require("../../../constants");
-exports.darkTheme = {
-    palette: {
-        mode: 'dark',
-        primary: constants_1.theme.palette.primary,
-        secondary: constants_1.theme.palette.secondary
-    }
-};

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
-    }
-});