@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/hooks/useDrop/useDrop.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { globalObject } from '@skbkontur/global-object';
+export var useDrop = function useDrop(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      onDrop = _props.onDrop;
+  var droppableRef = useRef(null);
+  var overRef = useRef(false);
+  var timerId = useRef();
+
+  var _useState = useState(false),
+      isDraggable = _useState[0],
+      setIsDraggable = _useState[1];
+
+  var clearTimer = useCallback(function () {
+    timerId.current && globalObject.clearTimeout(timerId.current);
+  }, []);
+  var handleDragOver = useCallback(function (event) {
+    event.preventDefault();
+    setIsDraggable(true);
+    clearTimer();
+    timerId.current = globalObject.setTimeout(function () {
+      overRef.current = false;
+      setIsDraggable(false);
+    }, 200);
+  }, [clearTimer]);
+  var preventDefault = useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  var handleDrop = useCallback(function (event) {
+    preventDefault(event);
+    setIsDraggable(false);
+    overRef.current = false;
+    onDrop == null ? void 0 : onDrop(event);
+  }, [preventDefault, onDrop]);
+  useEffect(function () {
+    var ref = droppableRef.current;
+
+    if (!ref) {
+      return;
+    }
+
+    ref.addEventListener('dragenter', preventDefault);
+    ref.addEventListener('dragleave', preventDefault);
+    ref.addEventListener('dragover', handleDragOver);
+    ref.addEventListener('drop', handleDrop);
+    return function () {
+      ref.removeEventListener('dragenter', preventDefault);
+      ref.removeEventListener('dragleave', preventDefault);
+      ref.removeEventListener('dragover', handleDragOver);
+      ref.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDrop, handleDragOver, preventDefault]);
+  return {
+    isDraggable: isDraggable,
+    ref: droppableRef
+  };
+};

package/hooks/useDrop/useDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrop.ts"],"names":["useCallback","useEffect","useRef","useState","globalObject","useDrop","props","onDrop","droppableRef","overRef","timerId","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\ninterface IUseDropProps {\n  onDrop?: (event: Event) => 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) => {\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) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: Event) => {\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"]}

package/hooks/useDrop.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+interface IUseDropProps {
+    onDrop?: (event: Event) => void;
+}
+declare type IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;
+interface IUseDropResult<TElement extends IElementWithListener> {
+    isDraggable: boolean;
+    ref: MutableRefObject<TElement | null>;
+}
+export declare const useDrop: <TElement extends IElementWithListener>(props?: IUseDropProps) => IUseDropResult<TElement>;
+export {};

package/hooks/useEffectWithoutInitCall/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/hooks/useEffectWithoutInitCall.js",
+  "module": "useEffectWithoutInitCall",
+  "types": "../useEffectWithoutInitCall.d.ts",
+  "sideEffects": false
+}

package/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+export var useEffectWithoutInitCall = function useEffectWithoutInitCall(effect, deps) {
+  var isInitialRenderRef = useRef(true);
+  useEffect(function () {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else {
+      effect();
+    }
+  }, deps);
+};

package/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useEffectWithoutInitCall.ts"],"names":["useEffect","useRef","useEffectWithoutInitCall","effect","deps","isInitialRenderRef","current"],"mappings":"AAAA,SAASA,SAAT,EAAoCC,MAApC,QAAkD,OAAlD;;AAEA,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,MAAD,EAAqBC,IAArB,EAA8C;AACpF,MAAMC,kBAAkB,GAAGJ,MAAM,CAAC,IAAD,CAAjC;;AAEAD,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIK,kBAAkB,CAACC,OAAvB,EAAgC;AAC9BD,MAAAA,kBAAkB,CAACC,OAAnB,GAA6B,KAA7B;AACD,KAFD,MAEO;AACLH,MAAAA,MAAM;AACP;AACF,GANQ,EAMNC,IANM,CAAT;AAOD,CAVM","sourcesContent":["import { useEffect, DependencyList, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList) => {\n  const isInitialRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n    } else {\n      effect();\n    }\n  }, deps);\n};\n"]}

package/hooks/useEffectWithoutInitCall.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useEffectWithoutInitCall: (effect: () => void, deps: DependencyList) => void;

package/hooks/useMemoObject/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/hooks/useMemoObject.js",
+  "module": "useMemoObject",
+  "types": "../useMemoObject.d.ts",
+  "sideEffects": false
+}

package/hooks/useMemoObject/useMemoObject.js

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+export var useMemoObject = function useMemoObject(objectValue) {
+  return useMemo(function () {
+    return objectValue;
+  }, Object.values(objectValue));
+};

package/hooks/useMemoObject/useMemoObject.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMemoObject.ts"],"names":["useMemo","useMemoObject","objectValue","Object","values"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;;;;AAIA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAA4BC,WAA5B,EAAqD;AAChF,SAAOF,OAAO,CAAU,oBAAME,WAAN,EAAV,EAA6BC,MAAM,CAACC,MAAP,CAAcF,WAAd,CAA7B,CAAd;AACD,CAFM","sourcesContent":["import { useMemo } from 'react';\n\nimport { AnyObject } from '../lib/utils';\n\nexport const useMemoObject = <TObject extends AnyObject>(objectValue: TObject) => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"]}

package/hooks/useMemoObject.d.ts

@@ -0,0 +1,2 @@
+import { AnyObject } from '../lib/utils';
+export declare const useMemoObject: <TObject extends AnyObject>(objectValue: TObject) => TObject;

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/Autocomplete';
 export * from './components/Button';
+export * from './components/Calendar';
 export * from './components/Center';
 export * from './components/Checkbox';
 export * from './components/ComboBox';
@@ -9,20 +10,20 @@ export * from './components/DateInput';
 export * from './components/DatePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
-export * from './components/Fias';
+export * from './components/FileUploader';
 export * from './components/FxInput';
 export * from './components/Gapped';
+export * from './components/GlobalLoader';
 export * from './components/Group';
 export * from './components/Hint';
 export * from './components/Input';
 export * from './components/Kebab';
 export * from './components/Link';
 export * from './components/Loader';
-export * from './components/LocaleProvider';
-export * from './components/Logotype';
 export * from './components/MenuHeader';
 export * from './components/MenuItem';
 export * from './components/MenuSeparator';
+export * from './components/MiniModal';
 export * from './components/Modal';
 export * from './components/Paging';
 export * from './components/PasswordInput';
@@ -36,19 +37,25 @@ export * from './components/Sticky';
 export * from './components/Switcher';
 export * from './components/Tabs';
 export * from './components/Textarea';
-export * from './components/ThemeConsumer';
-export * from './components/ThemeProvider';
 export * from './components/Toast';
+export * from './components/SingleToast';
 export * from './components/Toggle';
 export * from './components/Token';
 export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
-export * from './components/TopBar';
+export * from './components/ResponsiveLayout';
+export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
 export * from './lib/theming/themes/DefaultTheme';
-export * from './lib/theming/themes/DefaultTheme8px';
-export * from './lib/theming/themes/FlatTheme';
-export * from './lib/theming/themes/FlatTheme8px';
+export * from './lib/theming/themes/DarkTheme';
+export * from './lib/theming/themes/DefaultTheme8pxOld';
+export * from './lib/theming/themes/FlatTheme8pxOld';
+export * from './lib/theming/themes/Theme2022';
+export * from './lib/theming/themes/Theme2022Dark';
+export * from './lib/types/props';
+export * from './internal/Popup/types';
+export * as ColorFunctions from './lib/styles/ColorFunctions';
+export * as DimensionFunctions from './lib/styles/DimensionFunctions';

package/index.js

@@ -1,5 +1,6 @@
 export * from './components/Autocomplete';
 export * from './components/Button';
+export * from './components/Calendar';
 export * from './components/Center';
 export * from './components/Checkbox';
 export * from './components/ComboBox';
@@ -9,20 +10,20 @@ export * from './components/DateInput';
 export * from './components/DatePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
-export * from './components/Fias';
+export * from './components/FileUploader';
 export * from './components/FxInput';
 export * from './components/Gapped';
+export * from './components/GlobalLoader';
 export * from './components/Group';
 export * from './components/Hint';
 export * from './components/Input';
 export * from './components/Kebab';
 export * from './components/Link';
 export * from './components/Loader';
-export * from './components/LocaleProvider';
-export * from './components/Logotype';
 export * from './components/MenuHeader';
 export * from './components/MenuItem';
 export * from './components/MenuSeparator';
+export * from './components/MiniModal';
 export * from './components/Modal';
 export * from './components/Paging';
 export * from './components/PasswordInput';
@@ -36,19 +37,25 @@ export * from './components/Sticky';
 export * from './components/Switcher';
 export * from './components/Tabs';
 export * from './components/Textarea';
-export * from './components/ThemeConsumer';
-export * from './components/ThemeProvider';
 export * from './components/Toast';
+export * from './components/SingleToast';
 export * from './components/Toggle';
 export * from './components/Token';
 export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
-export * from './components/TopBar';
+export * from './components/ResponsiveLayout';
+export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
 export * from './lib/theming/themes/DefaultTheme';
-export * from './lib/theming/themes/DefaultTheme8px';
-export * from './lib/theming/themes/FlatTheme';
-export * from './lib/theming/themes/FlatTheme8px';
+export * from './lib/theming/themes/DarkTheme';
+export * from './lib/theming/themes/DefaultTheme8pxOld';
+export * from './lib/theming/themes/FlatTheme8pxOld';
+export * from './lib/theming/themes/Theme2022';
+export * from './lib/theming/themes/Theme2022Dark';
+export * from './lib/types/props';
+export * from './internal/Popup/types';import * as _ColorFunctions from
+'./lib/styles/ColorFunctions';export { _ColorFunctions as ColorFunctions };import * as _DimensionFunctions from
+'./lib/styles/DimensionFunctions';export { _DimensionFunctions as DimensionFunctions };

package/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,mBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,6BAAd;AACA,cAAc,uBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,qBAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,mCAAd","sourcesContent":["export * from './components/Autocomplete';\r\nexport * from './components/Button';\r\nexport * from './components/Center';\r\nexport * from './components/Checkbox';\r\nexport * from './components/ComboBox';\r\nexport * from './components/CurrencyInput';\r\nexport * from './components/CurrencyLabel';\r\nexport * from './components/DateInput';\r\nexport * from './components/DatePicker';\r\nexport * from './components/Dropdown';\r\nexport * from './components/DropdownMenu';\r\nexport * from './components/Fias';\r\nexport * from './components/FxInput';\r\nexport * from './components/Gapped';\r\nexport * from './components/Group';\r\nexport * from './components/Hint';\r\nexport * from './components/Input';\r\nexport * from './components/Kebab';\r\nexport * from './components/Link';\r\nexport * from './components/Loader';\r\nexport * from './components/LocaleProvider';\r\nexport * from './components/Logotype';\r\nexport * from './components/MenuHeader';\r\nexport * from './components/MenuItem';\r\nexport * from './components/MenuSeparator';\r\nexport * from './components/Modal';\r\nexport * from './components/Paging';\r\nexport * from './components/PasswordInput';\r\nexport * from './components/Radio';\r\nexport * from './components/RadioGroup';\r\nexport * from './components/ScrollContainer';\r\nexport * from './components/Select';\r\nexport * from './components/SidePage';\r\nexport * from './components/Spinner';\r\nexport * from './components/Sticky';\r\nexport * from './components/Switcher';\r\nexport * from './components/Tabs';\r\nexport * from './components/Textarea';\r\nexport * from './components/ThemeConsumer';\r\nexport * from './components/ThemeProvider';\r\nexport * from './components/Toast';\r\nexport * from './components/Toggle';\r\nexport * from './components/Token';\r\nexport * from './components/TokenInput';\r\nexport * from './components/Tooltip';\r\nexport * from './components/TooltipMenu';\r\nexport * from './components/TopBar';\r\nexport * from './lib/locale';\r\nexport * from './lib/theming/ThemeContext';\r\nexport * from './lib/theming/ThemeFactory';\r\nexport * from './lib/theming/themes/DefaultTheme';\r\nexport * from './lib/theming/themes/DefaultTheme8px';\r\nexport * from './lib/theming/themes/FlatTheme';\r\nexport * from './lib/theming/themes/FlatTheme8px';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,0BAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,2BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,mBAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}

package/internal/BGRuler/BGRuler.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-/**
-                                                                                                                                                            * Компонент рисует пиксельную линейку на заднем фоне.
-                                                                                                                                                            * Помогает контролировать размеры элементов при скриншотном тестировании.
-                                                                                                                                                            *
-                                                                                                                                                            * @see FxInput/__stories__/FxInput.stories.tsx
-                                                                                                                                                            */
-
-export var BGRuler =
-/*#__PURE__*/
-function (_React$Component) {
+import { getDOMRect } from "../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../lib/createPropsGetter";
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+
+export var BGRuler = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(BGRuler, _React$Component);
 
   function BGRuler() {
@@ -21,6 +21,7 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(BGRuler.defaultProps);
     _this.iframe = null;
 
     _this.componentDidMount = function () {
@@ -53,12 +54,15 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this$props = this.props,
         width = _this$props.width,
-        height = _this$props.height,
-        color = _this$props.color,
-        top = _this$props.top,
-        bottom = _this$props.bottom,
-        left = _this$props.left,
-        right = _this$props.right;
+        bottom = _this$props.bottom;
+
+    var _this$getProps = this.getProps(),
+        height = _this$getProps.height,
+        top = _this$getProps.top,
+        left = _this$getProps.left,
+        right = _this$getProps.right,
+        color = _this$getProps.color;
+
     var wrapper = {
       position: 'absolute',
       width: width,
@@ -100,7 +104,7 @@ function (_React$Component) {
       backgroundImage: "\n        linear-gradient(90deg, transparent 0, transparent 9px, " + color + " 9px, " + color + " 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, " + color + " 19px, " + color + " 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, " + color + " 29px, " + color + " 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, " + color + " 39px, " + color + " 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, " + color + " 59px, " + color + " 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, " + color + " 69px, " + color + " 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, " + color + " 79px, " + color + " 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, " + color + " 89px, " + color + " 90px, transparent 90px)\n      "
     });
 
-    var rulerWidth = this.iframe ? this.iframe.getBoundingClientRect().width : 0;
+    var rulerWidth = getDOMRect(this.iframe).width;
     var labels = Array(Math.ceil(rulerWidth / 100) + 1).fill(null).map(function (value, index) {
       var label = {
         position: 'absolute',
@@ -111,20 +115,20 @@ function (_React$Component) {
         bottom: -1,
         left: index * 100 + 5
       };
-      return React.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         key: index,
         style: label
       }, index * 100);
     });
-    return React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       style: wrapper
-    }, React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: highMarks
-    }), React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: middleMarks
-    }), React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: shortMarks
-    }), labels, React.createElement("iframe", {
+    }), labels, /*#__PURE__*/React.createElement("iframe", {
       title: "BGRuler",
       style: iframe,
       ref: this.iframeRef

package/internal/BGRuler/BGRuler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BGRuler.tsx"],"names":["React","BGRuler","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","render","props","width","height","color","top","bottom","left","right","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","backgroundImage","middleMarks","shortMarks","rulerWidth","getBoundingClientRect","labels","Array","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","Component","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\n\r\n/**\r\n * Компонент рисует пиксельную линейку на заднем фоне.\r\n * Помогает контролировать размеры элементов при скриншотном тестировании.\r\n *\r\n * @see FxInput/__stories__/FxInput.stories.tsx\r\n */\r\nexport class BGRuler extends React.Component<{\r\n  width?: string | number;\r\n  height?: string | number;\r\n  top?: string | number;\r\n  bottom?: string | number;\r\n  right?: string | number;\r\n  left?: string | number;\r\n  color?: string;\r\n}> {\r\n  public static defaultProps = {\r\n    height: 20,\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    color: '#333',\r\n  };\r\n\r\n  private iframe: HTMLIFrameElement | null = null;\r\n\r\n  public componentDidMount = () => {\r\n    if (this.iframe && this.iframe.contentWindow) {\r\n      this.iframe.contentWindow.addEventListener('resize', this.update, true);\r\n    }\r\n    this.update();\r\n  };\r\n\r\n  public componentWillUnmount = () => {\r\n    if (this.iframe && this.iframe.contentWindow) {\r\n      this.iframe.contentWindow.removeEventListener('resize', this.update, true);\r\n    }\r\n  };\r\n\r\n  public update = () => {\r\n    this.forceUpdate();\r\n  };\r\n\r\n  public render() {\r\n    const { width, height, color, top, bottom, left, right } = this.props;\r\n    const wrapper: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width,\r\n      height,\r\n      top,\r\n      bottom,\r\n      left,\r\n      right,\r\n      overflow: 'hidden',\r\n    };\r\n    const iframe: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '100%',\r\n      height: '100%',\r\n      border: 0,\r\n      visibility: 'hidden',\r\n    };\r\n    const marks: React.CSSProperties = {\r\n      position: 'absolute',\r\n      top: 0,\r\n      left: 0,\r\n      width: '100%',\r\n      backgroundSize: '100px 20px',\r\n      backgroundRepeat: 'repeat-x',\r\n    };\r\n    const highMarks: React.CSSProperties = {\r\n      ...marks,\r\n      height: '100%',\r\n      backgroundImage: `linear-gradient(90deg, ${color} 0, ${color} 1px, transparent 1px)`,\r\n    };\r\n    const middleMarks: React.CSSProperties = {\r\n      ...marks,\r\n      height: '75%',\r\n      backgroundImage: `linear-gradient(90deg, transparent 0, transparent 49px, ${color} 49px, ${color} 50px, transparent 50px)`,\r\n    };\r\n    const shortMarks: React.CSSProperties = {\r\n      ...marks,\r\n      height: '40%',\r\n      backgroundImage: `\r\n        linear-gradient(90deg, transparent 0, transparent 9px, ${color} 9px, ${color} 10px, transparent 10px),\r\n        linear-gradient(90deg, transparent 0, transparent 19px, ${color} 19px, ${color} 20px, transparent 20px),\r\n        linear-gradient(90deg, transparent 0, transparent 29px, ${color} 29px, ${color} 30px, transparent 30px),\r\n        linear-gradient(90deg, transparent 0, transparent 39px, ${color} 39px, ${color} 40px, transparent 40px),\r\n        linear-gradient(90deg, transparent 0, transparent 59px, ${color} 59px, ${color} 60px, transparent 60px),\r\n        linear-gradient(90deg, transparent 0, transparent 69px, ${color} 69px, ${color} 70px, transparent 70px),\r\n        linear-gradient(90deg, transparent 0, transparent 79px, ${color} 79px, ${color} 80px, transparent 80px),\r\n        linear-gradient(90deg, transparent 0, transparent 89px, ${color} 89px, ${color} 90px, transparent 90px)\r\n      `,\r\n    };\r\n    const rulerWidth = this.iframe ? this.iframe.getBoundingClientRect().width : 0;\r\n    const labels = Array(Math.ceil(rulerWidth / 100) + 1)\r\n      .fill(null)\r\n      .map((value, index) => {\r\n        const label: React.CSSProperties = {\r\n          position: 'absolute',\r\n          fontFamily: 'Arial',\r\n          fontSize: 10,\r\n          lineHeight: 1,\r\n          color,\r\n          bottom: -1,\r\n          left: index * 100 + 5,\r\n        };\r\n        return (\r\n          <span key={index} style={label}>\r\n            {index * 100}\r\n          </span>\r\n        );\r\n      });\r\n    return (\r\n      <div style={wrapper}>\r\n        <div style={highMarks} />\r\n        <div style={middleMarks} />\r\n        <div style={shortMarks} />\r\n        {labels}\r\n        <iframe title=\"BGRuler\" style={iframe} ref={this.iframeRef} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private iframeRef = (ref: HTMLIFrameElement | null) => {\r\n    this.iframe = ref;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["BGRuler.tsx"],"names":["React","getDOMRect","createPropsGetter","BGRuler","getProps","defaultProps","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","render","props","width","bottom","height","top","left","right","color","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","backgroundImage","middleMarks","shortMarks","rulerWidth","labels","Array","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../lib/createPropsGetter';\n\nexport interface BGRulerProps {\n  width?: string | number;\n  height?: string | number;\n  top?: string | number;\n  bottom?: string | number;\n  right?: string | number;\n  left?: string | number;\n  color?: string;\n}\n\ntype DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;\n\n/**\n * Компонент рисует пиксельную линейку на заднем фоне.\n * Помогает контролировать размеры элементов при скриншотном тестировании.\n *\n * @see FxInput/__stories__/FxInput.stories.tsx\n */\nexport class BGRuler extends React.Component<BGRulerProps> {\n  public static defaultProps: DefaultProps = {\n    height: 20,\n    top: 0,\n    left: 0,\n    right: 0,\n    color: '#333',\n  };\n\n  private getProps = createPropsGetter(BGRuler.defaultProps);\n\n  private iframe: HTMLIFrameElement | null = null;\n\n  public componentDidMount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.addEventListener('resize', this.update, true);\n    }\n    this.update();\n  };\n\n  public componentWillUnmount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.removeEventListener('resize', this.update, true);\n    }\n  };\n\n  public update = () => {\n    this.forceUpdate();\n  };\n\n  public render() {\n    const { width, bottom } = this.props;\n    const { height, top, left, right, color } = this.getProps();\n    const wrapper: React.CSSProperties = {\n      position: 'absolute',\n      width,\n      height,\n      top,\n      bottom,\n      left,\n      right,\n      overflow: 'hidden',\n    };\n    const iframe: React.CSSProperties = {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      border: 0,\n      visibility: 'hidden',\n    };\n    const marks: React.CSSProperties = {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      backgroundSize: '100px 20px',\n      backgroundRepeat: 'repeat-x',\n    };\n    const highMarks: React.CSSProperties = {\n      ...marks,\n      height: '100%',\n      backgroundImage: `linear-gradient(90deg, ${color} 0, ${color} 1px, transparent 1px)`,\n    };\n    const middleMarks: React.CSSProperties = {\n      ...marks,\n      height: '75%',\n      backgroundImage: `linear-gradient(90deg, transparent 0, transparent 49px, ${color} 49px, ${color} 50px, transparent 50px)`,\n    };\n    const shortMarks: React.CSSProperties = {\n      ...marks,\n      height: '40%',\n      backgroundImage: `\n        linear-gradient(90deg, transparent 0, transparent 9px, ${color} 9px, ${color} 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, ${color} 19px, ${color} 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, ${color} 29px, ${color} 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, ${color} 39px, ${color} 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, ${color} 59px, ${color} 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, ${color} 69px, ${color} 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, ${color} 79px, ${color} 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, ${color} 89px, ${color} 90px, transparent 90px)\n      `,\n    };\n    const rulerWidth = getDOMRect(this.iframe).width;\n    const labels = Array(Math.ceil(rulerWidth / 100) + 1)\n      .fill(null)\n      .map((value, index) => {\n        const label: React.CSSProperties = {\n          position: 'absolute',\n          fontFamily: 'Arial',\n          fontSize: 10,\n          lineHeight: 1,\n          color,\n          bottom: -1,\n          left: index * 100 + 5,\n        };\n        return (\n          <span key={index} style={label}>\n            {index * 100}\n          </span>\n        );\n      });\n    return (\n      <div style={wrapper}>\n        <div style={highMarks} />\n        <div style={middleMarks} />\n        <div style={shortMarks} />\n        {labels}\n        <iframe title=\"BGRuler\" style={iframe} ref={this.iframeRef} />\n      </div>\n    );\n  }\n\n  private iframeRef = (ref: HTMLIFrameElement | null) => {\n    this.iframe = ref;\n  };\n}\n"]}

package/internal/BGRuler.d.ts

@@ -1,11 +1,5 @@
 import React from 'react';
-/**
- * Компонент рисует пиксельную линейку на заднем фоне.
- * Помогает контролировать размеры элементов при скриншотном тестировании.
- *
- * @see FxInput/__stories__/FxInput.stories.tsx
- */
-export declare class BGRuler extends React.Component<{
+export interface BGRulerProps {
     width?: string | number;
     height?: string | number;
     top?: string | number;
@@ -13,14 +7,17 @@ export declare class BGRuler extends React.Component<{
     right?: string | number;
     left?: string | number;
     color?: string;
-}> {
-    static defaultProps: {
-        height: number;
-        top: number;
-        left: number;
-        right: number;
-        color: string;
-    };
+}
+declare type DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+export declare class BGRuler extends React.Component<BGRulerProps> {
+    static defaultProps: DefaultProps;
+    private getProps;
     private iframe;
     componentDidMount: () => void;
     componentWillUnmount: () => void;
@@ -28,3 +25,4 @@ export declare class BGRuler extends React.Component<{
     render(): JSX.Element;
     private iframeRef;
 }
+export {};

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
+import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { DEFAULT_ICON_SIZE } from "../../icons2022/iconConstants";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { CommonWrapper } from "../../CommonWrapper";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../CloseButtonIcon.styles";
+import { CrossIcon } from "../CrossIcon";
+export var CloseButtonIcon = function CloseButtonIcon(_ref) {
+  var _ref$side = _ref.side,
+      side = _ref$side === void 0 ? DEFAULT_ICON_SIZE : _ref$side,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var emotion = useEmotion();
+
+  var _theme = useTheme();
+
+  var theme = ThemeFactory.create({
+    closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
+    closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor
+  }, _theme);
+
+  var _React$useState = React.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 ? void 0 : globalObject.requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    return setFocusedByTab(false);
+  };
+
+  var tabIndex = !tabbable || rest.disabled ? -1 : 0;
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(CommonWrapper, rest, /*#__PURE__*/React.createElement("button", _extends({
+    tabIndex: tabIndex,
+    className: emotion.cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)),
+    style: _extends({}, style, {
+      width: side,
+      height: side
+    }),
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, rest), /*#__PURE__*/React.createElement("span", {
+    className: styles.wrapper()
+  }, /*#__PURE__*/React.createElement(CrossIcon, {
+    size: side < size ? side : size,
+    focusable: tabIndex >= 0
+  }))));
+};
+CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';
+CloseButtonIcon.displayName = 'CloseButtonIcon';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CloseButtonIcon.tsx"],"names":["React","globalObject","useEmotion","keyListener","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","useTheme","getStyles","CrossIcon","CloseButtonIcon","side","size","color","colorHover","tabbable","style","rest","emotion","_theme","theme","create","closeBtnIconColor","closeBtnIconHoverColor","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","styles","cx","root","focus","rootDisabled","width","height","wrapper","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, CSSProperties } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { useTheme } from '../../lib/theming/useTheme';\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 emotion = useEmotion();\n  const _theme = useTheme();\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  const styles = getStyles(emotion);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={emotion.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"]}

package/internal/CloseButtonIcon/CloseButtonIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/CloseButtonIcon/CloseButtonIcon.js",
+  "module": "CloseButtonIcon",
+  "types": "../CloseButtonIcon.d.ts",
+  "sideEffects": false
+}

package/internal/CloseButtonIcon/CloseButtonIcon.d.ts

@@ -0,0 +1,35 @@
+import React, { AriaAttributes, CSSProperties } from 'react';
+import { CommonProps } from '../CommonWrapper';
+export interface CloseButtonIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /**
+     * Ширина и высота иконки крестика
+     *
+     * @default 16
+     */
+    size?: number;
+    /**
+     * Ширина и высота всей кнопки
+     *
+     * @default 16
+     */
+    side?: number;
+    /**
+     * Цвет иконки
+     *
+     * Переменная темы: `closeBtnIconColor`
+     */
+    color?: CSSProperties['color'];
+    /**
+     * Цвет иконки при наведении мышью и при фокусе
+     *
+     * Переменная темы: `closeBtnIconHoverColor`
+     */
+    colorHover?: CSSProperties['color'];
+    /**
+     * Возможность сфокусироваться на кнопке клавишей TAB
+     *
+     * @default true
+     * */
+    tabbable?: boolean;
+}
+export declare const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps>;