@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3e9dfb16e9

package/cjs/components/Modal/__creevey__/Modal.creevey.mts

@@ -0,0 +1,295 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const topMiddleBottomModalTests = () => {
+  test('top', async (context) => {
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+  });
+
+  test('middle', async (context) => {
+    await context.webdriver.executeScript(function () {
+      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
+
+      modalContainer.scrollTop = modalContent.offsetHeight / 2;
+    });
+    await delay(100);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
+  });
+
+  test('bottom', async (context) => {
+    await context.webdriver.executeScript(function () {
+      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
+
+      modalContainer.scrollTop = modalContent.offsetHeight;
+    });
+    await delay(100);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+  });
+};
+
+kind('Modal', () => {
+  story('ModalWithFooterPanelStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"]:nth-of-type(1)' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('WithIconInput', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalOverAnotherModalStory', () => {
+    test('open first modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open first modal');
+    });
+
+    test('open second modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open second modal');
+    });
+  });
+
+  story('ModalWithoutFooterPanelStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalWithoutFooterStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalMobileView', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
+    });
+  });
+
+  story('ModalWithVariableHeightOfContent', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+
+    test('toggle content height', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '#modal-inner [data-comp-name~="Toggle"]' }))
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'toggle content height');
+    });
+  });
+
+  story('ModalWithoutStickyElements', () => {
+    topMiddleBottomModalTests();
+  });
+
+  story('SmallModalOnTheTop', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+
+    test('close by click on the cross', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-close"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'close by click on the cross');
+    });
+
+    test("doesn't close by click on the content", async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-content-button"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), "doesn't close by click on the content");
+    });
+
+    test('closes by click on the background', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-container"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'closes by click on the background');
+    });
+  });
+
+  story('ModalWithChildrenFromOtherComponent', () => {
+    topMiddleBottomModalTests();
+  });
+
+  story('MobileModal', () => {
+    test('top', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+    });
+
+    test('middle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver.executeScript(function () {
+        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
+        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
+
+        modalContent.scrollTop = modalBody.offsetHeight / 2;
+      });
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
+    });
+
+    test('bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver.executeScript(function () {
+        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
+        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
+
+        modalContent.scrollTop = modalBody.offsetHeight;
+      });
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+    });
+  });
+
+  story('ChangeAllModalContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await delay(500);
+      const firstModal = await context.webdriver.takeScreenshot();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="open-second-modal"] button` }))
+        .perform();
+      await delay(500);
+      const secondModal = await context.webdriver.takeScreenshot();
+      await context.matchImages({ firstModal, secondModal });
+    });
+  });
+
+  story('CrossFocusedByTab', () => {
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+});

package/cjs/components/Modal/__docs__/Modal.mdx

@@ -0,0 +1,27 @@
+import * as ModalStories from './Modal.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
+
+<Meta of={ModalStories} />
+
+<Header
+  component="Modal"
+  guides="https://guides.kontur.ru/components/popup-elements/modal/"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A11142"
+/>
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<PropsTable />
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Modal/__docs__/ModalBody.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as ModalBodyStories from '../__docs__/ModalBody.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ModalBodyStories} />
+
+# ModalBody
+
+Контейнер с отступами от края модалки.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/Modal/__docs__/ModalFooter.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as ModalFooterStories from '../__docs__/ModalFooter.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ModalFooterStories} />
+
+# ModalFooter
+
+Футер модального окна.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/Modal/__docs__/ModalHeader.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as ModalHeaderStories from '../__docs__/ModalHeader.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ModalHeaderStories} />
+
+# ModalHeader
+
+Шапка модального окна.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/Modal/__docs__/ModalSeparator.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+
+import * as ModalSeparatorStories from '../__docs__/ModalSeparator.docs.stories.tsx';
+
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ModalSeparatorStories} />
+
+# ModalSeparator
+
+Разделитель.
+
+## Пропы
+
+<ArgTypes />

package/cjs/components/Modal/getModalBodyTheme.d.ts

@@ -1,2 +1,2 @@
-import { Theme } from '../../lib/theming/Theme';
+import type { Theme } from '../../lib/theming/Theme';
 export declare const getModalBodyTheme: (theme: Theme) => Theme;

package/cjs/components/Modal/getModalBodyTheme.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ThemeFactory","require","getModalBodyTheme","exports","theme","ThemeFactory","create","loaderBorderRadius","modalBodyBorderRadius"],"sources":["getModalBodyTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getModalBodyTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      loaderBorderRadius: theme.modalBodyBorderRadius,\n    },\n    theme,\n  );\n};\n"],"mappings":"0EAAA,IAAAA,aAAA,GAAAC,OAAA;;;AAGO,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAIE,KAAY,EAAY;EACxD,OAAOC,0BAAY,CAACC,MAAM;IACxB;MACEC,kBAAkB,EAAEH,KAAK,CAACI;IAC5B,CAAC;IACDJ;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["_ThemeFactory","require","getModalBodyTheme","exports","theme","ThemeFactory","create","loaderBorderRadius","modalBodyBorderRadius"],"sources":["getModalBodyTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getModalBodyTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      loaderBorderRadius: theme.modalBodyBorderRadius,\n    },\n    theme,\n  );\n};\n"],"mappings":"0EAAA,IAAAA,aAAA,GAAAC,OAAA;;;AAGO,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAIE,KAAY,EAAY;EACxD,OAAOC,0BAAY,CAACC,MAAM;IACxB;MACEC,kBAAkB,EAAEH,KAAK,CAACI;IAC5B,CAAC;IACDJ;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/cjs/components/Modal/getModalTheme.d.ts

@@ -1,2 +1,2 @@
-import { Theme, ThemeIn } from '../../lib/theming/Theme';
+import type { Theme, ThemeIn } from '../../lib/theming/Theme';
 export declare const getModalTheme: (contextTheme: Theme, propsTheme?: ThemeIn) => Theme;

package/cjs/components/Modal/getModalTheme.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ThemeFactory","require","getModalTheme","exports","contextTheme","propsTheme","theme","ThemeFactory","create","loaderBorderRadius","modalBorderRadius"],"sources":["getModalTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\n\nexport const getModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}): Theme => {\n  const theme = ThemeFactory.create(propsTheme, contextTheme);\n  return ThemeFactory.create(\n    propsTheme as Theme,\n    ThemeFactory.create(\n      {\n        loaderBorderRadius: theme.modalBorderRadius,\n      },\n      theme,\n    ),\n  );\n};\n"],"mappings":"sEAAA,IAAAA,aAAA,GAAAC,OAAA;;;AAGO,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAIE,YAAmB,EAAEC,UAAmB,EAAiB,KAApCA,UAAmB,cAAnBA,UAAmB,GAAG,CAAC,CAAC;EACzE,IAAMC,KAAK,GAAGC,0BAAY,CAACC,MAAM,CAACH,UAAU,EAAED,YAAY,CAAC;EAC3D,OAAOG,0BAAY,CAACC,MAAM;IACxBH,UAAU;IACVE,0BAAY,CAACC,MAAM;MACjB;QACEC,kBAAkB,EAAEH,KAAK,CAACI;MAC5B,CAAC;MACDJ;IACF;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["_ThemeFactory","require","getModalTheme","exports","contextTheme","propsTheme","theme","ThemeFactory","create","loaderBorderRadius","modalBorderRadius"],"sources":["getModalTheme.ts"],"sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\n\nexport const getModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}): Theme => {\n  const theme = ThemeFactory.create(propsTheme, contextTheme);\n  return ThemeFactory.create(\n    propsTheme as Theme,\n    ThemeFactory.create(\n      {\n        loaderBorderRadius: theme.modalBorderRadius,\n      },\n      theme,\n    ),\n  );\n};\n"],"mappings":"sEAAA,IAAAA,aAAA,GAAAC,OAAA;;;AAGO,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAIE,YAAmB,EAAEC,UAAmB,EAAiB,KAApCA,UAAmB,cAAnBA,UAAmB,GAAG,CAAC,CAAC;EACzE,IAAMC,KAAK,GAAGC,0BAAY,CAACC,MAAM,CAACH,UAAU,EAAED,YAAY,CAAC;EAC3D,OAAOG,0BAAY,CAACC,MAAM;IACxBH,UAAU;IACVE,0BAAY,CAACC,MAAM;MACjB;QACEC,kBAAkB,EAAEH,KAAK,CAACI;MAC5B,CAAC;MACDJ;IACF;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/cjs/components/Modal/locale/index.d.ts

@@ -1,4 +1,4 @@
 import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
-import { ModalLocale } from './types';
+import type { ModalLocale } from './types';
 export * from './types';
 export declare const ModalLocaleHelper: LocaleHelper<ModalLocale>;

package/cjs/components/Modal/locale/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_LocaleHelper","require","_en","_ru","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","ModalLocaleHelper","LocaleHelper","ru_RU","en_GB"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { ModalLocale } from './types';\n\nexport * from './types';\n\nexport const ModalLocaleHelper = new LocaleHelper<ModalLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"yHAAA,IAAAA,aAAA,GAAAC,OAAA;;AAEA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,GAAA,GAAAF,OAAA;;;AAGA,IAAAG,MAAA,GAAAH,OAAA,YAAAI,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA,cAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA,UAAAK,OAAA,CAAAL,GAAA,IAAAJ,MAAA,CAAAI,GAAA;;AAEO,IAAMM,iBAAiB,GAAAD,OAAA,CAAAC,iBAAA,GAAG,IAAIC,0BAAY,CAAc;EAC7DC,KAAK,EAALA,qBAAK;EACLC,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_LocaleHelper","require","_en","_ru","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","ModalLocaleHelper","LocaleHelper","ru_RU","en_GB"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport type { ModalLocale } from './types';\n\nexport * from './types';\n\nexport const ModalLocaleHelper = new LocaleHelper<ModalLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"yHAAA,IAAAA,aAAA,GAAAC,OAAA;;AAEA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,GAAA,GAAAF,OAAA;;;AAGA,IAAAG,MAAA,GAAAH,OAAA,YAAAI,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA,cAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA,UAAAK,OAAA,CAAAL,GAAA,IAAAJ,MAAA,CAAAI,GAAA;;AAEO,IAAMM,iBAAiB,GAAAD,OAAA,CAAAC,iBAAA,GAAG,IAAIC,0BAAY,CAAc;EAC7DC,KAAK,EAALA,qBAAK;EACLC,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Modal/locale/locales/en.d.ts

@@ -1,2 +1,2 @@
-import { ModalLocale } from '../types';
+import type { ModalLocale } from '../types';
 export declare const componentsLocales: ModalLocale;

package/cjs/components/Modal/locale/locales/en.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentsLocales","exports","closeButtonAriaLabel"],"sources":["en.ts"],"sourcesContent":["import { ModalLocale } from '../types';\n\nexport const componentsLocales: ModalLocale = {\n  closeButtonAriaLabel: 'Close modal window',\n};\n"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC5CE,oBAAoB,EAAE;AACxB,CAAC","ignoreList":[]}
+{"version":3,"names":["componentsLocales","exports","closeButtonAriaLabel"],"sources":["en.ts"],"sourcesContent":["import type { ModalLocale } from '../types';\n\nexport const componentsLocales: ModalLocale = {\n  closeButtonAriaLabel: 'Close modal window',\n};\n"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC5CE,oBAAoB,EAAE;AACxB,CAAC","ignoreList":[]}

package/cjs/components/Modal/locale/locales/ru.d.ts

@@ -1,2 +1,2 @@
-import { ModalLocale } from '../types';
+import type { ModalLocale } from '../types';
 export declare const componentsLocales: ModalLocale;

package/cjs/components/Modal/locale/locales/ru.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentsLocales","exports","closeButtonAriaLabel"],"sources":["ru.ts"],"sourcesContent":["import { ModalLocale } from '../types';\n\nexport const componentsLocales: ModalLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC5CE,oBAAoB,EAAE;AACxB,CAAC","ignoreList":[]}
+{"version":3,"names":["componentsLocales","exports","closeButtonAriaLabel"],"sources":["ru.ts"],"sourcesContent":["import type { ModalLocale } from '../types';\n\nexport const componentsLocales: ModalLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC5CE,oBAAoB,EAAE;AACxB,CAAC","ignoreList":[]}

package/cjs/components/Paging/NavigationHelper.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface KeyDescriptionType {
     name: string;
     checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;

package/cjs/components/Paging/NavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"names":["_client","require","keyDescription","getKeyDescription","createKeyDescription","isMac","name","checkPressed","event","altKey","ctrlKey","getKeyName","exports","checkKeyPressed"],"sources":["NavigationHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\n\nconst createKeyDescription = () =>\n  isMac\n    ? {\n        name: 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = () => getKeyDescription().name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) =>\n  getKeyDescription().checkPressed(event);\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;;;;;;;AAQA,IAAIC,cAA4C,GAAG,IAAI;;AAEvD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,UAASD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,CAAC,CAAC,CAAC;;AAE3F,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA;IACxBC,aAAK;IACD;MACEC,IAAI,EAAE,KAAK;MACXC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACC,MAAM;IACzF,CAAC;IACD;MACEH,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACE,OAAO;IAC1F,CAAC;;AAEA,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,UAASR,iBAAiB,CAAC,CAAC,CAACG,IAAI;AACjD,IAAMO,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,SAAlBA,eAAeA,CAAIL,KAAuD;IACrFL,iBAAiB,CAAC,CAAC,CAACI,YAAY,CAACC,KAAK,CAAC","ignoreList":[]}
+{"version":3,"names":["_client","require","keyDescription","getKeyDescription","createKeyDescription","isMac","name","checkPressed","event","altKey","ctrlKey","getKeyName","exports","checkKeyPressed"],"sources":["NavigationHelper.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport type { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\n\nconst createKeyDescription = () =>\n  isMac\n    ? {\n        name: 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = () => getKeyDescription().name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) =>\n  getKeyDescription().checkPressed(event);\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;;;;;;;AAQA,IAAIC,cAA4C,GAAG,IAAI;;AAEvD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,UAASD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,CAAC,CAAC,CAAC;;AAE3F,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA;IACxBC,aAAK;IACD;MACEC,IAAI,EAAE,KAAK;MACXC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACC,MAAM;IACzF,CAAC;IACD;MACEH,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACE,OAAO;IAC1F,CAAC;;AAEA,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,UAASR,iBAAiB,CAAC,CAAC,CAACG,IAAI;AACjD,IAAMO,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,SAAlBA,eAAeA,CAAIL,KAAuD;IACrFL,iBAAiB,CAAC,CAAC,CAACI,YAAY,CAACC,KAAK,CAAC","ignoreList":[]}

package/cjs/components/Paging/Paging.d.ts

@@ -1,37 +1,39 @@
 import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
+import type { Nullable } from '../../typings/utility-types';
+import type { CommonProps } from '../../internal/CommonWrapper';
 export interface ItemComponentProps {
+    /** Определяет, является ли страница текущей. */
     active: boolean;
+    /** @ignore */
     children?: React.ReactNode;
+    /** Задает HTML-атрибут class. */
     className: string;
+    /** Задает функцию, которая вызывается при клике на элемент. */
     onClick: () => void;
+    /** Задает номер текущей страницы. */
     pageNumber: number | 'forward';
+    /** Задает HTML-атрибут `tabindex`. */
     tabIndex: number;
 }
 export interface PagingProps extends CommonProps {
     activePage: number;
-    /**
-     * Компонент обертки по умолчанию
-     * @default <span />
-     */
+    /** Компонент обертки по умолчанию.
+     * @default <span /> */
     component?: React.ComponentType<ItemComponentProps>;
+    /** Задает функцию, которая вызывается при переключении страницы. */
     onPageChange: (pageNumber: number) => void;
+    /** Задает общее количество страниц. */
     pagesCount: number;
+    /** Делает компонент недоступным. */
     disabled?: boolean;
-    /**
-     * Отключает навигационные подсказки.
-     * По-умолчанию подсказки появляются, когда доступно управление с клавиатуры
-     * (либо элемент в фокусе, либо globalListeners === true)
-     */
+    /** Отключает навигационные подсказки.
+     * По-умолчанию подсказки появляются, когда доступно управление с клавиатуры (либо элемент в фокусе, либо globalListeners === true). */
     withoutNavigationHint?: boolean;
+    /** Задает подпить у пейджинга. */
     caption?: string;
-    /**
-     * Глобальный слушатель **keyDown**, для навигации клавишами без фокуса на компоненте.
-     * Если на странице используется несколько элементов
-     * **Paging** с useGlobalListener === true, то обработчик keyDown будет вызываться
-     * на каждом из них. Такие случаи лучше обрабатывать отдельно.
-     */
+    /** Глобальный слушатель **keyDown**, для навигации клавишами без фокуса на компоненте.
+     * Если на странице используется несколько элементов **Paging** с useGlobalListener === true,
+     * то обработчик keyDown будет вызываться на каждом из них. Такие случаи лучше обрабатывать отдельно. */
     useGlobalListener?: boolean;
 }
 export interface PagingState {
@@ -48,6 +50,9 @@ export declare const PagingDataTids: {
     readonly pageLink: "Paging__pageLink";
 };
 type DefaultProps = Required<Pick<PagingProps, 'component' | 'useGlobalListener'>>;
+/**
+ * Постраничная навигация `Paging` (пейджинг или пагинация) — способ представления большого количества однородной информации, когда контент разбивается на страницы.
+ */
 export declare class Paging extends React.PureComponent<PagingProps, PagingState> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;

package/cjs/components/Paging/Paging.js

@@ -11,8 +11,10 @@ var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
@@ -20,6 +22,7 @@ var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/
 var _Paging2 = require("./Paging.styles");
 var NavigationHelper = _interopRequireWildcard(require("./NavigationHelper"));
 var _PagingHelper = require("./PagingHelper");
+
 var _locale = require("./locale");
 var _PagingDefaultComponent = require("./PagingDefaultComponent");
 var _ForwardIcon = require("./ForwardIcon");var _dec, _class, _Paging;
@@ -55,6 +58,19 @@ var IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -75,10 +91,13 @@ var PagingDataTids = exports.PagingDataTids = {
   forwardLink: 'Paging__forwardLink',
   pageLinkWrapper: 'Paging__pageLinkWrapper',
   pageLink: 'Paging__pageLink'
-};var
+};
 
 
 
+/**
+ * Постраничная навигация `Paging` (пейджинг или пагинация) — способ представления большого количества однородной информации, когда контент разбивается на страницы.
+ */var
 
 
 Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.PagingLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_Paging = /*#__PURE__*/function (_React$PureComponent) {function Paging() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.