@vkontakte/vkui 6.1.0 → 6.1.2

package/dist/cjs/components/FocusTrap/FocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusableNodesRef = React.useRef<HTMLElement[]>([]);\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n\n      const nodes: HTMLElement[] = [];\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {\n        const { display, visibility } = getComputedStyle(focusableEl);\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl);\n        }\n      });\n\n      if (nodes.length === 0) {\n        // Чтобы фокус был хотя бы на родителе\n        nodes.push(ref.current);\n      }\n\n      focusableNodesRef.current = nodes;\n    },\n    [children],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","keyboardInput","React","useContext","AppRootContext","focusableNodesRef","useRef","useIsomorphicLayoutEffect","collectFocusableNodesRef","current","nodes","querySelectorAll","forEach","focusableEl","display","visibility","getComputedStyle","push","length","tryToAutoFocusToFirstNode","autoFocusToFirstNode","activeElement","getActiveElementByAnotherElement","contains","focus","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","document","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useContext, useRef } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const { keyboardInput } = useContext(AppRootContext);\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","keyboardInput","useContext","AppRootContext","focusableNodesRef","useRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;uBA5ByC;8BACzB;+BAC6B;qBAOnD;2CACmC;gCAEX;AAE/B,MAAMC,qBAA6BC,sCAAuB,CAACC,IAAI;AAcxD,MAAMH,YAAY;QAAsC,EAC7DI,YAAY,KAAK,EACjBC,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,UAAU,CAAC,EACXC,UAAU,EACVC,QAAQ,EAEU,WADfC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,MAAMC,IAAAA,0BAAY,EAAIJ;IAC5B,MAAM,EAAEK,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3B,MAAM,EAAEC,aAAa,EAAE,GAAGC,IAAAA,iBAAU,EAACC,8BAAc;IACnD,MAAMC,oBAAoBC,IAAAA,aAAM,EAAgB,EAAE;IAElD,MAAMC,mBAAmB,CAACC;QACxB,MAAMC,UAAUJ,kBAAkBK,OAAO,CAACF,UAAU;QAEpD,IAAIC,SAAS;YACXA,QAAQE,KAAK;QACf;IACF;IAEA,MAAMC,+BAA+B,CAACC;QACpC,oDAAoD;QACpD,MAAMC,uBAAuBD,WAAWE,gBAAgB,CAAc5B;QAEtE,MAAM6B,QAAuB,EAAE;QAC/BF,qBAAqBG,OAAO,CAAC,CAACC;YAC5B,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,iBAAiBH;YACjD,IAAIC,YAAY,UAAUC,eAAe,UAAU;gBACjDJ,MAAMM,IAAI,CAACJ;YACb;QACF;QAEA,IAAIF,MAAMO,MAAM,KAAK,GAAG;YACtB,sCAAsC;YACtCP,MAAMM,IAAI,CAACT;QACb;QACAR,kBAAkBK,OAAO,GAAGM;IAC9B;IAEA,MAAMQ,wBAAwB,CAACX;QAC7BD,6BAA6BC;QAE7B,IAAIb,UAAU;YACZ,MAAMyB,gBAAgBzB,SAASyB,aAAa;YAC5C,MAAMC,sBAAsBC,KAAKC,GAAG,CAClC5B,SAASyB,aAAa,GAAGpB,kBAAkBK,OAAO,CAACmB,OAAO,CAACJ,iBAAiB,CAAC,GAC7E;YAEFlB,iBAAiBmB;QACnB;IACF;IAEAI,IAAAA,oDAAyB,EACvB,SAASC;QACP,IAAI,CAACjC,IAAIY,OAAO,EAAE;YAChB;QACF;QACA,MAAMG,aAAaf,IAAIY,OAAO;QAC9B,MAAMsB,WAAW,IAAIC,iBAAiB,IAAMT,sBAAsBX;QAClEmB,SAASE,OAAO,CAACpC,IAAIY,OAAO,EAAE;YAC5ByB,SAAS;YACTC,WAAW;QACb;QACAxB,6BAA6BC;QAC7B,OAAO,IAAMmB,SAASK,UAAU;IAClC,GACA;QAACvC;KAAI;IAGPgC,IAAAA,oDAAyB,EACvB,SAASQ;QACP,IAAI,CAACxC,IAAIY,OAAO,IAAI,CAAClB,aAAa,CAACU,eAAe;YAChD;QACF;QACA,MAAMqC,uBAAuB;YAC3B,IAAI,CAACzC,IAAIY,OAAO,IAAI,CAACL,kBAAkBK,OAAO,CAACa,MAAM,EAAE;gBACrD;YACF;YACA,MAAME,gBAAgBe,IAAAA,qCAAgC,EAAC1C,IAAIY,OAAO;YAClE,IAAI,CAAC+B,IAAAA,aAAQ,EAAC3C,IAAIY,OAAO,EAAEe,gBAAgB;gBACzCpB,kBAAkBK,OAAO,CAAC,EAAE,CAACC,KAAK;YACpC;QACF;QACA,MAAM+B,YAAYC,WAAWJ,sBAAsB7C;QACnD,OAAO;YACLkD,aAAaF;QACf;IACF,GACA;QAAClD;QAAWE;QAASQ;KAAc;IAGrC4B,IAAAA,oDAAyB,EACvB,SAASe;QACP,IAAI,CAAC/C,IAAIY,OAAO,IAAI,CAACjB,cAAc;YACjC;QACF;QAEA,MAAMqD,iBAAiBN,IAAAA,qCAAgC,EAAC1C,IAAIY,OAAO;QAEnE,OAAO;YACL,MAAMqC,qBACJ,OAAOtD,iBAAiB,aAAaA,iBAAiBA;YAExD,IAAI,CAACsD,sBAAsB,CAACC,IAAAA,kBAAa,EAACF,iBAAiB;gBACzD;YACF;YAEAH,WAAW;gBACT,IAAIG,gBAAgB;oBAClBA,eAAenC,KAAK;gBACtB;YACF,GAAGjB;QACL;IACF,GACA;QAACD;QAAcC;KAAQ;IAGzBoC,IAAAA,oDAAyB,EAAC;QACxB,IAAI,CAAChC,IAAIY,OAAO,EAAE;YAChB;QACF;QAEA,MAAMuC,oBAAoB,CAACC;YACzB,MAAMC,mBAAmBC,IAAAA,yBAAU,EAACF;YAEpC,OAAQC;gBACN,KAAKE,mBAAI,CAACC,GAAG;oBAAE;wBACb,IAAI,CAACjD,kBAAkBK,OAAO,CAACa,MAAM,EAAE;4BACrC,OAAO;wBACT;wBAEA,MAAMgC,UAAUlD,kBAAkBK,OAAO,CAACa,MAAM,GAAG;wBACnD,MAAMiC,YAAYnD,kBAAkBK,OAAO,CAAC+C,SAAS,CAAC,CAACC,OAASA,SAASR,MAAMS,MAAM;wBAErF,MAAMC,uBACJJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACL,MAAMW,QAAQ;wBAE/D,IAAID,wBAAyBJ,cAAc,KAAKN,MAAMW,QAAQ,EAAG;4BAC/DX,MAAMY,cAAc;4BAEpB,MAAMJ,OAAOrD,kBAAkBK,OAAO,CAACkD,uBAAuB,IAAIL,QAAQ;4BAE1E,IAAIG,SAASlB,IAAAA,qCAAgC,EAACkB,OAAO;gCACnDA,KAAK/C,KAAK;4BACZ;4BAEA,OAAO;wBACT;wBAEA;oBACF;gBACA,KAAK0C,mBAAI,CAACU,MAAM;oBAAE;wBAChB,IAAIxE,SAAS;4BACX2D,MAAMY,cAAc;4BACpBvE;wBACF;oBACF;YACF;YAEA,OAAO;QACT;QAEA,MAAMyE,MAAMC,IAAAA,cAAS,EAACnE,IAAIY,OAAO,EAAEV,QAAQ;QAC3CgE,IAAIE,gBAAgB,CAAC,WAAWjB,mBAAmB;YACjDkB,SAAS;QACX;QACA,OAAO;YACLH,IAAII,mBAAmB,CAAC,WAAWnB,mBAAmB;QACxD;IACF,GAAG;QAAC1D;QAASO;KAAI;IAEjB,qBACE,qBAACR;QAAU+E,UAAU,CAAC;QAAGvE,KAAKA;OAASD;kBACpCD;;AAGP"}

package/dist/cjs/components/Select/Select.d.ts

@@ -3,5 +3,5 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, className, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/dist/cjs/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,wEAGhB,YAAY,OAAO,CAAC,4CAgDtB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,mFAIhB,YAAY,OAAO,CAAC,4CAqDtB,CAAC"}

package/dist/cjs/components/Select/Select.js

@@ -14,12 +14,14 @@ const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+const _vkjs = require("@vkontakte/vkjs");
+const _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
 const _CustomSelect = require("../CustomSelect/CustomSelect");
 const _NativeSelect = require("../NativeSelect/NativeSelect");
 const Select = (_param)=>{
-    var { children } = _param, props = _object_without_properties._(_param, [
-        "children"
+    var { children, className } = _param, props = _object_without_properties._(_param, [
+        "children",
+        "className"
     ]);
     const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode } = props, restProps = _object_without_properties._(props, [
         "options",
@@ -48,12 +50,16 @@ const Select = (_param)=>{
         "after",
         "mode"
     ]);
-    const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
+    const { deviceType } = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)();
     const nativeProps = restProps;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
         children: [
-            (hasPointer === undefined || hasPointer) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, _object_spread._({}, props)),
-            (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_NativeSelect.NativeSelect, _object_spread_props._(_object_spread._({}, nativeProps), {
+            deviceType.desktop && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, _object_spread._({
+                className: (0, _vkjs.classNames)(className, deviceType.desktop.className)
+            }, props)),
+            deviceType.mobile && /*#__PURE__*/ (0, _jsxruntime.jsx)(_NativeSelect.NativeSelect, _object_spread_props._(_object_spread._({
+                className: (0, _vkjs.classNames)(className, deviceType.mobile.className)
+            }, nativeProps), {
                 children: options.map(({ label, value })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
                         value: value,
                         children: label

package/dist/cjs/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  ...props\n}: SelectProps<OptionT>) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    ...restProps\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","hasPointer","useAdaptivityHasPointer","nativeProps","React","Fragment","undefined","CustomSelect","NativeSelect","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;iEAdU;yCACiB;8BAMjC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EAEa,WADlBC;QADHD;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAME,aAAaC,IAAAA,gDAAuB;IAE1C,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACXJ,CAAAA,eAAeK,aAAaL,UAAS,mBAAM,qBAACM,0BAAY,uBAAKjC;YAC7D2B,CAAAA,eAAeK,aAAa,CAACL,UAAS,mBACtC,qBAACO,0BAAY,8CAAKL;0BACf5B,QAAQkC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","deviceType","useAdaptivityConditionalRender","nativeProps","React","Fragment","desktop","CustomSelect","classNames","mobile","NativeSelect","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACI;gDACoB;8BAMxC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGC,IAAAA,8DAA8B;IAErD,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACZJ,WAAWK,OAAO,kBACjB,qBAACC,0BAAY;gBAAClC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWK,OAAO,CAACjC,SAAS;eAAOC;YAEnF2B,WAAWQ,MAAM,kBAChB,qBAACC,0BAAY;gBACXrC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWQ,MAAM,CAACpC,SAAS;eACxD8B;0BAEH5B,QAAQoC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}

package/dist/cjs/components/Spacing/Spacing.d.ts

@@ -1,15 +1,26 @@
 import { HTMLAttributesWithRootRef } from '../../types';
-export declare const ALLOWED_SIZES: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"];
-type Size = (typeof ALLOWED_SIZES)[number];
+export declare const CUSTOM_CSS_TOKEN_FOR_USER_GAP = "--vkui_internal--Spacing_gap";
+export declare const sizesClassNames: {
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+};
+export type SpacingSize = keyof typeof sizesClassNames;
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
      */
-    size?: number | Size;
+    size?: number | SpacingSize;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Spacing: ({ size, style, className, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Spacing.d.ts.map

package/dist/cjs/components/Spacing/Spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,aAAa,yEAWhB,CAAC;AACX,KAAK,IAAI,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3C,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAOnF,CAAC"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,6BAA6B,iCAAiC,CAAC;AAE5E,eAAO,MAAM,eAAe;;;;;;;;;;;CAW3B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,eAAe,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAqBnF,CAAC"}

package/dist/cjs/components/Spacing/Spacing.js

@@ -9,52 +9,59 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ALLOWED_SIZES: function() {
-        return ALLOWED_SIZES;
+    CUSTOM_CSS_TOKEN_FOR_USER_GAP: function() {
+        return CUSTOM_CSS_TOKEN_FOR_USER_GAP;
     },
     Spacing: function() {
         return Spacing;
+    },
+    sizesClassNames: function() {
+        return sizesClassNames;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _vkjs = require("@vkontakte/vkjs");
 const _RootComponent = require("../RootComponent/RootComponent");
-const ALLOWED_SIZES = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-    '4xl'
-];
+const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
+const sizesClassNames = {
+    '3xs': "vkuiSpacing--3xs",
+    '2xs': "vkuiSpacing--2xs",
+    'xs': "vkuiSpacing--xs",
+    's': "vkuiSpacing--s",
+    'm': "vkuiSpacing--m",
+    'l': "vkuiSpacing--l",
+    'xl': "vkuiSpacing--xl",
+    '2xl': "vkuiSpacing--2xl",
+    '3xl': "vkuiSpacing--3xl",
+    '4xl': "vkuiSpacing--4xl"
+};
 const Spacing = (_param)=>{
-    var { size = 'm', style: styleProp } = _param, restProps = _object_without_properties._(_param, [
+    var { size = 'm', style, className } = _param, restProps = _object_without_properties._(_param, [
         "size",
-        "style"
+        "style",
+        "className"
     ]);
-    const style = _object_spread._({}, getSizeStyle(size), styleProp);
+    if (typeof size === 'string') {
+        className = className ? (0, _vkjs.classNames)(sizesClassNames[size], className) : sizesClassNames[size];
+    } else {
+        if (style) {
+            // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties
+            style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;
+        } else {
+            // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties
+            style = {
+                [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size
+            };
+        }
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: "vkuiSpacing",
-        style: style
+        style: style,
+        className: className,
+        baseClassName: "vkuiSpacing"
     }));
 };
-function getSizeStyle(size) {
-    const sizeValue = getSizeValue(size);
-    return {
-        height: sizeValue,
-        padding: `calc(${sizeValue} / 2px) 0`
-    };
-}
-function getSizeValue(size) {
-    return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;
-}
 
 //# sourceMappingURL=Spacing.js.map

package/dist/cjs/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const ALLOWED_SIZES = [\n  '3xs',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n] as const;\ntype Size = (typeof ALLOWED_SIZES)[number];\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | Size;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    ...getSizeStyle(size),\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n\nfunction getSizeStyle(size: number | Size): React.CSSProperties {\n  const sizeValue = getSizeValue(size);\n\n  return {\n    height: sizeValue,\n    padding: `calc(${sizeValue} / 2px) 0`,\n  };\n}\n\nfunction getSizeValue(size: number | Size): `var(--vkui--spacing_size_${Size})` | number {\n  return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;\n}\n"],"names":["ALLOWED_SIZES","Spacing","size","style","styleProp","restProps","getSizeStyle","RootComponent","baseClassName","sizeValue","getSizeValue","height","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAuBAC,OAAO;eAAPA;;;;;;;;iEA5BU;+BAEO;AAGvB,MAAMD,gBAAgB;IAC3B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAYM,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,OAAOC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;;IACpC,MAAMA,QAA6B,qBAC9BG,aAAaJ,OACbE;IAGL,qBAAO,qBAACG,4BAAa,8CAAKF;QAAWG,aAAa;QAAqBL,OAAOA;;AAChF;AAEA,SAASG,aAAaJ,IAAmB;IACvC,MAAMO,YAAYC,aAAaR;IAE/B,OAAO;QACLS,QAAQF;QACRG,SAAS,CAAC,KAAK,EAAEH,UAAU,SAAS,CAAC;IACvC;AACF;AAEA,SAASC,aAAaR,IAAmB;IACvC,OAAO,OAAOA,SAAS,WAAW,CAAC,yBAAyB,EAAEA,KAAK,CAAC,CAAC,GAAGA;AAC1E"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = keyof typeof sizesClassNames;\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {\n  if (typeof size === 'string') {\n    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];\n  } else {\n    if (style) {\n      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties\n      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;\n    } else {\n      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties\n      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={style}\n      className={className}\n      baseClassName={styles['Spacing']}\n    />\n  );\n};\n"],"names":["CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","sizesClassNames","size","style","className","restProps","classNames","RootComponent","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,6BAA6B;eAA7BA;;IA0BAC,OAAO;eAAPA;;IAxBAC,eAAe;eAAfA;;;;;;;sBAPc;+BAEG;AAGvB,MAAMF,gCAAgC;AAEtC,MAAME,kBAAkB;IAC7B,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAaO,MAAMD,UAAU;QAAC,EAAEE,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;QAAOC;;IAC3C,IAAI,OAAOF,SAAS,UAAU;QAC5BE,YAAYA,YAAYE,IAAAA,gBAAU,EAACL,eAAe,CAACC,KAAK,EAAEE,aAAaH,eAAe,CAACC,KAAK;IAC9F,OAAO;QACL,IAAIC,OAAO;YACT,kFAAkF;YAClFA,KAAK,CAACJ,8BAA8B,GAAGG;QACzC,OAAO;YACL,kFAAkF;YAClFC,QAAQ;gBAAE,CAACJ,8BAA8B,EAAEG;YAAK;QAClD;IACF;IAEA,qBACE,qBAACK,4BAAa,8CACRF;QACJF,OAAOA;QACPC,WAAWA;QACXI,aAAa;;AAGnB"}

package/dist/cjs/components/SplitLayout/SplitLayout.js

@@ -30,7 +30,7 @@ const SplitLayout = (_param)=>{
     ]);
     const platform = (0, _usePlatform.usePlatform)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PopoutRoot.PopoutRoot, {
-        className: (0, _vkjs.classNames)("vkuiSplitLayout", platform === 'ios' && "vkuiSplitLayout--ios", center && "vkuiSplitLayout--center"),
+        className: (0, _vkjs.classNames)("vkuiSplitLayout", platform === 'ios' && "vkuiSplitLayout--ios"),
         popout: popout,
         modal: modal,
         getRootRef: getRootRef,
@@ -38,7 +38,7 @@ const SplitLayout = (_param)=>{
             header,
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, restProps), {
                 ref: getRef,
-                className: (0, _vkjs.classNames)("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className),
+                className: (0, _vkjs.classNames)("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", center && "vkuiSplitLayout__inner--center", className),
                 children: children
             }))
         ]

package/dist/cjs/components/SplitLayout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === 'ios' && styles['SplitLayout--ios'],\n        center && styles['SplitLayout--center'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","usePlatform","PopoutRoot","classNames","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;6BACC;4BAED;AAwBpB,MAAMA,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,sBAACC,sBAAU;QACTL,WAAWM,IAAAA,gBAAU,qBAEnBH,aAAa,iCACbF;QAEFP,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,qBAACW,mDACKL;gBACJM,KAAKT;gBACLC,WAAWM,IAAAA,gBAAU,4BAEnB,CAAC,CAACV,4CACFI;0BAGDH;;;;AAIT"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === 'ios' && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          center && styles['SplitLayout__inner--center'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","usePlatform","PopoutRoot","classNames","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;6BACC;4BAED;AAwBpB,MAAMA,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,sBAACC,sBAAU;QACTL,WAAWM,IAAAA,gBAAU,qBAEnBH,aAAa;QAEfT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,qBAACW,mDACKL;gBACJM,KAAKT;gBACLC,WAAWM,IAAAA,gBAAU,4BAEnB,CAAC,CAACV,4CACFK,4CACAD;0BAGDH;;;;AAIT"}

package/dist/cjs/components/ToolButton/ToolButton.d.ts

@@ -4,6 +4,11 @@ export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProp
     mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
     appearance?: 'accent' | 'neutral';
     direction?: 'row' | 'column';
+    /**
+     * Задаёт `50%` закругления для контейнера.
+     *
+     * > Note: игнорируется при передаче `children`.
+     */
     rounded?: boolean;
 }
 /**

package/dist/cjs/components/ToolButton/ToolButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}

package/dist/cjs/components/ToolButton/ToolButton.js

@@ -32,7 +32,7 @@ const stylesDirection = {
 };
 const sizeYClassNames = {
     none: "vkuiToolButton--sizeY-none",
-    ['regular']: "vkuiToolButton--sizeY-regular"
+    regular: "vkuiToolButton--sizeY-regular"
 };
 const ToolButton = (_param)=>{
     var { mode = 'primary', appearance = 'accent', direction = 'row', onClick = _vkjs.noop, className, children, IconCompact, IconRegular, rounded } = _param, restProps = _object_without_properties._(_param, [
@@ -62,6 +62,7 @@ const ToolButton = (_param)=>{
                 IconRegular: IconRegular
             }),
             hasChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "vkuiToolButton__text",
                 children: children
             })
         ]

package/dist/cjs/components/ToolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  ['regular']: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["ToolButton","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","mode","appearance","direction","onClick","noop","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","useAdaptivity","hasChildren","hasReactNode","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","classNames","AdaptiveIconRenderer","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;sBA7CkC;+BACjB;sCAIvB;0BACiC;AAGxC,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAgBO,MAAMb,aAAa;QAAC,EACzBc,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUC,UAAI,EACdC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHV;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcC,IAAAA,kBAAY,EAACR;IAEjC,qBACE,sBAACS,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBjB,SAASA;QACTE,WAAWgB,IAAAA,gBAAU,EACnBhB,6BAEAI,WAAW,CAACI,0CACZ1B,UAAU,CAACa,KAAK,EAChBR,gBAAgB,CAACS,WAAW,EAC5BN,eAAe,CAACO,UAAU,EAC1BS,UAAU,aAAab,eAAe,CAACa,MAAM;OAE3CD;;0BAEJ,qBAACY,0CAAoB;gBAACf,aAAaA;gBAAaC,aAAaA;;YAC5DK,6BAAe,qBAACU;0BAAMjB;;;;AAG7B"}
+{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  regular: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при передаче `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles['ToolButton__text']}>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["ToolButton","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","mode","appearance","direction","onClick","noop","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","useAdaptivity","hasChildren","hasReactNode","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","classNames","AdaptiveIconRenderer","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;sBAlDkC;+BACjB;sCAIvB;0BACiC;AAGxC,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAqBO,MAAMd,aAAa;QAAC,EACzBe,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUC,UAAI,EACdC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHV;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcC,IAAAA,kBAAY,EAACR;IAEjC,qBACE,sBAACS,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBjB,SAASA;QACTE,WAAWgB,IAAAA,gBAAU,EACnBhB,6BAEAI,WAAW,CAACI,0CACZ3B,UAAU,CAACc,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BP,eAAe,CAACQ,UAAU,EAC1BS,UAAU,aAAad,eAAe,CAACc,MAAM;OAE3CD;;0BAEJ,qBAACY,0CAAoB;gBAACf,aAAaA;gBAAaC,aAAaA;;YAC5DK,6BAAe,qBAACU;gBAAKlB,SAAS;0BAA+BC;;;;AAGpE"}

package/dist/cjs/hooks/useDraggableWithDomApi/autoScroll.d.ts

@@ -1,5 +1,4 @@
 export declare const EDGE_SIZE = 50;
-export declare const OUTBOX_OFFSET = -30;
 export declare const getAutoScrollingData: (clientY: number, scrollEl: Element | Window) => {
     shouldScrolling: boolean;
     y: number;

package/dist/cjs/hooks/useDraggableWithDomApi/autoScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autoScroll.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDraggableWithDomApi/autoScroll.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,oBAAoB,YAAa,MAAM,YAAY,OAAO,GAAG,MAAM;;;CA+B/E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM;IAAE,eAAe,EAAE,OAAO,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF,eAAO,MAAM,0BAA0B,aAAc,OAAO,GAAG,MAAM;wBAgBxC,mBAAmB;;;CAgB/C,CAAC"}
+{"version":3,"file":"autoScroll.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDraggableWithDomApi/autoScroll.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,eAAO,MAAM,oBAAoB,YAAa,MAAM,YAAY,OAAO,GAAG,MAAM;;;CA6B/E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM;IAAE,eAAe,EAAE,OAAO,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF,eAAO,MAAM,0BAA0B,aAAc,OAAO,GAAG,MAAM;wBAgBxC,mBAAmB;;;CAgB/C,CAAC"}

package/dist/cjs/hooks/useDraggableWithDomApi/autoScroll.js

@@ -12,9 +12,6 @@ _export(exports, {
     EDGE_SIZE: function() {
         return EDGE_SIZE;
     },
-    OUTBOX_OFFSET: function() {
-        return OUTBOX_OFFSET;
-    },
     createAutoScrollController: function() {
         return createAutoScrollController;
     },
@@ -26,7 +23,6 @@ const _dom = require("../../lib/dom");
 const _rafSchd = require("../../lib/rafSchd");
 const SCROLL_SPEED = 10;
 const EDGE_SIZE = 50;
-const OUTBOX_OFFSET = -30;
 const getAutoScrollingData = (clientY, scrollEl)=>{
     const scrollTop = Math.floor((0, _dom.getNodeScroll)(scrollEl).scrollTop);
     const { relative, edges } = (0, _dom.getScrollRect)(scrollEl);
@@ -41,7 +37,7 @@ const getAutoScrollingData = (clientY, scrollEl)=>{
     const isInTopEdge = topDistance <= EDGE_SIZE;
     const isInBottomEdge = bottomDistance <= EDGE_SIZE;
     const result = {
-        shouldScrolling: canScrollUp && isInTopEdge && topDistance >= OUTBOX_OFFSET || canScrollDown && isInBottomEdge && bottomDistance >= OUTBOX_OFFSET,
+        shouldScrolling: canScrollUp && isInTopEdge || canScrollDown && isInBottomEdge,
         y: 0
     };
     // Inspired by https://github.com/SortableJS/Sortable/issues/1907#issuecomment-1495403785

package/dist/cjs/hooks/useDraggableWithDomApi/autoScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDraggableWithDomApi/autoScroll.ts"],"sourcesContent":["import { getNodeScroll, getScrollHeight, getScrollRect } from '../../lib/dom';\nimport { rafSchd } from '../../lib/rafSchd';\n\nconst SCROLL_SPEED = 10;\nexport const EDGE_SIZE = 50;\nexport const OUTBOX_OFFSET = -30;\n\nexport const getAutoScrollingData = (clientY: number, scrollEl: Element | Window) => {\n  const scrollTop = Math.floor(getNodeScroll(scrollEl).scrollTop);\n\n  const { relative, edges } = getScrollRect(scrollEl);\n  const viewportHeight = relative.height;\n  const documentHeight = getScrollHeight(scrollEl);\n  const maxScrollY = documentHeight - viewportHeight;\n  const canScrollUp = scrollTop > 0;\n  const canScrollDown = scrollTop < maxScrollY;\n\n  const [edgeTop, edgeBottom] = edges.y;\n  const topDistance = clientY - edgeTop;\n  const bottomDistance = edgeBottom - clientY;\n  const isInTopEdge = topDistance <= EDGE_SIZE;\n  const isInBottomEdge = bottomDistance <= EDGE_SIZE;\n\n  const result = {\n    shouldScrolling:\n      (canScrollUp && isInTopEdge && topDistance >= OUTBOX_OFFSET) ||\n      (canScrollDown && isInBottomEdge && bottomDistance >= OUTBOX_OFFSET),\n    y: 0,\n  };\n\n  // Inspired by https://github.com/SortableJS/Sortable/issues/1907#issuecomment-1495403785\n  if (isInTopEdge) {\n    result.y = -1 * ((EDGE_SIZE - topDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  } else if (isInBottomEdge) {\n    result.y = ((EDGE_SIZE - bottomDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  }\n\n  return result;\n};\n\nexport type AutoScrollingDataFn = () => { shouldScrolling: boolean; y: number };\n\nexport const createAutoScrollController = (scrollEl: Element | Window) => {\n  let isRunning = false;\n  const scheduledScroll = rafSchd(scroll);\n\n  function scroll(fn: AutoScrollingDataFn) {\n    const { shouldScrolling, y } = fn();\n    if (shouldScrolling) {\n      isRunning = true;\n      scrollEl.scrollBy(0, y);\n      scheduledScroll(fn);\n    } else {\n      isRunning = false;\n      scheduledScroll.cancel();\n    }\n  }\n\n  const tryAutoScroll = (fn: AutoScrollingDataFn) => {\n    scheduledScroll(fn);\n  };\n\n  const stop = () => {\n    isRunning = false;\n    scheduledScroll.cancel();\n  };\n\n  return {\n    tryAutoScroll,\n    stop,\n    get isRunning() {\n      return isRunning;\n    },\n  };\n};\n"],"names":["EDGE_SIZE","OUTBOX_OFFSET","createAutoScrollController","getAutoScrollingData","SCROLL_SPEED","clientY","scrollEl","scrollTop","Math","floor","getNodeScroll","relative","edges","getScrollRect","viewportHeight","height","documentHeight","getScrollHeight","maxScrollY","canScrollUp","canScrollDown","edgeTop","edgeBottom","y","topDistance","bottomDistance","isInTopEdge","isInBottomEdge","result","shouldScrolling","isRunning","scheduledScroll","rafSchd","scroll","fn","scrollBy","cancel","tryAutoScroll","stop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,SAAS;eAATA;;IACAC,aAAa;eAAbA;;IAqCAC,0BAA0B;eAA1BA;;IAnCAC,oBAAoB;eAApBA;;;qBAPiD;yBACtC;AAExB,MAAMC,eAAe;AACd,MAAMJ,YAAY;AAClB,MAAMC,gBAAgB,CAAC;AAEvB,MAAME,uBAAuB,CAACE,SAAiBC;IACpD,MAAMC,YAAYC,KAAKC,KAAK,CAACC,IAAAA,kBAAa,EAACJ,UAAUC,SAAS;IAE9D,MAAM,EAAEI,QAAQ,EAAEC,KAAK,EAAE,GAAGC,IAAAA,kBAAa,EAACP;IAC1C,MAAMQ,iBAAiBH,SAASI,MAAM;IACtC,MAAMC,iBAAiBC,IAAAA,oBAAe,EAACX;IACvC,MAAMY,aAAaF,iBAAiBF;IACpC,MAAMK,cAAcZ,YAAY;IAChC,MAAMa,gBAAgBb,YAAYW;IAElC,MAAM,CAACG,SAASC,WAAW,GAAGV,MAAMW,CAAC;IACrC,MAAMC,cAAcnB,UAAUgB;IAC9B,MAAMI,iBAAiBH,aAAajB;IACpC,MAAMqB,cAAcF,eAAexB;IACnC,MAAM2B,iBAAiBF,kBAAkBzB;IAEzC,MAAM4B,SAAS;QACbC,iBACE,AAACV,eAAeO,eAAeF,eAAevB,iBAC7CmB,iBAAiBO,kBAAkBF,kBAAkBxB;QACxDsB,GAAG;IACL;IAEA,yFAAyF;IACzF,IAAIG,aAAa;QACfE,OAAOL,CAAC,GAAG,CAAC,IAAK,CAAA,AAACvB,CAAAA,YAAYwB,WAAU,IAAKxB,SAAQ,IAAKI;IAC5D,OAAO,IAAIuB,gBAAgB;QACzBC,OAAOL,CAAC,GAAG,AAAEvB,CAAAA,YAAYyB,cAAa,IAAKzB,YAAaI;IAC1D;IAEA,OAAOwB;AACT;AAIO,MAAM1B,6BAA6B,CAACI;IACzC,IAAIwB,YAAY;IAChB,MAAMC,kBAAkBC,IAAAA,gBAAO,EAACC;IAEhC,SAASA,OAAOC,EAAuB;QACrC,MAAM,EAAEL,eAAe,EAAEN,CAAC,EAAE,GAAGW;QAC/B,IAAIL,iBAAiB;YACnBC,YAAY;YACZxB,SAAS6B,QAAQ,CAAC,GAAGZ;YACrBQ,gBAAgBG;QAClB,OAAO;YACLJ,YAAY;YACZC,gBAAgBK,MAAM;QACxB;IACF;IAEA,MAAMC,gBAAgB,CAACH;QACrBH,gBAAgBG;IAClB;IAEA,MAAMI,OAAO;QACXR,YAAY;QACZC,gBAAgBK,MAAM;IACxB;IAEA,OAAO;QACLC;QACAC;QACA,IAAIR,aAAY;YACd,OAAOA;QACT;IACF;AACF"}
+{"version":3,"sources":["../../../../src/hooks/useDraggableWithDomApi/autoScroll.ts"],"sourcesContent":["import { getNodeScroll, getScrollHeight, getScrollRect } from '../../lib/dom';\nimport { rafSchd } from '../../lib/rafSchd';\n\nconst SCROLL_SPEED = 10;\nexport const EDGE_SIZE = 50;\n\nexport const getAutoScrollingData = (clientY: number, scrollEl: Element | Window) => {\n  const scrollTop = Math.floor(getNodeScroll(scrollEl).scrollTop);\n\n  const { relative, edges } = getScrollRect(scrollEl);\n  const viewportHeight = relative.height;\n  const documentHeight = getScrollHeight(scrollEl);\n  const maxScrollY = documentHeight - viewportHeight;\n  const canScrollUp = scrollTop > 0;\n  const canScrollDown = scrollTop < maxScrollY;\n\n  const [edgeTop, edgeBottom] = edges.y;\n  const topDistance = clientY - edgeTop;\n  const bottomDistance = edgeBottom - clientY;\n  const isInTopEdge = topDistance <= EDGE_SIZE;\n  const isInBottomEdge = bottomDistance <= EDGE_SIZE;\n\n  const result = {\n    shouldScrolling: (canScrollUp && isInTopEdge) || (canScrollDown && isInBottomEdge),\n    y: 0,\n  };\n\n  // Inspired by https://github.com/SortableJS/Sortable/issues/1907#issuecomment-1495403785\n  if (isInTopEdge) {\n    result.y = -1 * ((EDGE_SIZE - topDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  } else if (isInBottomEdge) {\n    result.y = ((EDGE_SIZE - bottomDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  }\n\n  return result;\n};\n\nexport type AutoScrollingDataFn = () => { shouldScrolling: boolean; y: number };\n\nexport const createAutoScrollController = (scrollEl: Element | Window) => {\n  let isRunning = false;\n  const scheduledScroll = rafSchd(scroll);\n\n  function scroll(fn: AutoScrollingDataFn) {\n    const { shouldScrolling, y } = fn();\n    if (shouldScrolling) {\n      isRunning = true;\n      scrollEl.scrollBy(0, y);\n      scheduledScroll(fn);\n    } else {\n      isRunning = false;\n      scheduledScroll.cancel();\n    }\n  }\n\n  const tryAutoScroll = (fn: AutoScrollingDataFn) => {\n    scheduledScroll(fn);\n  };\n\n  const stop = () => {\n    isRunning = false;\n    scheduledScroll.cancel();\n  };\n\n  return {\n    tryAutoScroll,\n    stop,\n    get isRunning() {\n      return isRunning;\n    },\n  };\n};\n"],"names":["EDGE_SIZE","createAutoScrollController","getAutoScrollingData","SCROLL_SPEED","clientY","scrollEl","scrollTop","Math","floor","getNodeScroll","relative","edges","getScrollRect","viewportHeight","height","documentHeight","getScrollHeight","maxScrollY","canScrollUp","canScrollDown","edgeTop","edgeBottom","y","topDistance","bottomDistance","isInTopEdge","isInBottomEdge","result","shouldScrolling","isRunning","scheduledScroll","rafSchd","scroll","fn","scrollBy","cancel","tryAutoScroll","stop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,SAAS;eAATA;;IAmCAC,0BAA0B;eAA1BA;;IAjCAC,oBAAoB;eAApBA;;;qBANiD;yBACtC;AAExB,MAAMC,eAAe;AACd,MAAMH,YAAY;AAElB,MAAME,uBAAuB,CAACE,SAAiBC;IACpD,MAAMC,YAAYC,KAAKC,KAAK,CAACC,IAAAA,kBAAa,EAACJ,UAAUC,SAAS;IAE9D,MAAM,EAAEI,QAAQ,EAAEC,KAAK,EAAE,GAAGC,IAAAA,kBAAa,EAACP;IAC1C,MAAMQ,iBAAiBH,SAASI,MAAM;IACtC,MAAMC,iBAAiBC,IAAAA,oBAAe,EAACX;IACvC,MAAMY,aAAaF,iBAAiBF;IACpC,MAAMK,cAAcZ,YAAY;IAChC,MAAMa,gBAAgBb,YAAYW;IAElC,MAAM,CAACG,SAASC,WAAW,GAAGV,MAAMW,CAAC;IACrC,MAAMC,cAAcnB,UAAUgB;IAC9B,MAAMI,iBAAiBH,aAAajB;IACpC,MAAMqB,cAAcF,eAAevB;IACnC,MAAM0B,iBAAiBF,kBAAkBxB;IAEzC,MAAM2B,SAAS;QACbC,iBAAiB,AAACV,eAAeO,eAAiBN,iBAAiBO;QACnEJ,GAAG;IACL;IAEA,yFAAyF;IACzF,IAAIG,aAAa;QACfE,OAAOL,CAAC,GAAG,CAAC,IAAK,CAAA,AAACtB,CAAAA,YAAYuB,WAAU,IAAKvB,SAAQ,IAAKG;IAC5D,OAAO,IAAIuB,gBAAgB;QACzBC,OAAOL,CAAC,GAAG,AAAEtB,CAAAA,YAAYwB,cAAa,IAAKxB,YAAaG;IAC1D;IAEA,OAAOwB;AACT;AAIO,MAAM1B,6BAA6B,CAACI;IACzC,IAAIwB,YAAY;IAChB,MAAMC,kBAAkBC,IAAAA,gBAAO,EAACC;IAEhC,SAASA,OAAOC,EAAuB;QACrC,MAAM,EAAEL,eAAe,EAAEN,CAAC,EAAE,GAAGW;QAC/B,IAAIL,iBAAiB;YACnBC,YAAY;YACZxB,SAAS6B,QAAQ,CAAC,GAAGZ;YACrBQ,gBAAgBG;QAClB,OAAO;YACLJ,YAAY;YACZC,gBAAgBK,MAAM;QACxB;IACF;IAEA,MAAMC,gBAAgB,CAACH;QACrBH,gBAAgBG;IAClB;IAEA,MAAMI,OAAO;QACXR,YAAY;QACZC,gBAAgBK,MAAM;IACxB;IAEA,OAAO;QACLC;QACAC;QACA,IAAIR,aAAY;YACd,OAAOA;QACT;IACF;AACF"}

package/dist/cjs/hooks/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Хук вызывает переданный коллбэк при изменении размеров элемента.
+ */
+export declare function useResizeObserver(ref: React.MutableRefObject<HTMLElement | null>, callback: (element: HTMLElement) => void): void;
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/dist/cjs/hooks/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,QAmBzC"}

package/dist/cjs/hooks/useResizeObserver.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useResizeObserver", {
+    enumerable: true,
+    get: function() {
+        return useResizeObserver;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _customResizeObserver = require("../lib/floating/customResizeObserver");
+const _useIsomorphicLayoutEffect = require("../lib/useIsomorphicLayoutEffect");
+const _useStableCallback = require("./useStableCallback");
+function useResizeObserver(ref, callback) {
+    const stableCallback = (0, _useStableCallback.useStableCallback)(callback);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function addResizeObserverHandler() {
+        /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */ if (!ref.current) {
+            return;
+        }
+        const element = ref.current;
+        const observer = new _customResizeObserver.CustomResizeObserver(()=>stableCallback(element));
+        observer.observe(element);
+        observer.appendToTheDOM();
+        return ()=>observer.disconnect();
+    }, [
+        ref
+    ]);
+}
+
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/cjs/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react';\nimport { CustomResizeObserver } from '../lib/floating/customResizeObserver';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\nimport { useStableCallback } from './useStableCallback';\n\n/**\n * Хук вызывает переданный коллбэк при изменении размеров элемента.\n */\nexport function useResizeObserver(\n  ref: React.MutableRefObject<HTMLElement | null>,\n  callback: (element: HTMLElement) => void,\n) {\n  const stableCallback = useStableCallback(callback);\n\n  useIsomorphicLayoutEffect(\n    function addResizeObserverHandler() {\n      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n      if (!ref.current) {\n        return;\n      }\n      const element = ref.current;\n      const observer = new CustomResizeObserver(() => stableCallback(element));\n      observer.observe(element);\n      observer.appendToTheDOM();\n\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n}\n"],"names":["useResizeObserver","ref","callback","stableCallback","useStableCallback","useIsomorphicLayoutEffect","addResizeObserverHandler","current","element","observer","CustomResizeObserver","observe","appendToTheDOM","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;eAAAA;;;;iEARO;sCACc;2CACK;mCACR;AAK3B,SAASA,kBACdC,GAA+C,EAC/CC,QAAwC;IAExC,MAAMC,iBAAiBC,IAAAA,oCAAiB,EAACF;IAEzCG,IAAAA,oDAAyB,EACvB,SAASC;QACP,6EAA6E,GAC7E,IAAI,CAACL,IAAIM,OAAO,EAAE;YAChB;QACF;QACA,MAAMC,UAAUP,IAAIM,OAAO;QAC3B,MAAME,WAAW,IAAIC,0CAAoB,CAAC,IAAMP,eAAeK;QAC/DC,SAASE,OAAO,CAACH;QACjBC,SAASG,cAAc;QAEvB,OAAO,IAAMH,SAASI,UAAU;IAClC,GACA;QAACZ;KAAI;AAET"}

package/dist/cjs/lib/floating/customResizeObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customResizeObserver.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/customResizeObserver.ts"],"names":[],"mappings":"AA6BA,qBAAa,oBAAoB;IAOnB,OAAO,CAAC,QAAQ,CAAC,cAAc;IAN3C,OAAO,EAAE,KAAK,CAAC;QACb,MAAM,EAAE,WAAW,CAAC;QACpB,MAAM,EAAE,iBAAiB,CAAC;KAC3B,CAAC,CAAM;IACR,wBAAwB,EAAE,gBAAgB,GAAG,IAAI,CAAQ;gBAE5B,cAAc,EAAE,MAAM,IAAI;IAIvD,OAAO,CAAC,OAAO,EAAE,WAAW;IAO5B,cAAc;IAYd,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAUvC,4BAA4B,CAAC,OAAO,EAAE,WAAW;IAWjD,UAAU;CAeX"}
+{"version":3,"file":"customResizeObserver.d.ts","sourceRoot":"","sources":["../../../../src/lib/floating/customResizeObserver.ts"],"names":[],"mappings":"AAsCA,qBAAa,oBAAoB;IAOnB,OAAO,CAAC,QAAQ,CAAC,cAAc;IAN3C,OAAO,EAAE,KAAK,CAAC;QACb,MAAM,EAAE,WAAW,CAAC;QACpB,MAAM,EAAE,iBAAiB,CAAC;KAC3B,CAAC,CAAM;IACR,wBAAwB,EAAE,gBAAgB,GAAG,IAAI,CAAQ;gBAE5B,cAAc,EAAE,MAAM,IAAI;IAIvD,OAAO,CAAC,OAAO,EAAE,WAAW;IAO5B,cAAc;IAYd,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAUvC,4BAA4B,CAAC,OAAO,EAAE,WAAW;IAWjD,UAAU;CAeX"}

package/dist/cjs/lib/floating/customResizeObserver.js

@@ -17,7 +17,8 @@ const defaultIframeStyles = {
     width: '100%',
     height: '100%',
     pointerEvents: 'none',
-    opacity: '0'
+    opacity: '0',
+    border: '0'
 };
 class CustomResizeObserver {
     observe(element) {

package/dist/cjs/lib/floating/customResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/floating/customResizeObserver.ts"],"sourcesContent":["const defaultIframeStyles: Pick<\n  CSSStyleDeclaration,\n  'position' | 'left' | 'top' | 'zIndex' | 'width' | 'height' | 'pointerEvents' | 'opacity'\n> = {\n  position: 'absolute',\n  left: '0',\n  top: '0',\n  zIndex: '-1',\n  width: '100%',\n  height: '100%',\n  pointerEvents: 'none',\n  opacity: '0',\n};\n\n/*\n * Специальный CustomResizeObserver как fallback для ResizeObserver\n * Используется для вызова update() функции (перерисовка плавающего окна) floating-ui\n * при изменении размера reference или floating элементов.\n *\n * По умолчанию пытаемся нарисовать скрытый, абсолютно позиционированный относительно\n * наблюдаемого элемента iframe.\n * В случае же, если наблюдаемый элемент имеет position: static, то правильно спозиционировать\n * iframe у нас не получится, поэтому в такой ситуации мы используем MutationObserver.\n *\n * Использовать только MutationObserver мы не можем, потому что с помощью него нельзя отследить\n * изменение размера вызванное переполнением текста.\n *\n * Применяется только если нету поддержики или полифила ResizeObserver.\n * */\nexport class CustomResizeObserver {\n  records: Array<{\n    target: HTMLElement;\n    iframe: HTMLIFrameElement;\n  }> = [];\n  mutationObserverFallback: MutationObserver | null = null;\n\n  constructor(private readonly updateFunction: () => void) {\n    this.updateFunction = updateFunction;\n  }\n\n  observe(element: HTMLElement) {\n    if (isPositioned(element)) {\n      return this.observeUsingIframe(element);\n    }\n    return this.observeUsingMutationObserver(element);\n  }\n\n  appendToTheDOM() {\n    for (let record of this.records) {\n      record.target.appendChild(record.iframe);\n    }\n\n    for (let record of this.records) {\n      if (record.iframe.contentWindow) {\n        record.iframe.contentWindow.addEventListener('resize', this.updateFunction);\n      }\n    }\n  }\n\n  observeUsingIframe(element: HTMLElement) {\n    const iframe = element.ownerDocument.createElement('iframe');\n    iframe.src = 'javascript:void(0)';\n    iframe.ariaHidden = 'true';\n    iframe.tabIndex = -1;\n    Object.assign(iframe.style, defaultIframeStyles);\n\n    this.records.push({ target: element, iframe });\n  }\n\n  observeUsingMutationObserver(element: HTMLElement) {\n    if (!this.mutationObserverFallback) {\n      this.mutationObserverFallback = new MutationObserver(this.updateFunction);\n    }\n\n    this.mutationObserverFallback.observe(element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnect() {\n    this.records.map(({ target, iframe }) => {\n      if (iframe.contentWindow) {\n        iframe.contentWindow.removeEventListener('resize', this.updateFunction);\n      }\n\n      target.removeChild(iframe);\n    });\n    this.records = [];\n\n    if (this.mutationObserverFallback) {\n      this.mutationObserverFallback.disconnect();\n    }\n    this.mutationObserverFallback = null;\n  }\n}\n\nfunction isPositioned(element: HTMLElement): boolean {\n  return getComputedStyle(element).position !== 'static';\n}\n"],"names":["CustomResizeObserver","defaultIframeStyles","position","left","top","zIndex","width","height","pointerEvents","opacity","observe","element","isPositioned","observeUsingIframe","observeUsingMutationObserver","appendToTheDOM","record","records","target","appendChild","iframe","contentWindow","addEventListener","updateFunction","ownerDocument","createElement","src","ariaHidden","tabIndex","Object","assign","style","push","mutationObserverFallback","MutationObserver","childList","subtree","disconnect","map","removeEventListener","removeChild","constructor","getComputedStyle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BaA;;;eAAAA;;;;AA7Bb,MAAMC,sBAGF;IACFC,UAAU;IACVC,MAAM;IACNC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC,eAAe;IACfC,SAAS;AACX;AAiBO,MAAMT;IAWXU,QAAQC,OAAoB,EAAE;QAC5B,IAAIC,aAAaD,UAAU;YACzB,OAAO,IAAI,CAACE,kBAAkB,CAACF;QACjC;QACA,OAAO,IAAI,CAACG,4BAA4B,CAACH;IAC3C;IAEAI,iBAAiB;QACf,KAAK,IAAIC,UAAU,IAAI,CAACC,OAAO,CAAE;YAC/BD,OAAOE,MAAM,CAACC,WAAW,CAACH,OAAOI,MAAM;QACzC;QAEA,KAAK,IAAIJ,UAAU,IAAI,CAACC,OAAO,CAAE;YAC/B,IAAID,OAAOI,MAAM,CAACC,aAAa,EAAE;gBAC/BL,OAAOI,MAAM,CAACC,aAAa,CAACC,gBAAgB,CAAC,UAAU,IAAI,CAACC,cAAc;YAC5E;QACF;IACF;IAEAV,mBAAmBF,OAAoB,EAAE;QACvC,MAAMS,SAAST,QAAQa,aAAa,CAACC,aAAa,CAAC;QACnDL,OAAOM,GAAG,GAAG;QACbN,OAAOO,UAAU,GAAG;QACpBP,OAAOQ,QAAQ,GAAG,CAAC;QACnBC,OAAOC,MAAM,CAACV,OAAOW,KAAK,EAAE9B;QAE5B,IAAI,CAACgB,OAAO,CAACe,IAAI,CAAC;YAAEd,QAAQP;YAASS;QAAO;IAC9C;IAEAN,6BAA6BH,OAAoB,EAAE;QACjD,IAAI,CAAC,IAAI,CAACsB,wBAAwB,EAAE;YAClC,IAAI,CAACA,wBAAwB,GAAG,IAAIC,iBAAiB,IAAI,CAACX,cAAc;QAC1E;QAEA,IAAI,CAACU,wBAAwB,CAACvB,OAAO,CAACC,SAAS;YAC7CwB,WAAW;YACXC,SAAS;QACX;IACF;IAEAC,aAAa;QACX,IAAI,CAACpB,OAAO,CAACqB,GAAG,CAAC,CAAC,EAAEpB,MAAM,EAAEE,MAAM,EAAE;YAClC,IAAIA,OAAOC,aAAa,EAAE;gBACxBD,OAAOC,aAAa,CAACkB,mBAAmB,CAAC,UAAU,IAAI,CAAChB,cAAc;YACxE;YAEAL,OAAOsB,WAAW,CAACpB;QACrB;QACA,IAAI,CAACH,OAAO,GAAG,EAAE;QAEjB,IAAI,IAAI,CAACgB,wBAAwB,EAAE;YACjC,IAAI,CAACA,wBAAwB,CAACI,UAAU;QAC1C;QACA,IAAI,CAACJ,wBAAwB,GAAG;IAClC;IA1DAQ,YAAY,AAAiBlB,cAA0B,CAAE;;QANzDN,yBAAAA,WAAAA,KAAAA;QAIAgB,yBAAAA,4BAAAA,KAAAA;aAE6BV,iBAAAA;aAN7BN,UAGK,EAAE;aACPgB,2BAAoD;QAGlD,IAAI,CAACV,cAAc,GAAGA;IACxB;AAyDF;AAEA,SAASX,aAAaD,OAAoB;IACxC,OAAO+B,iBAAiB/B,SAAST,QAAQ,KAAK;AAChD"}
+{"version":3,"sources":["../../../../src/lib/floating/customResizeObserver.ts"],"sourcesContent":["const defaultIframeStyles: Pick<\n  CSSStyleDeclaration,\n  | 'position'\n  | 'left'\n  | 'top'\n  | 'zIndex'\n  | 'width'\n  | 'height'\n  | 'pointerEvents'\n  | 'opacity'\n  | 'border'\n> = {\n  position: 'absolute',\n  left: '0',\n  top: '0',\n  zIndex: '-1',\n  width: '100%',\n  height: '100%',\n  pointerEvents: 'none',\n  opacity: '0',\n  border: '0',\n};\n\n/*\n * Специальный CustomResizeObserver как fallback для ResizeObserver\n * Используется для вызова update() функции (перерисовка плавающего окна) floating-ui\n * при изменении размера reference или floating элементов.\n *\n * По умолчанию пытаемся нарисовать скрытый, абсолютно позиционированный относительно\n * наблюдаемого элемента iframe.\n * В случае же, если наблюдаемый элемент имеет position: static, то правильно спозиционировать\n * iframe у нас не получится, поэтому в такой ситуации мы используем MutationObserver.\n *\n * Использовать только MutationObserver мы не можем, потому что с помощью него нельзя отследить\n * изменение размера вызванное переполнением текста.\n *\n * Применяется только если нету поддержики или полифила ResizeObserver.\n * */\nexport class CustomResizeObserver {\n  records: Array<{\n    target: HTMLElement;\n    iframe: HTMLIFrameElement;\n  }> = [];\n  mutationObserverFallback: MutationObserver | null = null;\n\n  constructor(private readonly updateFunction: () => void) {\n    this.updateFunction = updateFunction;\n  }\n\n  observe(element: HTMLElement) {\n    if (isPositioned(element)) {\n      return this.observeUsingIframe(element);\n    }\n    return this.observeUsingMutationObserver(element);\n  }\n\n  appendToTheDOM() {\n    for (let record of this.records) {\n      record.target.appendChild(record.iframe);\n    }\n\n    for (let record of this.records) {\n      if (record.iframe.contentWindow) {\n        record.iframe.contentWindow.addEventListener('resize', this.updateFunction);\n      }\n    }\n  }\n\n  observeUsingIframe(element: HTMLElement) {\n    const iframe = element.ownerDocument.createElement('iframe');\n    iframe.src = 'javascript:void(0)';\n    iframe.ariaHidden = 'true';\n    iframe.tabIndex = -1;\n    Object.assign(iframe.style, defaultIframeStyles);\n\n    this.records.push({ target: element, iframe });\n  }\n\n  observeUsingMutationObserver(element: HTMLElement) {\n    if (!this.mutationObserverFallback) {\n      this.mutationObserverFallback = new MutationObserver(this.updateFunction);\n    }\n\n    this.mutationObserverFallback.observe(element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnect() {\n    this.records.map(({ target, iframe }) => {\n      if (iframe.contentWindow) {\n        iframe.contentWindow.removeEventListener('resize', this.updateFunction);\n      }\n\n      target.removeChild(iframe);\n    });\n    this.records = [];\n\n    if (this.mutationObserverFallback) {\n      this.mutationObserverFallback.disconnect();\n    }\n    this.mutationObserverFallback = null;\n  }\n}\n\nfunction isPositioned(element: HTMLElement): boolean {\n  return getComputedStyle(element).position !== 'static';\n}\n"],"names":["CustomResizeObserver","defaultIframeStyles","position","left","top","zIndex","width","height","pointerEvents","opacity","border","observe","element","isPositioned","observeUsingIframe","observeUsingMutationObserver","appendToTheDOM","record","records","target","appendChild","iframe","contentWindow","addEventListener","updateFunction","ownerDocument","createElement","src","ariaHidden","tabIndex","Object","assign","style","push","mutationObserverFallback","MutationObserver","childList","subtree","disconnect","map","removeEventListener","removeChild","constructor","getComputedStyle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsCaA;;;eAAAA;;;;AAtCb,MAAMC,sBAWF;IACFC,UAAU;IACVC,MAAM;IACNC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC,eAAe;IACfC,SAAS;IACTC,QAAQ;AACV;AAiBO,MAAMV;IAWXW,QAAQC,OAAoB,EAAE;QAC5B,IAAIC,aAAaD,UAAU;YACzB,OAAO,IAAI,CAACE,kBAAkB,CAACF;QACjC;QACA,OAAO,IAAI,CAACG,4BAA4B,CAACH;IAC3C;IAEAI,iBAAiB;QACf,KAAK,IAAIC,UAAU,IAAI,CAACC,OAAO,CAAE;YAC/BD,OAAOE,MAAM,CAACC,WAAW,CAACH,OAAOI,MAAM;QACzC;QAEA,KAAK,IAAIJ,UAAU,IAAI,CAACC,OAAO,CAAE;YAC/B,IAAID,OAAOI,MAAM,CAACC,aAAa,EAAE;gBAC/BL,OAAOI,MAAM,CAACC,aAAa,CAACC,gBAAgB,CAAC,UAAU,IAAI,CAACC,cAAc;YAC5E;QACF;IACF;IAEAV,mBAAmBF,OAAoB,EAAE;QACvC,MAAMS,SAAST,QAAQa,aAAa,CAACC,aAAa,CAAC;QACnDL,OAAOM,GAAG,GAAG;QACbN,OAAOO,UAAU,GAAG;QACpBP,OAAOQ,QAAQ,GAAG,CAAC;QACnBC,OAAOC,MAAM,CAACV,OAAOW,KAAK,EAAE/B;QAE5B,IAAI,CAACiB,OAAO,CAACe,IAAI,CAAC;YAAEd,QAAQP;YAASS;QAAO;IAC9C;IAEAN,6BAA6BH,OAAoB,EAAE;QACjD,IAAI,CAAC,IAAI,CAACsB,wBAAwB,EAAE;YAClC,IAAI,CAACA,wBAAwB,GAAG,IAAIC,iBAAiB,IAAI,CAACX,cAAc;QAC1E;QAEA,IAAI,CAACU,wBAAwB,CAACvB,OAAO,CAACC,SAAS;YAC7CwB,WAAW;YACXC,SAAS;QACX;IACF;IAEAC,aAAa;QACX,IAAI,CAACpB,OAAO,CAACqB,GAAG,CAAC,CAAC,EAAEpB,MAAM,EAAEE,MAAM,EAAE;YAClC,IAAIA,OAAOC,aAAa,EAAE;gBACxBD,OAAOC,aAAa,CAACkB,mBAAmB,CAAC,UAAU,IAAI,CAAChB,cAAc;YACxE;YAEAL,OAAOsB,WAAW,CAACpB;QACrB;QACA,IAAI,CAACH,OAAO,GAAG,EAAE;QAEjB,IAAI,IAAI,CAACgB,wBAAwB,EAAE;YACjC,IAAI,CAACA,wBAAwB,CAACI,UAAU;QAC1C;QACA,IAAI,CAACJ,wBAAwB,GAAG;IAClC;IA1DAQ,YAAY,AAAiBlB,cAA0B,CAAE;;QANzDN,yBAAAA,WAAAA,KAAAA;QAIAgB,yBAAAA,4BAAAA,KAAAA;aAE6BV,iBAAAA;aAN7BN,UAGK,EAAE;aACPgB,2BAAoD;QAGlD,IAAI,CAACV,cAAc,GAAGA;IACxB;AAyDF;AAEA,SAASX,aAAaD,OAAoB;IACxC,OAAO+B,iBAAiB/B,SAASV,QAAQ,KAAK;AAChD"}

package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingWithInteractions.d.ts","sourceRoot":"","sources":["../../../../../src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAIV,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,SAAS,CAAC;AASjB;;GAEG;AACH,eAAO,MAAM,2BAA2B,4QAqBrC,gCAAgC,KAAG,kCAAkC,CAAC,CAiTxE,CAAC"}
+{"version":3,"file":"useFloatingWithInteractions.d.ts","sourceRoot":"","sources":["../../../../../src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAIV,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,SAAS,CAAC;AASjB;;GAEG;AACH,eAAO,MAAM,2BAA2B,4QAqBrC,gCAAgC,KAAG,kCAAkC,CAAC,CA2TxE,CAAC"}

package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js

@@ -64,7 +64,7 @@ shown: shownProp, onShownChange: onShownChangeProp })=>{
     });
     const commitShownLocalState = _react.useCallback((nextShown, reason)=>{
         setShownLocalState((prevState)=>{
-            if (prevState.shown !== nextShown) {
+            if (prevState.shown !== nextShown || prevState.reason !== reason) {
                 return {
                     shown: nextShown,
                     reason
@@ -88,6 +88,11 @@ shown: shownProp, onShownChange: onShownChangeProp })=>{
         commitShownLocalState
     ]);
     const handleFocusOnReference = (0, _useStableCallback.useStableCallback)(()=>{
+        // Повторный вызов события фокуса - следствие клика на reference-элемент
+        if (shownLocalState.shown) {
+            commitShownLocalState(false, 'focus');
+            return;
+        }
         if (blockFocusRef.current) {
             /* istanbul ignore next: в Jest не воспроизводится баг на вебе (cм. onRestoreFocus) */ blockFocusRef.current = false;
             return;
@@ -118,6 +123,11 @@ shown: shownProp, onShownChange: onShownChangeProp })=>{
         });
     });
     const handleClickOnReference = (0, _useStableCallback.useStableCallback)(()=>{
+        // Предыдущий триггер (фокус) уже вызвал открытие/закрытие всплывающего окна, игнорируем вызов
+        if (shownLocalState.reason === 'focus') {
+            commitShownLocalState(shownLocalState.shown, 'click');
+            return;
+        }
         commitShownLocalState(!shownLocalState.shown, 'click');
     });
     const handleClickOnReferenceForOnlyClose = (0, _useStableCallback.useStableCallback)(()=>{