@synerise/ds-context-selector 0.14.11 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.14.12...@synerise/ds-context-selector@0.15.0) (2022-12-13)
+
+
+### Features
+
+* **filter:** readOnly state for conditions ([dfa4db3](https://github.com/Synerise/synerise-design/commit/dfa4db35826c0800859b7217dd1ea2f1497ac3c9))
+
+
+
+
+
+## [0.14.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.14.11...@synerise/ds-context-selector@0.14.12) (2022-12-08)
+
+**Note:** Version bump only for package @synerise/ds-context-selector
+
+
+
+
+
 ## [0.14.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.14.10...@synerise/ds-context-selector@0.14.11) (2022-12-07)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/dist/ContextSelector.js

@@ -37,7 +37,9 @@ var ContextSelector = function ContextSelector(_ref) {
       getPopupContainerOverride = _ref.getPopupContainerOverride,
       type = _ref.type,
       dropdownProps = _ref.dropdownProps,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _React$useState = React.useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
       dropdownVisible = _React$useState[0],
@@ -59,8 +61,12 @@ var ContextSelector = function ContextSelector(_ref) {
     }
   }, [opened]);
   var triggerMode = React.useMemo(function () {
-    return selectedItem ? 'two-icons' : 'label-icon';
-  }, [selectedItem]);
+    if (selectedItem) {
+      return readOnly ? 'icon-label' : 'two-icons';
+    }
+
+    return readOnly ? 'simple' : 'label-icon';
+  }, [selectedItem, readOnly]);
   var triggerColor = React.useMemo(function () {
     if (!selectedItem) return 'blue';
     return type === 'event' ? 'cyan' : 'green';
@@ -75,7 +81,7 @@ var ContextSelector = function ContextSelector(_ref) {
       disabled: disabled,
       type: "primary",
       mode: "icon-label",
-      onClick: handleClick
+      onClick: !readOnly ? handleClick : undefined
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
     }), buttonLabel)) : /*#__PURE__*/React.createElement(Menu, {
@@ -88,10 +94,10 @@ var ContextSelector = function ContextSelector(_ref) {
           type: "custom-color",
           color: triggerColor,
           mode: triggerMode,
-          onClick: handleClick
+          onClick: !readOnly ? handleClick : undefined
         }, selectedItem ? /*#__PURE__*/React.createElement(Icon, {
           component: selectedItem.icon
-        }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, selectedItem ? selectedItem.name : buttonLabel), /*#__PURE__*/React.createElement(Icon, {
+        }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, selectedItem ? selectedItem.name : buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
           component: /*#__PURE__*/React.createElement(AngleDownS, null)
         })),
         hoverTooltipProps: {
@@ -112,7 +118,7 @@ var ContextSelector = function ContextSelector(_ref) {
         } : undefined
       }]
     });
-  }, [texts, addMode, selectedItem, disabled, handleClick, triggerColor, triggerMode, getPopupContainerOverride]);
+  }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride]);
   var onDropdownVisibilityChange = React.useCallback(function (value) {
     if (value) {
       onActivate && onActivate('');
@@ -122,6 +128,7 @@ var ContextSelector = function ContextSelector(_ref) {
       setDropdownVisible(false);
     }
   }, [onActivate, onDeactivate]);
+  if (readOnly) return /*#__PURE__*/React.createElement(React.Fragment, null, customTriggerComponent != null ? customTriggerComponent : triggerButton);
   return /*#__PURE__*/React.createElement("div", {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {

package/dist/ContextSelector.types.d.ts

@@ -37,6 +37,7 @@ export declare type ContextItemsInSubGroup = ContextItem & {
 };
 export declare type ContextProps = {
     disabled?: boolean;
+    readOnly?: boolean;
     defaultDropdownVisibility?: boolean;
     selectedItem?: ContextItem | undefined;
     onActivate?: (fieldType: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.14.11",
+  "version": "0.15.0",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -26,7 +26,7 @@
     "test:watch": "npm run test -- --watchAll",
     "types": "tsc --noEmit"
   },
-  "gitHead": "b4dad7d512a7658ef4cca191486f10fa2344ab3b",
+  "gitHead": "1ab09990244dd615bdfe696f365ae8075bd31762",
   "sideEffects": [
     "dist/style/*",
     "*.less"
@@ -36,7 +36,7 @@
     "@synerise/ds-button": "^0.17.10",
     "@synerise/ds-dropdown": "^0.17.44",
     "@synerise/ds-icon": "^0.52.0",
-    "@synerise/ds-information-card": "^0.1.32",
+    "@synerise/ds-information-card": "^0.1.34",
     "@synerise/ds-menu": "^0.17.1",
     "@synerise/ds-result": "^0.6.17",
     "@synerise/ds-scrollbar": "^0.5.3",