@synerise/ds-search 0.7.10 → 0.8.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.8.1...@synerise/ds-search@0.8.2) (2022-06-15)
+
+**Note:** Version bump only for package @synerise/ds-search
+
+
+
+
+
+## [0.8.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.8.0...@synerise/ds-search@0.8.1) (2022-04-29)
+
+**Note:** Version bump only for package @synerise/ds-search
+
+
+
+
+
+# [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.7.10...@synerise/ds-search@0.8.0) (2022-04-08)
+
+
+### Features
+
+* **card-tabs:** disable duplication when limit exceeded (cardTab) ([e83cedb](https://github.com/Synerise/synerise-design/commit/e83cedb0f8a975fce5dd7c181d3811715ac66a9f))
+
+
+
+
+
 ## [0.7.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.7.9...@synerise/ds-search@0.7.10) (2022-04-05)
 
 **Note:** Version bump only for package @synerise/ds-search

package/README.md

@@ -115,6 +115,7 @@ return (
 | textLookupConfig        | config of keys for lookup in parameters, recent and suggestions datasets               | { parameters: string; recent: string; suggestions: string}               | -       |
 | value                   | The input content value                                                                | string                                                                   | -       |
 | width                   | Width of the search input when expanded                                                | number                                                                   | -       |
+| alwaysExpanded          | Enable expanded input on Search component with dropdown                                | boolean / undefined                                                      | -       |
 
 ### DataSetProps
 

package/dist/Search.js

@@ -43,9 +43,11 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
           isInputOpen = _this$state.isInputOpen,
           label = _this$state.label,
           toggleInputTrigger = _this$state.toggleInputTrigger;
-      var value = _this.props.value;
+      var _this$props = _this.props,
+          value = _this$props.value,
+          alwaysExpanded = _this$props.alwaysExpanded;
 
-      if (isInputOpen && !value && !label) {
+      if (isInputOpen && !value && !label && !alwaysExpanded) {
         _this.setState({
           toggleInputTrigger: !toggleInputTrigger
         });
@@ -58,11 +60,11 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleClearValue", function () {
-      var _this$props = _this.props,
-          parameters = _this$props.parameters,
-          recent = _this$props.recent,
-          suggestions = _this$props.suggestions,
-          onClear = _this$props.onClear;
+      var _this$props2 = _this.props,
+          parameters = _this$props2.parameters,
+          recent = _this$props2.recent,
+          suggestions = _this$props2.suggestions,
+          onClear = _this$props2.onClear;
       onClear && onClear();
 
       _this.setState({
@@ -75,7 +77,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _this.state = {
-      isInputOpen: !!props.value || !!props.parameterValue,
+      isInputOpen: !!props.value || !!props.parameterValue || !!props.alwaysExpanded,
       label: props.parameterValue ? props.parameters.find(function (param) {
         return param[props.textLookupConfig.parameters] === props.parameterValue;
       }) : null,
@@ -98,14 +100,14 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _prevProps$suggestion;
 
-    var _this$props2 = this.props,
-        recent = _this$props2.recent,
-        suggestions = _this$props2.suggestions,
-        parameters = _this$props2.parameters,
-        value = _this$props2.value,
-        textLookupConfig = _this$props2.textLookupConfig,
-        hideLabel = _this$props2.hideLabel,
-        parameterValue = _this$props2.parameterValue;
+    var _this$props3 = this.props,
+        recent = _this$props3.recent,
+        suggestions = _this$props3.suggestions,
+        parameters = _this$props3.parameters,
+        value = _this$props3.value,
+        textLookupConfig = _this$props3.textLookupConfig,
+        hideLabel = _this$props3.hideLabel,
+        parameterValue = _this$props3.parameterValue;
 
     if (prevProps.value !== value && !value || prevProps.parameterValue && !parameterValue) {
       this.handleChange(value); // eslint-disable-next-line react/no-did-update-set-state
@@ -146,10 +148,10 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.onKeyDown = function onKeyDown(e) {
-    var _this$props3 = this.props,
-        value = _this$props3.value,
-        onParameterValueChange = _this$props3.onParameterValueChange,
-        recent = _this$props3.recent;
+    var _this$props4 = this.props,
+        value = _this$props4.value,
+        onParameterValueChange = _this$props4.onParameterValueChange,
+        recent = _this$props4.recent;
     var isInputOpen = this.state.isInputOpen;
 
     if (e.key === 'Backspace' && value === '' && isInputOpen) {
@@ -188,13 +190,13 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   ;
 
   _proto.handleChange = function handleChange(currentValue) {
-    var _this$props4 = this.props,
-        parameterValue = _this$props4.parameterValue,
-        recent = _this$props4.recent,
-        suggestions = _this$props4.suggestions,
-        parameters = _this$props4.parameters,
-        onValueChange = _this$props4.onValueChange,
-        textLookupConfig = _this$props4.textLookupConfig;
+    var _this$props5 = this.props,
+        parameterValue = _this$props5.parameterValue,
+        recent = _this$props5.recent,
+        suggestions = _this$props5.suggestions,
+        parameters = _this$props5.parameters,
+        onValueChange = _this$props5.onValueChange,
+        textLookupConfig = _this$props5.textLookupConfig;
     var isAnythingToShow;
     onValueChange(currentValue);
 
@@ -221,13 +223,13 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.isListItemRendered = function isListItemRendered() {
-    var _this$props5 = this.props,
-        suggestions = _this$props5.suggestions,
-        recent = _this$props5.recent,
-        parameters = _this$props5.parameters,
-        value = _this$props5.value,
-        parameterValue = _this$props5.parameterValue,
-        textLookupConfig = _this$props5.textLookupConfig;
+    var _this$props6 = this.props,
+        suggestions = _this$props6.suggestions,
+        recent = _this$props6.recent,
+        parameters = _this$props6.parameters,
+        value = _this$props6.value,
+        parameterValue = _this$props6.parameterValue,
+        textLookupConfig = _this$props6.textLookupConfig;
     var isAnythingToShow;
 
     if (parameterValue) {
@@ -242,9 +244,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.selectResult = function selectResult(item, dataKey) {
-    var _this$props6 = this.props,
-        onValueChange = _this$props6.onValueChange,
-        textLookupConfig = _this$props6.textLookupConfig;
+    var _this$props7 = this.props,
+        onValueChange = _this$props7.onValueChange,
+        textLookupConfig = _this$props7.textLookupConfig;
     this.setState({
       isResultChosen: true,
       moveCursorToEnd: true
@@ -253,11 +255,11 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.selectFilter = function selectFilter(item) {
-    var _this$props7 = this.props,
-        onValueChange = _this$props7.onValueChange,
-        onParameterValueChange = _this$props7.onParameterValueChange,
-        filterLookupKey = _this$props7.filterLookupKey,
-        textLookupConfig = _this$props7.textLookupConfig;
+    var _this$props8 = this.props,
+        onValueChange = _this$props8.onValueChange,
+        onParameterValueChange = _this$props8.onParameterValueChange,
+        filterLookupKey = _this$props8.filterLookupKey,
+        textLookupConfig = _this$props8.textLookupConfig;
     onValueChange('');
     this.setState({
       label: item,
@@ -282,10 +284,10 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   _proto.renderRecentItems = function renderRecentItems() {
     var _this2 = this;
 
-    var _this$props8 = this.props,
-        recent = _this$props8.recent,
-        recentDisplayProps = _this$props8.recentDisplayProps,
-        value = _this$props8.value;
+    var _this$props9 = this.props,
+        recent = _this$props9.recent,
+        recentDisplayProps = _this$props9.recentDisplayProps,
+        value = _this$props9.value;
     var _this$state2 = this.state,
         label = _this$state2.label,
         filteredRecent = _this$state2.filteredRecent,
@@ -312,12 +314,12 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   _proto.renderParameters = function renderParameters() {
     var _this3 = this;
 
-    var _this$props9 = this.props,
-        parameters = _this$props9.parameters,
-        parametersDisplayProps = _this$props9.parametersDisplayProps,
-        value = _this$props9.value,
-        dropdownMaxHeight = _this$props9.dropdownMaxHeight,
-        recentDisplayProps = _this$props9.recentDisplayProps;
+    var _this$props10 = this.props,
+        parameters = _this$props10.parameters,
+        parametersDisplayProps = _this$props10.parametersDisplayProps,
+        value = _this$props10.value,
+        dropdownMaxHeight = _this$props10.dropdownMaxHeight,
+        recentDisplayProps = _this$props10.recentDisplayProps;
     var _this$state3 = this.state,
         label = _this$state3.label,
         filteredParameters = _this$state3.filteredParameters,
@@ -355,12 +357,12 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   _proto.renderSuggestions = function renderSuggestions() {
     var _this4 = this;
 
-    var _this$props10 = this.props,
-        suggestions = _this$props10.suggestions,
-        parameterValue = _this$props10.parameterValue,
-        suggestionsDisplayProps = _this$props10.suggestionsDisplayProps,
-        value = _this$props10.value,
-        dropdownMaxHeight = _this$props10.dropdownMaxHeight;
+    var _this$props11 = this.props,
+        suggestions = _this$props11.suggestions,
+        parameterValue = _this$props11.parameterValue,
+        suggestionsDisplayProps = _this$props11.suggestionsDisplayProps,
+        value = _this$props11.value,
+        dropdownMaxHeight = _this$props11.dropdownMaxHeight;
     var _this$state4 = this.state,
         isResultChosen = _this$state4.isResultChosen,
         itemsListWidth = _this$state4.itemsListWidth,
@@ -388,14 +390,15 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   _proto.renderInputWrapper = function renderInputWrapper() {
     var _this5 = this;
 
-    var _this$props11 = this.props,
-        placeholder = _this$props11.placeholder,
-        clearTooltip = _this$props11.clearTooltip,
-        value = _this$props11.value,
-        textLookupConfig = _this$props11.textLookupConfig,
-        filterLookupKey = _this$props11.filterLookupKey,
-        disableInput = _this$props11.disableInput,
-        inputProps = _this$props11.inputProps;
+    var _this$props12 = this.props,
+        placeholder = _this$props12.placeholder,
+        clearTooltip = _this$props12.clearTooltip,
+        value = _this$props12.value,
+        textLookupConfig = _this$props12.textLookupConfig,
+        filterLookupKey = _this$props12.filterLookupKey,
+        disableInput = _this$props12.disableInput,
+        inputProps = _this$props12.inputProps,
+        alwaysExpanded = _this$props12.alwaysExpanded;
     var _this$state5 = this.state,
         label = _this$state5.label,
         focusInputTrigger = _this$state5.focusInputTrigger,
@@ -418,7 +421,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       },
       onClear: this.handleClearValue,
       onClick: function onClick() {
-        return _this5.setState({
+        _this5.setState({
           isListVisible: true,
           itemsListWidth: _this5.getSearchWrapperWidth()
         });
@@ -443,18 +446,20 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       value: value,
       moveCursorToEnd: moveCursorToEnd,
       disableInput: disableInput,
-      inputProps: inputProps
+      inputProps: inputProps,
+      alwaysExpanded: alwaysExpanded,
+      closeOnClickOutside: !alwaysExpanded
     });
   };
 
   _proto.render = function render() {
     var _this6 = this;
 
-    var _this$props12 = this.props,
-        divider = _this$props12.divider,
-        dropdownMaxHeight = _this$props12.dropdownMaxHeight,
-        width = _this$props12.width,
-        style = _this$props12.style;
+    var _this$props13 = this.props,
+        divider = _this$props13.divider,
+        dropdownMaxHeight = _this$props13.dropdownMaxHeight,
+        width = _this$props13.width,
+        style = _this$props13.style;
     var _this$state6 = this.state,
         isInputOpen = _this$state6.isInputOpen,
         label = _this$state6.label,

package/dist/Search.types.d.ts

@@ -38,6 +38,7 @@ export declare type SearchProps<T extends AnyObject, U extends AnyObject> = {
     width?: number;
     hideLabel?: boolean;
     disableInput?: boolean;
+    alwaysExpanded?: boolean;
 };
 export declare type SearchState<T extends AnyObject> = {
     isInputOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "0.7.10",
+  "version": "0.8.2",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,9 +33,9 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-dropdown": "^0.17.16",
+    "@synerise/ds-dropdown": "^0.17.18",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-menu": "^0.13.2",
+    "@synerise/ds-menu": "^0.14.0",
     "@synerise/ds-scrollbar": "^0.4.7",
     "@synerise/ds-typography": "^0.12.2",
     "@synerise/ds-utils": "^0.19.0",
@@ -50,5 +50,5 @@
     "@types/react-onclickoutside": "^6.7.3",
     "@types/react-window": "^1.8.2"
   },
-  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
+  "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
 }