@reltio/components 1.4.2274 → 1.4.2276

package/HOCs/withReactSelectMuiSkin/helpers.d.ts

@@ -38,11 +38,13 @@ export declare const reactSelectComponents: {
             innerRef: import("prop-types").Requireable<any>;
             isFocused: import("prop-types").Validator<boolean>;
             isSelected: import("prop-types").Validator<boolean>;
+            isDisabled: import("prop-types").Requireable<boolean>;
             label: import("prop-types").Requireable<string>;
             selectProps: import("prop-types").Requireable<import("prop-types").InferProps<{
                 classes: import("prop-types").Requireable<import("prop-types").InferProps<{
                     option: import("prop-types").Requireable<string>;
                     'option--selected': import("prop-types").Requireable<string>;
+                    'option--disabled': import("prop-types").Requireable<string>;
                 }>>;
             }>>;
         };

package/HOCs/withReactSelectMuiSkin/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "option" | "placeholder" | "singleValue" | "dropdownIndicator" | "clearIndicator" | "control" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "option--selected" | "option--item" | "valueContainer--multi">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "option" | "placeholder" | "singleValue" | "dropdownIndicator" | "clearIndicator" | "control" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "option--selected" | "option--disabled" | "option--item" | "valueContainer--multi">;

package/HOCs/withReactSelectMuiSkin/styles.js

@@ -58,6 +58,9 @@ export var useStyles = makeStyles(function (theme) { return ({
     'option--selected': {
         fontWeight: 400
     },
+    // Always defined so the dynamic class key is never `undefined`. Consumers supply the actual
+    // disabled-option styling per-instance via the `classes` prop (merged on top of this).
+    'option--disabled': {},
     'option--item': {
         display: 'block',
         width: '100%',

package/ProfileResizablePanes/ProfileResizablePanes.js

@@ -14,7 +14,10 @@ export var ProfileResizablePanes = function (_a) {
     var _c = (perspectiveSettings || {}).width, width = _c === void 0 ? DEFAULT_R_PANE_SIZE : _c;
     var active = !isNil(defaultTab) ? defaultTab : perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active;
     var activeButton = buttonsProps.find(function (button) { return button.id === active; });
-    var isSidePanelOpen = !isNil(active) && !disabled && Boolean(activeButton);
+    // When there are no buttons (e.g. the interactions screen drives the panel purely via `active`),
+    // open state must not depend on a matching button. Only require `activeButton` when buttons exist,
+    // so a stale persisted `active` pointing to a removed tab doesn't open an empty pane.
+    var isSidePanelOpen = !isNil(active) && !disabled && (buttonsProps.length === 0 || Boolean(activeButton));
     var handleUpdateSettings = useCallback(function (newSetting) {
         updatePerspectiveSettings(newSetting);
     }, [updatePerspectiveSettings]);

package/ProfileResizablePanes/ProfileResizablePanes.spec.js

@@ -83,6 +83,10 @@ var setUp = function (props) {
             graph: {
                 active: 1,
                 width: 320
+            },
+            interactions: {
+                active: 0,
+                width: 400
             }
         }
     };
@@ -143,6 +147,13 @@ describe('ProfileResizablePanes tests', function () {
             return [2 /*return*/];
         });
     }); });
+    it('should open the second pane when buttonsProps is empty and active is set (interactions screen)', function () {
+        var container = setUp(__assign(__assign({}, defaultProps), { perspectiveId: 'interactions', buttonsProps: [] })).container;
+        expect(screen.getByTestId('rightPanel')).toBeInTheDocument();
+        expect(isResizingDisabled(container)).toBe(false);
+        checkPanelSize(getSplitPane1(container), '60.0');
+        checkPanelSize(getSplitPane2(container), '40.0');
+    });
     it('should render resizable panes with open second pane on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, container, user, button2;
         return __generator(this, function (_b) {

package/ReactSelectOption/ReactSelectOption.d.ts

@@ -13,11 +13,13 @@ export namespace ReactSelectOption {
         let innerRef: PropTypes.Requireable<any>;
         let isFocused: PropTypes.Validator<boolean>;
         let isSelected: PropTypes.Validator<boolean>;
+        let isDisabled: PropTypes.Requireable<boolean>;
         let label: PropTypes.Requireable<string>;
         let selectProps: PropTypes.Requireable<PropTypes.InferProps<{
             classes: PropTypes.Requireable<PropTypes.InferProps<{
                 option: PropTypes.Requireable<string>;
                 'option--selected': PropTypes.Requireable<string>;
+                'option--disabled': PropTypes.Requireable<string>;
             }>>;
         }>>;
     }

package/ReactSelectOption/ReactSelectOption.js

@@ -16,8 +16,11 @@ import MenuItem from '@mui/material/MenuItem';
 import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
 export var ReactSelectOption = function (props) {
     var _a;
-    var innerProps = props.innerProps, innerRef = props.innerRef, children = props.children, isFocused = props.isFocused, isSelected = props.isSelected, label = props.label, classes = props.selectProps.classes;
-    return (React.createElement(MenuItem, __assign({ className: classNames(classes.option, (_a = {}, _a[classes['option--selected']] = isSelected, _a)), ref: innerRef, selected: isFocused, component: "div" }, innerProps),
+    var innerProps = props.innerProps, innerRef = props.innerRef, children = props.children, isFocused = props.isFocused, isSelected = props.isSelected, isDisabled = props.isDisabled, label = props.label, classes = props.selectProps.classes;
+    return (React.createElement(MenuItem, __assign({ className: classNames(classes.option, (_a = {},
+            _a[classes['option--selected']] = isSelected,
+            _a[classes['option--disabled']] = isDisabled,
+            _a)), ref: innerRef, selected: isFocused, disabled: isDisabled, component: "div" }, innerProps),
         React.createElement(ExpandedValueTooltip, { value: label },
             React.createElement("div", { className: classes['option--item'] }, children))));
 };
@@ -40,11 +43,13 @@ ReactSelectOption.propTypes = {
     ]),
     isFocused: PropTypes.bool.isRequired,
     isSelected: PropTypes.bool.isRequired,
+    isDisabled: PropTypes.bool,
     label: PropTypes.string,
     selectProps: PropTypes.shape({
         classes: PropTypes.shape({
             option: PropTypes.string,
-            'option--selected': PropTypes.string
+            'option--selected': PropTypes.string,
+            'option--disabled': PropTypes.string
         })
     })
 };

package/SimpleDropDownSelector/SimpleDropDownSelector.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DropDownSelector } from '../DropDownSelector';
-declare const _default: React.MemoExoticComponent<(props: React.ComponentProps<typeof DropDownSelector>) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ components, ...props }: React.ComponentProps<typeof DropDownSelector>) => React.JSX.Element>;
 export default _default;

package/SimpleDropDownSelector/SimpleDropDownSelector.js

@@ -9,13 +9,27 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { memo } from 'react';
 import { DropDownSelector } from '../DropDownSelector';
 import { DropDownValue } from './components/DropDownValue';
 import { DropDownPlaceholder } from './components/DropDownPlaceholder';
-var components = {
+var defaultComponents = {
     SingleValue: DropDownValue,
     Placeholder: DropDownPlaceholder
 };
-var SimpleDropDownSelector = function (props) { return (React.createElement(DropDownSelector, __assign({ components: components }, props))); };
+var SimpleDropDownSelector = function (_a) {
+    var components = _a.components, props = __rest(_a, ["components"]);
+    return (React.createElement(DropDownSelector, __assign({ components: __assign(__assign({}, defaultComponents), components) }, props)));
+};
 export default memo(SimpleDropDownSelector);

package/SimpleDropDownSelector/components/DropDownValue/DropDownValue.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
-import { useStyles } from './styles';
+import styles from './DropDownValue.module.css';
 export var DropDownValue = function (_a) {
     var menuIsOpen = _a.selectProps.menuIsOpen, label = _a.data.label;
-    var styles = useStyles();
     return (!menuIsOpen && (React.createElement(Typography, { "data-reltio-id": "simple-drop-down-value", variant: "body2", classes: { root: styles.value } }, label)));
 };

package/SimpleDropDownSelector/components/DropDownValue/DropDownValue.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"value":"DropDownValue-value--DA2jT"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.DropDownValue-value--DA2jT{color:var(--mui-palette-text-primary)}`;
+    head.appendChild(style);
+}
+export default styles;

package/SimpleDropDownSelector/index.d.ts

@@ -1 +1,2 @@
 export { default as SimpleDropDownSelector } from './SimpleDropDownSelector';
+export { DropDownValue } from './components/DropDownValue';

package/SimpleDropDownSelector/index.js

@@ -1 +1,2 @@
 export { default as SimpleDropDownSelector } from './SimpleDropDownSelector';
+export { DropDownValue } from './components/DropDownValue';

package/cjs/HOCs/withReactSelectMuiSkin/helpers.d.ts

@@ -38,11 +38,13 @@ export declare const reactSelectComponents: {
             innerRef: import("prop-types").Requireable<any>;
             isFocused: import("prop-types").Validator<boolean>;
             isSelected: import("prop-types").Validator<boolean>;
+            isDisabled: import("prop-types").Requireable<boolean>;
             label: import("prop-types").Requireable<string>;
             selectProps: import("prop-types").Requireable<import("prop-types").InferProps<{
                 classes: import("prop-types").Requireable<import("prop-types").InferProps<{
                     option: import("prop-types").Requireable<string>;
                     'option--selected': import("prop-types").Requireable<string>;
+                    'option--disabled': import("prop-types").Requireable<string>;
                 }>>;
             }>>;
         };

package/cjs/HOCs/withReactSelectMuiSkin/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "option" | "placeholder" | "singleValue" | "dropdownIndicator" | "clearIndicator" | "control" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "option--selected" | "option--item" | "valueContainer--multi">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "option" | "placeholder" | "singleValue" | "dropdownIndicator" | "clearIndicator" | "control" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "option--selected" | "option--disabled" | "option--item" | "valueContainer--multi">;

package/cjs/HOCs/withReactSelectMuiSkin/styles.js

@@ -61,6 +61,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     'option--selected': {
         fontWeight: 400
     },
+    // Always defined so the dynamic class key is never `undefined`. Consumers supply the actual
+    // disabled-option styling per-instance via the `classes` prop (merged on top of this).
+    'option--disabled': {},
     'option--item': {
         display: 'block',
         width: '100%',

package/cjs/ProfileResizablePanes/ProfileResizablePanes.js

@@ -40,7 +40,10 @@ var ProfileResizablePanes = function (_a) {
     var _c = (perspectiveSettings || {}).width, width = _c === void 0 ? DEFAULT_R_PANE_SIZE : _c;
     var active = !(0, ramda_1.isNil)(defaultTab) ? defaultTab : perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active;
     var activeButton = buttonsProps.find(function (button) { return button.id === active; });
-    var isSidePanelOpen = !(0, ramda_1.isNil)(active) && !disabled && Boolean(activeButton);
+    // When there are no buttons (e.g. the interactions screen drives the panel purely via `active`),
+    // open state must not depend on a matching button. Only require `activeButton` when buttons exist,
+    // so a stale persisted `active` pointing to a removed tab doesn't open an empty pane.
+    var isSidePanelOpen = !(0, ramda_1.isNil)(active) && !disabled && (buttonsProps.length === 0 || Boolean(activeButton));
     var handleUpdateSettings = (0, react_1.useCallback)(function (newSetting) {
         updatePerspectiveSettings(newSetting);
     }, [updatePerspectiveSettings]);

package/cjs/ProfileResizablePanes/ProfileResizablePanes.spec.js

@@ -88,6 +88,10 @@ var setUp = function (props) {
             graph: {
                 active: 1,
                 width: 320
+            },
+            interactions: {
+                active: 0,
+                width: 400
             }
         }
     };
@@ -148,6 +152,13 @@ describe('ProfileResizablePanes tests', function () {
             return [2 /*return*/];
         });
     }); });
+    it('should open the second pane when buttonsProps is empty and active is set (interactions screen)', function () {
+        var container = setUp(__assign(__assign({}, defaultProps), { perspectiveId: 'interactions', buttonsProps: [] })).container;
+        expect(react_2.screen.getByTestId('rightPanel')).toBeInTheDocument();
+        expect(isResizingDisabled(container)).toBe(false);
+        checkPanelSize(getSplitPane1(container), '60.0');
+        checkPanelSize(getSplitPane2(container), '40.0');
+    });
     it('should render resizable panes with open second pane on button click', function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, container, user, button2;
         return __generator(this, function (_b) {

package/cjs/ReactSelectOption/ReactSelectOption.d.ts

@@ -13,11 +13,13 @@ export namespace ReactSelectOption {
         let innerRef: PropTypes.Requireable<any>;
         let isFocused: PropTypes.Validator<boolean>;
         let isSelected: PropTypes.Validator<boolean>;
+        let isDisabled: PropTypes.Requireable<boolean>;
         let label: PropTypes.Requireable<string>;
         let selectProps: PropTypes.Requireable<PropTypes.InferProps<{
             classes: PropTypes.Requireable<PropTypes.InferProps<{
                 option: PropTypes.Requireable<string>;
                 'option--selected': PropTypes.Requireable<string>;
+                'option--disabled': PropTypes.Requireable<string>;
             }>>;
         }>>;
     }

package/cjs/ReactSelectOption/ReactSelectOption.js

@@ -22,8 +22,11 @@ var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 var ExpandedValueTooltip_1 = require("../ExpandedValueTooltip");
 var ReactSelectOption = function (props) {
     var _a;
-    var innerProps = props.innerProps, innerRef = props.innerRef, children = props.children, isFocused = props.isFocused, isSelected = props.isSelected, label = props.label, classes = props.selectProps.classes;
-    return (react_1.default.createElement(MenuItem_1.default, __assign({ className: (0, classnames_1.default)(classes.option, (_a = {}, _a[classes['option--selected']] = isSelected, _a)), ref: innerRef, selected: isFocused, component: "div" }, innerProps),
+    var innerProps = props.innerProps, innerRef = props.innerRef, children = props.children, isFocused = props.isFocused, isSelected = props.isSelected, isDisabled = props.isDisabled, label = props.label, classes = props.selectProps.classes;
+    return (react_1.default.createElement(MenuItem_1.default, __assign({ className: (0, classnames_1.default)(classes.option, (_a = {},
+            _a[classes['option--selected']] = isSelected,
+            _a[classes['option--disabled']] = isDisabled,
+            _a)), ref: innerRef, selected: isFocused, disabled: isDisabled, component: "div" }, innerProps),
         react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: label },
             react_1.default.createElement("div", { className: classes['option--item'] }, children))));
 };
@@ -47,11 +50,13 @@ exports.ReactSelectOption.propTypes = {
     ]),
     isFocused: prop_types_1.default.bool.isRequired,
     isSelected: prop_types_1.default.bool.isRequired,
+    isDisabled: prop_types_1.default.bool,
     label: prop_types_1.default.string,
     selectProps: prop_types_1.default.shape({
         classes: prop_types_1.default.shape({
             option: prop_types_1.default.string,
-            'option--selected': prop_types_1.default.string
+            'option--selected': prop_types_1.default.string,
+            'option--disabled': prop_types_1.default.string
         })
     })
 };

package/cjs/SimpleDropDownSelector/SimpleDropDownSelector.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DropDownSelector } from '../DropDownSelector';
-declare const _default: React.MemoExoticComponent<(props: React.ComponentProps<typeof DropDownSelector>) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ components, ...props }: React.ComponentProps<typeof DropDownSelector>) => React.JSX.Element>;
 export default _default;

package/cjs/SimpleDropDownSelector/SimpleDropDownSelector.js

@@ -33,14 +33,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var DropDownSelector_1 = require("../DropDownSelector");
 var DropDownValue_1 = require("./components/DropDownValue");
 var DropDownPlaceholder_1 = require("./components/DropDownPlaceholder");
-var components = {
+var defaultComponents = {
     SingleValue: DropDownValue_1.DropDownValue,
     Placeholder: DropDownPlaceholder_1.DropDownPlaceholder
 };
-var SimpleDropDownSelector = function (props) { return (react_1.default.createElement(DropDownSelector_1.DropDownSelector, __assign({ components: components }, props))); };
+var SimpleDropDownSelector = function (_a) {
+    var components = _a.components, props = __rest(_a, ["components"]);
+    return (react_1.default.createElement(DropDownSelector_1.DropDownSelector, __assign({ components: __assign(__assign({}, defaultComponents), components) }, props)));
+};
 exports.default = (0, react_1.memo)(SimpleDropDownSelector);

package/cjs/SimpleDropDownSelector/components/DropDownValue/DropDownValue.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropDownValue = void 0;
 var react_1 = __importDefault(require("react"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
-var styles_1 = require("./styles");
+var DropDownValue_module_css_1 = __importDefault(require("./DropDownValue.module.css"));
 var DropDownValue = function (_a) {
     var menuIsOpen = _a.selectProps.menuIsOpen, label = _a.data.label;
-    var styles = (0, styles_1.useStyles)();
-    return (!menuIsOpen && (react_1.default.createElement(Typography_1.default, { "data-reltio-id": "simple-drop-down-value", variant: "body2", classes: { root: styles.value } }, label)));
+    return (!menuIsOpen && (react_1.default.createElement(Typography_1.default, { "data-reltio-id": "simple-drop-down-value", variant: "body2", classes: { root: DropDownValue_module_css_1.default.value } }, label)));
 };
 exports.DropDownValue = DropDownValue;

package/cjs/SimpleDropDownSelector/components/DropDownValue/DropDownValue.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"value":"DropDownValue-value--DA2jT"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.DropDownValue-value--DA2jT{color:var(--mui-palette-text-primary)}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/SimpleDropDownSelector/index.d.ts

@@ -1 +1,2 @@
 export { default as SimpleDropDownSelector } from './SimpleDropDownSelector';
+export { DropDownValue } from './components/DropDownValue';

package/cjs/SimpleDropDownSelector/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SimpleDropDownSelector = void 0;
+exports.DropDownValue = exports.SimpleDropDownSelector = void 0;
 var SimpleDropDownSelector_1 = require("./SimpleDropDownSelector");
 Object.defineProperty(exports, "SimpleDropDownSelector", { enumerable: true, get: function () { return __importDefault(SimpleDropDownSelector_1).default; } });
+var DropDownValue_1 = require("./components/DropDownValue");
+Object.defineProperty(exports, "DropDownValue", { enumerable: true, get: function () { return DropDownValue_1.DropDownValue; } });

package/package.json

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

package/SimpleDropDownSelector/components/DropDownValue/styles.d.ts

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

package/SimpleDropDownSelector/components/DropDownValue/styles.js

@@ -1,6 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles({
-    value: {
-        color: 'rgba(0, 0, 0, 0.87)'
-    }
-});

package/cjs/SimpleDropDownSelector/components/DropDownValue/styles.d.ts

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

package/cjs/SimpleDropDownSelector/components/DropDownValue/styles.js

@@ -1,9 +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)({
-    value: {
-        color: 'rgba(0, 0, 0, 0.87)'
-    }
-});