@synerise/ds-context-selector 0.16.13 → 0.16.14

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/dist/ContextSelector.js

@@ -8,7 +8,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,6 +38,7 @@ 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;
 
@@ -77,7 +78,9 @@ 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",
@@ -90,6 +93,7 @@ var ContextSelector = function ContextSelector(_ref) {
       asInfoCardContainer: true,
       dataSource: [{
         text: /*#__PURE__*/React.createElement(Button, {
+          error: hasError,
           disabled: disabled,
           type: "custom-color",
           color: triggerColor,
@@ -118,7 +122,7 @@ var ContextSelector = function ContextSelector(_ref) {
         } : undefined
       }]
     });
-  }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride]);
+  }, [texts, addMode, selectedItem, disabled, readOnly, handleClick, triggerColor, triggerMode, getPopupContainerOverride, errorText]);
   var onDropdownVisibilityChange = React.useCallback(function (value) {
     if (value) {
       onActivate && onActivate('');
@@ -129,7 +133,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 +158,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

@@ -64,6 +64,7 @@ export declare type ContextProps = {
     hasMoreItems?: boolean;
     type?: 'default' | 'attribute' | 'event';
     dropdownProps?: Omit<DropdownProps, 'trigger' | 'getPopupContainer' | 'onVisibleChange' | 'visible' | 'overlay'>;
+    errorText?: React.ReactNode | string;
 };
 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.16.14",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -26,21 +26,21 @@
     "test:watch": "npm run test -- --watchAll",
     "types": "tsc --noEmit"
   },
-  "gitHead": "41163901b144e78a83329029519cb9eb48bf4787",
+  "gitHead": "5808615a55859820c255189f77977725ec79cd7d",
   "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.15",
+    "@synerise/ds-dropdown": "^0.17.64",
     "@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.14",
+    "@synerise/ds-menu": "^0.17.8",
+    "@synerise/ds-result": "^0.6.22",
     "@synerise/ds-scrollbar": "^0.6.2",
-    "@synerise/ds-tabs": "^0.13.59",
+    "@synerise/ds-tabs": "^0.13.60",
     "@synerise/ds-utils": "^0.19.0",
     "classnames": "^2.2.6",
     "react-window": "1.8.5"