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

package/mobile/src/{components/Footer → ui-kit/Sitemap}/Sitemap.tsx

@@ -2,20 +2,21 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
-import type { SitemapData, TopMenuItem } from '../../services/sitemap/SitemapData';
+import type { TopMenuItem } from '../../services/sitemap/SitemapData';
+import { style } from '../../utils/style';
 import { joinPath } from '../../utils/url';
 
 export interface SitemapProps {
   className?: string;
-  sitemap?: SitemapData;
+  topItems?: TopMenuItem[];
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className = '', sitemap }) => {
+export const Sitemap = JSX<SitemapProps>(({ className, topItems }) => {
   const link = useLink(true);
 
   return (
-    <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
-      {sitemap?.topItems?.map((_, i) => renderColumn(link(_), i))}
+    <div className={style('flex items-start justify-between', className)}>
+      {topItems?.map(link).map(renderColumn)}
     </div>
   );
 });
@@ -24,9 +25,9 @@ const renderColumn = (menuItem: TopMenuItem & { onClick: () => void }, index: nu
   const { text, items, href, target, onClick } = menuItem;
 
   return (
-    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">
+    <div key={String(index)} className="flex flex-col gap-3.5 w-1/4">
       <a
-        className="block leading-5 text-l text-primary-text hover:text-primary-main no-underline"
+        className="leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}
         target={target || '_self'}
         onClick={onClick}
@@ -54,7 +55,10 @@ const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) =>
 
   return (
     <a
-      className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
+      className={style(
+        'text-l-light text-secondary-text hover:text-primary-main no-underline',
+        'overflow-x-hidden overflow-ellipsis whitespace-nowrap',
+      )}
       href={isAnotherPortal ? joinPath(basePath, href) : href}
       target={target || '_self'}
       onClick={onClick}

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { style } from '../../utils/style';
+import type { PreventableEvent } from '../PreventableEvent';
 
 export interface TopItemContent extends LinkProps {
   active?: boolean;

package/mobile/src/utils/groupBy.ts

@@ -1,10 +1,11 @@
-export const groupBy = <K, V>(list: Array<V>, keyGetter: (input: V) => K): Map<K, Array<V>> => {
-  const map = new Map<K, Array<V>>();
-  list.forEach((item) => {
+export const groupBy = <K, V>(list: V[], keyGetter: (input: V) => K): Map<K, V[]> => {
+  const result = new Map<K, V[]>();
+
+  for (const item of list) {
     const key = keyGetter(item);
-    const collection = map.get(key);
-    map.set(key, [...(collection || []), item]);
-  });
+    const group = result.get(key) || [];
+    result.set(key, [...group, item]);
+  }
 
-  return map;
+  return result;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.28",
+  "version": "0.8.30",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -188,7 +188,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "51 kB",
+      "limit": "53 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Input } from '../../ui-kit/Input/Input';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import { ACQUIRING_TYPES } from './acquiringTypes';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { Region } from '../../hooks/useRegions';
-import type { PreventableEvent } from '../../model/PreventableEvent';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { Input } from '../../ui-kit/Input/Input';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBranches } from '../../hooks/useBranches';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { useGetRegions } from '../SafeDepositRental/useGetRegions';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { MIN_CREDIT_AMOUNT, MIN_CREDIT_TERM } from './CreditParameters';

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Input } from '../../ui-kit/Input/Input';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
 import type { HandleFormStateChange } from './models';

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Input } from '../../ui-kit/Input/Input';
+import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import type { ApplicationFormsProps } from './ApplicationFormsProps';
 import { Footnote } from './Footnote';
 import type { HandleFormStateChange } from './models';

package/src/components/Blocks.ts

@@ -35,7 +35,6 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
-import { OtherProducts } from './OtherProducts/OtherProducts';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -93,7 +92,6 @@ export const Blocks: BlocksRegistry = {
   MobileAppTile,
   OfficeMap,
   OfficeServicesBlock,
-  OtherProducts,
   ParagraphBlock,
   PictureText,
   Placeholder,

package/src/components/Footer/Footer.fallback.ts

@@ -1,6 +1,6 @@
+import { fallbackWCMSResource } from '../../hooks/fallbackWCMSResource';
 import type { FallbackMap } from '../../model/Fallback';
 import { projectSettings } from '../../ProjectSettings';
-import { fallbackWCMSResource } from '../../services/sitemap/fallbackWCMSResource';
 
 export const fallback = (): FallbackMap => ({
   ...fallbackWCMSResource(projectSettings.SITEMAP || 'sitemap'),

package/src/components/Footer/Footer.tsx

@@ -1,19 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import { useSearch, type SearchResult } from '../../services/sitemap/useSearch';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { zip } from '../../utils/zip';
+import { Sitemap } from '../../ui-kit/Sitemap/Sitemap';
 import { Contacts } from './Contacts';
 import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
-import { Sitemap } from './Sitemap';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
@@ -28,18 +25,11 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
-  const basePathList = sitemap?.topItems?.map((_) => _.href || '/');
-  const [searchResult, searchInputProps] = useSearch(basePathList);
-
-  useEffect(() => {
-    printSearchResult(sitemap, searchResult); // Temp
-  }, [sitemap, searchResult]);
-
   return (
     <BlockWrapper tag="footer" className={`p-9 ${className}`} {...rest}>
       <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
         <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
-        <SearchBar className="grow" {...searchInputProps} />
+        <SearchBar className="grow" topItems={sitemap?.topItems} />
       </div>
       <div className="flex items-stretch gap-[54px] xl:gap-8">
         <div className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`}>
@@ -49,28 +39,10 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
             Мобильное приложение
           </SocialMedia>
         </div>
-        <Sitemap className="pt-[3px]" sitemap={sitemap} />
+        <Sitemap className="flex-grow" topItems={sitemap?.topItems} />
       </div>
       <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} />
       <TextInformation links={documents} />
     </BlockWrapper>
   );
 });
-
-// Temp
-function printSearchResult(
-  sitemap: SitemapData | null | undefined,
-  searchResult: SearchResult | null | undefined,
-) {
-  if (!sitemap?.topItems?.length || !searchResult?.length) {
-    return;
-  }
-
-  for (const [{ text }, portalSearchResult] of zip(sitemap.topItems, searchResult).filter(
-    ([, _]) => _?.length,
-  )) {
-    console.group(text);
-    console.table(portalSearchResult, ['title', 'uri']);
-    console.groupEnd();
-  }
-}

package/src/components/Header/Header.fallback.ts

@@ -1,4 +1,4 @@
+import { fallbackWCMSResource } from '../../hooks/fallbackWCMSResource';
 import { projectSettings } from '../../ProjectSettings';
-import { fallbackWCMSResource } from '../../services/sitemap/fallbackWCMSResource';
 
 export const fallback = () => fallbackWCMSResource(projectSettings.SITEMAP || 'sitemap');

package/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/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/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/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/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/src/components/TextBlock/TextBlock.fixture.mobile.tsx

@@ -30,31 +30,24 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <div className="flex flex-col gap-1.5" data-theme="pc">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="big" image={image} />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="none" />
           <TextBlock
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="primary"
+            version="primary"
           />
-          <TextBlock title="Все карты Россельхозбанка работают" blockVersion="primary" />
+          <TextBlock title="Все карты Россельхозбанка работают" version="primary" />
           <TextBlock
             title="Все карты Россельхозбанка работают"
-            blockVersion="primary"
+            version="primary"
             iconVersion="small"
             items={items}
           />
           <TextBlock
             title="Все карты Россельхозбанка работают"
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="secondary"
-            iconVersion="small"
-            items={items}
-          />
-          <TextBlock
-            title="Все карты Россельхозбанка работают"
-            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="secondary-light"
+            version="secondary"
             iconVersion="small"
             items={items}
           />
@@ -69,11 +62,10 @@ export default {
           <TextBlock
             className="flex flex-col"
             {...TEXT_BLOCK}
-            blockVersion="primary"
+            version="primary"
             iconVersion="small"
           />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="secondary" />
         </div>
       </div>
     </div>
@@ -82,9 +74,8 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <div className="flex flex-col gap-1.5" data-theme="eo">
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="primary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="primary" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="secondary" />
         </div>
       </div>
     </div>

package/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/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/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/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/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/{mobile/src/services/sitemap → 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/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/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/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/src/ui-kit/Location/Location.fixture.tsx

@@ -72,7 +72,7 @@ const currentLocation = {
 export default {
   default: (
     <Location
-      close={close}
+      onClose={close}
       onChangeLocation={onChangeLocation}
       currentLocation={currentLocation}
       foreignOffices={FOREIGN_OFFICES}