@synerise/ds-search-bar 1.3.18 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.3.19...@synerise/ds-search-bar@1.4.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
+## [1.3.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.3.18...@synerise/ds-search-bar@1.3.19) (2025-10-31)
+
+**Note:** Version bump only for package @synerise/ds-search-bar
+
+
+
+
+
 ## [1.3.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.3.17...@synerise/ds-search-bar@1.3.18) (2025-10-22)
 
 **Note:** Version bump only for package @synerise/ds-search-bar

package/dist/SearchBar.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
-import type { SearchBarProps } from './SearchBar.types';
-declare const SearchBar: ({ value, className, onSearchChange, onClearInput, placeholder, iconLeft, autofocus, clearTooltip, disabled, borderRadius, handleInputRef, autofocusDelay, clearTooltipProps, valuePrefix, ...htmlAttributes }: SearchBarProps) => React.JSX.Element;
+declare const SearchBar: React.ForwardRefExoticComponent<Pick<import("@synerise/ds-input").InputProps, "handleInputRef"> & {
+    onSearchChange: (value: string) => void;
+    onClearInput?: () => void;
+    placeholder: React.ReactNode;
+    clearTooltip?: React.ReactNode;
+    value: string;
+    iconLeft?: React.ReactNode;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    disabled?: boolean;
+    borderRadius?: boolean;
+    clearTooltipProps?: Partial<import("@synerise/ds-tooltip").TooltipProps>;
+    valuePrefix?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "iconLeft" | "disabled" | "value" | "placeholder" | "handleInputRef" | "onSearchChange" | "onClearInput" | "clearTooltip" | "autofocus" | "autofocusDelay" | "borderRadius" | "clearTooltipProps" | "valuePrefix"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default SearchBar;

package/dist/SearchBar.js

@@ -2,16 +2,16 @@ var _excluded = ["value", "className", "onSearchChange", "onClearInput", "placeh
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import classnames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { theme } from '@synerise/ds-core';
+import { useTheme } from '@synerise/ds-core';
 import Icon, { Close3M } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import { CLEAR_ICON_SIZE } from './SearchBar.constants';
 import * as S from './SearchBar.styles';
 import { ValuePrefix } from './ValuePrefix';
 var DEFAULT_PLACEHOLDER_STRING = 'Search';
-var SearchBar = function SearchBar(_ref) {
+var SearchBar = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var value = _ref.value,
     className = _ref.className,
     onSearchChange = _ref.onSearchChange,
@@ -31,6 +31,7 @@ var SearchBar = function SearchBar(_ref) {
     clearTooltipProps = _ref.clearTooltipProps,
     valuePrefix = _ref.valuePrefix,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var theme = useTheme();
   var _useState = useState(false),
     isFocused = _useState[0],
     setFocus = _useState[1];
@@ -80,7 +81,8 @@ var SearchBar = function SearchBar(_ref) {
     "data-testid": "input-wrapper",
     valuePrefixWidth: valuePrefixWidth
   }, htmlAttributes, {
-    className: finalClassName
+    className: finalClassName,
+    ref: forwardedRef
   }), iconLeft && /*#__PURE__*/React.createElement(S.IconLeftWrapper, null, iconLeft), onClearInput && (Boolean(valuePrefix) || Boolean(value)) && /*#__PURE__*/React.createElement(S.ClearInputWrapper, {
     onClick: onClearInput,
     "data-testid": "clear-btn"
@@ -100,7 +102,7 @@ var SearchBar = function SearchBar(_ref) {
       onSearchChange(event.currentTarget.value);
     },
     onFocus: function onFocus() {
-      setFocus(true);
+      return setFocus(true);
     },
     onBlur: function onBlur() {
       return setFocus(false);
@@ -112,5 +114,5 @@ var SearchBar = function SearchBar(_ref) {
     disabled: disabled,
     autoComplete: "off"
   }));
-};
+});
 export default SearchBar;

package/dist/SearchBar.styles.d.ts

@@ -5,7 +5,24 @@ export declare const ClearInputWrapper: import("styled-components").StyledCompon
 export declare const PlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {
     valuePrefixWidth: number;
 }, never>;
-export declare const SearchBar: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
+export declare const SearchBar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    error?: boolean;
+    className?: string;
+    counterLimit?: number;
+    renderCustomCounter?: (count?: number) => React.ReactNode;
+    icon1?: React.ReactElement;
+    icon1Tooltip?: React.ReactElement;
+    icon2?: React.ReactElement;
+    icon2Tooltip?: React.ReactElement;
+    resetMargin?: boolean;
+    handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    autoResize?: import("@synerise/ds-input").AutoResizeProp;
+    autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
+    expandable?: boolean;
+    expandableTooltip?: React.ReactNode;
+} & Omit<import("@synerise/ds-form-field").ContentAboveProps, "id" | "rightSide"> & import("@synerise/ds-form-field").ContentBelowProps & import("antd/lib/input").InputProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const SearchBarWrapper: import("styled-components").StyledComponent<"div", any, {
     iconLeft: React.ReactNode;
     isEmpty: boolean;

package/dist/SearchBar.styles.js

@@ -29,7 +29,7 @@ export var ClearInputWrapper = styled.div.withConfig({
 export var PlaceholderWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__PlaceholderWrapper",
   componentId: "sc-qhi5c4-4"
-})(["pointer-events:none;position:absolute;display:flex;align-items:center;z-index:2;height:52px;left:", "px;color:", ";line-height:18px;"], function (_ref2) {
+})(["pointer-events:none;position:absolute;display:flex;white-space:nowrap;align-items:center;z-index:2;height:52px;left:", "px;color:", ";line-height:18px;"], function (_ref2) {
   var valuePrefixWidth = _ref2.valuePrefixWidth;
   return VALUE_PREFIX_WRAPPER_LEFT_VALUE + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0);
 }, function (props) {
@@ -49,7 +49,7 @@ export var SearchBar = styled(Input).withConfig({
 export var SearchBarWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__SearchBarWrapper",
   componentId: "sc-qhi5c4-6"
-})(["position:relative;overflow:hidden;border-bottom:1px solid ", ";pointer-events:", ";user-select:", ";border-radius:", ";&&&{svg{transition:all 0.3s ease-out;fill:", ";}input.ant-input{border-radius:0;line-height:18px;", "}&:hover{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}}&.is-focused{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}"], function (props) {
+})(["position:relative;overflow:hidden;border-bottom:1px solid ", ";pointer-events:", ";user-select:", ";border-radius:", ";min-width:150px;&&&{svg{transition:all 0.3s ease-out;fill:", ";}input.ant-input{border-radius:0;line-height:18px;", "}&:hover{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}}&.is-focused{", "{svg{fill:", ";}}", "{svg{fill:", ";}}", "{color:", ";}}"], function (props) {
   return props.theme.palette['grey-100'];
 }, function (props) {
   return props.disabled ? 'none' : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search-bar",
-  "version": "1.3.18",
+  "version": "1.4.0",
   "description": "SearchBar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,9 +35,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-input": "^1.4.1",
-    "@synerise/ds-tooltip": "^1.2.1",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-input": "^1.5.0",
+    "@synerise/ds-tooltip": "^1.3.0",
     "@synerise/ds-utils": "^1.5.0",
     "classnames": "^2.5.1"
   },
@@ -47,5 +47,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a40fca2cc78eda64afa96d18dc4d177538a22404"
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
 }