[Search] Customizable placeholder (#378)

.changeset/quiet-kangaroos-live.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/search": patch
+---
+
+Add placeholder prop to Search component

src/packages/search/README.md

@@ -28,6 +28,12 @@ The default value is 5.
 <Search mapId={MAP_ID} sources={searchsources} maxResultsPerGroup={10} />
 ```
 
+To change the placeholder text of the search field, use the optional property `placeholder`:
+
+```tsx
+<Search sources={searchsources} placeholder="Search for cities" />
+```
+
 ### Listening to events
 
 To listen to the events `onSelect` and `onClear`, provide optional callback functions to the component.

src/packages/search/Search.tsx

@@ -90,6 +90,12 @@ export interface SearchProps extends CommonComponentProps, MapModelProps {
      */
     maxResultsPerGroup?: number;
 
+    /**
+     * The placeholder text shown in the search input field when it is empty.
+     * Defaults to a generic (and localized) hint.
+     */
+    placeholder?: string;
+
     /**
      * This event handler will be called when the user selects a search result.
      */
@@ -172,7 +178,7 @@ export const Search: FC<SearchProps> = (props) => {
                 selectedOptionColorScheme="trails"
                 chakraStyles={chakraStyles}
                 isClearable={true}
-                placeholder={intl.formatMessage({ id: "searchPlaceholder" })}
+                placeholder={props.placeholder ?? intl.formatMessage({ id: "searchPlaceholder" })}
                 closeMenuOnSelect={true}
                 isLoading={search.kind === "loading"}
                 options={search.kind === "ready" ? search.results : undefined}