@synerise/ds-search-bar 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.0.1...@synerise/ds-search-bar@1.0.2) (2025-03-26)
+
+**Note:** Version bump only for package @synerise/ds-search-bar
+
+
+
+
+
+## [1.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@1.0.0...@synerise/ds-search-bar@1.0.1) (2025-03-18)
+
+**Note:** Version bump only for package @synerise/ds-search-bar
+
+
+
+
+
 ## [0.8.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search-bar@0.8.8...@synerise/ds-search-bar@0.8.9) (2025-03-10)
 
 **Note:** Version bump only for package @synerise/ds-search-bar

package/README.md

@@ -32,11 +32,11 @@ import SearchBar from '@synerise/ds-search-bar'
 | -------------- | ---------------------------------------- | ------------------------ | ------- |
 | autofocus      | Whether the input is focused             | boolean                  | `false` |
 | className      | Optional class for the component         | string                   | -       |
-| clearTooltip   | Tooltip description above clear button          | string / React.ReactNode | -       |
+| clearTooltip   | Tooltip description above clear button   | string / React.ReactNode | -       |
 | disabled       | Whether the input is disabled.           | boolean                  | -       |
 | iconLeft       | Place for optional icon on the left side | React.ReactNode          | -       |
 | onSearchChange | Callback when user input                 | () => void               | -       |
-| onClearInput   | Callback when user press clear button               | () => void               | -       |
-| placeholder    | Placeholder                              | string / React.ReactNode | -       |
+| onClearInput   | Callback when user press clear button    | () => void               | -       |
+| placeholder    | Placeholder                              | React.ReactNode          | -       |
 | value          | The input content value                  | string                   | -       |
-| autofocusDelay | Delay (ms) of the focus on search input  | number                   | 0 |
+| autofocusDelay | Delay (ms) of the focus on search input  | number                   | 0       |

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

package/dist/SearchBar.js

@@ -1,9 +1,13 @@
+var _excluded = ["value", "className", "onSearchChange", "onClearInput", "placeholder", "iconLeft", "autofocus", "clearTooltip", "disabled", "borderRadius", "handleInputRef", "autofocusDelay", "clearTooltipProps"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Icon, { Close3M } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './SearchBar.styles';
+var DEFAULT_PLACEHOLDER_STRING = 'Search';
 var SearchBar = function SearchBar(_ref) {
   var value = _ref.value,
     className = _ref.className,
@@ -14,12 +18,15 @@ var SearchBar = function SearchBar(_ref) {
     autofocus = _ref.autofocus,
     _ref$clearTooltip = _ref.clearTooltip,
     clearTooltip = _ref$clearTooltip === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.SEARCH-BAR.CLEAR-TOOLTIP"
+      id: "DS.SEARCH-BAR.CLEAR-TOOLTIP",
+      defaultMessage: "Clear"
     }) : _ref$clearTooltip,
     disabled = _ref.disabled,
     borderRadius = _ref.borderRadius,
     handleInputRef = _ref.handleInputRef,
-    autofocusDelay = _ref.autofocusDelay;
+    autofocusDelay = _ref.autofocusDelay,
+    clearTooltipProps = _ref.clearTooltipProps,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     isFocused = _useState[0],
     setFocus = _useState[1];
@@ -51,23 +58,24 @@ var SearchBar = function SearchBar(_ref) {
     }
     return undefined;
   }, [autofocus, autofocusDelay, input]);
-  return /*#__PURE__*/React.createElement(S.SearchBarWrapper, {
+  var placeholderString = typeof placeholder === 'string' ? placeholder : DEFAULT_PLACEHOLDER_STRING;
+  return /*#__PURE__*/React.createElement(S.SearchBarWrapper, _extends({
     iconLeft: iconLeft,
     isEmpty: !value,
     className: isFocused ? 'is-focused' : '',
     disabled: disabled,
     borderRadius: borderRadius,
     "data-testid": "input-wrapper"
-  }, iconLeft && /*#__PURE__*/React.createElement(S.IconLeftWrapper, null, iconLeft), onClearInput && Boolean(value) && /*#__PURE__*/React.createElement(S.ClearInputWrapper, {
+  }, htmlAttributes), iconLeft && /*#__PURE__*/React.createElement(S.IconLeftWrapper, null, iconLeft), onClearInput && Boolean(value) && /*#__PURE__*/React.createElement(S.ClearInputWrapper, {
     onClick: onClearInput,
     "data-testid": "clear-btn"
   }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Tooltip, {
+    component: /*#__PURE__*/React.createElement(Tooltip, _extends({
       title: clearTooltip
-    }, /*#__PURE__*/React.createElement(Close3M, null)),
+    }, clearTooltipProps), /*#__PURE__*/React.createElement(Close3M, null)),
     color: theme.palette['grey-500'],
     size: 18
-  })), /*#__PURE__*/React.createElement(S.SearchBar, {
+  })), !value && /*#__PURE__*/React.createElement(S.PlaceholderWrapper, null, placeholder), /*#__PURE__*/React.createElement(S.SearchBar, {
     onChange: function onChange(event) {
       return onSearchChange(event.currentTarget.value);
     },
@@ -77,10 +85,10 @@ var SearchBar = function SearchBar(_ref) {
     onBlur: function onBlur() {
       return setFocus(false);
     },
-    placeholder: placeholder,
     value: value,
     className: className,
     resetMargin: true,
+    placeholder: placeholderString,
     handleInputRef: handleRef,
     disabled: disabled,
     autoComplete: "off"

package/dist/SearchBar.styles.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const IconLeftWrapper: import("styled-components").StyledComponent<"div", 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 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, ...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;

package/dist/SearchBar.styles.js

@@ -8,10 +8,16 @@ 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;"]);
+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) {
+  return props.theme.palette['grey-500'];
+});
 export var SearchBar = styled(Input).withConfig({
   displayName: "SearchBarstyles__SearchBar",
-  componentId: "sc-qhi5c4-2"
-})(["&&&{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;}:-moz-placeholder{line-height:52px;}::-moz-placeholder{line-height:52px;}:-ms-input-placeholder{line-height:52px;}}}"], function (props) {
+  componentId: "sc-qhi5c4-3"
+})(["&&&{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) {
   return props.theme.palette['blue-600'];
@@ -21,7 +27,7 @@ export var SearchBar = styled(Input).withConfig({
 
 export var SearchBarWrapper = styled.div.withConfig({
   displayName: "SearchBarstyles__SearchBarWrapper",
-  componentId: "sc-qhi5c4-3"
+  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) {
   return props.theme.palette['grey-100'];
 }, function (props) {

package/dist/SearchBar.types.d.ts

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import type { InputProps } from '@synerise/ds-input';
-export type SearchBarProps = Pick<InputProps, 'handleInputRef'> & {
+import type { TooltipProps } from '@synerise/ds-tooltip';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+export type SearchBarProps = WithHTMLAttributes<HTMLDivElement, Pick<InputProps, 'handleInputRef'> & {
     onSearchChange: (value: string) => void;
     onClearInput?: () => void;
-    placeholder: string;
+    placeholder: ReactNode;
     className?: string;
     clearTooltip?: ReactNode;
     value: string;
@@ -12,4 +14,5 @@ export type SearchBarProps = Pick<InputProps, 'handleInputRef'> & {
     autofocusDelay?: number;
     disabled?: boolean;
     borderRadius?: boolean;
-};
+    clearTooltipProps?: Partial<TooltipProps>;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-search-bar",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "SearchBar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.0.0",
-    "@synerise/ds-input": "^1.0.0",
-    "@synerise/ds-tooltip": "^1.0.0",
-    "@synerise/ds-utils": "^1.0.0"
+    "@synerise/ds-icon": "^1.1.0",
+    "@synerise/ds-input": "^1.0.2",
+    "@synerise/ds-tooltip": "^1.1.1",
+    "@synerise/ds-utils": "^1.0.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -45,5 +45,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "e4c3690238a44b584b9ea41e4aa52b1eec42174b"
+  "gitHead": "47960dcd849dc47c85bd134bcfeb90a5505656a7"
 }