@reltio/components 1.4.2036 → 1.4.2038

package/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -27,11 +27,20 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
-import { useStyles } from './styles';
+import { useCssVariableStyles } from '../hooks/useCssVariableStyles/useCssVariableStyles';
+import styles from './styles.module.css';
 var isButton = function (value) { return 'onClick' in value; };
+var MAX_WIDTH_SELECT = 200;
+var SELECT_PADDING_RIGHT = 32;
+var SELECT_PADDING_LEFT = 12;
+var CALCULATED_MAX_WIDTH_SELECT = MAX_WIDTH_SELECT - SELECT_PADDING_LEFT - SELECT_PADDING_RIGHT;
 export var ModeSwitcherSelect = function (_a) {
     var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? 'normal' : _f;
-    var styles = useStyles();
+    var variableStyles = useCssVariableStyles({
+        '--max-width-select': "".concat(CALCULATED_MAX_WIDTH_SELECT, "px"),
+        '--select-padding-right': "".concat(SELECT_PADDING_RIGHT, "px"),
+        '--select-padding-left': "".concat(SELECT_PADDING_LEFT, "px")
+    });
     var handleChange = function (e) {
         var value = e.target.value;
         var isOption = optionsGroup.some(propEq('value', value));
@@ -61,7 +70,7 @@ export var ModeSwitcherSelect = function (_a) {
                         React.createElement(Typography, { className: styles.menuItemDescription }, description)))));
         });
     };
-    return (React.createElement(Select, { className: styles.select, classes: {
+    return (React.createElement(Select, { style: variableStyles, className: styles.select, classes: {
             select: classnames(styles.root, styles[variant]),
             icon: classnames(styles.arrowIcon, styles[variant]),
             outlined: styles.outlined

package/ModeSwitcherSelect/styles.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"ModeSwitcherSelect-root--U-mxG","outlined":"ModeSwitcherSelect-outlined--Lzkdu","normal":"ModeSwitcherSelect-normal--eJi9k","thin":"ModeSwitcherSelect-thin--3ut9c","select":"ModeSwitcherSelect-select--5-O3e","Mui-disabled":"ModeSwitcherSelect-Mui-disabled--Ovc-G","MuiOutlinedInput-notchedOutline":"ModeSwitcherSelect-MuiOutlinedInput-notchedOutline--6sEd2","currentValueIcon":"ModeSwitcherSelect-currentValueIcon--NO4sL","currentValueText":"ModeSwitcherSelect-currentValueText--LfE9q","arrowIcon":"ModeSwitcherSelect-arrowIcon--n3PP2","currentValue":"ModeSwitcherSelect-currentValue--qmIjV","menuItem":"ModeSwitcherSelect-menuItem--wGmWL","firstMenuItemButton":"ModeSwitcherSelect-firstMenuItemButton--8qaFd","menuItemInner":"ModeSwitcherSelect-menuItemInner--9DSaH","menuItemIcon":"ModeSwitcherSelect-menuItemIcon--TfRCH","menuItemLabel":"ModeSwitcherSelect-menuItemLabel--0Tz-h","menuItemDescription":"ModeSwitcherSelect-menuItemDescription--nFZuS"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ModeSwitcherSelect-root--U-mxG{align-items:center;display:inline-flex;max-width:var(--max-width-select)}.ModeSwitcherSelect-root--U-mxG.ModeSwitcherSelect-outlined--Lzkdu{min-height:1.1876em}.ModeSwitcherSelect-root--U-mxG.ModeSwitcherSelect-normal--eJi9k{padding-bottom:9px;padding-top:9px}.ModeSwitcherSelect-root--U-mxG.ModeSwitcherSelect-thin--3ut9c{padding-bottom:6px;padding-top:6px}.ModeSwitcherSelect-select--5-O3e.ModeSwitcherSelect-Mui-disabled--Ovc-G .ModeSwitcherSelect-MuiOutlinedInput-notchedOutline--6sEd2{border-color:var(--mui-palette-text-disabled)}.ModeSwitcherSelect-select--5-O3e.ModeSwitcherSelect-Mui-disabled--Ovc-G .ModeSwitcherSelect-currentValueIcon--NO4sL,.ModeSwitcherSelect-select--5-O3e.ModeSwitcherSelect-Mui-disabled--Ovc-G .ModeSwitcherSelect-currentValueText--LfE9q{color:var(--mui-palette-text-disabled)}.ModeSwitcherSelect-outlined--Lzkdu{padding-left:var(--select-padding-left);padding-right:var(--select-padding-right)}.ModeSwitcherSelect-arrowIcon--n3PP2{color:var(--mui-palette-text-secondary);font-size:18px;right:12px;top:calc(50% - 9px)}.ModeSwitcherSelect-arrowIcon--n3PP2.ModeSwitcherSelect-thin--3ut9c{right:8px}.ModeSwitcherSelect-currentValue--qmIjV{align-items:center;display:flex}.ModeSwitcherSelect-currentValueIcon--NO4sL{color:var(--mui-palette-text-secondary);display:inline-block;font-size:18px;height:1em;margin-right:8px;width:1em}.ModeSwitcherSelect-currentValueText--LfE9q{color:var(--mui-palette-text-primary);font-size:14px;font-weight:500;line-height:16px;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.ModeSwitcherSelect-menuItem--wGmWL{padding:9px 12px 7px}.ModeSwitcherSelect-firstMenuItemButton--8qaFd{border-top:1px solid #e4e4e4}.ModeSwitcherSelect-menuItemInner--9DSaH{align-items:flex-start;display:flex}.ModeSwitcherSelect-menuItemIcon--TfRCH{color:var(--mui-palette-text-secondary);display:inline-block;font-size:18px;height:1em;margin-right:9px;width:1em}.ModeSwitcherSelect-menuItemLabel--0Tz-h{color:var(--mui-palette-text-primary);font-size:14px;font-weight:500;line-height:16px}.ModeSwitcherSelect-menuItemDescription--nFZuS{color:var(--mui-palette-text-secondary);font-size:10px;line-height:16px}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -33,11 +33,20 @@ var Box_1 = __importDefault(require("@mui/material/Box"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
-var styles_1 = require("./styles");
+var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles/useCssVariableStyles");
+var styles_module_css_1 = __importDefault(require("./styles.module.css"));
 var isButton = function (value) { return 'onClick' in value; };
+var MAX_WIDTH_SELECT = 200;
+var SELECT_PADDING_RIGHT = 32;
+var SELECT_PADDING_LEFT = 12;
+var CALCULATED_MAX_WIDTH_SELECT = MAX_WIDTH_SELECT - SELECT_PADDING_LEFT - SELECT_PADDING_RIGHT;
 var ModeSwitcherSelect = function (_a) {
     var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? 'normal' : _f;
-    var styles = (0, styles_1.useStyles)();
+    var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--max-width-select': "".concat(CALCULATED_MAX_WIDTH_SELECT, "px"),
+        '--select-padding-right': "".concat(SELECT_PADDING_RIGHT, "px"),
+        '--select-padding-left': "".concat(SELECT_PADDING_LEFT, "px")
+    });
     var handleChange = function (e) {
         var value = e.target.value;
         var isOption = optionsGroup.some((0, ramda_1.propEq)('value', value));
@@ -51,32 +60,32 @@ var ModeSwitcherSelect = function (_a) {
             var value = item.value, label = item.label, description = item.description, IconComponent = item.icon;
             var menuItemProps = {
                 value: value,
-                className: styles.menuItem
+                className: styles_module_css_1.default.menuItem
             };
             if (isButton(item)) {
                 menuItemProps.onClick = function () { return item.onClick(value); };
                 menuItemProps.className = (0, classnames_1.default)(menuItemProps.className, (_a = {},
-                    _a[styles.firstMenuItemButton] = idx === firstButtonIdx,
+                    _a[styles_module_css_1.default.firstMenuItemButton] = idx === firstButtonIdx,
                     _a));
             }
             return (react_1.default.createElement(MenuItem_1.default, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-".concat(value) }),
-                react_1.default.createElement(Box_1.default, { className: styles.menuItemInner },
-                    IconComponent && react_1.default.createElement(IconComponent, { className: styles.menuItemIcon }),
+                react_1.default.createElement(Box_1.default, { className: styles_module_css_1.default.menuItemInner },
+                    IconComponent && react_1.default.createElement(IconComponent, { className: styles_module_css_1.default.menuItemIcon }),
                     react_1.default.createElement(Box_1.default, null,
-                        react_1.default.createElement(Typography_1.default, { className: styles.menuItemLabel }, label),
-                        react_1.default.createElement(Typography_1.default, { className: styles.menuItemDescription }, description)))));
+                        react_1.default.createElement(Typography_1.default, { className: styles_module_css_1.default.menuItemLabel }, label),
+                        react_1.default.createElement(Typography_1.default, { className: styles_module_css_1.default.menuItemDescription }, description)))));
         });
     };
-    return (react_1.default.createElement(Select_1.default, { className: styles.select, classes: {
-            select: (0, classnames_1.default)(styles.root, styles[variant]),
-            icon: (0, classnames_1.default)(styles.arrowIcon, styles[variant]),
-            outlined: styles.outlined
+    return (react_1.default.createElement(Select_1.default, { style: variableStyles, className: styles_module_css_1.default.select, classes: {
+            select: (0, classnames_1.default)(styles_module_css_1.default.root, styles_module_css_1.default[variant]),
+            icon: (0, classnames_1.default)(styles_module_css_1.default.arrowIcon, styles_module_css_1.default[variant]),
+            outlined: styles_module_css_1.default.outlined
         }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
             var _a = optionsGroup.find((0, ramda_1.propEq)('value', value)) || {}, IconComponent = _a.icon, _b = _a.label, label = _b === void 0 ? value : _b;
-            return (react_1.default.createElement(Box_1.default, { className: styles.currentValue },
-                loading ? (react_1.default.createElement(CircularProgress_1.default, { size: "1em", "data-reltio-id": "mode-loading-spinner", className: styles.currentValueIcon })) : (IconComponent && react_1.default.createElement(IconComponent, { className: styles.currentValueIcon })),
+            return (react_1.default.createElement(Box_1.default, { className: styles_module_css_1.default.currentValue },
+                loading ? (react_1.default.createElement(CircularProgress_1.default, { size: "1em", "data-reltio-id": "mode-loading-spinner", className: styles_module_css_1.default.currentValueIcon })) : (IconComponent && react_1.default.createElement(IconComponent, { className: styles_module_css_1.default.currentValueIcon })),
                 react_1.default.createElement(Tooltip_1.default, { title: label },
-                    react_1.default.createElement(Typography_1.default, { className: styles.currentValueText }, label))));
+                    react_1.default.createElement(Typography_1.default, { className: styles_module_css_1.default.currentValueText }, label))));
         }, MenuProps: {
             anchorOrigin: {
                 vertical: 'bottom',

package/cjs/ModeSwitcherSelect/styles.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"ModeSwitcherSelect-root--U-mxG","outlined":"ModeSwitcherSelect-outlined--Lzkdu","normal":"ModeSwitcherSelect-normal--eJi9k","thin":"ModeSwitcherSelect-thin--3ut9c","select":"ModeSwitcherSelect-select--5-O3e","Mui-disabled":"ModeSwitcherSelect-Mui-disabled--Ovc-G","MuiOutlinedInput-notchedOutline":"ModeSwitcherSelect-MuiOutlinedInput-notchedOutline--6sEd2","currentValueIcon":"ModeSwitcherSelect-currentValueIcon--NO4sL","currentValueText":"ModeSwitcherSelect-currentValueText--LfE9q","arrowIcon":"ModeSwitcherSelect-arrowIcon--n3PP2","currentValue":"ModeSwitcherSelect-currentValue--qmIjV","menuItem":"ModeSwitcherSelect-menuItem--wGmWL","firstMenuItemButton":"ModeSwitcherSelect-firstMenuItemButton--8qaFd","menuItemInner":"ModeSwitcherSelect-menuItemInner--9DSaH","menuItemIcon":"ModeSwitcherSelect-menuItemIcon--TfRCH","menuItemLabel":"ModeSwitcherSelect-menuItemLabel--0Tz-h","menuItemDescription":"ModeSwitcherSelect-menuItemDescription--nFZuS"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ModeSwitcherSelect-root--U-mxG{align-items:center;display:inline-flex;max-width:var(--max-width-select)}.ModeSwitcherSelect-root--U-mxG.ModeSwitcherSelect-outlined--Lzkdu{min-height:1.1876em}.ModeSwitcherSelect-root--U-mxG.ModeSwitcherSelect-normal--eJi9k{padding-bottom:9px;padding-top:9px}.ModeSwitcherSelect-root--U-mxG.ModeSwitcherSelect-thin--3ut9c{padding-bottom:6px;padding-top:6px}.ModeSwitcherSelect-select--5-O3e.ModeSwitcherSelect-Mui-disabled--Ovc-G .ModeSwitcherSelect-MuiOutlinedInput-notchedOutline--6sEd2{border-color:var(--mui-palette-text-disabled)}.ModeSwitcherSelect-select--5-O3e.ModeSwitcherSelect-Mui-disabled--Ovc-G .ModeSwitcherSelect-currentValueIcon--NO4sL,.ModeSwitcherSelect-select--5-O3e.ModeSwitcherSelect-Mui-disabled--Ovc-G .ModeSwitcherSelect-currentValueText--LfE9q{color:var(--mui-palette-text-disabled)}.ModeSwitcherSelect-outlined--Lzkdu{padding-left:var(--select-padding-left);padding-right:var(--select-padding-right)}.ModeSwitcherSelect-arrowIcon--n3PP2{color:var(--mui-palette-text-secondary);font-size:18px;right:12px;top:calc(50% - 9px)}.ModeSwitcherSelect-arrowIcon--n3PP2.ModeSwitcherSelect-thin--3ut9c{right:8px}.ModeSwitcherSelect-currentValue--qmIjV{align-items:center;display:flex}.ModeSwitcherSelect-currentValueIcon--NO4sL{color:var(--mui-palette-text-secondary);display:inline-block;font-size:18px;height:1em;margin-right:8px;width:1em}.ModeSwitcherSelect-currentValueText--LfE9q{color:var(--mui-palette-text-primary);font-size:14px;font-weight:500;line-height:16px;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.ModeSwitcherSelect-menuItem--wGmWL{padding:9px 12px 7px}.ModeSwitcherSelect-firstMenuItemButton--8qaFd{border-top:1px solid #e4e4e4}.ModeSwitcherSelect-menuItemInner--9DSaH{align-items:flex-start;display:flex}.ModeSwitcherSelect-menuItemIcon--TfRCH{color:var(--mui-palette-text-secondary);display:inline-block;font-size:18px;height:1em;margin-right:9px;width:1em}.ModeSwitcherSelect-menuItemLabel--0Tz-h{color:var(--mui-palette-text-primary);font-size:14px;font-weight:500;line-height:16px}.ModeSwitcherSelect-menuItemDescription--nFZuS{color:var(--mui-palette-text-secondary);font-size:10px;line-height:16px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+type Props = {
+    children: ReactNode;
+    theme: Theme;
+};
+export declare const ThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
+export {};

package/cjs/contexts/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,53 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+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 reltioTheme = (0, react_1.useMemo)(function () {
+        return (0, styles_2.experimental_extendTheme)({
+            colorSchemes: {
+                light: __assign({}, theme)
+            }
+        });
+    }, [theme]);
+    return (react_1.default.createElement(styles_2.Experimental_CssVarsProvider, { theme: reltioTheme },
+        react_1.default.createElement(styles_1.ThemeProvider, { theme: theme }, children)));
+};
+exports.ThemeProvider = ThemeProvider;

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

@@ -0,0 +1 @@
+export { ThemeProvider } from './ThemeProvider';

package/cjs/contexts/ThemeProvider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+var ThemeProvider_1 = require("./ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });

package/cjs/hooks/useCssVariableStyles/index.d.ts

@@ -0,0 +1 @@
+export { useCssVariableStyles } from './useCssVariableStyles';

package/cjs/hooks/useCssVariableStyles/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCssVariableStyles = void 0;
+var useCssVariableStyles_1 = require("./useCssVariableStyles");
+Object.defineProperty(exports, "useCssVariableStyles", { enumerable: true, get: function () { return useCssVariableStyles_1.useCssVariableStyles; } });

package/cjs/hooks/useCssVariableStyles/useCssVariableStyles.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+type CssValue = string | number;
+type CssVariables = Record<`--${string}`, CssValue>;
+export declare const useCssVariableStyles: (variables: CssVariables, additionalStyles?: CSSProperties) => CSSProperties;
+export {};

package/cjs/hooks/useCssVariableStyles/useCssVariableStyles.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCssVariableStyles = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var useCssVariableStyles = function (variables, additionalStyles) {
+    if (additionalStyles === void 0) { additionalStyles = {}; }
+    var style = (0, react_1.useMemo)(function () {
+        return Object.fromEntries(Object.entries(variables).map(function (_a) {
+            var key = _a[0], value = _a[1];
+            var verifiedValue = (0, ramda_1.isNil)(value) || value === '' ? 'initial' : value;
+            return [key, verifiedValue];
+        }));
+    }, [variables]);
+    return __assign(__assign({}, style), additionalStyles);
+};
+exports.useCssVariableStyles = useCssVariableStyles;

package/cjs/index.d.ts

@@ -226,6 +226,7 @@ export { RowCollapseContext as BasicTableRowCollapseContext } from './contexts/R
 export { BasicTableContext } from './contexts/BasicTableContext';
 export { HiddenAttributesContext } from './contexts/HiddenAttributesContext';
 export { ProfileTablesContext } from './contexts/ProfileTablesContext';
+export { ThemeProvider } from './contexts/ThemeProvider';
 export { useScrollToAttributeError } from './hooks/useScrollToAttributeError';
 export { useMatchesColumnsData } from './hooks/useMatchesColumnsData';
 export { useActions } from './hooks/useActions';

package/cjs/index.js

@@ -19,8 +19,8 @@ exports.ConnectionEditor = exports.DropDownSelector = exports.ReactSelectOptionW
 exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportButton = exports.ReadableSearchQueryBuilder = exports.ReadableSearchQuery = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ProfilesList = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.ImageGalleryDialog = exports.RelationTypesSelector = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.EmptyStub = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.ErrorWrapper = exports.ErrorMessage = exports.ConfigureColumnsPopup = void 0;
 exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = void 0;
 exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = void 0;
-exports.useMarkers = exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.useReloadData = void 0;
-exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = void 0;
+exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ThemeProvider = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.useReloadData = void 0;
+exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -512,6 +512,8 @@ var HiddenAttributesContext_1 = require("./contexts/HiddenAttributesContext");
 Object.defineProperty(exports, "HiddenAttributesContext", { enumerable: true, get: function () { return HiddenAttributesContext_1.HiddenAttributesContext; } });
 var ProfileTablesContext_1 = require("./contexts/ProfileTablesContext");
 Object.defineProperty(exports, "ProfileTablesContext", { enumerable: true, get: function () { return ProfileTablesContext_1.ProfileTablesContext; } });
+var ThemeProvider_1 = require("./contexts/ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
 // hooks
 var useScrollToAttributeError_1 = require("./hooks/useScrollToAttributeError");
 Object.defineProperty(exports, "useScrollToAttributeError", { enumerable: true, get: function () { return useScrollToAttributeError_1.useScrollToAttributeError; } });

package/contexts/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+type Props = {
+    children: ReactNode;
+    theme: Theme;
+};
+export declare const ThemeProvider: ({ children, theme }: Props) => React.JSX.Element;
+export {};

package/contexts/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 reltioTheme = useMemo(function () {
+        return extendTheme({
+            colorSchemes: {
+                light: __assign({}, theme)
+            }
+        });
+    }, [theme]);
+    return (React.createElement(CssVarsProvider, { theme: reltioTheme },
+        React.createElement(MuiThemeProvider, { theme: theme }, children)));
+};

package/contexts/ThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export { ThemeProvider } from './ThemeProvider';

package/contexts/ThemeProvider/index.js

@@ -0,0 +1 @@
+export { ThemeProvider } from './ThemeProvider';

package/hooks/useCssVariableStyles/index.d.ts

@@ -0,0 +1 @@
+export { useCssVariableStyles } from './useCssVariableStyles';

package/hooks/useCssVariableStyles/index.js

@@ -0,0 +1 @@
+export { useCssVariableStyles } from './useCssVariableStyles';

package/hooks/useCssVariableStyles/useCssVariableStyles.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+type CssValue = string | number;
+type CssVariables = Record<`--${string}`, CssValue>;
+export declare const useCssVariableStyles: (variables: CssVariables, additionalStyles?: CSSProperties) => CSSProperties;
+export {};

package/hooks/useCssVariableStyles/useCssVariableStyles.js

@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo } from 'react';
+import { isNil } from 'ramda';
+export var useCssVariableStyles = function (variables, additionalStyles) {
+    if (additionalStyles === void 0) { additionalStyles = {}; }
+    var style = useMemo(function () {
+        return Object.fromEntries(Object.entries(variables).map(function (_a) {
+            var key = _a[0], value = _a[1];
+            var verifiedValue = isNil(value) || value === '' ? 'initial' : value;
+            return [key, verifiedValue];
+        }));
+    }, [variables]);
+    return __assign(__assign({}, style), additionalStyles);
+};

package/index.d.ts

@@ -226,6 +226,7 @@ export { RowCollapseContext as BasicTableRowCollapseContext } from './contexts/R
 export { BasicTableContext } from './contexts/BasicTableContext';
 export { HiddenAttributesContext } from './contexts/HiddenAttributesContext';
 export { ProfileTablesContext } from './contexts/ProfileTablesContext';
+export { ThemeProvider } from './contexts/ThemeProvider';
 export { useScrollToAttributeError } from './hooks/useScrollToAttributeError';
 export { useMatchesColumnsData } from './hooks/useMatchesColumnsData';
 export { useActions } from './hooks/useActions';

package/index.js

@@ -229,6 +229,7 @@ export { RowCollapseContext as BasicTableRowCollapseContext } from './contexts/R
 export { BasicTableContext } from './contexts/BasicTableContext';
 export { HiddenAttributesContext } from './contexts/HiddenAttributesContext';
 export { ProfileTablesContext } from './contexts/ProfileTablesContext';
+export { ThemeProvider } from './contexts/ThemeProvider';
 // hooks
 export { useScrollToAttributeError } from './hooks/useScrollToAttributeError';
 export { useMatchesColumnsData } from './hooks/useMatchesColumnsData';

package/package.json

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

package/ModeSwitcherSelect/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"normal" | "thin" | "select" | "root" | "menuItem" | "outlined" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/ModeSwitcherSelect/styles.js

@@ -1,99 +0,0 @@
-import { makeStyles } from '@mui/styles';
-var MAX_WIDTH_SELECT = 200;
-var SELECT_PADDING_RIGHT = 32;
-var SELECT_PADDING_LEFT = 12;
-var CALCULATED_MAX_WIDTH_SELECT = MAX_WIDTH_SELECT - SELECT_PADDING_LEFT - SELECT_PADDING_RIGHT;
-export var useStyles = makeStyles(function (theme) { return ({
-    normal: {},
-    thin: {},
-    root: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        maxWidth: CALCULATED_MAX_WIDTH_SELECT,
-        '&$outlined': {
-            minHeight: '1.1876em'
-        },
-        '&$normal': {
-            paddingTop: '9px',
-            paddingBottom: '9px'
-        },
-        '&$thin': {
-            paddingTop: '6px',
-            paddingBottom: '6px'
-        }
-    },
-    select: {
-        '&.Mui-disabled': {
-            '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.text.disabled
-            },
-            '& $currentValueIcon, & $currentValueText': {
-                color: theme.palette.text.disabled
-            }
-        }
-    },
-    outlined: {
-        paddingRight: SELECT_PADDING_RIGHT,
-        paddingLeft: SELECT_PADDING_LEFT
-    },
-    arrowIcon: {
-        fontSize: '18px',
-        top: 'calc(50% - 9px)',
-        right: '12px',
-        color: theme.palette.text.secondary,
-        '&$thin': {
-            right: '8px'
-        }
-    },
-    currentValue: {
-        display: 'flex',
-        alignItems: 'center'
-    },
-    currentValueIcon: {
-        width: '1em',
-        height: '1em',
-        display: 'inline-block',
-        fontSize: '18px',
-        marginRight: '8px',
-        color: theme.palette.text.secondary
-    },
-    currentValueText: {
-        fontSize: '14px',
-        lineHeight: '16px',
-        textTransform: 'uppercase',
-        fontWeight: 500,
-        color: theme.palette.text.primary,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden'
-    },
-    menuItem: {
-        padding: '9px 12px 7px'
-    },
-    firstMenuItemButton: {
-        borderTop: '1px solid #e4e4e4'
-    },
-    menuItemInner: {
-        display: 'flex',
-        alignItems: 'flex-start'
-    },
-    menuItemIcon: {
-        width: '1em',
-        height: '1em',
-        display: 'inline-block',
-        fontSize: '18px',
-        color: theme.palette.text.secondary,
-        marginRight: '9px'
-    },
-    menuItemLabel: {
-        fontSize: '14px',
-        lineHeight: '16px',
-        fontWeight: 500,
-        color: theme.palette.text.primary
-    },
-    menuItemDescription: {
-        fontSize: '10px',
-        lineHeight: '16px',
-        color: theme.palette.text.secondary
-    }
-}); });

package/cjs/ModeSwitcherSelect/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"normal" | "thin" | "select" | "root" | "menuItem" | "outlined" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/cjs/ModeSwitcherSelect/styles.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-var MAX_WIDTH_SELECT = 200;
-var SELECT_PADDING_RIGHT = 32;
-var SELECT_PADDING_LEFT = 12;
-var CALCULATED_MAX_WIDTH_SELECT = MAX_WIDTH_SELECT - SELECT_PADDING_LEFT - SELECT_PADDING_RIGHT;
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
-    normal: {},
-    thin: {},
-    root: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        maxWidth: CALCULATED_MAX_WIDTH_SELECT,
-        '&$outlined': {
-            minHeight: '1.1876em'
-        },
-        '&$normal': {
-            paddingTop: '9px',
-            paddingBottom: '9px'
-        },
-        '&$thin': {
-            paddingTop: '6px',
-            paddingBottom: '6px'
-        }
-    },
-    select: {
-        '&.Mui-disabled': {
-            '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.text.disabled
-            },
-            '& $currentValueIcon, & $currentValueText': {
-                color: theme.palette.text.disabled
-            }
-        }
-    },
-    outlined: {
-        paddingRight: SELECT_PADDING_RIGHT,
-        paddingLeft: SELECT_PADDING_LEFT
-    },
-    arrowIcon: {
-        fontSize: '18px',
-        top: 'calc(50% - 9px)',
-        right: '12px',
-        color: theme.palette.text.secondary,
-        '&$thin': {
-            right: '8px'
-        }
-    },
-    currentValue: {
-        display: 'flex',
-        alignItems: 'center'
-    },
-    currentValueIcon: {
-        width: '1em',
-        height: '1em',
-        display: 'inline-block',
-        fontSize: '18px',
-        marginRight: '8px',
-        color: theme.palette.text.secondary
-    },
-    currentValueText: {
-        fontSize: '14px',
-        lineHeight: '16px',
-        textTransform: 'uppercase',
-        fontWeight: 500,
-        color: theme.palette.text.primary,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden'
-    },
-    menuItem: {
-        padding: '9px 12px 7px'
-    },
-    firstMenuItemButton: {
-        borderTop: '1px solid #e4e4e4'
-    },
-    menuItemInner: {
-        display: 'flex',
-        alignItems: 'flex-start'
-    },
-    menuItemIcon: {
-        width: '1em',
-        height: '1em',
-        display: 'inline-block',
-        fontSize: '18px',
-        color: theme.palette.text.secondary,
-        marginRight: '9px'
-    },
-    menuItemLabel: {
-        fontSize: '14px',
-        lineHeight: '16px',
-        fontWeight: 500,
-        color: theme.palette.text.primary
-    },
-    menuItemDescription: {
-        fontSize: '10px',
-        lineHeight: '16px',
-        color: theme.palette.text.secondary
-    }
-}); });