@synerise/ds-context-selector 0.12.21 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.14.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.13.0...@synerise/ds-context-selector@0.14.0) (2022-09-26)
+
+
+### Features
+
+* **filter:** limiting the number of conditions ([6f0d114](https://github.com/Synerise/synerise-design/commit/6f0d114735abc97362b461adc138f7fcadc39456))
+
+
+
+
+
+# [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.12.21...@synerise/ds-context-selector@0.13.0) (2022-09-21)
+
+
+### Features
+
+* **menu:** add information card tooltip ([ded0bf1](https://github.com/Synerise/synerise-design/commit/ded0bf1b58e68f7061630810925669cb0fdad560))
+
+
+
+
+
 ## [0.12.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.12.20...@synerise/ds-context-selector@0.12.21) (2022-09-07)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/dist/ContextSelector.js

@@ -2,9 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from 'react';
 import Button from '@synerise/ds-button';
-import Icon, { AngleDownS, Add3M } from '@synerise/ds-icon';
+import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
+import Menu from '@synerise/ds-menu';
 import Dropdown from '@synerise/ds-dropdown';
-import Tooltip from '@synerise/ds-tooltip';
+import InformationCard from '@synerise/ds-information-card';
 import { getPopupContainer } from '@synerise/ds-utils';
 import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
 import { ItemWrapper } from './ContextSelector.styles';
@@ -35,7 +36,8 @@ var ContextSelector = function ContextSelector(_ref) {
       onOpen = _ref.onOpen,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
       type = _ref.type,
-      dropdownProps = _ref.dropdownProps;
+      dropdownProps = _ref.dropdownProps,
+      disabled = _ref.disabled;
 
   var _React$useState = React.useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
       dropdownVisible = _React$useState[0],
@@ -69,25 +71,48 @@ var ContextSelector = function ContextSelector(_ref) {
   }, [onOpen]);
   var triggerButton = React.useMemo(function () {
     var buttonLabel = texts.buttonLabel;
-    return addMode && !selectedItem ? /*#__PURE__*/React.createElement(Button, {
+    return addMode && !selectedItem ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      disabled: disabled,
       type: "primary",
       mode: "icon-label",
       onClick: handleClick
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
-    }), buttonLabel) : /*#__PURE__*/React.createElement(Button, {
-      type: "custom-color",
-      color: triggerColor,
-      mode: triggerMode,
-      onClick: handleClick
-    }, selectedItem ? /*#__PURE__*/React.createElement(Icon, {
-      component: selectedItem.icon
-    }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-      title: selectedItem ? selectedItem.name : undefined
-    }, selectedItem ? selectedItem.name : buttonLabel)), /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(AngleDownS, null)
-    }));
-  }, [addMode, handleClick, texts, triggerColor, triggerMode, selectedItem]);
+    }), buttonLabel)) : /*#__PURE__*/React.createElement(Menu, {
+      asDropdownMenu: true,
+      showTextTooltip: true,
+      asInfoCardContainer: true,
+      dataSource: [{
+        text: /*#__PURE__*/React.createElement(Button, {
+          disabled: disabled,
+          type: "custom-color",
+          color: triggerColor,
+          mode: triggerMode,
+          onClick: handleClick
+        }, selectedItem ? /*#__PURE__*/React.createElement(Icon, {
+          component: selectedItem.icon
+        }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, selectedItem ? selectedItem.name : buttonLabel), /*#__PURE__*/React.createElement(Icon, {
+          component: /*#__PURE__*/React.createElement(AngleDownS, null)
+        })),
+        hoverTooltipProps: {
+          popupPlacement: 'top',
+          getPopupContainer: getPopupContainerOverride || getPopupContainer
+        },
+        renderHoverTooltip: selectedItem ? function () {
+          return /*#__PURE__*/React.createElement(InformationCard, {
+            icon: selectedItem.icon,
+            subtitle: selectedItem.name,
+            title: selectedItem.name.replace('_', ' '),
+            descriptionConfig: selectedItem.description ? {
+              value: selectedItem.description,
+              disabled: true,
+              label: undefined
+            } : undefined
+          });
+        } : undefined
+      }]
+    });
+  }, [texts, addMode, selectedItem, disabled, handleClick, triggerColor, triggerMode, getPopupContainerOverride]);
   var onDropdownVisibilityChange = React.useCallback(function (value) {
     if (value) {
       onActivate && onActivate('');

package/dist/ContextSelector.types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.12.21",
+  "version": "0.14.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": "93bd4f1ab7f265f408a77218692a7987190ebce2",
+  "gitHead": "c952524bf8a0690fff0bb6b1ef6d13bc3c2ce820",
   "sideEffects": [
     "dist/style/*",
     "*.less"
@@ -34,12 +34,13 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.17.9",
-    "@synerise/ds-dropdown": "^0.17.36",
+    "@synerise/ds-dropdown": "^0.17.37",
     "@synerise/ds-icon": "^0.51.0",
-    "@synerise/ds-menu": "^0.15.8",
+    "@synerise/ds-information-card": "^0.1.22",
+    "@synerise/ds-menu": "^0.16.0",
     "@synerise/ds-result": "^0.6.16",
     "@synerise/ds-scrollbar": "^0.5.2",
-    "@synerise/ds-tabs": "^0.13.31",
+    "@synerise/ds-tabs": "^0.13.32",
     "@synerise/ds-utils": "^0.19.0",
     "classnames": "^2.2.6",
     "react-window": "1.8.5"