@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/cjs/components/TooltipMenu/TooltipMenu.md

@@ -0,0 +1,241 @@
+### Базовый пример
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Управление состоянием тултип-меню
+В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием тултип-меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
+    return (
+      <>
+        <p>Сейчас тултип-меню { opened ? 'окрыто' : 'закрыто' }</p>
+        <Button onClick={toggleMenu}>Переключить меню</Button>
+        <Button onClick={openMenu}>Открыть меню</Button>
+        <Button onClick={closeMenu}>Закрыть меню</Button>
+      </>
+    )
+  }}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Ширина
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
+  menuWidth={350}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Максимальная высота
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
+  menuMaxHeight={150}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Отключенная анимация
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  disableAnimations
+  caption={<Button use="primary">Открыть меню без анимации</Button>}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Подпись
+В `caption` можно передать любой элемент.
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <UiMenuBars3HIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню всегда всплывающее справа от `caption`
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+  positions={['right top', 'right middle', 'right bottom']}
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+  positions={['top right']}
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню c шапкой и подвалом
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Иконки и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>;
+```
+
+### Иконки и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
+
+<TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>
+```
+
+### Условный рендер элементов тултип-меню
+(с сохранением поведения [MenuItem](#/Components/MenuItem)).
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </TooltipMenu>
+</Gapped>
+```

package/cjs/hooks/useDrop.js

@@ -1,7 +1,7 @@
 "use strict";exports.__esModule = true;exports.useDrop = void 0;
 var _react = require("react");
 
-
+var _globalObject = require("@skbkontur/global-object");
 
 
 
@@ -23,7 +23,7 @@ var useDrop = exports.useDrop = function useDrop(props) {if (props === void 0) {
   var _useState = (0, _react.useState)(false),isDraggable = _useState[0],setIsDraggable = _useState[1];
 
   var clearTimer = (0, _react.useCallback)(function () {
-    timerId.current && clearTimeout(timerId.current);
+    timerId.current && _globalObject.globalObject.clearTimeout(timerId.current);
   }, []);
 
   var handleDragOver = (0, _react.useCallback)(
@@ -32,7 +32,7 @@ var useDrop = exports.useDrop = function useDrop(props) {if (props === void 0) {
       setIsDraggable(true);
 
       clearTimer();
-      timerId.current = setTimeout(function () {
+      timerId.current = _globalObject.globalObject.setTimeout(function () {
         overRef.current = false;
         setIsDraggable(false);
       }, 200);

package/cjs/hooks/useDrop.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","useDrop","exports","props","_props","onDrop","droppableRef","useRef","overRef","timerId","_useState","useState","isDraggable","setIsDraggable","clearTimer","useCallback","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","useEffect","ref","addEventListener","removeEventListener"],"sources":["useDrop.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SafeTimer } from '../lib/globalObject';\n\ninterface IUseDropProps {\n  onDrop?: (event: DragEvent) => void;\n}\n\ntype IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;\n\ninterface IUseDropResult<TElement extends IElementWithListener> {\n  isDraggable: boolean;\n  ref: MutableRefObject<TElement | null>;\n}\n\nexport const useDrop = <TElement extends IElementWithListener>(props: IUseDropProps = {}): IUseDropResult<TElement> => {\n  const { onDrop } = props;\n\n  const droppableRef = useRef<TElement>(null);\n  const overRef = useRef<boolean>(false);\n  const timerId = useRef<SafeTimer>();\n  const [isDraggable, setIsDraggable] = useState<boolean>(false);\n\n  const clearTimer = useCallback(() => {\n    timerId.current && clearTimeout(timerId.current);\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      setIsDraggable(true);\n\n      clearTimer();\n      timerId.current = setTimeout(() => {\n        overRef.current = false;\n        setIsDraggable(false);\n      }, 200);\n    },\n    [clearTimer],\n  );\n\n  const preventDefault = useCallback((event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      preventDefault(event);\n      setIsDraggable(false);\n      overRef.current = false;\n\n      onDrop?.(event);\n    },\n    [preventDefault, onDrop],\n  );\n\n  useEffect(() => {\n    const ref = droppableRef.current;\n\n    if (!ref) {\n      return;\n    }\n\n    ref.addEventListener('dragenter', preventDefault);\n    ref.addEventListener('dragleave', preventDefault);\n    ref.addEventListener('dragover', handleDragOver);\n    ref.addEventListener('drop', handleDrop);\n\n    return () => {\n      ref.removeEventListener('dragenter', preventDefault);\n      ref.removeEventListener('dragleave', preventDefault);\n      ref.removeEventListener('dragover', handleDragOver);\n      ref.removeEventListener('drop', handleDrop);\n    };\n  }, [handleDrop, handleDragOver, preventDefault]);\n\n  return { isDraggable, ref: droppableRef };\n};\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,OAAA;;;;;;;;;;;;;;;AAeO,IAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAA2CE,KAAoB,EAAoC,KAAxDA,KAAoB,cAApBA,KAAoB,GAAG,CAAC,CAAC;EACtF,IAAAC,MAAA,GAAmBD,KAAK,CAAhBE,MAAM,GAAAD,MAAA,CAANC,MAAM;;EAEd,IAAMC,YAAY,GAAG,IAAAC,aAAM,EAAW,IAAI,CAAC;EAC3C,IAAMC,OAAO,GAAG,IAAAD,aAAM,EAAU,KAAK,CAAC;EACtC,IAAME,OAAO,GAAG,IAAAF,aAAM,EAAY,CAAC;EACnC,IAAAG,SAAA,GAAsC,IAAAC,eAAQ,EAAU,KAAK,CAAC,CAAvDC,WAAW,GAAAF,SAAA,IAAEG,cAAc,GAAAH,SAAA;;EAElC,IAAMI,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACnCN,OAAO,CAACO,OAAO,IAAIC,YAAY,CAACR,OAAO,CAACO,OAAO,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAME,cAAc,GAAG,IAAAH,kBAAW;IAChC,UAACI,KAAgB,EAAK;MACpBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBP,cAAc,CAAC,IAAI,CAAC;;MAEpBC,UAAU,CAAC,CAAC;MACZL,OAAO,CAACO,OAAO,GAAGK,UAAU,CAAC,YAAM;QACjCb,OAAO,CAACQ,OAAO,GAAG,KAAK;QACvBH,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IACD,CAACC,UAAU;EACb,CAAC;;EAED,IAAMM,cAAc,GAAG,IAAAL,kBAAW,EAAC,UAACI,KAAgB,EAAK;IACvDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACG,eAAe,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMC,UAAU,GAAG,IAAAR,kBAAW;IAC5B,UAACI,KAAgB,EAAK;MACpBC,cAAc,CAACD,KAAK,CAAC;MACrBN,cAAc,CAAC,KAAK,CAAC;MACrBL,OAAO,CAACQ,OAAO,GAAG,KAAK;;MAEvBX,MAAM,YAANA,MAAM,CAAGc,KAAK,CAAC;IACjB,CAAC;IACD,CAACC,cAAc,EAAEf,MAAM;EACzB,CAAC;;EAED,IAAAmB,gBAAS,EAAC,YAAM;IACd,IAAMC,GAAG,GAAGnB,YAAY,CAACU,OAAO;;IAEhC,IAAI,CAACS,GAAG,EAAE;MACR;IACF;;IAEAA,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEN,cAAc,CAAC;IACjDK,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEN,cAAc,CAAC;IACjDK,GAAG,CAACC,gBAAgB,CAAC,UAAU,EAAER,cAAc,CAAC;IAChDO,GAAG,CAACC,gBAAgB,CAAC,MAAM,EAAEH,UAAU,CAAC;;IAExC,OAAO,YAAM;MACXE,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEP,cAAc,CAAC;MACpDK,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEP,cAAc,CAAC;MACpDK,GAAG,CAACE,mBAAmB,CAAC,UAAU,EAAET,cAAc,CAAC;MACnDO,GAAG,CAACE,mBAAmB,CAAC,MAAM,EAAEJ,UAAU,CAAC;IAC7C,CAAC;EACH,CAAC,EAAE,CAACA,UAAU,EAAEL,cAAc,EAAEE,cAAc,CAAC,CAAC;;EAEhD,OAAO,EAAER,WAAW,EAAXA,WAAW,EAAEa,GAAG,EAAEnB,YAAY,CAAC,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","require","_globalObject","useDrop","exports","props","_props","onDrop","droppableRef","useRef","overRef","timerId","_useState","useState","isDraggable","setIsDraggable","clearTimer","useCallback","current","globalObject","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","useEffect","ref","addEventListener","removeEventListener"],"sources":["useDrop.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { SafeTimer } from '@skbkontur/global-object';\nimport { globalObject } from '@skbkontur/global-object';\n\ninterface IUseDropProps {\n  onDrop?: (event: DragEvent) => void;\n}\n\ntype IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;\n\ninterface IUseDropResult<TElement extends IElementWithListener> {\n  isDraggable: boolean;\n  ref: MutableRefObject<TElement | null>;\n}\n\nexport const useDrop = <TElement extends IElementWithListener>(props: IUseDropProps = {}): IUseDropResult<TElement> => {\n  const { onDrop } = props;\n\n  const droppableRef = useRef<TElement>(null);\n  const overRef = useRef<boolean>(false);\n  const timerId = useRef<SafeTimer>();\n  const [isDraggable, setIsDraggable] = useState<boolean>(false);\n\n  const clearTimer = useCallback(() => {\n    timerId.current && globalObject.clearTimeout(timerId.current);\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      setIsDraggable(true);\n\n      clearTimer();\n      timerId.current = globalObject.setTimeout(() => {\n        overRef.current = false;\n        setIsDraggable(false);\n      }, 200);\n    },\n    [clearTimer],\n  );\n\n  const preventDefault = useCallback((event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      preventDefault(event);\n      setIsDraggable(false);\n      overRef.current = false;\n\n      onDrop?.(event);\n    },\n    [preventDefault, onDrop],\n  );\n\n  useEffect(() => {\n    const ref = droppableRef.current;\n\n    if (!ref) {\n      return;\n    }\n\n    ref.addEventListener('dragenter', preventDefault);\n    ref.addEventListener('dragleave', preventDefault);\n    ref.addEventListener('dragover', handleDragOver);\n    ref.addEventListener('drop', handleDrop);\n\n    return () => {\n      ref.removeEventListener('dragenter', preventDefault);\n      ref.removeEventListener('dragleave', preventDefault);\n      ref.removeEventListener('dragover', handleDragOver);\n      ref.removeEventListener('drop', handleDrop);\n    };\n  }, [handleDrop, handleDragOver, preventDefault]);\n\n  return { isDraggable, ref: droppableRef };\n};\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,OAAA;;AAEA,IAAAC,aAAA,GAAAD,OAAA;;;;;;;;;;;;;AAaO,IAAME,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAA2CE,KAAoB,EAAoC,KAAxDA,KAAoB,cAApBA,KAAoB,GAAG,CAAC,CAAC;EACtF,IAAAC,MAAA,GAAmBD,KAAK,CAAhBE,MAAM,GAAAD,MAAA,CAANC,MAAM;;EAEd,IAAMC,YAAY,GAAG,IAAAC,aAAM,EAAW,IAAI,CAAC;EAC3C,IAAMC,OAAO,GAAG,IAAAD,aAAM,EAAU,KAAK,CAAC;EACtC,IAAME,OAAO,GAAG,IAAAF,aAAM,EAAY,CAAC;EACnC,IAAAG,SAAA,GAAsC,IAAAC,eAAQ,EAAU,KAAK,CAAC,CAAvDC,WAAW,GAAAF,SAAA,IAAEG,cAAc,GAAAH,SAAA;;EAElC,IAAMI,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACnCN,OAAO,CAACO,OAAO,IAAIC,0BAAY,CAACC,YAAY,CAACT,OAAO,CAACO,OAAO,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMG,cAAc,GAAG,IAAAJ,kBAAW;IAChC,UAACK,KAAgB,EAAK;MACpBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBR,cAAc,CAAC,IAAI,CAAC;;MAEpBC,UAAU,CAAC,CAAC;MACZL,OAAO,CAACO,OAAO,GAAGC,0BAAY,CAACK,UAAU,CAAC,YAAM;QAC9Cd,OAAO,CAACQ,OAAO,GAAG,KAAK;QACvBH,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IACD,CAACC,UAAU;EACb,CAAC;;EAED,IAAMO,cAAc,GAAG,IAAAN,kBAAW,EAAC,UAACK,KAAgB,EAAK;IACvDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACG,eAAe,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMC,UAAU,GAAG,IAAAT,kBAAW;IAC5B,UAACK,KAAgB,EAAK;MACpBC,cAAc,CAACD,KAAK,CAAC;MACrBP,cAAc,CAAC,KAAK,CAAC;MACrBL,OAAO,CAACQ,OAAO,GAAG,KAAK;;MAEvBX,MAAM,YAANA,MAAM,CAAGe,KAAK,CAAC;IACjB,CAAC;IACD,CAACC,cAAc,EAAEhB,MAAM;EACzB,CAAC;;EAED,IAAAoB,gBAAS,EAAC,YAAM;IACd,IAAMC,GAAG,GAAGpB,YAAY,CAACU,OAAO;;IAEhC,IAAI,CAACU,GAAG,EAAE;MACR;IACF;;IAEAA,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEN,cAAc,CAAC;IACjDK,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEN,cAAc,CAAC;IACjDK,GAAG,CAACC,gBAAgB,CAAC,UAAU,EAAER,cAAc,CAAC;IAChDO,GAAG,CAACC,gBAAgB,CAAC,MAAM,EAAEH,UAAU,CAAC;;IAExC,OAAO,YAAM;MACXE,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEP,cAAc,CAAC;MACpDK,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEP,cAAc,CAAC;MACpDK,GAAG,CAACE,mBAAmB,CAAC,UAAU,EAAET,cAAc,CAAC;MACnDO,GAAG,CAACE,mBAAmB,CAAC,MAAM,EAAEJ,UAAU,CAAC;IAC7C,CAAC;EACH,CAAC,EAAE,CAACA,UAAU,EAAEL,cAAc,EAAEE,cAAc,CAAC,CAAC;;EAEhD,OAAO,EAAET,WAAW,EAAXA,WAAW,EAAEc,GAAG,EAAEpB,YAAY,CAAC,CAAC;AAC3C,CAAC","ignoreList":[]}

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.js

@@ -1,7 +1,8 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ClearCrossIcon = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
+var _Emotion = require("../../lib/theming/Emotion");
 var _keyListener = require("../../lib/events/keyListener");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
@@ -22,21 +23,16 @@ var _CrossIcon = require("./CrossIcon");var _excluded = ["size", "style"];
 
 
 var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref) {var _ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,style = _ref.style,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  var globalObject = (0, _RenderEnvironmentContext.useGlobal)();
-  var emotion = (0, _RenderEnvironmentContext.useEmotion)();
-  var cx = emotion.cx;
-  var styles = (0, _ClearCrossIcon.getStyles)(emotion);
   var theme = _react.default.useContext(_ThemeContext.ThemeContext);
-  var keyListener = new _keyListener.KeyListener(globalObject);
   var getSizeClassName = function getSizeClassName(size) {
     switch (size) {
       case 'large':
-        return styles.clearCrossLarge(theme);
+        return _ClearCrossIcon.styles.clearCrossLarge(theme);
       case 'medium':
-        return styles.clearCrossMedium(theme);
+        return _ClearCrossIcon.styles.clearCrossMedium(theme);
       case 'small':
       default:
-        return styles.clearCrossSmall(theme);
+        return _ClearCrossIcon.styles.clearCrossSmall(theme);
     }
   };
 
@@ -44,8 +40,8 @@ var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref) {var
 
   var handleFocus = function handleFocus() {
     // focus event fires before keyDown eventlistener so we should check tabPressed in async way
-    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
-      if (keyListener.isTabPressed) {
+    _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
+      if (_keyListener.keyListener.isTabPressed) {
         setFocusedByTab(true);
       }
     });
@@ -57,10 +53,10 @@ var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref) {var
     _react.default.createElement("button", (0, _extends2.default)({
       type: "button",
       tabIndex: -1,
-      className: cx(
-        styles.root(theme),
+      className: (0, _Emotion.cx)(
+        _ClearCrossIcon.styles.root(theme),
         // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
-        focusedByTab && styles.focus(theme),
+        focusedByTab && _ClearCrossIcon.styles.focus(theme),
         getSizeClassName(size)
       ),
       style: style,

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RenderEnvironmentContext","_keyListener","_ThemeContext","_CommonWrapper","_ClearCrossIcon","_CrossIcon","_excluded","ClearCrossIcon","exports","_ref","_ref$size","size","style","rest","_objectWithoutPropertiesLoose2","default","globalObject","useGlobal","emotion","useEmotion","cx","styles","getStyles","theme","React","useContext","ThemeContext","keyListener","KeyListener","getSizeClassName","clearCrossLarge","clearCrossMedium","clearCrossSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","createElement","CommonWrapper","_extends2","type","tabIndex","className","root","focus","onFocus","onBlur","CrossIcon","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { useGlobal, useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { KeyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { getStyles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({ size = 'small', style, ...rest }) => {\n  const globalObject = useGlobal();\n  const emotion = useEmotion();\n  const { cx } = emotion;\n  const styles = getStyles(emotion);\n  const theme = React.useContext(ThemeContext);\n  const keyListener = new KeyListener(globalObject);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.clearCrossLarge(theme);\n      case 'medium':\n        return styles.clearCrossMedium(theme);\n      case 'small':\n      default:\n        return styles.clearCrossSmall(theme);\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className={cx(\n          styles.root(theme),\n          // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n          focusedByTab && styles.focus(theme),\n          getSizeClassName(size),\n        )}\n        style={style}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <CrossIcon size={size} focusable />\n      </button>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Emotion","_keyListener","_ThemeContext","_CommonWrapper","_ClearCrossIcon","_CrossIcon","_excluded","ClearCrossIcon","exports","_ref","_ref$size","size","style","rest","_objectWithoutPropertiesLoose2","default","theme","React","useContext","ThemeContext","getSizeClassName","styles","clearCrossLarge","clearCrossMedium","clearCrossSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","createElement","CommonWrapper","_extends2","type","tabIndex","className","cx","root","focus","onFocus","onBlur","CrossIcon","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { styles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({ size = 'small', style, ...rest }) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.clearCrossLarge(theme);\n      case 'medium':\n        return styles.clearCrossMedium(theme);\n      case 'small':\n      default:\n        return styles.clearCrossSmall(theme);\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className={cx(\n          styles.root(theme),\n          // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n          focusedByTab && styles.focus(theme),\n          getSizeClassName(size),\n        )}\n        style={style}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <CrossIcon size={size} focusable />\n      </button>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;;AAEA,IAAAK,cAAA,GAAAL,OAAA;;;;AAIA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA,gBAAwC,IAAAQ,SAAA;;;;;;;;;;;AAWjC,IAAMC,cAA4D,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAA/DA,cAA4DA,CAAAE,IAAA,EAA2C,KAAAC,SAAA,GAAAD,IAAA,CAArCE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA,CAAEE,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAKC,IAAI,OAAAC,8BAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAH,SAAA;EAC3G,IAAMU,KAAK,GAAGC,cAAK,CAACC,UAAU,CAACC,0BAAY,CAAC;EAC5C,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIT,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOU,sBAAM,CAACC,eAAe,CAACN,KAAK,CAAC;MACtC,KAAK,QAAQ;QACX,OAAOK,sBAAM,CAACE,gBAAgB,CAACP,KAAK,CAAC;MACvC,KAAK,OAAO;MACZ;QACE,OAAOK,sBAAM,CAACG,eAAe,CAACR,KAAK,CAAC;IACxC;EACF,CAAC;;EAED,IAAAS,eAAA,GAAwCR,cAAK,CAACS,QAAQ,CAAU,KAAK,CAAC,CAA/DC,YAAY,GAAAF,eAAA,IAAEG,eAAe,GAAAH,eAAA;;EAEpC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB;IACAC,0BAAY,CAACC,qBAAqB,YAAlCD,0BAAY,CAACC,qBAAqB,CAAG,YAAM;MACzC,IAAIC,wBAAW,CAACC,YAAY,EAAE;QAC5BL,eAAe,CAAC,IAAI,CAAC;MACvB;IACF,CAAC,CAAC;EACJ,CAAC;EACD,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAA,UAASN,eAAe,CAAC,KAAK,CAAC;;EAE/C;IACEhC,MAAA,CAAAmB,OAAA,CAAAoB,aAAA,CAAChC,cAAA,CAAAiC,aAAa,EAAKvB,IAAI;IACrBjB,MAAA,CAAAmB,OAAA,CAAAoB,aAAA,eAAAE,SAAA,CAAAtB,OAAA;MACEuB,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAC,CAAE;MACbC,SAAS,EAAE,IAAAC,WAAE;QACXpB,sBAAM,CAACqB,IAAI,CAAC1B,KAAK,CAAC;QAClB;QACAW,YAAY,IAAIN,sBAAM,CAACsB,KAAK,CAAC3B,KAAK,CAAC;QACnCI,gBAAgB,CAACT,IAAI;MACvB,CAAE;MACFC,KAAK,EAAEA,KAAM;MACbgC,OAAO,EAAEf,WAAY;MACrBgB,MAAM,EAAEX,UAAW;IACfrB,IAAI;;IAERjB,MAAA,CAAAmB,OAAA,CAAAoB,aAAA,CAAC9B,UAAA,CAAAyC,SAAS,IAACnC,IAAI,EAAEA,IAAK,EAACoC,SAAS,QAAE;IAC5B;IACK,CAAC;;AAEpB,CAAC;;AAEDxC,cAAc,CAACyC,mBAAmB,GAAG,gBAAgB;AACrDzC,cAAc,CAAC0C,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     focus(t: Theme): string;
     clearCrossSmall(t: Theme): string;

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js

@@ -1,54 +1,51 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n        &:hover {\n          color: ", ";\n        }\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      "])),
-        (0, _Mixins.resetButton)(emotion),
-        t.clearCrossIconColor,
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "])),
+    (0, _Mixins.resetButton)(),
+    t.clearCrossIconColor,
 
-        t.transitionDuration, t.transitionTimingFunction,
+    t.transitionDuration, t.transitionTimingFunction,
 
-        t.clearCrossIconHoverColor);
+    t.clearCrossIconHoverColor);
 
 
 
 
 
-      },
+  },
 
-      focus: function focus(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.clearCrossIconHoverColor);
+  focus: function focus(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.clearCrossIconHoverColor);
 
-      },
+  },
 
-      clearCrossSmall: function clearCrossSmall(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n        margin-right: ", ";\n        border-radius: ", ";\n      "])),
-        t.clearCrossIconWidthSmall,
-        t.clearCrossIconHeightSmall,
-        t.clearCrossIconRightMarginSmall,
-        t.clearCrossIconBorderRadiusSmall);
+  clearCrossSmall: function clearCrossSmall(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])),
+    t.clearCrossIconWidthSmall,
+    t.clearCrossIconHeightSmall,
+    t.clearCrossIconRightMarginSmall,
+    t.clearCrossIconBorderRadiusSmall);
 
-      },
-      clearCrossMedium: function clearCrossMedium(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n        margin-right: ", ";\n        border-radius: ", ";\n      "])),
-        t.clearCrossIconWidthMedium,
-        t.clearCrossIconHeightMedium,
-        t.clearCrossIconRightMarginMedium,
-        t.clearCrossIconBorderRadiusMedium);
+  },
+  clearCrossMedium: function clearCrossMedium(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])),
+    t.clearCrossIconWidthMedium,
+    t.clearCrossIconHeightMedium,
+    t.clearCrossIconRightMarginMedium,
+    t.clearCrossIconBorderRadiusMedium);
 
-      },
-      clearCrossLarge: function clearCrossLarge(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n        margin-right: ", ";\n        border-radius: ", ";\n      "])),
-        t.clearCrossIconWidthLarge,
-        t.clearCrossIconHeightLarge,
-        t.clearCrossIconRightMarginLarge,
-        t.clearCrossIconBorderRadiusLarge);
+  },
+  clearCrossLarge: function clearCrossLarge(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])),
+    t.clearCrossIconWidthLarge,
+    t.clearCrossIconHeightLarge,
+    t.clearCrossIconRightMarginLarge,
+    t.clearCrossIconBorderRadiusLarge);
 
-      }
-    }));};
+  }
+});

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_Mixins","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","getStyles","exports","emotion","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","resetButton","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","focus","clearCrossSmall","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconRightMarginSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconRightMarginMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconRightMarginLarge","clearCrossIconBorderRadiusLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)}\n        color: ${t.clearCrossIconColor};\n        cursor: pointer;\n        transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n        &:hover {\n          color: ${t.clearCrossIconHoverColor};\n        }\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n        color: ${t.clearCrossIconHoverColor};\n      `;\n    },\n\n    clearCrossSmall(t: Theme) {\n      return emotion.css`\n        width: ${t.clearCrossIconWidthSmall};\n        height: ${t.clearCrossIconHeightSmall};\n        margin-right: ${t.clearCrossIconRightMarginSmall};\n        border-radius: ${t.clearCrossIconBorderRadiusSmall};\n      `;\n    },\n    clearCrossMedium(t: Theme) {\n      return emotion.css`\n        width: ${t.clearCrossIconWidthMedium};\n        height: ${t.clearCrossIconHeightMedium};\n        margin-right: ${t.clearCrossIconRightMarginMedium};\n        border-radius: ${t.clearCrossIconBorderRadiusMedium};\n      `;\n    },\n    clearCrossLarge(t: Theme) {\n      return emotion.css`\n        width: ${t.clearCrossIconWidthLarge};\n        height: ${t.clearCrossIconHeightLarge};\n        margin-right: ${t.clearCrossIconRightMarginLarge};\n        border-radius: ${t.clearCrossIconBorderRadiusLarge};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAsD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE/C,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACI,GAAG,CAAAX,eAAA,KAAAA,eAAA,OAAAY,4BAAA,CAAAC,OAAA;QACd,IAAAC,mBAAW,EAACP,OAAO,CAAC;QACbG,CAAC,CAACK,mBAAmB;;QAEVL,CAAC,CAACM,kBAAkB,EAAIN,CAAC,CAACO,wBAAwB;;QAE3DP,CAAC,CAACQ,wBAAwB;;;;;;MAMzC,CAAC;;MAEDC,KAAK,WAAAA,MAACT,CAAQ,EAAE;QACd,OAAOH,OAAO,CAACI,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACQ,wBAAwB;;MAEvC,CAAC;;MAEDE,eAAe,WAAAA,gBAACV,CAAQ,EAAE;QACxB,OAAOH,OAAO,CAACI,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACW,wBAAwB;QACzBX,CAAC,CAACY,yBAAyB;QACrBZ,CAAC,CAACa,8BAA8B;QAC/Bb,CAAC,CAACc,+BAA+B;;MAEtD,CAAC;MACDC,gBAAgB,WAAAA,iBAACf,CAAQ,EAAE;QACzB,OAAOH,OAAO,CAACI,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACgB,yBAAyB;QAC1BhB,CAAC,CAACiB,0BAA0B;QACtBjB,CAAC,CAACkB,+BAA+B;QAChClB,CAAC,CAACmB,gCAAgC;;MAEvD,CAAC;MACDC,eAAe,WAAAA,gBAACpB,CAAQ,EAAE;QACxB,OAAOH,OAAO,CAACI,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;QACPH,CAAC,CAACqB,wBAAwB;QACzBrB,CAAC,CAACsB,yBAAyB;QACrBtB,CAAC,CAACuB,8BAA8B;QAC/BvB,CAAC,CAACwB,+BAA+B;;MAEtD;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Mixins","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","resetButton","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","focus","clearCrossSmall","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconRightMarginSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconRightMarginMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconRightMarginLarge","clearCrossIconBorderRadiusLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.clearCrossIconHoverColor};\n    `;\n  },\n\n  clearCrossSmall(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      margin-right: ${t.clearCrossIconRightMarginSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      margin-right: ${t.clearCrossIconRightMarginMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      margin-right: ${t.clearCrossIconRightMarginLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAsD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE/C,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;IACN,IAAAC,mBAAW,EAAC,CAAC;IACNJ,CAAC,CAACK,mBAAmB;;IAEVL,CAAC,CAACM,kBAAkB,EAAIN,CAAC,CAACO,wBAAwB;;IAE3DP,CAAC,CAACQ,wBAAwB;;;;;;EAMzC,CAAC;;EAEDC,KAAK,WAAAA,MAACT,CAAQ,EAAE;IACd,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACQ,wBAAwB;;EAEvC,CAAC;;EAEDE,eAAe,WAAAA,gBAACV,CAAQ,EAAE;IACxB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACW,wBAAwB;IACzBX,CAAC,CAACY,yBAAyB;IACrBZ,CAAC,CAACa,8BAA8B;IAC/Bb,CAAC,CAACc,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAACf,CAAQ,EAAE;IACzB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACgB,yBAAyB;IAC1BhB,CAAC,CAACiB,0BAA0B;IACtBjB,CAAC,CAACkB,+BAA+B;IAChClB,CAAC,CAACmB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACpB,CAAQ,EAAE;IACxB,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACqB,wBAAwB;IACzBrB,CAAC,CAACsB,yBAAyB;IACrBtB,CAAC,CAACuB,8BAA8B;IAC/BvB,CAAC,CAACwB,+BAA+B;;EAEtD;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.js

@@ -1,7 +1,8 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CloseButtonIcon = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
+var _Emotion = require("../../lib/theming/Emotion");
 var _keyListener = require("../../lib/events/keyListener");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _iconConstants = require("../icons2022/iconConstants");
@@ -57,10 +58,6 @@ var CloseButtonIcon = exports.CloseButtonIcon = function CloseButtonIcon(_ref)
 
 
 {var _ref$side = _ref.side,side = _ref$side === void 0 ? _iconConstants.DEFAULT_ICON_SIZE : _ref$side,_ref$size = _ref.size,size = _ref$size === void 0 ? _iconConstants.DEFAULT_ICON_SIZE : _ref$size,color = _ref.color,colorHover = _ref.colorHover,_ref$tabbable = _ref.tabbable,tabbable = _ref$tabbable === void 0 ? true : _ref$tabbable,style = _ref.style,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  var globalObject = (0, _RenderEnvironmentContext.useGlobal)();
-  var emotion = (0, _RenderEnvironmentContext.useEmotion)();
-  var cx = emotion.cx;
-  var styles = (0, _CloseButtonIcon.getStyles)(emotion);
   var _theme = _react.default.useContext(_ThemeContext.ThemeContext);
   var theme = _ThemeFactory.ThemeFactory.create(
     {
@@ -69,14 +66,13 @@ var CloseButtonIcon = exports.CloseButtonIcon = function CloseButtonIcon(_ref)
     },
     _theme
   );
-  var keyListener = new _keyListener.KeyListener(globalObject);
   var _React$useState = _react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];
 
   var handleFocus = function handleFocus() {
     // focus event fires before keyDown eventlistener
     // so we should check tabPressed in async way
-    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
-      if (keyListener.isTabPressed) {
+    _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
+      if (_keyListener.keyListener.isTabPressed) {
         setFocusedByTab(true);
       }
     });
@@ -89,17 +85,17 @@ var CloseButtonIcon = exports.CloseButtonIcon = function CloseButtonIcon(_ref)
     _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
     _react.default.createElement("button", (0, _extends2.default)({
       tabIndex: tabIndex,
-      className: cx(
-        styles.root(theme),
-        !rest.disabled && focusedByTab && styles.focus(theme),
-        rest.disabled && styles.rootDisabled(theme)
+      className: (0, _Emotion.cx)(
+        _CloseButtonIcon.styles.root(theme),
+        !rest.disabled && focusedByTab && _CloseButtonIcon.styles.focus(theme),
+        rest.disabled && _CloseButtonIcon.styles.rootDisabled(theme)
       ),
       style: (0, _extends2.default)({}, style, { width: side, height: side }),
       onFocus: handleFocus,
       onBlur: handleBlur },
     rest), /*#__PURE__*/
 
-    _react.default.createElement("span", { className: styles.wrapper() }, /*#__PURE__*/
+    _react.default.createElement("span", { className: _CloseButtonIcon.styles.wrapper() }, /*#__PURE__*/
     _react.default.createElement(_CrossIcon.CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })
     )
     )

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RenderEnvironmentContext","_keyListener","_ThemeContext","_iconConstants","_ThemeFactory","_CommonWrapper","_CloseButtonIcon","_CrossIcon","_excluded","CloseButtonIcon","exports","_ref","_ref$side","side","DEFAULT_ICON_SIZE","_ref$size","size","color","colorHover","_ref$tabbable","tabbable","style","rest","_objectWithoutPropertiesLoose2","default","globalObject","useGlobal","emotion","useEmotion","cx","styles","getStyles","_theme","React","useContext","ThemeContext","theme","ThemeFactory","create","closeBtnIconColor","closeBtnIconHoverColor","keyListener","KeyListener","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","createElement","CommonWrapper","_extends2","className","root","focus","rootDisabled","width","height","onFocus","onBlur","wrapper","CrossIcon","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["CloseButtonIcon.tsx"],"sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { useGlobal, useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { KeyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\n\nimport { getStyles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const emotion = useEmotion();\n  const { cx } = emotion;\n  const styles = getStyles(emotion);\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const keyListener = new KeyListener(globalObject);\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Emotion","_keyListener","_ThemeContext","_iconConstants","_ThemeFactory","_CommonWrapper","_CloseButtonIcon","_CrossIcon","_excluded","CloseButtonIcon","exports","_ref","_ref$side","side","DEFAULT_ICON_SIZE","_ref$size","size","color","colorHover","_ref$tabbable","tabbable","style","rest","_objectWithoutPropertiesLoose2","default","_theme","React","useContext","ThemeContext","theme","ThemeFactory","create","closeBtnIconColor","closeBtnIconHoverColor","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","tabIndex","disabled","createElement","CommonWrapper","_extends2","className","cx","styles","root","focus","rootDisabled","width","height","onFocus","onBlur","wrapper","CrossIcon","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["CloseButtonIcon.tsx"],"sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\n\nimport { styles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     rootDisabled(t: Theme): string;
     focus(t: Theme): string;