@synerise/ds-search-bar 1.2.0 → 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-bar@1.2.0...@synerise/ds-search-bar@1.3.0) (2025-06-11)
+
+
+### Features
+
+* **item-picker:** add search actions ([6b2c260](https://github.com/Synerise/synerise-design/commit/6b2c2607b32ad609a71ac7b93332f1b6baf2443c))
+
+
+
+
+
 # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.1.4...@synerise/ds-search-bar@1.2.0) (2025-06-05)
 
 

package/README.md

@@ -40,3 +40,4 @@ import SearchBar from '@synerise/ds-search-bar'
 | placeholder    | Placeholder                              | React.ReactNode          | -       |
 | value          | The input content value                  | string                   | -       |
 | autofocusDelay | Delay (ms) of the focus on search input  | number                   | 0       |
+| valuePrefix    | An element displayed before the value    | ReactNode                | -       |

package/dist/SearchBar.constants.d.ts

@@ -0,0 +1,8 @@
+export declare const SEARCH_BAR_PADDING_LEFT = 16;
+export declare const SEARCH_BAR_PADDING_RIGHT = 12;
+export declare const ICON_LEFT_SIZE = 24;
+export declare const ICON_LEFT_MARGIN_RIGHT = 12;
+export declare const CLEAR_ICON_SIZE = 18;
+export declare const CLEAR_ICON_MARGIN_LEFT = 12;
+export declare const VALUE_PREFIX_WRAPPER_LEFT_VALUE: number;
+export declare const VALUE_PREFIX_WRAPPER_RIGHT_MARGIN = 4;

package/dist/SearchBar.constants.js

@@ -0,0 +1,8 @@
+export var SEARCH_BAR_PADDING_LEFT = 16;
+export var SEARCH_BAR_PADDING_RIGHT = 12;
+export var ICON_LEFT_SIZE = 24;
+export var ICON_LEFT_MARGIN_RIGHT = 12;
+export var CLEAR_ICON_SIZE = 18;
+export var CLEAR_ICON_MARGIN_LEFT = 12;
+export var VALUE_PREFIX_WRAPPER_LEFT_VALUE = SEARCH_BAR_PADDING_LEFT + ICON_LEFT_SIZE + ICON_LEFT_MARGIN_RIGHT;
+export var VALUE_PREFIX_WRAPPER_RIGHT_MARGIN = 4;

package/dist/SearchBar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SearchBarProps } from './SearchBar.types';
-declare const SearchBar: ({ value, className, onSearchChange, onClearInput, placeholder, iconLeft, autofocus, clearTooltip, disabled, borderRadius, handleInputRef, autofocusDelay, clearTooltipProps, ...htmlAttributes }: SearchBarProps) => React.JSX.Element;
+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;
 export default SearchBar;

package/dist/SearchBar.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "className", "onSearchChange", "onClearInput", "placeholder", "iconLeft", "autofocus", "clearTooltip", "disabled", "borderRadius", "handleInputRef", "autofocusDelay", "clearTooltipProps"];
+var _excluded = ["value", "className", "onSearchChange", "onClearInput", "placeholder", "iconLeft", "autofocus", "clearTooltip", "disabled", "borderRadius", "handleInputRef", "autofocusDelay", "clearTooltipProps", "valuePrefix"];
 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 React, { useEffect, useMemo, useState } from 'react';
@@ -7,6 +7,8 @@ import classnames from 'classnames';
 import Icon, { Close3M } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
 import Tooltip from '@synerise/ds-tooltip';
+import { CLEAR_ICON_SIZE } from './SearchBar.constants';
+import { ValuePrefix } from './ValuePrefix';
 import * as S from './SearchBar.styles';
 var DEFAULT_PLACEHOLDER_STRING = 'Search';
 var SearchBar = function SearchBar(_ref) {
@@ -27,6 +29,7 @@ var SearchBar = function SearchBar(_ref) {
     handleInputRef = _ref.handleInputRef,
     autofocusDelay = _ref.autofocusDelay,
     clearTooltipProps = _ref.clearTooltipProps,
+    valuePrefix = _ref.valuePrefix,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     isFocused = _useState[0],
@@ -34,6 +37,9 @@ var SearchBar = function SearchBar(_ref) {
   var _useState2 = useState(),
     input = _useState2[0],
     setInput = _useState2[1];
+  var _useState3 = useState(0),
+    valuePrefixWidth = _useState3[0],
+    setValuePrefixWidth = _useState3[1];
   var handleRef = function handleRef(ref) {
     // eslint-disable-next-line no-unused-expressions
     handleInputRef == null || handleInputRef(ref);
@@ -70,10 +76,11 @@ var SearchBar = function SearchBar(_ref) {
     isEmpty: !value,
     disabled: disabled,
     borderRadius: borderRadius,
-    "data-testid": "input-wrapper"
+    "data-testid": "input-wrapper",
+    valuePrefixWidth: valuePrefixWidth
   }, htmlAttributes, {
     className: finalClassName
-  }), iconLeft && /*#__PURE__*/React.createElement(S.IconLeftWrapper, null, iconLeft), onClearInput && Boolean(value) && /*#__PURE__*/React.createElement(S.ClearInputWrapper, {
+  }), iconLeft && /*#__PURE__*/React.createElement(S.IconLeftWrapper, null, iconLeft), onClearInput && (Boolean(valuePrefix) || Boolean(value)) && /*#__PURE__*/React.createElement(S.ClearInputWrapper, {
     onClick: onClearInput,
     "data-testid": "clear-btn"
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -81,8 +88,13 @@ var SearchBar = function SearchBar(_ref) {
       title: clearTooltip
     }, clearTooltipProps), /*#__PURE__*/React.createElement(Close3M, null)),
     color: theme.palette['grey-500'],
-    size: 18
-  })), !value && /*#__PURE__*/React.createElement(S.PlaceholderWrapper, null, placeholder), /*#__PURE__*/React.createElement(S.SearchBar, {
+    size: CLEAR_ICON_SIZE
+  })), !!valuePrefix && /*#__PURE__*/React.createElement(ValuePrefix, {
+    value: valuePrefix,
+    setValuePrefixWidth: setValuePrefixWidth
+  }), !value && /*#__PURE__*/React.createElement(S.PlaceholderWrapper, {
+    valuePrefixWidth: valuePrefixWidth
+  }, placeholder), /*#__PURE__*/React.createElement(S.SearchBar, {
     onChange: function onChange(event) {
       onSearchChange(event.currentTarget.value);
     },

package/dist/SearchBar.styles.d.ts

@@ -1,11 +1,16 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 export declare const IconLeftWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValuePrefixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValuePrefixTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => import("react").JSX.Element, any, {}, never>;
 export declare const ClearInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+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) => import("react").JSX.Element, any, {}, never>;
 export declare const SearchBarWrapper: import("styled-components").StyledComponent<"div", any, {
     iconLeft: React.ReactNode;
     isEmpty: boolean;
     disabled: boolean;
     borderRadius: boolean | undefined;
+    valuePrefixWidth: number;
 }, never>;

package/dist/SearchBar.styles.js

@@ -1,22 +1,43 @@
 import styled from 'styled-components';
 import { Input } from '@synerise/ds-input';
+import { Title } from '@synerise/ds-typography';
+import { CLEAR_ICON_MARGIN_LEFT, CLEAR_ICON_SIZE, ICON_LEFT_MARGIN_RIGHT, ICON_LEFT_SIZE, SEARCH_BAR_PADDING_LEFT, SEARCH_BAR_PADDING_RIGHT, VALUE_PREFIX_WRAPPER_LEFT_VALUE, VALUE_PREFIX_WRAPPER_RIGHT_MARGIN } from './SearchBar.constants';
+var getPaddingAndWidthForSearchBarAntInput = function getPaddingAndWidthForSearchBarAntInput(_ref) {
+  var iconLeft = _ref.iconLeft,
+    isEmpty = _ref.isEmpty,
+    valuePrefixWidth = _ref.valuePrefixWidth;
+  var leftPadding = SEARCH_BAR_PADDING_LEFT + (iconLeft ? ICON_LEFT_SIZE + ICON_LEFT_MARGIN_RIGHT : 0) + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0);
+  var rightPadding = SEARCH_BAR_PADDING_RIGHT + (!isEmpty ? CLEAR_ICON_SIZE + CLEAR_ICON_MARGIN_LEFT : 0);
+  return "\n    padding: 0 " + rightPadding + "px 0 " + leftPadding + "px;\n    width: calc(100% - " + (rightPadding + leftPadding) + "px);\n  ";
+};
 export var IconLeftWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__IconLeftWrapper",
   componentId: "sc-qhi5c4-0"
-})(["position:absolute;left:16px;display:flex;align-items:center;height:100%;z-index:3;"]);
+})(["position:absolute;left:", "px;display:flex;align-items:center;height:100%;z-index:3;"], SEARCH_BAR_PADDING_LEFT);
+export var ValuePrefixWrapper = styled.div.withConfig({
+  displayName: "SearchBarstyles__ValuePrefixWrapper",
+  componentId: "sc-qhi5c4-1"
+})(["position:absolute;left:", "px;display:flex;align-items:center;height:100%;z-index:3;"], VALUE_PREFIX_WRAPPER_LEFT_VALUE);
+export var ValuePrefixTitle = styled(Title).withConfig({
+  displayName: "SearchBarstyles__ValuePrefixTitle",
+  componentId: "sc-qhi5c4-2"
+})(["line-height:18px;"]);
 export var ClearInputWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__ClearInputWrapper",
-  componentId: "sc-qhi5c4-1"
-})(["right:14px;position:absolute;display:flex;align-items:center;height:100%;z-index:3;cursor:pointer;"]);
+  componentId: "sc-qhi5c4-3"
+})(["right:", "px;position:absolute;display:flex;align-items:center;height:100%;z-index:3;cursor:pointer;"], SEARCH_BAR_PADDING_RIGHT);
 export var PlaceholderWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__PlaceholderWrapper",
-  componentId: "sc-qhi5c4-2"
-})(["pointer-events:none;position:absolute;display:flex;align-items:center;z-index:2;height:52px;left:52px;color:", ";"], function (props) {
+  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) {
+  var valuePrefixWidth = _ref2.valuePrefixWidth;
+  return VALUE_PREFIX_WRAPPER_LEFT_VALUE + valuePrefixWidth + (valuePrefixWidth ? VALUE_PREFIX_WRAPPER_RIGHT_MARGIN : 0);
+}, function (props) {
   return props.theme.palette['grey-500'];
 });
 export var SearchBar = styled(Input).withConfig({
   displayName: "SearchBarstyles__SearchBar",
-  componentId: "sc-qhi5c4-3"
+  componentId: "sc-qhi5c4-5"
 })(["&&&{position:relative;height:52px;padding:0;input.ant-input{position:absolute;top:0;left:0;max-width:100%;height:52px;border:0;background:", ";box-sizing:content-box;&:focus{box-shadow:inset 0px -2px 0px 0px ", ";}::-webkit-input-placeholder{line-height:52px;color:transparent;}:-moz-placeholder{line-height:52px;color:transparent;}::-moz-placeholder{line-height:52px;color:transparent;}:-ms-input-placeholder{line-height:52px;color:transparent;}}}"], function (props) {
   return props.theme.palette['grey-050'];
 }, function (props) {
@@ -27,8 +48,8 @@ export var SearchBar = styled(Input).withConfig({
 
 export var SearchBarWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__SearchBarWrapper",
-  componentId: "sc-qhi5c4-4"
-})(["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;padding:", ";width:", ";}&:hover{", "{svg{fill:", ";}}", "{svg{fill:", ";}}}}&.is-focused{", "{svg{fill:", ";}}", "{svg{fill:", ";}}}"], function (props) {
+  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) {
   return props.theme.palette['grey-100'];
 }, function (props) {
   return props.disabled ? 'none' : '';
@@ -38,22 +59,16 @@ export var SearchBarWrapper = styled.div.withConfig({
   return props.borderRadius ? '3px' : '';
 }, function (props) {
   return props.disabled ? props.theme.palette['grey-400'] : '';
-}, function (props) {
-  if (props.iconLeft && !props.isEmpty) return '0 42px 0 52px';
-  if (props.iconLeft && props.isEmpty) return '0 12px 0 52px';
-  if (!props.iconLeft && !props.isEmpty) return '0 42px 0 12px';
-  return '0 12px 0 12px';
-}, function (props) {
-  if (props.iconLeft && !props.isEmpty) return 'calc(100% - 92px)';
-  if (props.iconLeft && props.isEmpty) return 'calc(100% - 62px)';
-  if (!props.iconLeft && !props.isEmpty) return 'calc(100% - 52px)';
-  return 'calc(100% - 24px)';
-}, IconLeftWrapper, function (props) {
+}, getPaddingAndWidthForSearchBarAntInput, IconLeftWrapper, function (props) {
   return props.theme.palette['blue-600'];
 }, ClearInputWrapper, function (props) {
   return props.theme.palette['red-600'];
+}, ValuePrefixTitle, function (props) {
+  return props.theme.palette['blue-600'];
 }, IconLeftWrapper, function (props) {
   return props.theme.palette['blue-600'];
 }, ClearInputWrapper, function (props) {
   return props.theme.palette['red-600'];
+}, ValuePrefixTitle, function (props) {
+  return props.theme.palette['blue-600'];
 });

package/dist/SearchBar.types.d.ts

@@ -14,4 +14,5 @@ export type SearchBarProps = WithHTMLAttributes<HTMLDivElement, Pick<InputProps,
     disabled?: boolean;
     borderRadius?: boolean;
     clearTooltipProps?: Partial<TooltipProps>;
+    valuePrefix?: ReactNode;
 }>;

package/dist/ValuePrefix.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ReactNode, Dispatch, SetStateAction } from 'react';
+type ValuePrefixProps = {
+    value: ReactNode;
+    setValuePrefixWidth: Dispatch<SetStateAction<number>>;
+};
+export declare const ValuePrefix: ({ value, setValuePrefixWidth }: ValuePrefixProps) => React.JSX.Element;
+export {};

package/dist/ValuePrefix.js

@@ -0,0 +1,24 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useResizeObserver } from '@synerise/ds-utils';
+import * as S from './SearchBar.styles';
+export var ValuePrefix = function ValuePrefix(_ref) {
+  var value = _ref.value,
+    setValuePrefixWidth = _ref.setValuePrefixWidth;
+  var valuePrefixRef = useRef(null);
+  var handleValuePrefixWidth = useCallback(function (dimensions) {
+    setValuePrefixWidth(dimensions.width);
+  }, [setValuePrefixWidth]);
+  useResizeObserver(valuePrefixRef, handleValuePrefixWidth);
+  useEffect(function () {
+    return function () {
+      return setValuePrefixWidth(0);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(S.ValuePrefixWrapper, {
+    ref: valuePrefixRef
+  }, /*#__PURE__*/React.createElement(S.ValuePrefixTitle, {
+    level: 6,
+    withoutMargin: true
+  }, value));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search-bar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "SearchBar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -46,5 +46,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "93bc81d59d20bc8f3bc80c5d56ae7f7c0838380d"
+  "gitHead": "35c8f09d6a248f199237766c1f5181f4b3fc88af"
 }