@skbkontur/react-ui 5.6.7 → 5.6.9-5e213.0

package/components/__stories__/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","css","line","_templateObject","_taggedTemplateLiteralLoose","title","_templateObject2","content","_templateObject3","formLineBreak","_templateObject4","actionsBar","_templateObject5","formWrapper","_templateObject6","FormLine","_ref","children","className","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","Line","_ref2","_excluded2","Title","_ref3","_excluded3","Content","_ref4","_excluded4","LineBreak","_ref5","_excluded5","ActionsBar","_ref6","_excluded6","Form","_React$Component","apply","arguments","_inheritsLoose","_proto","prototype","render","props","Component"],"sources":["Form.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@skbkontur/react-ui/lib/theming/Emotion';\n\nconst line = css`\n  display: flex;\n  align-items: baseline;\n  margin-bottom: 10px;\n`;\n\nconst title = css`\n  box-sizing: border-box;\n  margin-right: 10px;\n  width: 150px;\n  text-align: right;\n`;\n\nconst content = css`\n  display: inline-flex;\n`;\n\nconst formLineBreak = css`\n  height: 20px;\n`;\n\nconst actionsBar = css`\n  margin-top: 10px;\n  padding-left: 160px;\n`;\n\nconst formWrapper = css`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype ComponentProps = React.PropsWithChildren<React.HTMLAttributes<HTMLElement>>;\n\nconst FormLine = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Line = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Title = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <span className={css(title, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst Content = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <span className={css(content, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst LineBreak = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(formLineBreak, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst ActionsBar = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(actionsBar, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nexport class Form extends React.Component<ComponentProps> {\n  public static Line = Line;\n  public static LineBreak = LineBreak;\n  public static ActionsBar = ActionsBar;\n  public static FormLine = FormLine;\n  public static Title = Title;\n  public static Content = Content;\n\n  public render() {\n    return <div className={css(formWrapper, this.props.className)}>{this.props.children}</div>;\n  }\n}\n"],"mappings":"+pBAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,yCAAyC;;AAE7D,IAAMC,IAAI,GAAGD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,2BAAA,8EAIf;;;;;;AAED,IAAMC,KAAK,GAAGJ,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA,mGAKhB;;;;;;;AAED,IAAMG,OAAO,GAAGN,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA,mCAElB;;;;AAED,IAAMK,aAAa,GAAGR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA,2BAExB;;;;AAED,IAAMO,UAAU,GAAGV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA,uDAGrB;;;;;AAED,IAAMS,WAAW,GAAGZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA,uDAGtB;;;;;;;AAID,IAAMW,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAyD,KAAnDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC9C;IACErB,KAAA,CAAAsB,aAAA,QAAAC,QAAA,GAAKL,SAAS,EAAEjB,GAAG,CAACC,IAAI,EAAEgB,SAAS,CAAE,IAAKC,IAAI;IAC3CF;IACE,CAAC;;AAEV,CAAC;;AAED,IAAMO,IAAI,GAAG,SAAPA,IAAIA,CAAAC,KAAA,EAAyD,KAAnDR,QAAQ,GAAAQ,KAAA,CAARR,QAAQ,CAAEC,SAAS,GAAAO,KAAA,CAATP,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAAK,KAAA,EAAAC,UAAA;EAC1C;IACE1B,KAAA,CAAAsB,aAAA,QAAAC,QAAA,GAAKL,SAAS,EAAEjB,GAAG,CAACC,IAAI,EAAEgB,SAAS,CAAE,IAAKC,IAAI;IAC3CF;IACE,CAAC;;AAEV,CAAC;;AAED,IAAMU,KAAK,GAAG,SAARA,KAAKA,CAAAC,KAAA,EAAyD,KAAnDX,QAAQ,GAAAW,KAAA,CAARX,QAAQ,CAAEC,SAAS,GAAAU,KAAA,CAATV,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAAQ,KAAA,EAAAC,UAAA;EAC3C;IACE7B,KAAA,CAAAsB,aAAA,SAAAC,QAAA,GAAML,SAAS,EAAEjB,GAAG,CAACI,KAAK,EAAEa,SAAS,CAAE,IAAKC,IAAI;IAC7CF;IACG,CAAC;;AAEX,CAAC;;AAED,IAAMa,OAAO,GAAG,SAAVA,OAAOA,CAAAC,KAAA,EAAyD,KAAnDd,QAAQ,GAAAc,KAAA,CAARd,QAAQ,CAAEC,SAAS,GAAAa,KAAA,CAATb,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAAW,KAAA,EAAAC,UAAA;EAC7C;IACEhC,KAAA,CAAAsB,aAAA,SAAAC,QAAA,GAAML,SAAS,EAAEjB,GAAG,CAACM,OAAO,EAAEW,SAAS,CAAE,IAAKC,IAAI;IAC/CF;IACG,CAAC;;AAEX,CAAC;;AAED,IAAMgB,SAAS,GAAG,SAAZA,SAASA,CAAAC,KAAA,EAAyD,KAAnDjB,QAAQ,GAAAiB,KAAA,CAARjB,QAAQ,CAAEC,SAAS,GAAAgB,KAAA,CAAThB,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAAc,KAAA,EAAAC,UAAA;EAC/C;IACEnC,KAAA,CAAAsB,aAAA,QAAAC,QAAA,GAAKL,SAAS,EAAEjB,GAAG,CAACQ,aAAa,EAAES,SAAS,CAAE,IAAKC,IAAI;IACpDF;IACE,CAAC;;AAEV,CAAC;;AAED,IAAMmB,UAAU,GAAG,SAAbA,UAAUA,CAAAC,KAAA,EAAyD,KAAnDpB,QAAQ,GAAAoB,KAAA,CAARpB,QAAQ,CAAEC,SAAS,GAAAmB,KAAA,CAATnB,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAAiB,KAAA,EAAAC,UAAA;EAChD;IACEtC,KAAA,CAAAsB,aAAA,QAAAC,QAAA,GAAKL,SAAS,EAAEjB,GAAG,CAACU,UAAU,EAAEO,SAAS,CAAE,IAAKC,IAAI;IACjDF;IACE,CAAC;;AAEV,CAAC;;AAED,WAAasB,IAAI,0BAAAC,gBAAA,YAAAD,KAAA,UAAAC,gBAAA,CAAAC,KAAA,OAAAC,SAAA,WAAAC,cAAA,CAAAJ,IAAA,EAAAC,gBAAA,MAAAI,MAAA,GAAAL,IAAA,CAAAM,SAAA,CAAAD,MAAA;;;;;;;;EAQRE,MAAM,GAAb,SAAAA,OAAA,EAAgB;IACd,oBAAO9C,KAAA,CAAAsB,aAAA,UAAKJ,SAAS,EAAEjB,GAAG,CAACY,WAAW,EAAE,IAAI,CAACkC,KAAK,CAAC7B,SAAS,CAAE,IAAE,IAAI,CAAC6B,KAAK,CAAC9B,QAAc,CAAC;EAC5F,CAAC,QAAAsB,IAAA,GAVuBvC,KAAK,CAACgD,SAAS,EAA5BT,IAAI,CACDf,IAAI,GAAGA,IAAI,CADde,IAAI,CAEDN,SAAS,GAAGA,SAAS,CAFxBM,IAAI,CAGDH,UAAU,GAAGA,UAAU,CAH1BG,IAAI,CAIDxB,QAAQ,GAAGA,QAAQ,CAJtBwB,IAAI,CAKDZ,KAAK,GAAGA,KAAK,CALhBY,IAAI,CAMDT,OAAO,GAAGA,OAAO","ignoreList":[]}
+{"version":3,"names":["React","css","line","_templateObject","_taggedTemplateLiteral","title","_templateObject2","content","_templateObject3","formLineBreak","_templateObject4","actionsBar","_templateObject5","formWrapper","_templateObject6","FormLine","_ref","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","Line","_ref2","_excluded2","Title","_ref3","_excluded3","Content","_ref4","_excluded4","LineBreak","_ref5","_excluded5","ActionsBar","_ref6","_excluded6","Form","_React$Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","props","Component"],"sources":["Form.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@skbkontur/react-ui/lib/theming/Emotion';\n\nconst line = css`\n  display: flex;\n  align-items: baseline;\n  margin-bottom: 10px;\n`;\n\nconst title = css`\n  box-sizing: border-box;\n  margin-right: 10px;\n  width: 150px;\n  text-align: right;\n`;\n\nconst content = css`\n  display: inline-flex;\n`;\n\nconst formLineBreak = css`\n  height: 20px;\n`;\n\nconst actionsBar = css`\n  margin-top: 10px;\n  padding-left: 160px;\n`;\n\nconst formWrapper = css`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype ComponentProps = React.PropsWithChildren<React.HTMLAttributes<HTMLElement>>;\n\nconst FormLine = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Line = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Title = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <span className={css(title, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst Content = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <span className={css(content, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst LineBreak = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(formLineBreak, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst ActionsBar = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(actionsBar, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nexport class Form extends React.Component<ComponentProps> {\n  public static Line = Line;\n  public static LineBreak = LineBreak;\n  public static ActionsBar = ActionsBar;\n  public static FormLine = FormLine;\n  public static Title = Title;\n  public static Content = Content;\n\n  public render() {\n    return <div className={css(formWrapper, this.props.className)}>{this.props.children}</div>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/hooks/useDrop/useDrop.js

@@ -1,17 +1,16 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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;
+export var useDrop = function useDrop() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var onDrop = props.onDrop;
   var droppableRef = useRef(null);
   var overRef = useRef(false);
   var timerId = useRef();
   var _useState = useState(false),
-    isDraggable = _useState[0],
-    setIsDraggable = _useState[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggable = _useState2[0],
+    setIsDraggable = _useState2[1];
   var clearTimer = useCallback(function () {
     timerId.current && globalObject.clearTimeout(timerId.current);
   }, []);
@@ -32,7 +31,7 @@ export var useDrop = function useDrop(props) {
     preventDefault(event);
     setIsDraggable(false);
     overRef.current = false;
-    onDrop == null || onDrop(event);
+    onDrop === null || onDrop === void 0 || onDrop(event);
   }, [preventDefault, onDrop]);
   useEffect(function () {
     var ref = droppableRef.current;

package/hooks/useDrop/useDrop.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useRef","useState","globalObject","useDrop","props","_props","onDrop","droppableRef","overRef","timerId","_useState","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","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,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEhE,SAASC,YAAY,QAAQ,0BAA0B;;;;;;;;;;;;;AAavD,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAA2CC,KAAoB,EAAoC,KAAxDA,KAAoB,cAApBA,KAAoB,GAAG,CAAC,CAAC;EACtF,IAAAC,MAAA,GAAmBD,KAAK,CAAhBE,MAAM,GAAAD,MAAA,CAANC,MAAM;;EAEd,IAAMC,YAAY,GAAGP,MAAM,CAAW,IAAI,CAAC;EAC3C,IAAMQ,OAAO,GAAGR,MAAM,CAAU,KAAK,CAAC;EACtC,IAAMS,OAAO,GAAGT,MAAM,CAAY,CAAC;EACnC,IAAAU,SAAA,GAAsCT,QAAQ,CAAU,KAAK,CAAC,CAAvDU,WAAW,GAAAD,SAAA,IAAEE,cAAc,GAAAF,SAAA;;EAElC,IAAMG,UAAU,GAAGf,WAAW,CAAC,YAAM;IACnCW,OAAO,CAACK,OAAO,IAAIZ,YAAY,CAACa,YAAY,CAACN,OAAO,CAACK,OAAO,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAME,cAAc,GAAGlB,WAAW;IAChC,UAACmB,KAAgB,EAAK;MACpBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBN,cAAc,CAAC,IAAI,CAAC;;MAEpBC,UAAU,CAAC,CAAC;MACZJ,OAAO,CAACK,OAAO,GAAGZ,YAAY,CAACiB,UAAU,CAAC,YAAM;QAC9CX,OAAO,CAACM,OAAO,GAAG,KAAK;QACvBF,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IACD,CAACC,UAAU;EACb,CAAC;;EAED,IAAMK,cAAc,GAAGpB,WAAW,CAAC,UAACmB,KAAgB,EAAK;IACvDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACG,eAAe,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMC,UAAU,GAAGvB,WAAW;IAC5B,UAACmB,KAAgB,EAAK;MACpBC,cAAc,CAACD,KAAK,CAAC;MACrBL,cAAc,CAAC,KAAK,CAAC;MACrBJ,OAAO,CAACM,OAAO,GAAG,KAAK;;MAEvBR,MAAM,YAANA,MAAM,CAAGW,KAAK,CAAC;IACjB,CAAC;IACD,CAACC,cAAc,EAAEZ,MAAM;EACzB,CAAC;;EAEDP,SAAS,CAAC,YAAM;IACd,IAAMuB,GAAG,GAAGf,YAAY,CAACO,OAAO;;IAEhC,IAAI,CAACQ,GAAG,EAAE;MACR;IACF;;IAEAA,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,UAAU,EAAEP,cAAc,CAAC;IAChDM,GAAG,CAACC,gBAAgB,CAAC,MAAM,EAAEF,UAAU,CAAC;;IAExC,OAAO,YAAM;MACXC,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,UAAU,EAAER,cAAc,CAAC;MACnDM,GAAG,CAACE,mBAAmB,CAAC,MAAM,EAAEH,UAAU,CAAC;IAC7C,CAAC;EACH,CAAC,EAAE,CAACA,UAAU,EAAEL,cAAc,EAAEE,cAAc,CAAC,CAAC;;EAEhD,OAAO,EAAEP,WAAW,EAAXA,WAAW,EAAEW,GAAG,EAAEf,YAAY,CAAC,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useRef","useState","globalObject","useDrop","props","arguments","length","undefined","onDrop","droppableRef","overRef","timerId","_useState","_useState2","_slicedToArray","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","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,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEhE,SAASC,YAAY,QAAQ,0BAA0B;;;;;;;;;;;;;AAavD,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAmG,KAAxDC,KAAoB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EACtF,IAAQG,MAAM,GAAKJ,KAAK,CAAhBI,MAAM;;EAEd,IAAMC,YAAY,GAAGT,MAAM,CAAW,IAAI,CAAC;EAC3C,IAAMU,OAAO,GAAGV,MAAM,CAAU,KAAK,CAAC;EACtC,IAAMW,OAAO,GAAGX,MAAM,CAAY,CAAC;EACnC,IAAAY,SAAA,GAAsCX,QAAQ,CAAU,KAAK,CAAC,CAAAY,UAAA,GAAAC,cAAA,CAAAF,SAAA,KAAvDG,WAAW,GAAAF,UAAA,IAAEG,cAAc,GAAAH,UAAA;;EAElC,IAAMI,UAAU,GAAGnB,WAAW,CAAC,YAAM;IACnCa,OAAO,CAACO,OAAO,IAAIhB,YAAY,CAACiB,YAAY,CAACR,OAAO,CAACO,OAAO,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAME,cAAc,GAAGtB,WAAW;IAChC,UAACuB,KAAgB,EAAK;MACpBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBN,cAAc,CAAC,IAAI,CAAC;;MAEpBC,UAAU,CAAC,CAAC;MACZN,OAAO,CAACO,OAAO,GAAGhB,YAAY,CAACqB,UAAU,CAAC,YAAM;QAC9Cb,OAAO,CAACQ,OAAO,GAAG,KAAK;QACvBF,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IACD,CAACC,UAAU;EACb,CAAC;;EAED,IAAMK,cAAc,GAAGxB,WAAW,CAAC,UAACuB,KAAgB,EAAK;IACvDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACG,eAAe,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMC,UAAU,GAAG3B,WAAW;IAC5B,UAACuB,KAAgB,EAAK;MACpBC,cAAc,CAACD,KAAK,CAAC;MACrBL,cAAc,CAAC,KAAK,CAAC;MACrBN,OAAO,CAACQ,OAAO,GAAG,KAAK;;MAEvBV,MAAM,aAANA,MAAM,eAANA,MAAM,CAAGa,KAAK,CAAC;IACjB,CAAC;IACD,CAACC,cAAc,EAAEd,MAAM;EACzB,CAAC;;EAEDT,SAAS,CAAC,YAAM;IACd,IAAM2B,GAAG,GAAGjB,YAAY,CAACS,OAAO;;IAEhC,IAAI,CAACQ,GAAG,EAAE;MACR;IACF;;IAEAA,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,UAAU,EAAEP,cAAc,CAAC;IAChDM,GAAG,CAACC,gBAAgB,CAAC,MAAM,EAAEF,UAAU,CAAC;;IAExC,OAAO,YAAM;MACXC,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,UAAU,EAAER,cAAc,CAAC;MACnDM,GAAG,CAACE,mBAAmB,CAAC,MAAM,EAAEH,UAAU,CAAC;IAC7C,CAAC;EACH,CAAC,EAAE,CAACA,UAAU,EAAEL,cAAc,EAAEE,cAAc,CAAC,CAAC;;EAEhD,OAAO,EAAEP,WAAW,EAAXA,WAAW,EAAEW,GAAG,EAAEjB,YAAY,CAAC,CAAC;AAC3C,CAAC","ignoreList":[]}

package/internal/BGRuler/BGRuler.js

@@ -1,5 +1,13 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import { getDOMRect } from "../../lib/dom/getDOMRect";
 import { createPropsGetter } from "../../lib/createPropsGetter";
@@ -13,10 +21,11 @@ import { createPropsGetter } from "../../lib/createPropsGetter";
 export var BGRuler = /*#__PURE__*/function (_React$Component) {
   function BGRuler() {
     var _this;
+    _classCallCheck(this, BGRuler);
     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 = _callSuper(this, BGRuler, [].concat(args));
     _this.getProps = createPropsGetter(BGRuler.defaultProps);
     _this.iframe = null;
     _this.componentDidMount = function () {
@@ -38,86 +47,87 @@ export var BGRuler = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-  _inheritsLoose(BGRuler, _React$Component);
-  var _proto = BGRuler.prototype;
-  _proto.render = function render() {
-    var _this$props = this.props,
-      width = _this$props.width,
-      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,
-      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 = _extends({}, marks, {
-      height: '100%',
-      backgroundImage: "linear-gradient(90deg, " + color + " 0, " + color + " 1px, transparent 1px)"
-    });
-    var middleMarks = _extends({}, marks, {
-      height: '75%',
-      backgroundImage: "linear-gradient(90deg, transparent 0, transparent 49px, " + color + " 49px, " + color + " 50px, transparent 50px)"
-    });
-    var shortMarks = _extends({}, 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 = getDOMRect(this.iframe).width;
-    var labels = Array(Math.ceil(rulerWidth / 100) + 1).fill(null).map(function (value, index) {
-      var label = {
+  _inherits(BGRuler, _React$Component);
+  return _createClass(BGRuler, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        width = _this$props.width,
+        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,
+        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',
-        fontFamily: 'Arial',
-        fontSize: 10,
-        lineHeight: 1,
-        color: color,
-        bottom: -1,
-        left: index * 100 + 5
+        top: 0,
+        left: 0,
+        width: '100%',
+        backgroundSize: '100px 20px',
+        backgroundRepeat: 'repeat-x'
       };
-      return /*#__PURE__*/React.createElement("span", {
-        key: index,
-        style: label
-      }, index * 100);
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      style: wrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      style: highMarks
-    }), /*#__PURE__*/React.createElement("div", {
-      style: middleMarks
-    }), /*#__PURE__*/React.createElement("div", {
-      style: shortMarks
-    }), labels, /*#__PURE__*/React.createElement("iframe", {
-      title: "BGRuler",
-      style: iframe,
-      ref: this.iframeRef
-    }));
-  };
-  return BGRuler;
+      var highMarks = _objectSpread(_objectSpread({}, marks), {}, {
+        height: '100%',
+        backgroundImage: "linear-gradient(90deg, ".concat(color, " 0, ").concat(color, " 1px, transparent 1px)")
+      });
+      var middleMarks = _objectSpread(_objectSpread({}, marks), {}, {
+        height: '75%',
+        backgroundImage: "linear-gradient(90deg, transparent 0, transparent 49px, ".concat(color, " 49px, ").concat(color, " 50px, transparent 50px)")
+      });
+      var shortMarks = _objectSpread(_objectSpread({}, marks), {}, {
+        height: '40%',
+        backgroundImage: "\n        linear-gradient(90deg, transparent 0, transparent 9px, ".concat(color, " 9px, ").concat(color, " 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, ").concat(color, " 19px, ").concat(color, " 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, ").concat(color, " 29px, ").concat(color, " 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, ").concat(color, " 39px, ").concat(color, " 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, ").concat(color, " 59px, ").concat(color, " 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, ").concat(color, " 69px, ").concat(color, " 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, ").concat(color, " 79px, ").concat(color, " 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, ").concat(color, " 89px, ").concat(color, " 90px, transparent 90px)\n      ")
+      });
+      var rulerWidth = 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.createElement("span", {
+          key: index,
+          style: label
+        }, index * 100);
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        style: wrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        style: highMarks
+      }), /*#__PURE__*/React.createElement("div", {
+        style: middleMarks
+      }), /*#__PURE__*/React.createElement("div", {
+        style: shortMarks
+      }), labels, /*#__PURE__*/React.createElement("iframe", {
+        title: "BGRuler",
+        style: iframe,
+        ref: this.iframeRef
+      }));
+    }
+  }]);
 }(React.Component);
 BGRuler.defaultProps = {
   height: 20,

package/internal/BGRuler/BGRuler.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getDOMRect","createPropsGetter","BGRuler","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","_inheritsLoose","_proto","prototype","render","_this$props","props","width","bottom","_this$getProps","height","top","left","right","color","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","_extends","backgroundImage","middleMarks","shortMarks","rulerWidth","labels","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","createElement","key","style","title","Component"],"sources":["BGRuler.tsx"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","getDOMRect","createPropsGetter","BGRuler","_React$Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","getProps","defaultProps","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","_inherits","_createClass","key","value","render","_this$props","props","width","bottom","_this$getProps","height","top","left","right","color","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","_objectSpread","backgroundImage","middleMarks","shortMarks","rulerWidth","labels","Math","ceil","fill","map","index","label","fontFamily","fontSize","lineHeight","createElement","style","title","Component"],"sources":["BGRuler.tsx"],"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"],"mappings":"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","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["size", "style", "data-tid"];
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
@@ -14,7 +15,7 @@ export var ClearCrossIcon = function ClearCrossIcon(_ref) {
     size = _ref$size === void 0 ? 'small' : _ref$size,
     style = _ref.style,
     dataTid = _ref['data-tid'],
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var theme = React.useContext(ThemeContext);
   var getSizeClassNames = function getSizeClassNames(size) {
     switch (size) {
@@ -37,11 +38,13 @@ export var ClearCrossIcon = function ClearCrossIcon(_ref) {
     }
   };
   var _React$useState = React.useState(false),
-    focusedByTab = _React$useState[0],
-    setFocusedByTab = _React$useState[1];
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedByTab = _React$useState2[0],
+    setFocusedByTab = _React$useState2[1];
   var handleFocus = function handleFocus() {
+    var _globalObject$request;
     // focus event fires before keyDown eventlistener so we should check tabPressed in async way
-    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+    (_globalObject$request = globalObject.requestAnimationFrame) === null || _globalObject$request === void 0 || _globalObject$request.call(globalObject, function () {
       if (keyListener.isTabPressed) {
         setFocusedByTab(true);
       }

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

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","CommonWrapper","styles","CrossIcon","ClearCrossIcon","_ref","_ref$size","size","style","dataTid","rest","_objectWithoutPropertiesLoose","_excluded","theme","useContext","getSizeClassNames","button","clearCrossLarge","span","relativeWidthLarge","clearCrossMedium","relativeWidthMedium","clearCrossSmall","relativeWidthSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","createElement","className","_extends","type","tabIndex","root","focus","onFocus","onBlur","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  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(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      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\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            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","CommonWrapper","styles","CrossIcon","ClearCrossIcon","_ref","_ref$size","size","style","dataTid","rest","_objectWithoutProperties","_excluded","theme","useContext","getSizeClassNames","button","clearCrossLarge","span","relativeWidthLarge","clearCrossMedium","relativeWidthMedium","clearCrossSmall","relativeWidthSmall","_React$useState","useState","_React$useState2","_slicedToArray","focusedByTab","setFocusedByTab","handleFocus","_globalObject$request","requestAnimationFrame","call","isTabPressed","handleBlur","createElement","className","_extends","type","tabIndex","root","focus","onFocus","onBlur","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  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(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      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\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            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,30 +1,30 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
 export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor, t.clearCrossIconAlign, t.inputBorderWidth, t.inputBorderWidth);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor, t.clearCrossIconAlign, t.inputBorderWidth, t.inputBorderWidth);
   },
   focus: function focus(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.clearCrossIconHoverColor);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), t.clearCrossIconHoverColor);
   },
   clearCrossSmall: function clearCrossSmall(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconBorderRadiusSmall);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconBorderRadiusSmall);
   },
   clearCrossMedium: function clearCrossMedium(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconBorderRadiusMedium);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconBorderRadiusMedium);
   },
   clearCrossLarge: function clearCrossLarge(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconBorderRadiusLarge);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconBorderRadiusLarge);
   },
   relativeWidthSmall: function relativeWidthSmall(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeSmall);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeSmall);
   },
   relativeWidthMedium: function relativeWidthMedium(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeMedium);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeMedium);
   },
   relativeWidthLarge: function relativeWidthLarge(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeLarge);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeLarge);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","resetButton","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","clearCrossIconAlign","inputBorderWidth","focus","_templateObject2","clearCrossSmall","_templateObject3","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","_templateObject4","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","_templateObject5","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconBorderRadiusLarge","relativeWidthSmall","_templateObject6","inputIconSizeSmall","relativeWidthMedium","_templateObject7","inputIconSizeMedium","relativeWidthLarge","_templateObject8","inputIconSizeLarge"],"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: ${t.clearCrossIconAlign};\n      align-items: center;\n      position: absolute;\n      right: -${t.inputBorderWidth};\n      top: -${t.inputBorderWidth};\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      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n  relativeWidthSmall(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeSmall};\n    `;\n  },\n  relativeWidthMedium(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeMedium};\n    `;\n  },\n  relativeWidthLarge(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeLarge};\n    `;\n  },\n});\n"],"mappings":"kPAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACNL,WAAW,CAAC,CAAC;IACNG,CAAC,CAACG,mBAAmB;;IAEVH,CAAC,CAACI,kBAAkB,EAAIJ,CAAC,CAACK,wBAAwB;;IAE3DL,CAAC,CAACM,wBAAwB;;;IAGlBN,CAAC,CAACO,mBAAmB;;;IAG9BP,CAAC,CAACQ,gBAAgB;IACpBR,CAAC,CAACQ,gBAAgB;;EAE9B,CAAC;;EAEDC,KAAK,WAAAA,MAACT,CAAQ,EAAE;IACd,OAAOL,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACCF,CAAC,CAACM,wBAAwB;;EAEvC,CAAC;;EAEDK,eAAe,WAAAA,gBAACX,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;IACCF,CAAC,CAACa,wBAAwB;IACzBb,CAAC,CAACc,yBAAyB;IACpBd,CAAC,CAACe,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAAChB,CAAQ,EAAE;IACzB,OAAOL,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;IACCF,CAAC,CAACkB,yBAAyB;IAC1BlB,CAAC,CAACmB,0BAA0B;IACrBnB,CAAC,CAACoB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACrB,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACCF,CAAC,CAACuB,wBAAwB;IACzBvB,CAAC,CAACwB,yBAAyB;IACpBxB,CAAC,CAACyB,+BAA+B;;EAEtD,CAAC;EACDC,kBAAkB,WAAAA,mBAAC1B,CAAQ,EAAE;IAC3B,OAAOL,GAAG,CAAAgC,gBAAA,KAAAA,gBAAA,GAAAzB,2BAAA;;IAECF,CAAC,CAAC4B,kBAAkB;;EAEjC,CAAC;EACDC,mBAAmB,WAAAA,oBAAC7B,CAAQ,EAAE;IAC5B,OAAOL,GAAG,CAAAmC,gBAAA,KAAAA,gBAAA,GAAA5B,2BAAA;;IAECF,CAAC,CAAC+B,mBAAmB;;EAElC,CAAC;EACDC,kBAAkB,WAAAA,mBAAChC,CAAQ,EAAE;IAC3B,OAAOL,GAAG,CAAAsC,gBAAA,KAAAA,gBAAA,GAAA/B,2BAAA;;IAECF,CAAC,CAACkC,kBAAkB;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","resetButton","styles","root","t","_templateObject","_taggedTemplateLiteral","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","clearCrossIconAlign","inputBorderWidth","focus","_templateObject2","clearCrossSmall","_templateObject3","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","_templateObject4","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","_templateObject5","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconBorderRadiusLarge","relativeWidthSmall","_templateObject6","inputIconSizeSmall","relativeWidthMedium","_templateObject7","inputIconSizeMedium","relativeWidthLarge","_templateObject8","inputIconSizeLarge"],"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: ${t.clearCrossIconAlign};\n      align-items: center;\n      position: absolute;\n      right: -${t.inputBorderWidth};\n      top: -${t.inputBorderWidth};\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      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n  relativeWidthSmall(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeSmall};\n    `;\n  },\n  relativeWidthMedium(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeMedium};\n    `;\n  },\n  relativeWidthLarge(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeLarge};\n    `;\n  },\n});\n"],"mappings":"wOAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,sBAAA;IACNL,WAAW,CAAC,CAAC;IACNG,CAAC,CAACG,mBAAmB;;IAEVH,CAAC,CAACI,kBAAkB,EAAIJ,CAAC,CAACK,wBAAwB;;IAE3DL,CAAC,CAACM,wBAAwB;;;IAGlBN,CAAC,CAACO,mBAAmB;;;IAG9BP,CAAC,CAACQ,gBAAgB;IACpBR,CAAC,CAACQ,gBAAgB;;EAE9B,CAAC;;EAEDC,KAAK,WAAAA,MAACT,CAAQ,EAAE;IACd,OAAOL,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAR,sBAAA;IACCF,CAAC,CAACM,wBAAwB;;EAEvC,CAAC;;EAEDK,eAAe,WAAAA,gBAACX,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA;IACCF,CAAC,CAACa,wBAAwB;IACzBb,CAAC,CAACc,yBAAyB;IACpBd,CAAC,CAACe,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAAChB,CAAQ,EAAE;IACzB,OAAOL,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAAf,sBAAA;IACCF,CAAC,CAACkB,yBAAyB;IAC1BlB,CAAC,CAACmB,0BAA0B;IACrBnB,CAAC,CAACoB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACrB,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,sBAAA;IACCF,CAAC,CAACuB,wBAAwB;IACzBvB,CAAC,CAACwB,yBAAyB;IACpBxB,CAAC,CAACyB,+BAA+B;;EAEtD,CAAC;EACDC,kBAAkB,WAAAA,mBAAC1B,CAAQ,EAAE;IAC3B,OAAOL,GAAG,CAAAgC,gBAAA,KAAAA,gBAAA,GAAAzB,sBAAA;;IAECF,CAAC,CAAC4B,kBAAkB;;EAEjC,CAAC;EACDC,mBAAmB,WAAAA,oBAAC7B,CAAQ,EAAE;IAC5B,OAAOL,GAAG,CAAAmC,gBAAA,KAAAA,gBAAA,GAAA5B,sBAAA;;IAECF,CAAC,CAAC+B,mBAAmB;;EAElC,CAAC;EACDC,kBAAkB,WAAAA,mBAAChC,CAAQ,EAAE;IAC3B,OAAOL,GAAG,CAAAsC,gBAAA,KAAAA,gBAAA,GAAA/B,sBAAA;;IAECF,CAAC,CAACkC,kBAAkB;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
@@ -21,19 +23,21 @@ export var CloseButtonIcon = function CloseButtonIcon(_ref) {
     _ref$tabbable = _ref.tabbable,
     tabbable = _ref$tabbable === void 0 ? true : _ref$tabbable,
     style = _ref.style,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _theme = React.useContext(ThemeContext);
   var theme = ThemeFactory.create({
-    closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
-    closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor
+    closeBtnIconColor: color !== null && color !== void 0 ? color : _theme.closeBtnIconColor,
+    closeBtnIconHoverColor: colorHover !== null && colorHover !== void 0 ? colorHover : _theme.closeBtnIconHoverColor
   }, _theme);
   var _React$useState = React.useState(false),
-    focusedByTab = _React$useState[0],
-    setFocusedByTab = _React$useState[1];
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedByTab = _React$useState2[0],
+    setFocusedByTab = _React$useState2[1];
   var handleFocus = function handleFocus() {
+    var _globalObject$request;
     // focus event fires before keyDown eventlistener
     // so we should check tabPressed in async way
-    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+    (_globalObject$request = globalObject.requestAnimationFrame) === null || _globalObject$request === void 0 || _globalObject$request.call(globalObject, function () {
       if (keyListener.isTabPressed) {
         setFocusedByTab(true);
       }
@@ -48,7 +52,7 @@ export var CloseButtonIcon = function CloseButtonIcon(_ref) {
     React.createElement("button", _extends({
       tabIndex: tabIndex,
       className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)),
-      style: _extends({}, style, {
+      style: _objectSpread(_objectSpread({}, style), {}, {
         width: side,
         height: side
       }),

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

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","styles","CrossIcon","CloseButtonIcon","_ref","_ref$side","side","_ref$size","size","color","colorHover","_ref$tabbable","tabbable","style","rest","_objectWithoutPropertiesLoose","_excluded","_theme","useContext","theme","create","closeBtnIconColor","closeBtnIconHoverColor","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","createElement","_extends","className","root","focus","rootDisabled","width","height","onFocus","onBlur","wrapper","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":[]}
+{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","styles","CrossIcon","CloseButtonIcon","_ref","_ref$side","side","_ref$size","size","color","colorHover","_ref$tabbable","tabbable","style","rest","_objectWithoutProperties","_excluded","_theme","useContext","theme","create","closeBtnIconColor","closeBtnIconHoverColor","_React$useState","useState","_React$useState2","_slicedToArray","focusedByTab","setFocusedByTab","handleFocus","_globalObject$request","requestAnimationFrame","call","isTabPressed","handleBlur","tabIndex","disabled","createElement","_extends","className","root","focus","rootDisabled","_objectSpread","width","height","onFocus","onBlur","wrapper","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":[]}