@reltio/components 1.4.714 → 1.4.718

package/components/QueryBuilderRow/QueryBuilderRow.js

@@ -48,18 +48,21 @@ var QueryBuilderRow = function (_a) {
         react_1.default.createElement(LogicOperatorComponent, { className: classes.logicOperatorContainer, rowContext: rowContext, rowData: previousRowData }),
         react_1.default.createElement("div", { className: classnames_1.default(styles.rowItem, classes.attributeSelectorContainer) },
             react_1.default.createElement(AttributeSelectorComponent, { attributeSelectorProps: attributeSelectorProps, rowContext: rowContext, rowData: rowData })),
-        react_1.default.createElement("div", { className: styles.rowItem },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.rowItem, classes.filterSelectorContainer) },
             react_1.default.createElement(FilterSelectorComponent, { textFieldInputRef: filterSelectorRef, rowContext: rowContext, rowData: rowData })),
-        react_1.default.createElement("div", { className: classnames_1.default(styles.rowItem, styles.fullWidth) },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.rowItem, styles.fullWidth, classes.valuesEditorContainer) },
             react_1.default.createElement(ValuesEditorComponent, { rowContext: rowContext, rowData: rowData })),
-        react_1.default.createElement("div", { className: classnames_1.default(styles.rowItem, (_b = {}, _b[styles.hidden] = !rowData, _b)) },
+        react_1.default.createElement("div", { className: classnames_1.default(styles.rowItem, classes.actionsContainer, (_b = {}, _b[styles.hidden] = !rowData, _b)) },
             react_1.default.createElement(ActionsComponent, { rowContext: rowContext, rowData: rowData }))));
 };
 QueryBuilderRow.propTypes = {
     classes: prop_types_1.default.shape({
         root: prop_types_1.default.string,
         logicOperatorContainer: prop_types_1.default.string,
-        attributeSelectorContainer: prop_types_1.default.string
+        attributeSelectorContainer: prop_types_1.default.string,
+        filterSelectorContainer: prop_types_1.default.string,
+        valuesEditorContainer: prop_types_1.default.string,
+        actionsContainer: prop_types_1.default.string
     }),
     rowData: constants_1.QueryBuilderAttributeType,
     previousRowData: constants_1.QueryBuilderAttributeType,

package/components/QueryBuilderRowsGroup/QueryBuilderRowsGroup.js

@@ -69,7 +69,10 @@ QueryBuilderRowsGroup.propTypes = {
     rowClasses: prop_types_1.default.shape({
         root: prop_types_1.default.string,
         logicOperatorContainer: prop_types_1.default.string,
-        attributeSelectorContainer: prop_types_1.default.string
+        attributeSelectorContainer: prop_types_1.default.string,
+        filterSelectorContainer: prop_types_1.default.string,
+        valuesEditorContainer: prop_types_1.default.string,
+        actionsContainer: prop_types_1.default.string
     }),
     rowsData: prop_types_1.default.arrayOf(constants_1.QueryBuilderAttributeType),
     LogicOperatorComponent: prop_types_1.default.elementType,

package/components/ValueChip/styles.js

@@ -15,12 +15,16 @@ exports.useChipStyles = styles_1.makeStyles({
         width: 18,
         color: 'rgba(0,0,0,0.38)',
         marginRight: '8px'
+    },
+    label: {
+        overflow: 'hidden'
     }
 });
 exports.useStyles = styles_1.makeStyles(function (theme) { return ({
     container: {
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        width: '100%'
     },
     label: {
         overflow: 'hidden',

package/components/attributes/inline/SimpleAttribute/CrosswalkMenuItem/CrosswalkMenuItem.js

@@ -43,7 +43,7 @@ var CrosswalkMenuItem = react_1.forwardRef(function (_a, ref) {
         onMenuClose(e);
         onClick(e);
     };
-    return crosswalk ? (react_1.default.createElement(SourceItem_1.default, { className: styles.sourceItem, color: color, crosswalk: crosswalk })) : (react_1.default.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-reltio-id": "crosswalk-menu-item" + id },
+    return crosswalk ? (react_1.default.createElement(SourceItem_1.default, { className: styles.sourceItem, color: color, crosswalk: crosswalk, focusable: true })) : (react_1.default.createElement(MenuItemWithTooltip, { tooltipTitle: tooltip, showForDisabled: true, classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref, "data-reltio-id": "crosswalk-menu-item" + id },
         react_1.default.createElement(MenuItemContent, { icon: icon, text: text, styles: styles })));
 });
 CrosswalkMenuItem.displayName = 'CrosswalkMenuItem';

package/components/attributes/inline/common/SourceItem.js

@@ -14,8 +14,8 @@ var styles_1 = require("./styles");
 var contexts_1 = require("../../../../contexts");
 var SmallIconButton_1 = require("../../../SmallIconButton");
 var SourceItem = function (_a) {
-    var crosswalk = _a.crosswalk, color = _a.color, className = _a.className;
-    var _b = contexts_1.useCrosswalkFocus(crosswalk), toggleCrosswalkFocus = _b.toggleCrosswalkFocus, isFocused = _b.isFocused;
+    var crosswalk = _a.crosswalk, color = _a.color, className = _a.className, _b = _a.focusable, focusable = _b === void 0 ? false : _b;
+    var _c = contexts_1.useCrosswalkFocus(crosswalk), toggleCrosswalkFocus = _c.toggleCrosswalkFocus, isFocused = _c.isFocused;
     var styles = styles_1.useStyles({ color: color, isFocused: isFocused });
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var label = mdm_sdk_1.findSourceSystemByUri(metadata, crosswalk.type).label;
@@ -24,7 +24,7 @@ var SourceItem = function (_a) {
         react_1.default.createElement("div", { className: styles.sourceInfo },
             react_1.default.createElement("div", null,
                 react_1.default.createElement("span", { className: styles.label }, label),
-                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Visibility_1.default, className: styles.eyeIcon, size: 'XXS', onClick: function () { return toggleCrosswalkFocus(); } })),
+                focusable && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Visibility_1.default, className: styles.eyeIcon, size: 'XXS', onClick: function () { return toggleCrosswalkFocus(); } }))),
             react_1.default.createElement("div", { className: styles.crosswalkValue }, crosswalk.value))));
 };
 exports.default = SourceItem;

package/components/attributes/inline/common/__test__/SourceItem.spec.js

@@ -75,6 +75,10 @@ describe('Source item tests', function () {
         expect(wrapper.find(SourceIcon_1.default).prop('sourceType')).toBe('configuration/sources/Reltio');
         expect(wrapper.find('.label').text()).toBe('Reltio');
         expect(wrapper.find('.crosswalkValue').text()).toBe('1PPwRPuk');
+        expect(wrapper.find(SmallIconButton_1.default).length).toBe(0);
+    });
+    it('should show focus button when focusable === true', function () {
+        var wrapper = enzyme_1.shallow(react_1.default.createElement(SourceItem_1.default, { color: "color", crosswalk: crosswalk, focusable: true }));
         var button = wrapper.find(SmallIconButton_1.default);
         expect(button.length).toBe(1);
         button.simulate('click');

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.714",
+  "version": "1.4.718",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
-    "@reltio/mdm-module": "^1.4.714",
-    "@reltio/mdm-sdk": "^1.4.714",
+    "@reltio/mdm-module": "^1.4.718",
+    "@reltio/mdm-sdk": "^1.4.718",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",