@reltio/components 1.4.2038 → 1.4.2040

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/DateEditor/DateEditor.js +7 -1
  2. package/ImageDetailsView/components/MetaInfo/MetaInfo.js +2 -2
  3. package/Popper/Popper.js +5 -2
  4. package/SelectionPopup/SelectionPopup.js +7 -4
  5. package/TimestampEditor/TimestampEditor.js +7 -1
  6. package/cjs/DateEditor/DateEditor.js +9 -3
  7. package/cjs/ImageDetailsView/components/MetaInfo/MetaInfo.js +2 -2
  8. package/cjs/Popper/Popper.js +5 -2
  9. package/cjs/SelectionPopup/SelectionPopup.js +7 -4
  10. package/cjs/TimestampEditor/TimestampEditor.js +9 -3
  11. package/cjs/constants/index.d.ts +1 -1
  12. package/cjs/constants/index.js +2 -1
  13. package/cjs/constants/theme.d.ts +2 -1
  14. package/cjs/constants/theme.js +8 -1
  15. package/cjs/contexts/ThemeProvider/ThemeProvider.d.ts +2 -1
  16. package/cjs/contexts/ThemeProvider/ThemeProvider.js +4 -3
  17. package/constants/index.d.ts +1 -1
  18. package/constants/index.js +1 -1
  19. package/constants/theme.d.ts +2 -1
  20. package/constants/theme.js +7 -0
  21. package/contexts/ThemeProvider/ThemeProvider.d.ts +2 -1
  22. package/contexts/ThemeProvider/ThemeProvider.js +4 -3
  23. package/package.json +2 -2
  24. package/ImageDetailsView/components/MetaInfo/theme.d.ts +0 -2
  25. package/ImageDetailsView/components/MetaInfo/theme.js +0 -8
  26. package/cjs/ImageDetailsView/components/MetaInfo/theme.d.ts +0 -2
  27. package/cjs/ImageDetailsView/components/MetaInfo/theme.js +0 -11
package/DateEditor/DateEditor.js CHANGED
@@ -24,16 +24,19 @@ import React, { useMemo } from 'react';
24
24
  import moment from 'moment';
25
25
  import classnames from 'classnames';
26
26
  import { mergeDeepLeft, isNil } from 'ramda';
27
+ import { useTheme } from '@mui/styles';
27
28
  import { utils } from '@reltio/mdm-sdk';
28
29
  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
29
30
  import { useDateEditor } from '../hooks/useDateEditor';
30
31
  import { useStyles } from './styles';
31
32
  export var DateEditor = function (_a) {
32
33
  var _b;
34
+ var _c;
33
35
  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"]);
34
36
  var styles = useStyles();
35
37
  var value = useMemo(function () { return (isNil(valueProp) ? null : utils.dates.clearDateTime(valueProp)); }, [valueProp]);
36
- 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;
38
+ 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;
39
+ var currentTheme = useTheme();
37
40
  var basicSlotProps = {
38
41
  textField: {
39
42
  size: 'small',
@@ -50,6 +53,9 @@ export var DateEditor = function (_a) {
50
53
  },
51
54
  popper: {
52
55
  placement: 'bottom-start',
56
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
57
+ // @ts-ignore
58
+ 'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
53
59
  modifiers: [
54
60
  {
55
61
  name: 'viewHeightModifier',
package/ImageDetailsView/components/MetaInfo/MetaInfo.js CHANGED
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
4
4
  import { MetaInfoHeader } from '../MetaInfoHeader';
5
5
  import { MetaInfoList } from '../MetaInfoList';
6
6
  import { MetaInfoForm } from '../MetaInfoForm';
7
- import { darkTheme } from './theme';
7
+ import { darkTheme } from '../../../constants/theme';
8
8
  import { useEditMetaInfo } from './useEditMetaInfo';
9
9
  import { useMdmIsEditableMode, useMdmMode } from '../../../contexts/MdmModuleContext';
10
10
  var darkMuiTheme = createTheme(darkTheme);
@@ -14,7 +14,7 @@ export var MetaInfo = function (_a) {
14
14
  var isEditableMode = useMdmIsEditableMode();
15
15
  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;
16
16
  return (React.createElement(ThemeProvider, { theme: darkMuiTheme },
17
- React.createElement(Box, null,
17
+ React.createElement(Box, { "data-mui-color-scheme": "dark" },
18
18
  React.createElement(MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
19
19
  React.createElement(MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
20
20
  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 CHANGED
@@ -27,14 +27,17 @@ import Portal from '@mui/material/Portal';
27
27
  import MUIPopper from '@mui/material/Popper';
28
28
  import { resizeBackdrops } from './helpers';
29
29
  import { useStyles } from './styles';
30
+ import { useTheme } from '@mui/styles';
30
31
  export var Popper = forwardRef(function (_a, ref) {
31
- 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"]);
32
+ var _b;
33
+ 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"]);
32
34
  var styles = useStyles();
33
35
  var leftBackdropRef = useRef();
34
36
  var rightBackdropRef = useRef();
35
37
  var topBackdropRef = useRef();
36
38
  var bottomBackdropRef = useRef();
37
39
  var rafIdRef = useRef();
40
+ var currentTheme = useTheme();
38
41
  useEffect(function () {
39
42
  if (open && modal) {
40
43
  resizeBackdrops({
@@ -54,6 +57,6 @@ export var Popper = forwardRef(function (_a, ref) {
54
57
  React.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
55
58
  React.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
56
59
  React.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))) : (React.createElement("div", { className: styles.backdrop, onClick: onClose })))),
57
- React.createElement(MUIPopper, __assign({ open: open, anchorEl: anchorEl }, otherProps, { className: classnames(className, styles.popper), ref: ref }))));
60
+ 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 }))));
58
61
  });
59
62
  Popper.displayName = 'Popper';
package/SelectionPopup/SelectionPopup.js CHANGED
@@ -26,19 +26,22 @@ import i18n from 'ui-i18n';
26
26
  import Popover from '@mui/material/Popover';
27
27
  import { SearchInput } from '../SearchInput';
28
28
  import { useStyles } from './styles';
29
+ import { useTheme } from '@mui/styles';
29
30
  export var SelectionPopup = function (_a) {
30
- 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 ? {
31
+ var _b;
32
+ 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 ? {
31
33
  vertical: 'top',
32
34
  horizontal: 'right'
33
- } : _c, _d = _a.transformOrigin, transformOrigin = _d === void 0 ? {
35
+ } : _d, _e = _a.transformOrigin, transformOrigin = _e === void 0 ? {
34
36
  vertical: 'top',
35
37
  horizontal: 'right'
36
- } : _d, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
38
+ } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
37
39
  var classes = useStyles({ containerWidth: containerWidth, containerHeight: containerHeight });
40
+ var currentTheme = useTheme();
38
41
  var header = (React.createElement(React.Fragment, null,
39
42
  !hideTitle && React.createElement("div", { className: classes.header }, title),
40
43
  !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: i18n.text('Search & add attributes'), height: 40 }))));
41
- return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, otherProps),
44
+ 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),
42
45
  React.createElement("div", { className: classnames(classes.container, className), style: { width: containerWidth } },
43
46
  headerPlacement === 'top' && header,
44
47
  React.createElement("div", { className: classes.list }, children),
package/TimestampEditor/TimestampEditor.js CHANGED
@@ -23,6 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import React from 'react';
24
24
  import classnames from 'classnames';
25
25
  import { isNil, mergeDeepLeft } from 'ramda';
26
+ import { useTheme } from '@mui/styles';
26
27
  import { getLocaleFormat } from '@reltio/mdm-sdk';
27
28
  import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
28
29
  import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
@@ -30,9 +31,11 @@ import { useDateEditor } from '../hooks/useDateEditor';
30
31
  import { useStyles } from './styles';
31
32
  export var TimestampEditor = function (_a) {
32
33
  var _b;
34
+ var _c;
33
35
  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"]);
34
36
  var styles = useStyles();
35
- 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;
37
+ 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;
38
+ var currentTheme = useTheme();
36
39
  var basicSlotProps = {
37
40
  textField: {
38
41
  size: 'small',
@@ -49,6 +52,9 @@ export var TimestampEditor = function (_a) {
49
52
  },
50
53
  popper: {
51
54
  placement: 'bottom-start',
55
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
56
+ // @ts-ignore
57
+ 'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
52
58
  modifiers: [
53
59
  {
54
60
  name: 'viewHeightModifier',
package/cjs/DateEditor/DateEditor.js CHANGED
@@ -53,16 +53,19 @@ var react_1 = __importStar(require("react"));
53
53
  var moment_1 = __importDefault(require("moment"));
54
54
  var classnames_1 = __importDefault(require("classnames"));
55
55
  var ramda_1 = require("ramda");
56
+ var styles_1 = require("@mui/styles");
56
57
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
57
58
  var DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
58
59
  var useDateEditor_1 = require("../hooks/useDateEditor");
59
- var styles_1 = require("./styles");
60
+ var styles_2 = require("./styles");
60
61
  var DateEditor = function (_a) {
61
62
  var _b;
63
+ var _c;
62
64
  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"]);
63
- var styles = (0, styles_1.useStyles)();
65
+ var styles = (0, styles_2.useStyles)();
64
66
  var value = (0, react_1.useMemo)(function () { return ((0, ramda_1.isNil)(valueProp) ? null : mdm_sdk_1.utils.dates.clearDateTime(valueProp)); }, [valueProp]);
65
- 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;
67
+ 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;
68
+ var currentTheme = (0, styles_1.useTheme)();
66
69
  var basicSlotProps = {
67
70
  textField: {
68
71
  size: 'small',
@@ -79,6 +82,9 @@ var DateEditor = function (_a) {
79
82
  },
80
83
  popper: {
81
84
  placement: 'bottom-start',
85
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
86
+ // @ts-ignore
87
+ 'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
82
88
  modifiers: [
83
89
  {
84
90
  name: 'viewHeightModifier',
package/cjs/ImageDetailsView/components/MetaInfo/MetaInfo.js CHANGED
@@ -10,7 +10,7 @@ var Box_1 = __importDefault(require("@mui/material/Box"));
10
10
  var MetaInfoHeader_1 = require("../MetaInfoHeader");
11
11
  var MetaInfoList_1 = require("../MetaInfoList");
12
12
  var MetaInfoForm_1 = require("../MetaInfoForm");
13
- var theme_1 = require("./theme");
13
+ var theme_1 = require("../../../constants/theme");
14
14
  var useEditMetaInfo_1 = require("./useEditMetaInfo");
15
15
  var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
16
16
  var darkMuiTheme = (0, styles_1.createTheme)(theme_1.darkTheme);
@@ -20,7 +20,7 @@ var MetaInfo = function (_a) {
20
20
  var isEditableMode = (0, MdmModuleContext_1.useMdmIsEditableMode)();
21
21
  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;
22
22
  return (react_1.default.createElement(styles_1.ThemeProvider, { theme: darkMuiTheme },
23
- react_1.default.createElement(Box_1.default, null,
23
+ react_1.default.createElement(Box_1.default, { "data-mui-color-scheme": "dark" },
24
24
  react_1.default.createElement(MetaInfoHeader_1.MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
25
25
  react_1.default.createElement(MetaInfoList_1.MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),
26
26
  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 CHANGED
@@ -56,14 +56,17 @@ var Portal_1 = __importDefault(require("@mui/material/Portal"));
56
56
  var Popper_1 = __importDefault(require("@mui/material/Popper"));
57
57
  var helpers_1 = require("./helpers");
58
58
  var styles_1 = require("./styles");
59
+ var styles_2 = require("@mui/styles");
59
60
  exports.Popper = (0, react_1.forwardRef)(function (_a, ref) {
60
- 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"]);
61
+ var _b;
62
+ 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"]);
61
63
  var styles = (0, styles_1.useStyles)();
62
64
  var leftBackdropRef = (0, react_1.useRef)();
63
65
  var rightBackdropRef = (0, react_1.useRef)();
64
66
  var topBackdropRef = (0, react_1.useRef)();
65
67
  var bottomBackdropRef = (0, react_1.useRef)();
66
68
  var rafIdRef = (0, react_1.useRef)();
69
+ var currentTheme = (0, styles_2.useTheme)();
67
70
  (0, react_1.useEffect)(function () {
68
71
  if (open && modal) {
69
72
  (0, helpers_1.resizeBackdrops)({
@@ -83,6 +86,6 @@ exports.Popper = (0, react_1.forwardRef)(function (_a, ref) {
83
86
  react_1.default.createElement("div", { ref: rightBackdropRef, className: styles.backdrop, onClick: onClose }),
84
87
  react_1.default.createElement("div", { ref: bottomBackdropRef, className: styles.backdrop, onClick: onClose }),
85
88
  react_1.default.createElement("div", { ref: leftBackdropRef, className: styles.backdrop, onClick: onClose }))) : (react_1.default.createElement("div", { className: styles.backdrop, onClick: onClose })))),
86
- react_1.default.createElement(Popper_1.default, __assign({ open: open, anchorEl: anchorEl }, otherProps, { className: (0, classnames_1.default)(className, styles.popper), ref: ref }))));
89
+ 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 }))));
87
90
  });
88
91
  exports.Popper.displayName = 'Popper';
package/cjs/SelectionPopup/SelectionPopup.js CHANGED
@@ -32,19 +32,22 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
32
32
  var Popover_1 = __importDefault(require("@mui/material/Popover"));
33
33
  var SearchInput_1 = require("../SearchInput");
34
34
  var styles_1 = require("./styles");
35
+ var styles_2 = require("@mui/styles");
35
36
  var SelectionPopup = function (_a) {
36
- 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 ? {
37
+ var _b;
38
+ 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 ? {
37
39
  vertical: 'top',
38
40
  horizontal: 'right'
39
- } : _c, _d = _a.transformOrigin, transformOrigin = _d === void 0 ? {
41
+ } : _d, _e = _a.transformOrigin, transformOrigin = _e === void 0 ? {
40
42
  vertical: 'top',
41
43
  horizontal: 'right'
42
- } : _d, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
44
+ } : _e, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
43
45
  var classes = (0, styles_1.useStyles)({ containerWidth: containerWidth, containerHeight: containerHeight });
46
+ var currentTheme = (0, styles_2.useTheme)();
44
47
  var header = (react_1.default.createElement(react_1.default.Fragment, null,
45
48
  !hideTitle && react_1.default.createElement("div", { className: classes.header }, title),
46
49
  !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 }))));
47
- return (react_1.default.createElement(Popover_1.default, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, otherProps),
50
+ 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),
48
51
  react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.container, className), style: { width: containerWidth } },
49
52
  headerPlacement === 'top' && header,
50
53
  react_1.default.createElement("div", { className: classes.list }, children),
package/cjs/TimestampEditor/TimestampEditor.js CHANGED
@@ -29,16 +29,19 @@ exports.TimestampEditor = void 0;
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var classnames_1 = __importDefault(require("classnames"));
31
31
  var ramda_1 = require("ramda");
32
+ var styles_1 = require("@mui/styles");
32
33
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
33
34
  var timeViewRenderers_1 = require("@mui/x-date-pickers/timeViewRenderers");
34
35
  var DateTimePicker_1 = require("@mui/x-date-pickers/DateTimePicker");
35
36
  var useDateEditor_1 = require("../hooks/useDateEditor");
36
- var styles_1 = require("./styles");
37
+ var styles_2 = require("./styles");
37
38
  var TimestampEditor = function (_a) {
38
39
  var _b;
40
+ var _c;
39
41
  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"]);
40
- var styles = (0, styles_1.useStyles)();
41
- 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;
42
+ var styles = (0, styles_2.useStyles)();
43
+ 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;
44
+ var currentTheme = (0, styles_1.useTheme)();
42
45
  var basicSlotProps = {
43
46
  textField: {
44
47
  size: 'small',
@@ -55,6 +58,9 @@ var TimestampEditor = function (_a) {
55
58
  },
56
59
  popper: {
57
60
  placement: 'bottom-start',
61
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
62
+ // @ts-ignore
63
+ 'data-mui-color-scheme': (_c = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _c === void 0 ? void 0 : _c.mode,
58
64
  modifiers: [
59
65
  {
60
66
  name: 'viewHeightModifier',
package/cjs/constants/index.d.ts CHANGED
@@ -6,4 +6,4 @@ export { COMMON_TEXT_FIELD_PROPS } from './textField';
6
6
  export { POPUP_Z_INDEX } from './common';
7
7
  export { ReactSelectOptionFilters } from './reactSelect';
8
8
  export { editingModeOption, suggestingModeOption, viewingModeOption } from './modeOptions';
9
- export { theme } from './theme';
9
+ export { theme, darkTheme } from './theme';
package/cjs/constants/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ 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;
4
4
  var prop_types_1 = require("./prop-types");
5
5
  Object.defineProperty(exports, "SortingType", { enumerable: true, get: function () { return prop_types_1.SortingType; } });
6
6
  Object.defineProperty(exports, "QueryBuilderAttributeType", { enumerable: true, get: function () { return prop_types_1.QueryBuilderAttributeType; } });
@@ -25,3 +25,4 @@ Object.defineProperty(exports, "suggestingModeOption", { enumerable: true, get:
25
25
  Object.defineProperty(exports, "viewingModeOption", { enumerable: true, get: function () { return modeOptions_1.viewingModeOption; } });
26
26
  var theme_1 = require("./theme");
27
27
  Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.theme; } });
28
+ Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
package/cjs/constants/theme.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Theme } from '@mui/material/styles';
1
+ import { Theme, ThemeOptions } from '@mui/material/styles';
2
2
  import '@mui/styles';
3
3
  type ReltioTheme = Theme & {
4
4
  inactiveBackground: string;
@@ -175,4 +175,5 @@ export declare const theme: {
175
175
  };
176
176
  suggested: string;
177
177
  };
178
+ export declare const darkTheme: ThemeOptions;
178
179
  export {};
package/cjs/constants/theme.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.theme = void 0;
3
+ exports.darkTheme = exports.theme = void 0;
4
4
  require("@mui/styles");
5
5
  exports.theme = {
6
6
  palette: {
@@ -151,3 +151,10 @@ exports.theme = {
151
151
  },
152
152
  suggested: 'rgb(237, 246, 251)'
153
153
  };
154
+ exports.darkTheme = {
155
+ palette: {
156
+ mode: 'dark',
157
+ primary: exports.theme.palette.primary,
158
+ secondary: exports.theme.palette.secondary
159
+ }
160
+ };
package/cjs/contexts/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Theme } from '@mui/material/styles';
3
3
  type Props = {
4
4
  children: ReactNode;
5
5
  theme: Theme;
6
+ darkTheme?: Theme;
6
7
  };
7
- export declare const ThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
8
+ export declare const ThemeProvider: ({ children, theme, darkTheme }: Props) => React.JSX.Element;
8
9
  export {};
package/cjs/contexts/ThemeProvider/ThemeProvider.js CHANGED
@@ -39,14 +39,15 @@ var react_1 = __importStar(require("react"));
39
39
  var styles_1 = require("@mui/styles");
40
40
  var styles_2 = require("@mui/material/styles");
41
41
  var ThemeProvider = function (_a) {
42
- var children = _a.children, theme = _a.theme;
42
+ var children = _a.children, theme = _a.theme, darkTheme = _a.darkTheme;
43
43
  var reltioTheme = (0, react_1.useMemo)(function () {
44
44
  return (0, styles_2.experimental_extendTheme)({
45
45
  colorSchemes: {
46
- light: __assign({}, theme)
46
+ light: __assign({}, theme),
47
+ dark: __assign({}, darkTheme)
47
48
  }
48
49
  });
49
- }, [theme]);
50
+ }, [theme, darkTheme]);
50
51
  return (react_1.default.createElement(styles_2.Experimental_CssVarsProvider, { theme: reltioTheme },
51
52
  react_1.default.createElement(styles_1.ThemeProvider, { theme: theme }, children)));
52
53
  };
package/constants/index.d.ts CHANGED
@@ -6,4 +6,4 @@ export { COMMON_TEXT_FIELD_PROPS } from './textField';
6
6
  export { POPUP_Z_INDEX } from './common';
7
7
  export { ReactSelectOptionFilters } from './reactSelect';
8
8
  export { editingModeOption, suggestingModeOption, viewingModeOption } from './modeOptions';
9
- export { theme } from './theme';
9
+ export { theme, darkTheme } from './theme';
package/constants/index.js CHANGED
@@ -6,4 +6,4 @@ export { COMMON_TEXT_FIELD_PROPS } from './textField';
6
6
  export { POPUP_Z_INDEX } from './common';
7
7
  export { ReactSelectOptionFilters } from './reactSelect';
8
8
  export { editingModeOption, suggestingModeOption, viewingModeOption } from './modeOptions';
9
- export { theme } from './theme';
9
+ export { theme, darkTheme } from './theme';
package/constants/theme.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Theme } from '@mui/material/styles';
1
+ import { Theme, ThemeOptions } from '@mui/material/styles';
2
2
  import '@mui/styles';
3
3
  type ReltioTheme = Theme & {
4
4
  inactiveBackground: string;
@@ -175,4 +175,5 @@ export declare const theme: {
175
175
  };
176
176
  suggested: string;
177
177
  };
178
+ export declare const darkTheme: ThemeOptions;
178
179
  export {};
package/constants/theme.js CHANGED
@@ -148,3 +148,10 @@ export var theme = {
148
148
  },
149
149
  suggested: 'rgb(237, 246, 251)'
150
150
  };
151
+ export var darkTheme = {
152
+ palette: {
153
+ mode: 'dark',
154
+ primary: theme.palette.primary,
155
+ secondary: theme.palette.secondary
156
+ }
157
+ };
package/contexts/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Theme } from '@mui/material/styles';
3
3
  type Props = {
4
4
  children: ReactNode;
5
5
  theme: Theme;
6
+ darkTheme?: Theme;
6
7
  };
7
- export declare const ThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
8
+ export declare const ThemeProvider: ({ children, theme, darkTheme }: Props) => React.JSX.Element;
8
9
  export {};
package/contexts/ThemeProvider/ThemeProvider.js CHANGED
@@ -13,14 +13,15 @@ import React, { useMemo } from 'react';
13
13
  import { ThemeProvider as MuiThemeProvider } from '@mui/styles';
14
14
  import { experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
15
15
  export var ThemeProvider = function (_a) {
16
- var children = _a.children, theme = _a.theme;
16
+ var children = _a.children, theme = _a.theme, darkTheme = _a.darkTheme;
17
17
  var reltioTheme = useMemo(function () {
18
18
  return extendTheme({
19
19
  colorSchemes: {
20
- light: __assign({}, theme)
20
+ light: __assign({}, theme),
21
+ dark: __assign({}, darkTheme)
21
22
  }
22
23
  });
23
- }, [theme]);
24
+ }, [theme, darkTheme]);
24
25
  return (React.createElement(CssVarsProvider, { theme: reltioTheme },
25
26
  React.createElement(MuiThemeProvider, { theme: theme }, children)));
26
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.2038",
3
+ "version": "1.4.2040",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./index.js",
@@ -11,7 +11,7 @@
11
11
  "@fluentui/react-context-selector": "^9.1.26",
12
12
  "@googlemaps/markerclusterer": "^2.5.3",
13
13
  "@react-sigma/core": "3.4.0",
14
- "@reltio/mdm-sdk": "^1.4.1903",
14
+ "@reltio/mdm-sdk": "^1.4.1904",
15
15
  "@vis.gl/react-google-maps": "^1.3.0",
16
16
  "d3-cloud": "^1.2.5",
17
17
  "d3-geo": "^2.0.1",
package/ImageDetailsView/components/MetaInfo/theme.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { ThemeOptions } from '@mui/material/styles';
2
- export declare const darkTheme: ThemeOptions;
package/ImageDetailsView/components/MetaInfo/theme.js DELETED
@@ -1,8 +0,0 @@
1
- import { theme } from '../../../constants';
2
- export var darkTheme = {
3
- palette: {
4
- mode: 'dark',
5
- primary: theme.palette.primary,
6
- secondary: theme.palette.secondary
7
- }
8
- };
package/cjs/ImageDetailsView/components/MetaInfo/theme.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { ThemeOptions } from '@mui/material/styles';
2
- export declare const darkTheme: ThemeOptions;
package/cjs/ImageDetailsView/components/MetaInfo/theme.js DELETED
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.darkTheme = void 0;
4
- var constants_1 = require("../../../constants");
5
- exports.darkTheme = {
6
- palette: {
7
- mode: 'dark',
8
- primary: constants_1.theme.palette.primary,
9
- secondary: constants_1.theme.palette.secondary
10
- }
11
- };