@redneckz/wildless-cms-uni-blocks 0.8.28 → 0.8.30

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -4,10 +4,10 @@ import { useBool } from '../../hooks/useBool';
 import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { projectSettings } from '../../ProjectSettings';
 import type { ForeignOffice } from '../../services/sitemap/SitemapData';
 import { Location } from '../../ui-kit/Location/Location';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
@@ -64,7 +64,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             currentLocation={location}
             foreignOffices={foreignOffices}
             onChangeLocation={onChangeLocation}
-            close={hideLocationModal}
+            onClose={hideLocationModal}
           />
         ) : null}
       </div>

package/mobile/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
@@ -8,7 +9,7 @@ export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   isRounded?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
-  onClick?: (ev?: { preventDefault: () => void }) => void;
+  onClick?: (ev?: PreventableEvent) => void;
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(

package/mobile/src/components/ImgBlock/ImgBlockContent.ts

@@ -4,4 +4,4 @@ import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 /**
  * @title Картинка
  */
-export type ImgBlockContent = UniBlockContent & ImageContent & {};
+export type ImgBlockContent = UniBlockContent & ImageContent;

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -9,7 +9,7 @@ import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
-type StepCommonProps = IconProps & ButtonCommonIconProps & BulletsProps & ListContent & {};
+type StepCommonProps = IconProps & ButtonCommonIconProps & BulletsProps & ListContent;
 
 /**
  * @title Стандартный
@@ -23,6 +23,9 @@ type RichTextStep = RichTextItem & IconProps;
 
 /**
  * @title Шаг
+ * @default {
+ *    "type": "default"
+ * }
  */
 export type Step = DefaultStep | RichTextStep;
 

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,6 +1,6 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import type { UniBlockContent, UniBlockProps } from '../../model/JSXBlock';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
@@ -43,7 +43,7 @@ export type Data = {
 /**
  * @title Параметр
  */
-export type TariffsTableRowHeader = TitleProps & IconProps & {};
+export type TariffsTableRowHeader = TitleProps & IconProps;
 
 /**
  * @title Изображение
@@ -112,7 +112,8 @@ export interface TariffsTableColumn {
 /**
  * @title Таблица тарифов
  */
-export type TariffsTableContent = TitleProps &
+export type TariffsTableContent = UniBlockContent &
+  TitleProps &
   DescriptionProps & {
     /** @title Колонки */
     tariffsColumns?: TariffsTableColumn[];

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -1,15 +1,10 @@
 import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная", "Второстепенная прозрачная"]
- */
-export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
-
 /**
  * @title Размер иконки
  * @enumNames ["Нет", "Маленькая", "Большая"]
@@ -19,11 +14,11 @@ type TextBlockIconVersion = 'none' | 'small' | 'big';
 /**
  * @title Текстовый блок
  */
-export type TextBlockContent = HeadlineCommonProps &
+export type TextBlockContent = UniBlockContent &
+  HeadlineCommonProps &
   RichTextProps &
   ImageContent &
   ListContent &
   BulletsProps & {
     iconVersion?: TextBlockIconVersion;
-    blockVersion?: TextBlockVersion;
   };

package/mobile/src/{services/sitemap → hooks}/fallbackWCMSResource.ts

@@ -1,5 +1,5 @@
 import { readFile } from 'fs/promises';
-import type { FallbackMap } from '../../model/Fallback';
+import type { FallbackMap } from '../model/Fallback';
 
 export const fallbackWCMSResource = (filename: string): FallbackMap => ({
   [`/wcms-resources/${filename}.json`]: async () =>

package/mobile/src/hooks/useLink.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
-import type { PreventableEvent } from '../model/PreventableEvent';
+import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';

package/mobile/src/services/{sitemap/search → search}/search.ts

@@ -1,5 +1,5 @@
-import { compareBy, desc } from '../../../utils/Comparator';
-import { zip } from '../../../utils/zip';
+import { compareBy, desc } from '../../utils/Comparator';
+import { zip } from '../../utils/zip';
 import { jaroWinklerDistance } from './jaroWinklerDistance';
 import { joinMaps } from './joinMaps';
 import { textRank } from './textRank';

package/mobile/src/services/{sitemap/search → search}/textRank.ts

@@ -1,5 +1,5 @@
-import { max } from '../../../utils/maxBy';
-import { sum } from '../../../utils/sum';
+import { max } from '../../utils/maxBy';
+import { sum } from '../../utils/sum';
 import { jaroWinklerDistance } from './jaroWinklerDistance';
 import { tokenize } from './tokenize';
 

package/{src/services/sitemap → mobile/src/services/search}/useSearch.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
 import { joinPath } from '../../utils/url';
-import { CorpusItem, search, SearchIndex } from './search/search';
+import { CorpusItem, search, SearchIndex } from './search';
 
 const SEARCH_INDEX_FILENAME = 'search.index.json';
 

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -2,6 +2,7 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps, Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
+import type { PreventableEvent } from '../PreventableEvent';
 
 /**
  * @hidden
@@ -11,7 +12,7 @@ export interface ButtonAdditionalProps {
   disabled?: boolean;
   rel?: string;
   ariaLabel?: string;
-  onClick?: (ev?: { preventDefault: () => void }) => void;
+  onClick?: (ev?: PreventableEvent) => void;
 }
 
 /**

package/mobile/src/ui-kit/Dialog/CloseButton.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+import type { PreventableEvent } from '../PreventableEvent';
+
+interface CloseButtonProps {
+  className?: string;
+  onClick?: (ev: PreventableEvent) => void;
+}
+
+export const CloseButton = JSX<CloseButtonProps>(({ className, onClick }) => (
+  <button
+    className={style(
+      'visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none',
+      className,
+    )}
+    onClick={onClick}
+    title="Закрыть"
+  >
+    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
+  </button>
+));

package/mobile/src/ui-kit/Dialog/Dialog.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
+import type { PreventableEvent } from '../PreventableEvent';
+import { CloseButton } from './CloseButton';
+
+export interface DialogProps {
+  className?: string;
+  head?: VNode;
+  onClose?: () => void;
+}
+
+export const Dialog = JSX<DialogProps>(({ className, head, children, onClose }) => {
+  const handleClose = useCallback(
+    (ev: PreventableEvent) => {
+      ev.preventDefault();
+      onClose && onClose();
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    const handleEscape = ({ key }: { key: string }) => {
+      if (key === 'Escape') {
+        onClose && onClose();
+      }
+    };
+
+    globalThis.document?.addEventListener('keydown', handleEscape);
+
+    return () => {
+      globalThis.document?.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className={style(
+        'fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar',
+        className,
+      )}
+      role="dialog"
+    >
+      <div className="relative container pb-12 min-h-full">
+        <div className="sticky bg-white pt-6 top-0">
+          <CloseButton className="absolute top-3 -right-6" onClick={handleClose} />
+          {head}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+});

package/mobile/src/ui-kit/Location/Location.tsx

@@ -1,25 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import type { Region } from '../../hooks/useRegions';
 import { useRegions } from '../../hooks/useRegions';
+import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
+import type { ForeignOffice } from '../../services/sitemap/SitemapData';
 import { Text } from '../../ui-kit/Text/Text';
 import { groupBy } from '../../utils/groupBy';
+import { Dialog, type DialogProps } from '../Dialog/Dialog';
 import { Img } from '../Img/Img';
-import { SearchBar } from './SearchBar';
-import type { ForeignOffice } from '../../services/sitemap/SitemapData';
-import type { Region } from '../../hooks/useRegions';
 import type {
-  LocationProps,
   CurrentLocationProps,
-  CloseButtonProps,
-  RegionLinkProps,
   ForeignOfficeProps,
+  LocationProps,
+  RegionLinkProps,
 } from './LocationProps';
+import { SearchBar } from './SearchBar';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 
 export const Location = JSX<LocationProps>(
-  ({ currentLocation, onChangeLocation, close, foreignOffices }) => {
+  ({ currentLocation, onChangeLocation, onClose, foreignOffices }) => {
     const [query, setQuery] = useState('');
 
     const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
@@ -28,31 +29,34 @@ export const Location = JSX<LocationProps>(
     const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
 
     return (
-      <div className="absolute h-full w-full inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll">
-        <div className="relative container pt-6 pb-12">
-          <div className="sticky bg-white pt-6 top-0">
-            <CloseButton close={close} />
+      <Dialog
+        head={
+          <div>
             <CurrentLocation currentLocation={currentLocation} />
             <SearchBar onSearch={setQuery} searchTerm={query} className="mb-7" />
           </div>
+        }
+        onClose={onClose}
+      >
+        {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
+          <div>
+            {regions
+              .filter(
+                ({ name }) =>
+                  name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8,
+              )
+              .map(renderRegion({ onChangeLocation, onClose }))}
+          </div>
+        ) : (
+          <div className="columns-5">
+            {Array.from(regionsGroupByLetter.entries()).map(
+              renderRegionGroup({ onChangeLocation, onClose }),
+            )}
+          </div>
+        )}
 
-          {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
-            <div>
-              {regions
-                .filter((region) => region.name?.startsWith(query))
-                .map(renderRegion({ onChangeLocation, close }))}
-            </div>
-          ) : (
-            <div className="columns-5">
-              {Array.from(regionsGroupByLetter.entries()).map(
-                renderRegionGroup({ onChangeLocation, close }),
-              )}
-            </div>
-          )}
-
-          <ForeignOffices foreignOffices={foreignOffices} />
-        </div>
-      </div>
+        <ForeignOffices foreignOffices={foreignOffices} />
+      </Dialog>
     );
   },
 );
@@ -78,32 +82,20 @@ const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation }) =>
   ) : null,
 );
 
-const CloseButton = JSX<CloseButtonProps>(({ close }) => (
-  <button
-    className="visible peer-placeholder-shown:invisible absolute top-0 -right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
-    onClick={(e) => {
-      e.preventDefault();
-      close && close();
-    }}
-  >
-    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
-  </button>
-));
-
 const renderRegionGroup =
-  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  ({ onChangeLocation, onClose }: RegionLinkProps & DialogProps) =>
   ([letter, regions]: [string, Region[]]) =>
     (
       <div key={letter} className="break-inside-avoid mb-7 w-[224px]">
         <div className="mb-2.5">
           <Text size="text-h6">{letter}</Text>
         </div>
-        {regions.map(renderRegion({ onChangeLocation, close }))}
+        {regions.map(renderRegion({ onChangeLocation, onClose }))}
       </div>
     );
 
 const renderRegion =
-  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  ({ onChangeLocation, onClose }: RegionLinkProps & DialogProps) =>
   (region: Region) =>
     (
       <div key={region.id} className="mb-1">
@@ -111,7 +103,7 @@ const renderRegion =
           className="cursor-pointer hover:text-primary-hover"
           onClick={() => {
             onChangeLocation && onChangeLocation(region);
-            close && close();
+            onClose && onClose();
           }}
         >
           {region.name || ''}

package/mobile/src/ui-kit/Location/LocationProps.ts

@@ -1,13 +1,13 @@
 import { Region } from '../../hooks/useRegions';
-import { ForeignOffice } from '../../services/sitemap/SitemapData';
 import { UniBlockProps } from '../../model/JSXBlock';
+import { ForeignOffice } from '../../services/sitemap/SitemapData';
 
 export interface RegionLinkProps {
   onChangeLocation?: (region: Region) => void;
 }
 
 export interface CloseButtonProps {
-  close?: () => void;
+  onClose?: () => void;
 }
 
 export interface CurrentLocationProps {

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -1,72 +1,109 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../Button/Button';
-import { Img } from '../Img/Img';
+import { useCallback, useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
+import type { LinkProps } from '../../model/LinkProps';
+import { useSearch, type SearchResult } from '../../services/search/useSearch';
+import type { TopMenuItem } from '../../services/sitemap/SitemapData';
+import { zip } from '../../utils/zip';
+import { CloseButton } from '../Dialog/CloseButton';
+import { Dialog } from '../Dialog/Dialog';
+import { Sitemap } from '../Sitemap/Sitemap';
+import { SearchBarInput } from './SearchBarInput';
 
 export interface SearchBarInnerProps {
   isMobile?: boolean;
   className?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  onFocus?: () => void;
+  topItems?: TopMenuItem[];
 }
 
-export const SearchBarInner = JSX<SearchBarInnerProps>(
-  ({ className, isMobile, value: query, onChange, onFocus }) => {
-    const LoupeIconClassName = isMobile ? 'w-5 h-5' : 'w-6 h-6';
-    const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
-    const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
-    const inputPlaceholder = isMobile ? 'some search' : undefined;
+const MIN_QUERY_LEN = 3;
 
-    return (
-      <form className={`font-sans relative ${className}`}>
-        <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
-          <div className={LoupeIconClassName}>
-            <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
-          </div>
-          {query ? null : (
-            <label
-              htmlFor="search-bar-input"
-              className={`text-secondary-text ${SearchBarLabelClassName}`}
-            >
-              Поиск по сайту
-            </label>
-          )}
-        </div>
-        <input
-          id="search-bar-input"
-          className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
-          value={query}
-          onChange={(e) => onChange && onChange(e.target.value || '')}
-          onFocus={onFocus}
-          type="text"
-          name="search-bar-input"
-          placeholder={inputPlaceholder}
+export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile, topItems }) => {
+  const basePathList = topItems?.map((_) => _.href || '/');
+  const [searchResult, searchInputProps] = useSearch(basePathList);
+
+  const { value, onChange, onFocus } = searchInputProps;
+
+  const searchItems = useMemo(
+    () => combineTopItemsAndSearchResult(topItems)(searchResult),
+    [topItems, searchResult],
+  );
+
+  useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
+
+  const [isSearchDialogOpen, { setTrue: openSearchDialog, setFalse: hideSearchDialog }] = useBool();
+
+  const handleInitialInputChange = useCallback(
+    (_: string) => {
+      onChange(_);
+      if (isQueryLongEnough(_)) {
+        openSearchDialog();
+      }
+    },
+    [onChange, isQueryLongEnough],
+  );
+  const handleInitialInputFocus = useCallback(() => {
+    onFocus();
+    if (isQueryLongEnough(value)) {
+      openSearchDialog();
+    }
+  }, [value, onFocus]);
+
+  return (
+    <div className={className}>
+      <SearchBarInput
+        isMobile={isMobile}
+        value={value}
+        onChange={handleInitialInputChange}
+        onFocus={handleInitialInputFocus}
+      />
+      {isMobile ? (
+        <CloseButton
+          className="absolute top-2 right-3"
+          onClick={(e) => {
+            e.preventDefault();
+            onChange('');
+          }}
         />
-        {isMobile ? (
-          <button
-            className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
-            onClick={(e) => {
-              e.preventDefault();
-              onChange && onChange('');
-            }}
-          >
-            <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
-          </button>
-        ) : (
-          <Button
-            version="primary"
-            text="Найти"
-            className="invisible peer-focus:visible absolute top-[3px] right-1"
-            onClick={(ev) => {
-              ev?.preventDefault();
-              console.log('click');
-            }}
-          >
-            <div className="text-s px-9 py-2.5">Найти</div>
-          </Button>
-        )}
-      </form>
-    );
-  },
-);
+      ) : null}
+      {isSearchDialogOpen ? (
+        <Dialog
+          head={
+            <SearchBarInput
+              className="my-5"
+              isMobile={isMobile}
+              autoFocus={true}
+              {...searchInputProps}
+            />
+          }
+          onClose={hideSearchDialog}
+        >
+          <Sitemap topItems={searchItems} />
+        </Dialog>
+      ) : null}
+    </div>
+  );
+});
+
+const isQueryLongEnough = (_: string) => _ && _.length >= MIN_QUERY_LEN;
+
+const combineTopItemsAndSearchResult =
+  (topItems: TopMenuItem[] | undefined) =>
+  (searchResult: SearchResult | null | undefined): TopMenuItem[] =>
+    topItems?.length && searchResult?.length
+      ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
+          ..._,
+          items: portalSearchResult?.map(
+            ({ title, uri }): LinkProps => ({ text: title, href: uri }),
+          ),
+        }))
+      : [];
+
+// Temp
+function printSearchItems(topItems: TopMenuItem[]) {
+  for (const _ of topItems.filter(({ items }) => items?.length)) {
+    console.group(_.text);
+    console.table(_.items, ['text', 'href']);
+    console.groupEnd();
+  }
+}

package/mobile/src/ui-kit/SearchBar/SearchBarInput.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+
+export interface SearchBarInputProps {
+  className?: string;
+  isMobile?: boolean;
+  value?: string;
+  autoFocus?: boolean;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+}
+
+export const SearchBarInput = JSX<SearchBarInputProps>(
+  ({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const handleChange = useCallback(
+      (ev: { target?: { value?: string } }) => {
+        onChange && onChange(ev.target?.value || '');
+      },
+      [onChange],
+    );
+
+    return (
+      <div className={style('font-sans relative', className)} role="form">
+        <div className="absolute h-full flex items-center pl-4 pointer-events-none">
+          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
+        </div>
+        <input
+          className={style(
+            'h-12 pl-12 w-full text-l text-black outline-none box-border',
+            'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
+            isMobile ? '' : 'h-full',
+          )}
+          value={value}
+          type="text"
+          name="search-bar-input"
+          placeholder="Поиск по сайту"
+          autoFocus={autoFocus}
+          onChange={handleChange}
+          onFocus={onFocus}
+        />
+      </div>
+    );
+  },
+);