@synerise/ds-context-selector 0.16.13 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.17.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.16.14...@synerise/ds-context-selector@0.17.0) (2023-05-23)
+
+
+### Bug Fixes
+
+* types fix ([5f877b8](https://github.com/Synerise/synerise-design/commit/5f877b8d38c81a40f2c21d6e89795297f88407ea))
+* **context-selector:** fix handling readOnly ([c88b710](https://github.com/Synerise/synerise-design/commit/c88b7108c52cd4e2c3192bddcecb81dac2b560fc))
+* **factors:** reuse FactorsProps type ([5743065](https://github.com/Synerise/synerise-design/commit/574306564fb5c2b8f78f75a36a937960f0c7c609))
+
+
+### Features
+
+* **factors:** allow changing tooltip ([6da9e97](https://github.com/Synerise/synerise-design/commit/6da9e979e972ca042fce6b2c79d05735257155d9))
+
+
+
+
+
+## [0.16.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.16.13...@synerise/ds-context-selector@0.16.14) (2023-05-20)
+
+
+### Bug Fixes
+
+* **condition:** adds validation errors support ([0da0a99](https://github.com/Synerise/synerise-design/commit/0da0a99436920398787a1128e26d5432af2d89e2))
+
+
+
+
+
 ## [0.16.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@0.16.12...@synerise/ds-context-selector@0.16.13) (2023-04-26)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/README.md

@@ -97,6 +97,7 @@ import ContextSelector from '@synerise/ds-context-selector'
 | addMode                   | If true trigger doesn't change style when value is set        | ContextItem \ undefined                                | undefined             | 
 | customTriggerComponent    | Add custom trigger                                            | React.ReactNode                                        | undefined             | 
 | trigger                   | Add custom trigger to modal                                   | 'click' \ 'hover' \ 'contextMenu'                      | 'click                | 
+| getMenuEntryProps         | Configure tooltip (information-card by default)               | (arg: ParameterValueType) => MenuItemProps \ undefined | undefined             | 
 | dropdownWrapperStyles     | Apply custom styles to dropdown wrapper                       | CSSProperties \ undefined                              | -                     | 
 | onClickOutsideEvents      | Overwrite default events for document listener                | HandledEventsType[] \ undefined                        | -                     | 
 | onClickOutside            | Callback called when user click outside dropdown              | () => void \ undefined                                 | -                     | 

package/dist/ContextSelector.js

@@ -1,5 +1,11 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import * as React from 'react';
 import Button from '@synerise/ds-button';
 import Icon, { Add3M, AngleDownS } from '@synerise/ds-icon';
@@ -8,7 +14,7 @@ import Dropdown from '@synerise/ds-dropdown';
 import InformationCard from '@synerise/ds-information-card';
 import { getPopupContainer } from '@synerise/ds-utils';
 import ContextSelectorDropdown from './ContextSelectorDropdown/ContextSelectorDropdown';
-import { ItemWrapper } from './ContextSelector.styles';
+import { ItemWrapper, ErrorWrapper } from './ContextSelector.styles';
 
 var ContextSelector = function ContextSelector(_ref) {
   var defaultDropdownVisibility = _ref.defaultDropdownVisibility,
@@ -38,8 +44,10 @@ var ContextSelector = function ContextSelector(_ref) {
       type = _ref.type,
       dropdownProps = _ref.dropdownProps,
       disabled = _ref.disabled,
+      errorText = _ref.errorText,
       _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      getMenuEntryProps = _ref.getMenuEntryProps;
 
   var _React$useState = React.useState(defaultDropdownVisibility != null ? defaultDropdownVisibility : false),
       dropdownVisible = _React$useState[0],
@@ -77,24 +85,29 @@ var ContextSelector = function ContextSelector(_ref) {
   }, [onOpen]);
   var triggerButton = React.useMemo(function () {
     var buttonLabel = texts.buttonLabel;
+    var hasError = Boolean(errorText);
     return addMode && !selectedItem ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      error: hasError,
       disabled: disabled,
       type: "primary",
       mode: "icon-label",
-      onClick: !readOnly ? handleClick : undefined
+      onClick: !readOnly ? handleClick : undefined,
+      readOnly: readOnly
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
     }), buttonLabel)) : /*#__PURE__*/React.createElement(Menu, {
       asDropdownMenu: true,
       showTextTooltip: true,
       asInfoCardContainer: true,
-      dataSource: [{
+      dataSource: [_objectSpread({
         text: /*#__PURE__*/React.createElement(Button, {
+          error: hasError,
           disabled: disabled,
           type: "custom-color",
           color: triggerColor,
           mode: triggerMode,
-          onClick: !readOnly ? handleClick : undefined
+          onClick: !readOnly ? handleClick : undefined,
+          readOnly: readOnly
         }, selectedItem ? /*#__PURE__*/React.createElement(Icon, {
           component: selectedItem.icon
         }) : null, /*#__PURE__*/React.createElement(ItemWrapper, null, selectedItem ? selectedItem.name : buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
@@ -116,9 +129,9 @@ var ContextSelector = function ContextSelector(_ref) {
             } : undefined
           });
         } : undefined
-      }]
+      }, getMenuEntryProps == null ? void 0 : getMenuEntryProps(selectedItem))]
     });
-  }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride]);
+  }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, errorText, getMenuEntryProps]);
   var onDropdownVisibilityChange = React.useCallback(function (value) {
     if (value) {
       onActivate && onActivate('');
@@ -129,7 +142,7 @@ var ContextSelector = function ContextSelector(_ref) {
     }
   }, [onActivate, onDeactivate]);
   if (readOnly) return /*#__PURE__*/React.createElement(React.Fragment, null, customTriggerComponent != null ? customTriggerComponent : triggerButton);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
     getPopupContainer: getPopupContainerOverride || getPopupContainer,
@@ -154,7 +167,7 @@ var ContextSelector = function ContextSelector(_ref) {
       hasMoreItems: hasMoreItems,
       onFetchData: onFetchData
     })
-  }), customTriggerComponent != null ? customTriggerComponent : triggerButton));
+  }), customTriggerComponent != null ? customTriggerComponent : triggerButton)), errorText && /*#__PURE__*/React.createElement(ErrorWrapper, null, errorText));
 };
 
 export default ContextSelector;

package/dist/ContextSelector.styles.d.ts

@@ -5,5 +5,6 @@ export declare const ItemsList: import("styled-components").StyledComponent<type
 export declare const SearchResult: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SearchResultHighlight: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ContextSelector.styles.js

@@ -30,13 +30,17 @@ export var Title = styled.div.withConfig({
 })(["font-size:10px;line-height:1.6;font-weight:500;text-transform:uppercase;color:", ";padding:8px 12px;"], function (props) {
   return props.theme.palette['grey-500'];
 });
-export var ItemWrapper = styled.div.withConfig({
+export var ItemWrapper = styled.span.withConfig({
   displayName: "ContextSelectorstyles__ItemWrapper",
   componentId: "sc-1tuu6xk-6"
-})(["max-width:200px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
-  return props.theme.palette.white;
+})(["max-width:200px;overflow:hidden;text-overflow:ellipsis;"]);
+export var ErrorWrapper = styled.div.withConfig({
+  displayName: "ContextSelectorstyles__ErrorWrapper",
+  componentId: "sc-1tuu6xk-7"
+})(["color:", ";margin-top:8px;"], function (props) {
+  return props.theme.palette['red-600'];
 });
 export var LoaderWrapper = styled.div.withConfig({
   displayName: "ContextSelectorstyles__LoaderWrapper",
-  componentId: "sc-1tuu6xk-7"
+  componentId: "sc-1tuu6xk-8"
 })(["width:100%;display:flex;align-items:center;justify-content:center;padding:32px 0;"]);

package/dist/ContextSelector.types.d.ts

@@ -3,6 +3,7 @@ import { CSSProperties } from 'react';
 import { HandledEventsType } from '@synerise/ds-utils';
 import { ItemSize } from '@synerise/ds-menu';
 import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import type { FactorsProps } from '@synerise/ds-factors';
 export declare type ContextTexts = {
     buttonLabel: string;
     searchPlaceholder: string;
@@ -64,6 +65,8 @@ export declare type ContextProps = {
     hasMoreItems?: boolean;
     type?: 'default' | 'attribute' | 'event';
     dropdownProps?: Omit<DropdownProps, 'trigger' | 'getPopupContainer' | 'onVisibleChange' | 'visible' | 'overlay'>;
+    errorText?: React.ReactNode | string;
+    getMenuEntryProps?: FactorsProps['getMenuEntryProps'];
 };
 export declare type ContextDropdownProps = {
     setDropdownVisible: (show: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "0.16.13",
+  "version": "0.17.0",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -26,21 +26,22 @@
     "test:watch": "npm run test -- --watchAll",
     "types": "tsc --noEmit"
   },
-  "gitHead": "41163901b144e78a83329029519cb9eb48bf4787",
+  "gitHead": "9a0fe37374409f1830fa642965975a26a72116c8",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.14",
-    "@synerise/ds-dropdown": "^0.17.63",
+    "@synerise/ds-button": "^0.17.16",
+    "@synerise/ds-dropdown": "^0.17.65",
+    "@synerise/ds-factors": "^0.18.0",
     "@synerise/ds-icon": "^0.56.0",
-    "@synerise/ds-information-card": "^0.3.13",
-    "@synerise/ds-menu": "^0.17.7",
-    "@synerise/ds-result": "^0.6.21",
+    "@synerise/ds-information-card": "^0.3.15",
+    "@synerise/ds-menu": "^0.17.9",
+    "@synerise/ds-result": "^0.6.23",
     "@synerise/ds-scrollbar": "^0.6.2",
-    "@synerise/ds-tabs": "^0.13.59",
+    "@synerise/ds-tabs": "^0.13.61",
     "@synerise/ds-utils": "^0.19.0",
     "classnames": "^2.2.6",
     "react-window": "1.8.5"