unpack props inside component bodies

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/search-react/src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx

@@ -38,16 +38,17 @@ export type HighlightedSearchResultTextProps = {
 /**
  * @public
  */
-export const HighlightedSearchResultText = ({
-  text,
-  preTag,
-  postTag,
-}: HighlightedSearchResultTextProps) => {
+export const HighlightedSearchResultText = (
+  props: HighlightedSearchResultTextProps,
+) => {
+  const { text, preTag, postTag } = props;
+
   const classes = useStyles();
   const terms = useMemo(
     () => text.split(new RegExp(`(${preTag}.+?${postTag})`)),
     [postTag, preTag, text],
   );
+
   return (
     <>
       {terms.map((t, idx) =>

plugins/search-react/src/components/SearchAutocomplete/SearchAutocompleteDefaultOption.tsx

@@ -40,22 +40,28 @@ export type SearchAutocompleteDefaultOptionProps = {
  *
  * @public
  */
-export const SearchAutocompleteDefaultOption = ({
-  icon,
-  primaryText,
-  primaryTextTypographyProps,
-  secondaryText,
-  secondaryTextTypographyProps,
-  disableTextTypography,
-}: SearchAutocompleteDefaultOptionProps) => (
-  <>
-    {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-    <ListItemText
-      primary={primaryText}
-      primaryTypographyProps={primaryTextTypographyProps}
-      secondary={secondaryText}
-      secondaryTypographyProps={secondaryTextTypographyProps}
-      disableTypography={disableTextTypography}
-    />
-  </>
-);
+export const SearchAutocompleteDefaultOption = (
+  props: SearchAutocompleteDefaultOptionProps,
+) => {
+  const {
+    icon,
+    primaryText,
+    primaryTextTypographyProps,
+    secondaryText,
+    secondaryTextTypographyProps,
+    disableTextTypography,
+  } = props;
+
+  return (
+    <>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText
+        primary={primaryText}
+        primaryTypographyProps={primaryTextTypographyProps}
+        secondary={secondaryText}
+        secondaryTypographyProps={secondaryTextTypographyProps}
+        disableTypography={disableTextTypography}
+      />
+    </>
+  );
+};

plugins/search-react/src/components/SearchFilter/SearchFilter.tsx

@@ -208,10 +208,10 @@ export const SelectFilter = (props: SearchFilterComponentProps) => {
 /**
  * @public
  */
-const SearchFilter = ({
-  component: Element,
-  ...props
-}: SearchFilterWrapperProps) => <Element {...props} />;
+const SearchFilter = (props: SearchFilterWrapperProps) => {
+  const { component: Element, ...elementProps } = props;
+  return <Element {...elementProps} />;
+};
 
 SearchFilter.Checkbox = (
   props: Omit<SearchFilterWrapperProps, 'component'> &