@skbkontur/react-ui 0.0.0-b0853da840 → 0.0.0-b08da15166

package/cjs/components/TooltipMenu/TooltipMenu.md

@@ -0,0 +1,183 @@
+Базовый пример тултип-меню.
+
+```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>;
+```
+
+Тултип-меню с заданной шириной.
+
+```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 MenuIcon from '@skbkontur/react-icons/Menu';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <MenuIcon size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню всегда всплывающее справа от `caption`.
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon 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 LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon 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>;
+```
+
+Условный рендер элементов тултип-меню (с сохранением поведения [`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/components/TooltipMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './TooltipMenu';

package/cjs/components/TooltipMenu/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _TooltipMenu = require("./TooltipMenu");Object.keys(_TooltipMenu).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _TooltipMenu[key]) return;exports[key] = _TooltipMenu[key];});

package/cjs/components/TooltipMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './TooltipMenu';\n"]}

package/cjs/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/cjs/hooks/useDrop.js

@@ -0,0 +1,77 @@
+"use strict";exports.__esModule = true;exports.useDrop = void 0;var _react = require("react");
+
+
+
+
+
+
+
+
+
+
+
+
+var useDrop = function useDrop(props) {if (props === void 0) {props = {};}
+  var _props = props,onDrop = _props.onDrop;
+
+  var droppableRef = (0, _react.useRef)(null);
+  var overRef = (0, _react.useRef)(false);
+  var timerId = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(false),isDraggable = _useState[0],setIsDraggable = _useState[1];
+
+  var clearTimer = (0, _react.useCallback)(function () {
+    timerId.current && clearTimeout(timerId.current);
+  }, []);
+
+  var handleDragOver = (0, _react.useCallback)(
+  function (event) {
+    event.preventDefault();
+    setIsDraggable(true);
+
+    clearTimer();
+    timerId.current = setTimeout(function () {
+      overRef.current = false;
+      setIsDraggable(false);
+    }, 200);
+  },
+  [clearTimer]);
+
+
+  var preventDefault = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  var handleDrop = (0, _react.useCallback)(
+  function (event) {
+    preventDefault(event);
+    setIsDraggable(false);
+    overRef.current = false;
+
+    onDrop == null ? void 0 : onDrop(event);
+  },
+  [preventDefault, onDrop]);
+
+
+  (0, _react.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 };
+};exports.useDrop = useDrop;

package/cjs/hooks/useDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrop.ts"],"names":["useDrop","props","onDrop","droppableRef","overRef","timerId","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"mappings":"gEAAA;;;;;;;;;;;;;AAaO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAAwCC,KAAxC,EAAgG,KAAxDA,KAAwD,cAAxDA,KAAwD,GAAjC,EAAiC;AACrH,eAAmBA,KAAnB,CAAQC,MAAR,UAAQA,MAAR;;AAEA,MAAMC,YAAY,GAAG,mBAAiB,IAAjB,CAArB;AACA,MAAMC,OAAO,GAAG,mBAAgB,KAAhB,CAAhB;AACA,MAAMC,OAAO,GAAG,oBAAhB;AACA,kBAAsC,qBAAkB,KAAlB,CAAtC,CAAOC,WAAP,gBAAoBC,cAApB;;AAEA,MAAMC,UAAU,GAAG,wBAAY,YAAM;AACnCH,IAAAA,OAAO,CAACI,OAAR,IAAmBC,YAAY,CAACL,OAAO,CAACI,OAAT,CAA/B;AACD,GAFkB,EAEhB,EAFgB,CAAnB;;AAIA,MAAME,cAAc,GAAG;AACrB,YAACC,KAAD,EAAW;AACTA,IAAAA,KAAK,CAACC,cAAN;AACAN,IAAAA,cAAc,CAAC,IAAD,CAAd;;AAEAC,IAAAA,UAAU;AACVH,IAAAA,OAAO,CAACI,OAAR,GAAkBK,UAAU,CAAC,YAAM;AACjCV,MAAAA,OAAO,CAACK,OAAR,GAAkB,KAAlB;AACAF,MAAAA,cAAc,CAAC,KAAD,CAAd;AACD,KAH2B,EAGzB,GAHyB,CAA5B;AAID,GAVoB;AAWrB,GAACC,UAAD,CAXqB,CAAvB;;;AAcA,MAAMK,cAAc,GAAG,wBAAY,UAACD,KAAD,EAAW;AAC5CA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACG,eAAN;AACD,GAHsB,EAGpB,EAHoB,CAAvB;;AAKA,MAAMC,UAAU,GAAG;AACjB,YAACJ,KAAD,EAAkB;AAChBC,IAAAA,cAAc,CAACD,KAAD,CAAd;AACAL,IAAAA,cAAc,CAAC,KAAD,CAAd;AACAH,IAAAA,OAAO,CAACK,OAAR,GAAkB,KAAlB;;AAEAP,IAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGU,KAAH,CAAN;AACD,GAPgB;AAQjB,GAACC,cAAD,EAAiBX,MAAjB,CARiB,CAAnB;;;AAWA,wBAAU,YAAM;AACd,QAAMe,GAAG,GAAGd,YAAY,CAACM,OAAzB;;AAEA,QAAI,CAACQ,GAAL,EAAU;AACR;AACD;;AAEDA,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,WAArB,EAAkCL,cAAlC;AACAI,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,WAArB,EAAkCL,cAAlC;AACAI,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,UAArB,EAAiCP,cAAjC;AACAM,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,MAArB,EAA6BF,UAA7B;;AAEA,WAAO,YAAM;AACXC,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,WAAxB,EAAqCN,cAArC;AACAI,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,WAAxB,EAAqCN,cAArC;AACAI,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,UAAxB,EAAoCR,cAApC;AACAM,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,MAAxB,EAAgCH,UAAhC;AACD,KALD;AAMD,GAlBD,EAkBG,CAACA,UAAD,EAAaL,cAAb,EAA6BE,cAA7B,CAlBH;;AAoBA,SAAO,EAAEP,WAAW,EAAXA,WAAF,EAAeW,GAAG,EAAEd,YAApB,EAAP;AACD,CA/DM,C","sourcesContent":["import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';\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<NodeJS.Timeout>();\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) => {\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) => {\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/cjs/hooks/useEffectWithoutInitCall.d.ts

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

package/cjs/hooks/useEffectWithoutInitCall.js

@@ -0,0 +1,13 @@
+"use strict";exports.__esModule = true;exports.useEffectWithoutInitCall = void 0;var _react = _interopRequireWildcard(require("react"));function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+var useEffectWithoutInitCall = function useEffectWithoutInitCall(effect, deps) {
+  var isInitialRenderRef = (0, _react.useRef)(true);
+
+  _react.default.useEffect(function () {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else {
+      effect();
+    }
+  }, deps);
+};exports.useEffectWithoutInitCall = useEffectWithoutInitCall;

package/cjs/hooks/useEffectWithoutInitCall.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useEffectWithoutInitCall.ts"],"names":["useEffectWithoutInitCall","effect","deps","isInitialRenderRef","React","useEffect","current"],"mappings":"iFAAA,uD;;AAEO,IAAMA,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,MAAD,EAAqBC,IAArB,EAA8C;AACpF,MAAMC,kBAAkB,GAAG,mBAAO,IAAP,CAA3B;;AAEAC,iBAAMC,SAAN,CAAgB,YAAM;AACpB,QAAIF,kBAAkB,CAACG,OAAvB,EAAgC;AAC9BH,MAAAA,kBAAkB,CAACG,OAAnB,GAA6B,KAA7B;AACD,KAFD,MAEO;AACLL,MAAAA,MAAM;AACP;AACF,GAND,EAMGC,IANH;AAOD,CAVM,C","sourcesContent":["import React, { DependencyList, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList) => {\n  const isInitialRenderRef = useRef(true);\n\n  React.useEffect(() => {\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n    } else {\n      effect();\n    }\n  }, deps);\n};\n"]}

package/cjs/hooks/useMemoObject.d.ts

@@ -0,0 +1 @@
+export declare const useMemoObject: <TObject extends object>(objectValue: TObject) => TObject;

package/cjs/hooks/useMemoObject.js

@@ -0,0 +1,5 @@
+"use strict";exports.__esModule = true;exports.useMemoObject = void 0;var _react = require("react");
+
+var useMemoObject = function useMemoObject(objectValue) {
+  return (0, _react.useMemo)(function () {return objectValue;}, Object.values(objectValue));
+};exports.useMemoObject = useMemoObject;

package/cjs/hooks/useMemoObject.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMemoObject.ts"],"names":["useMemoObject","objectValue","Object","values"],"mappings":"sEAAA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAyBC,WAAzB,EAAkD;AAC7E,SAAO,oBAAiB,oBAAMA,WAAN,EAAjB,EAAoCC,MAAM,CAACC,MAAP,CAAcF,WAAd,CAApC,CAAP;AACD,CAFM,C","sourcesContent":["import { useMemo } from 'react';\n\nexport const useMemoObject = <TObject extends object>(objectValue: TObject) => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"]}

package/cjs/index.d.ts

@@ -0,0 +1,54 @@
+export * from './components/Autocomplete';
+export * from './components/Button';
+export * from './components/Center';
+export * from './components/Checkbox';
+export * from './components/ComboBox';
+export * from './components/CurrencyInput';
+export * from './components/CurrencyLabel';
+export * from './components/DateInput';
+export * from './components/DatePicker';
+export * from './components/Dropdown';
+export * from './components/DropdownMenu';
+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/MenuHeader';
+export * from './components/MenuItem';
+export * from './components/MenuSeparator';
+export * from './components/Modal';
+export * from './components/Paging';
+export * from './components/PasswordInput';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/ScrollContainer';
+export * from './components/Select';
+export * from './components/SidePage';
+export * from './components/Spinner';
+export * from './components/Sticky';
+export * from './components/Switcher';
+export * from './components/Tabs';
+export * from './components/Textarea';
+export * from './components/Toast';
+export * from './components/Toggle';
+export * from './components/Token';
+export * from './components/TokenInput';
+export * from './components/Tooltip';
+export * from './components/TooltipMenu';
+export * from './components/ResponsiveLayout';
+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/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 './internal/Popup/types';

package/cjs/index.js

@@ -0,0 +1,54 @@
+"use strict";exports.__esModule = true;var _Autocomplete = require("./components/Autocomplete");Object.keys(_Autocomplete).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Autocomplete[key]) return;exports[key] = _Autocomplete[key];});
+var _Button = require("./components/Button");Object.keys(_Button).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Button[key]) return;exports[key] = _Button[key];});
+var _Center = require("./components/Center");Object.keys(_Center).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Center[key]) return;exports[key] = _Center[key];});
+var _Checkbox = require("./components/Checkbox");Object.keys(_Checkbox).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Checkbox[key]) return;exports[key] = _Checkbox[key];});
+var _ComboBox = require("./components/ComboBox");Object.keys(_ComboBox).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ComboBox[key]) return;exports[key] = _ComboBox[key];});
+var _CurrencyInput = require("./components/CurrencyInput");Object.keys(_CurrencyInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CurrencyInput[key]) return;exports[key] = _CurrencyInput[key];});
+var _CurrencyLabel = require("./components/CurrencyLabel");Object.keys(_CurrencyLabel).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _CurrencyLabel[key]) return;exports[key] = _CurrencyLabel[key];});
+var _DateInput = require("./components/DateInput");Object.keys(_DateInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _DateInput[key]) return;exports[key] = _DateInput[key];});
+var _DatePicker = require("./components/DatePicker");Object.keys(_DatePicker).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _DatePicker[key]) return;exports[key] = _DatePicker[key];});
+var _Dropdown = require("./components/Dropdown");Object.keys(_Dropdown).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Dropdown[key]) return;exports[key] = _Dropdown[key];});
+var _DropdownMenu = require("./components/DropdownMenu");Object.keys(_DropdownMenu).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _DropdownMenu[key]) return;exports[key] = _DropdownMenu[key];});
+var _FileUploader = require("./components/FileUploader");Object.keys(_FileUploader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _FileUploader[key]) return;exports[key] = _FileUploader[key];});
+var _FxInput = require("./components/FxInput");Object.keys(_FxInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _FxInput[key]) return;exports[key] = _FxInput[key];});
+var _Gapped = require("./components/Gapped");Object.keys(_Gapped).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Gapped[key]) return;exports[key] = _Gapped[key];});
+var _GlobalLoader = require("./components/GlobalLoader");Object.keys(_GlobalLoader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _GlobalLoader[key]) return;exports[key] = _GlobalLoader[key];});
+var _Group = require("./components/Group");Object.keys(_Group).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Group[key]) return;exports[key] = _Group[key];});
+var _Hint = require("./components/Hint");Object.keys(_Hint).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Hint[key]) return;exports[key] = _Hint[key];});
+var _Input = require("./components/Input");Object.keys(_Input).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Input[key]) return;exports[key] = _Input[key];});
+var _Kebab = require("./components/Kebab");Object.keys(_Kebab).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Kebab[key]) return;exports[key] = _Kebab[key];});
+var _Link = require("./components/Link");Object.keys(_Link).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Link[key]) return;exports[key] = _Link[key];});
+var _Loader = require("./components/Loader");Object.keys(_Loader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Loader[key]) return;exports[key] = _Loader[key];});
+var _MenuHeader = require("./components/MenuHeader");Object.keys(_MenuHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MenuHeader[key]) return;exports[key] = _MenuHeader[key];});
+var _MenuItem = require("./components/MenuItem");Object.keys(_MenuItem).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MenuItem[key]) return;exports[key] = _MenuItem[key];});
+var _MenuSeparator = require("./components/MenuSeparator");Object.keys(_MenuSeparator).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MenuSeparator[key]) return;exports[key] = _MenuSeparator[key];});
+var _Modal = require("./components/Modal");Object.keys(_Modal).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Modal[key]) return;exports[key] = _Modal[key];});
+var _Paging = require("./components/Paging");Object.keys(_Paging).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Paging[key]) return;exports[key] = _Paging[key];});
+var _PasswordInput = require("./components/PasswordInput");Object.keys(_PasswordInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _PasswordInput[key]) return;exports[key] = _PasswordInput[key];});
+var _Radio = require("./components/Radio");Object.keys(_Radio).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Radio[key]) return;exports[key] = _Radio[key];});
+var _RadioGroup = require("./components/RadioGroup");Object.keys(_RadioGroup).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _RadioGroup[key]) return;exports[key] = _RadioGroup[key];});
+var _ScrollContainer = require("./components/ScrollContainer");Object.keys(_ScrollContainer).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ScrollContainer[key]) return;exports[key] = _ScrollContainer[key];});
+var _Select = require("./components/Select");Object.keys(_Select).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Select[key]) return;exports[key] = _Select[key];});
+var _SidePage = require("./components/SidePage");Object.keys(_SidePage).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SidePage[key]) return;exports[key] = _SidePage[key];});
+var _Spinner = require("./components/Spinner");Object.keys(_Spinner).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Spinner[key]) return;exports[key] = _Spinner[key];});
+var _Sticky = require("./components/Sticky");Object.keys(_Sticky).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Sticky[key]) return;exports[key] = _Sticky[key];});
+var _Switcher = require("./components/Switcher");Object.keys(_Switcher).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Switcher[key]) return;exports[key] = _Switcher[key];});
+var _Tabs = require("./components/Tabs");Object.keys(_Tabs).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Tabs[key]) return;exports[key] = _Tabs[key];});
+var _Textarea = require("./components/Textarea");Object.keys(_Textarea).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Textarea[key]) return;exports[key] = _Textarea[key];});
+var _Toast = require("./components/Toast");Object.keys(_Toast).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Toast[key]) return;exports[key] = _Toast[key];});
+var _Toggle = require("./components/Toggle");Object.keys(_Toggle).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Toggle[key]) return;exports[key] = _Toggle[key];});
+var _Token = require("./components/Token");Object.keys(_Token).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Token[key]) return;exports[key] = _Token[key];});
+var _TokenInput = require("./components/TokenInput");Object.keys(_TokenInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _TokenInput[key]) return;exports[key] = _TokenInput[key];});
+var _Tooltip = require("./components/Tooltip");Object.keys(_Tooltip).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Tooltip[key]) return;exports[key] = _Tooltip[key];});
+var _TooltipMenu = require("./components/TooltipMenu");Object.keys(_TooltipMenu).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _TooltipMenu[key]) return;exports[key] = _TooltipMenu[key];});
+var _ResponsiveLayout = require("./components/ResponsiveLayout");Object.keys(_ResponsiveLayout).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ResponsiveLayout[key]) return;exports[key] = _ResponsiveLayout[key];});
+var _locale = require("./lib/locale");Object.keys(_locale).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _locale[key]) return;exports[key] = _locale[key];});
+var _ThemeContext = require("./lib/theming/ThemeContext");Object.keys(_ThemeContext).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ThemeContext[key]) return;exports[key] = _ThemeContext[key];});
+var _ThemeFactory = require("./lib/theming/ThemeFactory");Object.keys(_ThemeFactory).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ThemeFactory[key]) return;exports[key] = _ThemeFactory[key];});
+var _DefaultTheme = require("./lib/theming/themes/DefaultTheme");Object.keys(_DefaultTheme).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _DefaultTheme[key]) return;exports[key] = _DefaultTheme[key];});
+var _DarkTheme = require("./lib/theming/themes/DarkTheme");Object.keys(_DarkTheme).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _DarkTheme[key]) return;exports[key] = _DarkTheme[key];});
+var _DefaultTheme8pxOld = require("./lib/theming/themes/DefaultTheme8pxOld");Object.keys(_DefaultTheme8pxOld).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _DefaultTheme8pxOld[key]) return;exports[key] = _DefaultTheme8pxOld[key];});
+var _FlatTheme8pxOld = require("./lib/theming/themes/FlatTheme8pxOld");Object.keys(_FlatTheme8pxOld).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _FlatTheme8pxOld[key]) return;exports[key] = _FlatTheme8pxOld[key];});
+var _Theme = require("./lib/theming/themes/Theme2022");Object.keys(_Theme).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Theme[key]) return;exports[key] = _Theme[key];});
+var _Theme2022Dark = require("./lib/theming/themes/Theme2022Dark");Object.keys(_Theme2022Dark).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Theme2022Dark[key]) return;exports[key] = _Theme2022Dark[key];});
+var _types = require("./internal/Popup/types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\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/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/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\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 './internal/Popup/types';\n"]}

package/cjs/internal/BGRuler.js

@@ -0,0 +1,130 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.BGRuler = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _getDOMRect = require("../lib/dom/getDOMRect");
+
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */var
+BGRuler = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(BGRuler, _React$Component);function BGRuler() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    iframe = null;_this.
+
+    componentDidMount = function () {
+      if (_this.iframe && _this.iframe.contentWindow) {
+        _this.iframe.contentWindow.addEventListener('resize', _this.update, true);
+      }
+      _this.update();
+    };_this.
+
+    componentWillUnmount = function () {
+      if (_this.iframe && _this.iframe.contentWindow) {
+        _this.iframe.contentWindow.removeEventListener('resize', _this.update, true);
+      }
+    };_this.
+
+    update = function () {
+      _this.forceUpdate();
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    iframeRef = function (ref) {
+      _this.iframe = ref;
+    };return _this;}var _proto = BGRuler.prototype;_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;var wrapper = { position: 'absolute', width: width, height: height, top: top, bottom: bottom, left: left, right: right, overflow: 'hidden' };var iframe = { position: 'absolute', width: '100%', height: '100%', border: 0, visibility: 'hidden' };var marks = { position: 'absolute', top: 0, left: 0, width: '100%', backgroundSize: '100px 20px', backgroundRepeat: 'repeat-x' };var highMarks = (0, _extends2.default)({}, marks, { height: '100%', backgroundImage: "linear-gradient(90deg, " + color + " 0, " + color + " 1px, transparent 1px)" });var middleMarks = (0, _extends2.default)({}, marks, { height: '75%', backgroundImage: "linear-gradient(90deg, transparent 0, transparent 49px, " + color + " 49px, " + color + " 50px, transparent 50px)" });var shortMarks = (0, _extends2.default)({}, marks, { height: '40%', 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 = (0, _getDOMRect.getDOMRect)(this.iframe).width;var labels = Array(Math.ceil(rulerWidth / 100) + 1).fill(null).map(function (value, index) {var label = { position: 'absolute', fontFamily: 'Arial', fontSize: 10, lineHeight: 1, color: color, bottom: -1, left: index * 100 + 5 };return /*#__PURE__*/_react.default.createElement("span", { key: index, style: label }, index * 100);});return /*#__PURE__*/_react.default.createElement("div", { style: wrapper }, /*#__PURE__*/_react.default.createElement("div", { style: highMarks }), /*#__PURE__*/_react.default.createElement("div", { style: middleMarks }), /*#__PURE__*/_react.default.createElement("div", { style: shortMarks }), labels, /*#__PURE__*/_react.default.createElement("iframe", { title: "BGRuler", style: iframe, ref: this.iframeRef }));};return BGRuler;}(_react.default.Component);exports.BGRuler = BGRuler;BGRuler.defaultProps = { height: 20, top: 0, left: 0, right: 0, color: '#333' };

package/cjs/internal/BGRuler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BGRuler.tsx"],"names":["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","labels","Array","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","React","Component","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../lib/dom/getDOMRect';\n\n/**\n * Компонент рисует пиксельную линейку на заднем фоне.\n * Помогает контролировать размеры элементов при скриншотном тестировании.\n *\n * @see FxInput/__stories__/FxInput.stories.tsx\n */\nexport class BGRuler extends React.Component<{\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  public static defaultProps = {\n    height: 20,\n    top: 0,\n    left: 0,\n    right: 0,\n    color: '#333',\n  };\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, height, color, top, bottom, left, right } = this.props;\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"]}