@synerise/ds-search 1.2.8 → 1.3.0

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.
 
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.2.8...@synerise/ds-search@1.3.0) (2025-08-28)
+
+
+### Features
+
+* **search:** allow custom dropdown width ([0555d9d](https://github.com/Synerise/synerise-design/commit/0555d9d39abc49868a490e5b559184c720e4d8d3))
+
+
+
+
+
 ## [1.2.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.2.7...@synerise/ds-search@1.2.8) (2025-08-20)
 
 **Note:** Version bump only for package @synerise/ds-search

package/README.md

@@ -113,7 +113,8 @@ return (
 | suggestionsDisplayProps | An object containing the details of how suggestions list should render                 | DataSetProps or undefined or null                                        | -       |
 | 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                                                                   | -       |
+| searchWidth             | Width of the search input when expanded                                                | number                                                                   | -       |
+| dropdownWidth           | Width of the suggestions dropdown. Will match search input if undefined                | number                                                                   | -       |
 | alwaysExpanded          | Enable expanded input on Search component with dropdown                                | boolean / undefined                                                      | -       |
 
 ### DataSetProps

package/dist/Search.js

@@ -21,7 +21,6 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   function Search(props) {
     var _this;
     _this = _React$PureComponent.call(this, props) || this;
-    // eslint-disable-next-line react/state-in-constructor
     _this.wrapperRef = /*#__PURE__*/React.createRef();
     // This handler is used for onClickOutside HOC
     _this.handleClickOutside = function () {
@@ -57,6 +56,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         isResultChosen: false
       });
     };
+    var searchWidth = props.width || props.searchWidth;
+    // eslint-disable-next-line react/state-in-constructor
     _this.state = {
       isInputOpen: !!props.value || !!props.parameterValue || !!props.alwaysExpanded,
       label: props.parameterValue ? props.parameters.find(function (param) {
@@ -67,7 +68,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       filteredSuggestions: props.suggestions,
       isListVisible: false,
       isResultChosen: false,
-      itemsListWidth: props.width ? props.width - MENU_WIDTH_OFFSET : 0,
+      itemsListWidth: searchWidth ? searchWidth - MENU_WIDTH_OFFSET : 0,
       toggleInputTrigger: false,
       focusInputTrigger: false,
       scrollbarScrollTop: 0,
@@ -234,6 +235,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
     var _this$props9 = this.props,
       recent = _this$props9.recent,
       recentDisplayProps = _this$props9.recentDisplayProps,
+      dropdownWidth = _this$props9.dropdownWidth,
       value = _this$props9.value;
     var _this$state2 = this.state,
       label = _this$state2.label,
@@ -254,7 +256,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         return _this2.selectResult(item, SelectResultDataKeys.RECENT);
       },
       rowHeight: rowHeight,
-      width: itemsListWidth,
+      width: dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth,
       renderInMenu: false
     }));
   };
@@ -265,6 +267,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       parametersDisplayProps = _this$props10.parametersDisplayProps,
       value = _this$props10.value,
       dropdownMaxHeight = _this$props10.dropdownMaxHeight,
+      dropdownWidth = _this$props10.dropdownWidth,
       recentDisplayProps = _this$props10.recentDisplayProps;
     var _this$state3 = this.state,
       label = _this$state3.label,
@@ -289,7 +292,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         return _this3.selectFilter(item);
       },
       rowHeight: rowHeight,
-      width: itemsListWidth,
+      width: dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth,
       listProps: _extends({
         scrollTop: getParametersScrollTop({
           scrollTop: scrollbarScrollTop,
@@ -307,6 +310,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       parameterValue = _this$props11.parameterValue,
       suggestionsDisplayProps = _this$props11.suggestionsDisplayProps,
       value = _this$props11.value,
+      dropdownWidth = _this$props11.dropdownWidth,
       dropdownMaxHeight = _this$props11.dropdownMaxHeight;
     var _this$state4 = this.state,
       isResultChosen = _this$state4.isResultChosen,
@@ -325,7 +329,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         return _this4.selectResult(item, SelectResultDataKeys.SUGGESTIONS);
       },
       rowHeight: suggestionsDisplayProps.rowHeight,
-      width: itemsListWidth,
+      width: dropdownWidth ? dropdownWidth - MENU_WIDTH_OFFSET : itemsListWidth,
       listProps: _extends({
         scrollTop: scrollbarScrollTop
       }, suggestionsDisplayProps.listProps || {}),
@@ -403,7 +407,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       divider = _this$props13.divider,
       dropdownMaxHeight = _this$props13.dropdownMaxHeight,
       width = _this$props13.width,
-      style = _this$props13.style;
+      searchWidth = _this$props13.searchWidth,
+      style = _this$props13.style,
+      dropdownWidth = _this$props13.dropdownWidth;
     var _this$state6 = this.state,
       isInputOpen = _this$state6.isInputOpen,
       label = _this$state6.label,
@@ -412,11 +418,12 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       isResultChosen = _this$state6.isResultChosen,
       filteredParameters = _this$state6.filteredParameters,
       filteredRecent = _this$state6.filteredRecent;
+    var mergedWidth = searchWidth !== undefined ? searchWidth : width;
     return /*#__PURE__*/React.createElement(S.SearchWrapper, {
       ref: this.wrapperRef,
       className: "SearchWrapper",
       inputOpen: isInputOpen,
-      width: width,
+      $width: mergedWidth,
       onKeyDown: function onKeyDown(e) {
         focusWithArrowKeys(e, 'ds-search-item', function () {
           _this6.setState({
@@ -426,6 +433,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
       },
       style: style
     }, this.renderInputWrapper(), isListVisible && /*#__PURE__*/React.createElement(S.SearchDropdownWrapper, {
+      dropdownWidth: dropdownWidth,
       onClick: function onClick() {
         _this6.setState({
           focusInputTrigger: !focusInputTrigger

package/dist/Search.styles.d.ts

@@ -1,9 +1,7 @@
 export declare const openDropdownAnimation: import("styled-components").Keyframes;
-export declare const SearchInputWrapper: import("styled-components").StyledComponent<"div", any, {
-    width?: number;
-}, never>;
+export declare const SearchInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SearchWrapper: import("styled-components").StyledComponent<"div", any, {
-    width?: number;
+    $width?: number;
     inputOpen?: boolean;
 }, never>;
 export declare const LeftSide: import("styled-components").StyledComponent<"span", any, {
@@ -32,4 +30,6 @@ export declare const SearchDropdownContent: import("styled-components").StyledCo
 }, never>;
 export declare const MenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HeaderIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SearchDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
+    dropdownWidth?: number;
+}, never>;

package/dist/Search.styles.js

@@ -9,7 +9,7 @@ export var SearchWrapper = styled.div.withConfig({
   displayName: "Searchstyles__SearchWrapper",
   componentId: "sc-1w8jj1b-1"
 })(["", ";position:relative;direction:rtl;"], function (props) {
-  return !!props.width && "\n   " + (props.inputOpen ? "width:" + props.width + "px;" : "width:32px") + ";\n  ";
+  return !!props.$width && "\n   " + (props.inputOpen ? "width:" + props.$width + "px;" : "width:32px") + ";\n  ";
 });
 export var LeftSide = styled.span.withConfig({
   displayName: "Searchstyles__LeftSide",
@@ -88,4 +88,6 @@ export var HeaderIconWrapper = styled.div.withConfig({
 export var SearchDropdownWrapper = styled.div.withConfig({
   displayName: "Searchstyles__SearchDropdownWrapper",
   componentId: "sc-1w8jj1b-13"
-})(["width:0;& > .search-list-open{width:100%;animation:", " 0.3s ease-in-out 0s 1;opacity:1;display:initial;padding:8px 0 8px 8px;z-index:10;}"], openDropdownAnimation);
+})(["width:0;& > .search-list-open{width:", ";animation:", " 0.3s ease-in-out 0s 1;opacity:1;display:initial;padding:8px 0 8px 8px;z-index:10;}"], function (props) {
+  return props.dropdownWidth ? props.dropdownWidth + "px" : '100%';
+}, openDropdownAnimation);

package/dist/Search.types.d.ts

@@ -36,7 +36,12 @@ export type SearchProps<T extends AnyObject, U extends AnyObject> = {
     suggestionsDisplayProps?: DataSetProps | null;
     textLookupConfig: SearchLookupConfig<T, U>;
     value: string;
+    /** @deprecated - use searchWidth instead */
     width?: number;
+    /** @description - by default the suggestions dropdown will match the search input width, provide `dropdownWidth` param if you want to customise dropdown width  */
+    searchWidth?: number;
+    /** @description - by default the suggestions dropdown will match the search input width, provide `dropdownWidth` param if you want to customise dropdown width  */
+    dropdownWidth?: number;
     hideLabel?: boolean;
     disableInput?: boolean;
     alwaysExpanded?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "description": "Search UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.8",
-    "@synerise/ds-icon": "^1.7.0",
-    "@synerise/ds-menu": "^1.0.20",
-    "@synerise/ds-scrollbar": "^1.1.6",
-    "@synerise/ds-tooltip": "^1.1.16",
-    "@synerise/ds-utils": "^1.4.0",
+    "@synerise/ds-button": "^1.4.9",
+    "@synerise/ds-icon": "^1.7.1",
+    "@synerise/ds-menu": "^1.0.21",
+    "@synerise/ds-scrollbar": "^1.1.7",
+    "@synerise/ds-tooltip": "^1.1.17",
+    "@synerise/ds-utils": "^1.4.1",
     "react-onclickoutside": "^6.9.0",
     "react-window": "^1.8.11"
   },
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "2393f96e57ee588efc9b56457389865b272b79fa"
+  "gitHead": "5f5d424cf8c7fa89e231c36a45f5ab3e4cfac8e7"
 }