@vkontakte/vkui 6.1.0 → 6.1.2

package/dist/cssm/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":["React","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","keyboardInput","useContext","focusableNodesRef","useRef","collectFocusableNodesRef","current","nodes","querySelectorAll","forEach","focusableEl","display","visibility","getComputedStyle","push","length","tryToAutoFocusToFirstNode","autoFocusToFirstNode","activeElement","focus","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","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":["useContext","useRef","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","document","keyboardInput","focusableNodesRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cssm/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/cssm/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/cssm/components/Select/Select.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
- */ export const Select = ({ children, ...props })=>{
+ */ export const Select = ({ children, className, ...props })=>{
     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, ...restProps } = props;
-    const hasPointer = useAdaptivityHasPointer();
+    const { deviceType } = useAdaptivityConditionalRender();
     const nativeProps = restProps;
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
-            (hasPointer === undefined || hasPointer) && /*#__PURE__*/ _jsx(CustomSelect, {
+            deviceType.desktop && /*#__PURE__*/ _jsx(CustomSelect, {
+                className: classNames(className, deviceType.desktop.className),
                 ...props
             }),
-            (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ _jsx(NativeSelect, {
+            deviceType.mobile && /*#__PURE__*/ _jsx(NativeSelect, {
+                className: classNames(className, deviceType.mobile.className),
                 ...nativeProps,
                 children: options.map(({ label, value })=>/*#__PURE__*/ _jsx("option", {
                         value: value,

package/dist/cssm/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":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","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","nativeProps","Fragment","undefined","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAE9E,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAM,EACJC,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,EACJ,GAAGC,WACJ,GAAG1B;IAEJ,MAAM2B,aAAahC;IAEnB,MAAMiC,cAAyEF;IAE/E,qBACE,MAAChC,MAAMmC,QAAQ;;YACXF,CAAAA,eAAeG,aAAaH,UAAS,mBAAM,KAAC/B;gBAAc,GAAGI,KAAK;;YAClE2B,CAAAA,eAAeG,aAAa,CAACH,UAAS,mBACtC,KAAC9B;gBAAc,GAAG+B,WAAW;0BAC1B3B,QAAQ8B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}
+{"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":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","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","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,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,EACJ,GAAGC,WACJ,GAAG1B;IAEJ,MAAM,EAAE2B,UAAU,EAAE,GAAGjC;IAEvB,MAAMkC,cAAyEF;IAE/E,qBACE,MAAClC,MAAMqC,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAACnC;gBAAaI,WAAWN,WAAWM,WAAW4B,WAAWG,OAAO,CAAC/B,SAAS;gBAAI,GAAGC,KAAK;;YAExF2B,WAAWI,MAAM,kBAChB,KAACnC;gBACCG,WAAWN,WAAWM,WAAW4B,WAAWI,MAAM,CAAChC,SAAS;gBAC3D,GAAG6B,WAAW;0BAEd3B,QAAQ+B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}

package/dist/cssm/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/cssm/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/cssm/components/Spacing/Spacing.js

@@ -1,41 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Spacing.module.css';
-export const ALLOWED_SIZES = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-    '4xl'
-];
+export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
+export const sizesClassNames = {
+    '3xs': styles['Spacing--3xs'],
+    '2xs': styles['Spacing--2xs'],
+    'xs': styles['Spacing--xs'],
+    's': styles['Spacing--s'],
+    'm': styles['Spacing--m'],
+    'l': styles['Spacing--l'],
+    'xl': styles['Spacing--xl'],
+    '2xl': styles['Spacing--2xl'],
+    '3xl': styles['Spacing--3xl'],
+    '4xl': styles['Spacing--4xl']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
- */ export const Spacing = ({ size = 'm', style: styleProp, ...restProps })=>{
-    const style = {
-        ...getSizeStyle(size),
-        ...styleProp
-    };
+ */ export const Spacing = ({ size = 'm', style, className, ...restProps })=>{
+    if (typeof size === 'string') {
+        className = className ? 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__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: styles['Spacing'],
-        style: style
+        style: style,
+        className: className,
+        baseClassName: styles['Spacing']
     });
 };
-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/cssm/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":["React","RootComponent","styles","ALLOWED_SIZES","Spacing","size","style","styleProp","restProps","getSizeStyle","baseClassName","sizeValue","getSizeValue","height","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gBAAgB;IAC3B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAU;AASX;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,OAAOC,SAAS,EAAE,GAAGC,WAAyB;IAClF,MAAMF,QAA6B;QACjC,GAAGG,aAAaJ,KAAK;QACrB,GAAGE,SAAS;IACd;IAEA,qBAAO,KAACN;QAAe,GAAGO,SAAS;QAAEE,eAAeR,MAAM,CAAC,UAAU;QAAEI,OAAOA;;AAChF,EAAE;AAEF,SAASG,aAAaJ,IAAmB;IACvC,MAAMM,YAAYC,aAAaP;IAE/B,OAAO;QACLQ,QAAQF;QACRG,SAAS,CAAC,KAAK,EAAEH,UAAU,SAAS,CAAC;IACvC;AACF;AAEA,SAASC,aAAaP,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":["classNames","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","sizesClassNames","Spacing","size","style","className","restProps","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,+BAA+B;AAE5E,OAAO,MAAMC,kBAAkB;IAC7B,OAAOF,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;IAC7B,MAAMA,MAAM,CAAC,cAAc;IAC3B,KAAKA,MAAM,CAAC,aAAa;IACzB,KAAKA,MAAM,CAAC,aAAa;IACzB,KAAKA,MAAM,CAAC,aAAa;IACzB,MAAMA,MAAM,CAAC,cAAc;IAC3B,OAAOA,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;IAC7B,OAAOA,MAAM,CAAC,eAAe;AAC/B,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMG,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAAyB;IAClF,IAAI,OAAOH,SAAS,UAAU;QAC5BE,YAAYA,YAAYR,WAAWI,eAAe,CAACE,KAAK,EAAEE,aAAaJ,eAAe,CAACE,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,KAACL;QACE,GAAGQ,SAAS;QACbF,OAAOA;QACPC,WAAWA;QACXE,eAAeR,MAAM,CAAC,UAAU;;AAGtC,EAAE"}

package/dist/cssm/components/Spacing/Spacing.module.css

@@ -1,4 +1,48 @@
 .Spacing {
+  --vkui_internal--Spacing_gap: 0;
+
   position: relative;
+  block-size: var(--vkui_internal--Spacing_gap);
+  padding-block: calc(1px * var(--vkui_internal--Spacing_gap) / 2);
   box-sizing: border-box;
 }
+
+.Spacing--3xs {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xs);
+}
+
+.Spacing--2xs {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_2xs);
+}
+
+.Spacing--xs {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_xs);
+}
+
+.Spacing--s {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_s);
+}
+
+.Spacing--m {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_m);
+}
+
+.Spacing--l {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_l);
+}
+
+.Spacing--xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_xl);
+}
+
+.Spacing--2xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_2xl);
+}
+
+.Spacing--3xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xl);
+}
+
+.Spacing--4xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_4xl);
+}

package/dist/cssm/components/SplitLayout/SplitLayout.js

@@ -9,7 +9,7 @@ import styles from './SplitLayout.module.css';
  */ export const SplitLayout = ({ popout, modal, header, children, getRootRef, getRef, className, center, ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ _jsxs(PopoutRoot, {
-        className: classNames(styles['SplitLayout'], platform === 'ios' && styles['SplitLayout--ios'], center && styles['SplitLayout--center']),
+        className: classNames(styles['SplitLayout'], platform === 'ios' && styles['SplitLayout--ios']),
         popout: popout,
         modal: modal,
         getRootRef: getRootRef,
@@ -18,7 +18,7 @@ import styles from './SplitLayout.module.css';
             /*#__PURE__*/ _jsx("div", {
                 ...restProps,
                 ref: getRef,
-                className: classNames(styles['SplitLayout__inner'], !!header && styles['SplitLayout__inner--header'], className),
+                className: classNames(styles['SplitLayout__inner'], !!header && styles['SplitLayout__inner--header'], center && styles['SplitLayout__inner--center'], className),
                 children: children
             })
         ]

package/dist/cssm/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":["React","classNames","usePlatform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAoB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,MAACC;QACCS,WAAWX,WACTG,MAAM,CAAC,cAAc,EACrBW,aAAa,SAASX,MAAM,CAAC,mBAAmB,EAChDS,UAAUT,MAAM,CAAC,sBAAsB;QAEzCE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,KAACQ;gBACE,GAAGF,SAAS;gBACbG,KAAKN;gBACLC,WAAWX,WACTG,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;0BAGDH;;;;AAIT,EAAE"}
+{"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":["React","classNames","usePlatform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAoB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,MAACC;QACCS,WAAWX,WACTG,MAAM,CAAC,cAAc,EACrBW,aAAa,SAASX,MAAM,CAAC,mBAAmB;QAElDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,KAACQ;gBACE,GAAGF,SAAS;gBACbG,KAAKN;gBACLC,WAAWX,WACTG,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDS,UAAUT,MAAM,CAAC,6BAA6B,EAC9CQ;0BAGDH;;;;AAIT,EAAE"}

package/dist/cssm/components/SplitLayout/SplitLayout.module.css

@@ -34,6 +34,6 @@
   );
 }
 
-.SplitLayout--center {
+.SplitLayout__inner--center {
   justify-content: center;
 }

package/dist/cssm/components/Textarea/Textarea.module.css

@@ -1,4 +1,5 @@
 .Textarea {
+  overflow: hidden;
   position: relative;
 }
 

package/dist/cssm/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/cssm/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/cssm/components/ToolButton/ToolButton.js

@@ -20,7 +20,7 @@ const stylesDirection = {
 };
 const sizeYClassNames = {
     none: styles['ToolButton--sizeY-none'],
-    ['regular']: styles['ToolButton--sizeY-regular']
+    regular: styles['ToolButton--sizeY-regular']
 };
 /**
  * Кнопки, которые используются для вызова инструмента, вставки аттачей или
@@ -45,6 +45,7 @@ const sizeYClassNames = {
                 IconRegular: IconRegular
             }),
             hasChildren && /*#__PURE__*/ _jsx("span", {
+                className: styles['ToolButton__text'],
                 children: children
             })
         ]

package/dist/cssm/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":["classNames","hasReactNode","noop","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","ToolButton","mode","appearance","direction","onClick","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,oBAAoB,QAEf,+CAA+C;AACtD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,MAAM,CAAC,2BAA2B;IAC3CG,WAAWH,MAAM,CAAC,6BAA6B;IAC/CI,UAAUJ,MAAM,CAAC,4BAA4B;IAC7CK,SAASL,MAAM,CAAC,2BAA2B;AAC7C;AAEA,MAAMM,mBAAmB;IACvBC,QAAQP,MAAM,CAAC,gCAAgC;IAC/CQ,SAASR,MAAM,CAAC,iCAAiC;AACnD;AAEA,MAAMS,kBAAkB;IACtBC,KAAKV,MAAM,CAAC,4BAA4B;IACxCW,QAAQX,MAAM,CAAC,+BAA+B;AAChD;AAEA,MAAMY,kBAAkB;IACtBC,MAAMb,MAAM,CAAC,yBAAyB;IACtC,CAAC,UAAU,EAAEA,MAAM,CAAC,4BAA4B;AAClD;AASA;;;;;;CAMC,GACD,OAAO,MAAMc,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUtB,IAAI,EACduB,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG5B;IAC3B,MAAM6B,cAAc/B,aAAayB;IAEjC,qBACE,MAACrB;QACC4B,WAAW3B,MAAM,CAAC,oBAAoB;QACtC4B,YAAY5B,MAAM,CAAC,qBAAqB;QACxC6B,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBb,SAASA;QACTC,WAAWzB,WACTyB,WACAnB,MAAM,CAAC,aAAa,EACpBuB,WAAW,CAACG,eAAe1B,MAAM,CAAC,sBAAsB,EACxDC,UAAU,CAACc,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BP,eAAe,CAACQ,UAAU,EAC1BQ,UAAU,aAAab,eAAe,CAACa,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAAC1B;gBAAqBuB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACM;0BAAMZ;;;;AAG7B,EAAE"}
+{"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":["classNames","hasReactNode","noop","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","ToolButton","mode","appearance","direction","onClick","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,oBAAoB,QAEf,+CAA+C;AACtD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,MAAM,CAAC,2BAA2B;IAC3CG,WAAWH,MAAM,CAAC,6BAA6B;IAC/CI,UAAUJ,MAAM,CAAC,4BAA4B;IAC7CK,SAASL,MAAM,CAAC,2BAA2B;AAC7C;AAEA,MAAMM,mBAAmB;IACvBC,QAAQP,MAAM,CAAC,gCAAgC;IAC/CQ,SAASR,MAAM,CAAC,iCAAiC;AACnD;AAEA,MAAMS,kBAAkB;IACtBC,KAAKV,MAAM,CAAC,4BAA4B;IACxCW,QAAQX,MAAM,CAAC,+BAA+B;AAChD;AAEA,MAAMY,kBAAkB;IACtBC,MAAMb,MAAM,CAAC,yBAAyB;IACtCc,SAASd,MAAM,CAAC,4BAA4B;AAC9C;AAcA;;;;;;CAMC,GACD,OAAO,MAAMe,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUvB,IAAI,EACdwB,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM8B,cAAchC,aAAa0B;IAEjC,qBACE,MAACtB;QACC6B,WAAW5B,MAAM,CAAC,oBAAoB;QACtC6B,YAAY7B,MAAM,CAAC,qBAAqB;QACxC8B,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBb,SAASA;QACTC,WAAW1B,WACT0B,WACApB,MAAM,CAAC,aAAa,EACpBwB,WAAW,CAACG,eAAe3B,MAAM,CAAC,sBAAsB,EACxDC,UAAU,CAACe,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BR,eAAe,CAACS,UAAU,EAC1BQ,UAAU,aAAad,eAAe,CAACc,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAAC3B;gBAAqBwB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACM;gBAAKb,WAAWpB,MAAM,CAAC,mBAAmB;0BAAGqB;;;;AAGpE,EAAE"}

package/dist/cssm/components/ToolButton/ToolButton.module.css

@@ -49,30 +49,16 @@
   flex-direction: column;
 }
 
-/* stylelint-disable selector-max-universal -- gap для элементов */
-
-.ToolButton--direction-row > * {
-  -webkit-margin-end: 4px;
-          margin-inline-end: 4px;
-}
-
-.ToolButton--direction-row > *:last-child {
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
+.ToolButton--direction-row .ToolButton__text {
+  -webkit-margin-start: 4px;
+          margin-inline-start: 4px;
 }
 
-.ToolButton--direction-column > * {
-  -webkit-margin-after: 4px;
-          margin-block-end: 4px;
+.ToolButton--direction-column .ToolButton__text {
+  -webkit-margin-before: 4px;
+          margin-block-start: 4px;
 }
 
-.ToolButton--direction-column > *:last-child {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-}
-
-/* stylelint-enable selector-max-universal */
-
 /* ToolButton's backgrounds */
 
 /* Mode  = Primary */

package/dist/cssm/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/cssm/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/cssm/hooks/useDraggableWithDomApi/autoScroll.js

@@ -2,7 +2,6 @@ import { getNodeScroll, getScrollHeight, getScrollRect } from '../../lib/dom';
 import { rafSchd } from '../../lib/rafSchd';
 const SCROLL_SPEED = 10;
 export const EDGE_SIZE = 50;
-export const OUTBOX_OFFSET = -30;
 export const getAutoScrollingData = (clientY, scrollEl)=>{
     const scrollTop = Math.floor(getNodeScroll(scrollEl).scrollTop);
     const { relative, edges } = getScrollRect(scrollEl);
@@ -17,7 +16,7 @@ export 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/cssm/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":["getNodeScroll","getScrollHeight","getScrollRect","rafSchd","SCROLL_SPEED","EDGE_SIZE","OUTBOX_OFFSET","getAutoScrollingData","clientY","scrollEl","scrollTop","Math","floor","relative","edges","viewportHeight","height","documentHeight","maxScrollY","canScrollUp","canScrollDown","edgeTop","edgeBottom","y","topDistance","bottomDistance","isInTopEdge","isInBottomEdge","result","shouldScrolling","createAutoScrollController","isRunning","scheduledScroll","scroll","fn","scrollBy","cancel","tryAutoScroll","stop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,eAAe,EAAEC,aAAa,QAAQ,gBAAgB;AAC9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,eAAe;AACrB,OAAO,MAAMC,YAAY,GAAG;AAC5B,OAAO,MAAMC,gBAAgB,CAAC,GAAG;AAEjC,OAAO,MAAMC,uBAAuB,CAACC,SAAiBC;IACpD,MAAMC,YAAYC,KAAKC,KAAK,CAACZ,cAAcS,UAAUC,SAAS;IAE9D,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGZ,cAAcO;IAC1C,MAAMM,iBAAiBF,SAASG,MAAM;IACtC,MAAMC,iBAAiBhB,gBAAgBQ;IACvC,MAAMS,aAAaD,iBAAiBF;IACpC,MAAMI,cAAcT,YAAY;IAChC,MAAMU,gBAAgBV,YAAYQ;IAElC,MAAM,CAACG,SAASC,WAAW,GAAGR,MAAMS,CAAC;IACrC,MAAMC,cAAchB,UAAUa;IAC9B,MAAMI,iBAAiBH,aAAad;IACpC,MAAMkB,cAAcF,eAAenB;IACnC,MAAMsB,iBAAiBF,kBAAkBpB;IAEzC,MAAMuB,SAAS;QACbC,iBACE,AAACV,eAAeO,eAAeF,eAAelB,iBAC7Cc,iBAAiBO,kBAAkBF,kBAAkBnB;QACxDiB,GAAG;IACL;IAEA,yFAAyF;IACzF,IAAIG,aAAa;QACfE,OAAOL,CAAC,GAAG,CAAC,IAAK,CAAA,AAAClB,CAAAA,YAAYmB,WAAU,IAAKnB,SAAQ,IAAKD;IAC5D,OAAO,IAAIuB,gBAAgB;QACzBC,OAAOL,CAAC,GAAG,AAAElB,CAAAA,YAAYoB,cAAa,IAAKpB,YAAaD;IAC1D;IAEA,OAAOwB;AACT,EAAE;AAIF,OAAO,MAAME,6BAA6B,CAACrB;IACzC,IAAIsB,YAAY;IAChB,MAAMC,kBAAkB7B,QAAQ8B;IAEhC,SAASA,OAAOC,EAAuB;QACrC,MAAM,EAAEL,eAAe,EAAEN,CAAC,EAAE,GAAGW;QAC/B,IAAIL,iBAAiB;YACnBE,YAAY;YACZtB,SAAS0B,QAAQ,CAAC,GAAGZ;YACrBS,gBAAgBE;QAClB,OAAO;YACLH,YAAY;YACZC,gBAAgBI,MAAM;QACxB;IACF;IAEA,MAAMC,gBAAgB,CAACH;QACrBF,gBAAgBE;IAClB;IAEA,MAAMI,OAAO;QACXP,YAAY;QACZC,gBAAgBI,MAAM;IACxB;IAEA,OAAO;QACLC;QACAC;QACA,IAAIP,aAAY;YACd,OAAOA;QACT;IACF;AACF,EAAE"}
+{"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":["getNodeScroll","getScrollHeight","getScrollRect","rafSchd","SCROLL_SPEED","EDGE_SIZE","getAutoScrollingData","clientY","scrollEl","scrollTop","Math","floor","relative","edges","viewportHeight","height","documentHeight","maxScrollY","canScrollUp","canScrollDown","edgeTop","edgeBottom","y","topDistance","bottomDistance","isInTopEdge","isInBottomEdge","result","shouldScrolling","createAutoScrollController","isRunning","scheduledScroll","scroll","fn","scrollBy","cancel","tryAutoScroll","stop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,eAAe,EAAEC,aAAa,QAAQ,gBAAgB;AAC9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,eAAe;AACrB,OAAO,MAAMC,YAAY,GAAG;AAE5B,OAAO,MAAMC,uBAAuB,CAACC,SAAiBC;IACpD,MAAMC,YAAYC,KAAKC,KAAK,CAACX,cAAcQ,UAAUC,SAAS;IAE9D,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGX,cAAcM;IAC1C,MAAMM,iBAAiBF,SAASG,MAAM;IACtC,MAAMC,iBAAiBf,gBAAgBO;IACvC,MAAMS,aAAaD,iBAAiBF;IACpC,MAAMI,cAAcT,YAAY;IAChC,MAAMU,gBAAgBV,YAAYQ;IAElC,MAAM,CAACG,SAASC,WAAW,GAAGR,MAAMS,CAAC;IACrC,MAAMC,cAAchB,UAAUa;IAC9B,MAAMI,iBAAiBH,aAAad;IACpC,MAAMkB,cAAcF,eAAelB;IACnC,MAAMqB,iBAAiBF,kBAAkBnB;IAEzC,MAAMsB,SAAS;QACbC,iBAAiB,AAACV,eAAeO,eAAiBN,iBAAiBO;QACnEJ,GAAG;IACL;IAEA,yFAAyF;IACzF,IAAIG,aAAa;QACfE,OAAOL,CAAC,GAAG,CAAC,IAAK,CAAA,AAACjB,CAAAA,YAAYkB,WAAU,IAAKlB,SAAQ,IAAKD;IAC5D,OAAO,IAAIsB,gBAAgB;QACzBC,OAAOL,CAAC,GAAG,AAAEjB,CAAAA,YAAYmB,cAAa,IAAKnB,YAAaD;IAC1D;IAEA,OAAOuB;AACT,EAAE;AAIF,OAAO,MAAME,6BAA6B,CAACrB;IACzC,IAAIsB,YAAY;IAChB,MAAMC,kBAAkB5B,QAAQ6B;IAEhC,SAASA,OAAOC,EAAuB;QACrC,MAAM,EAAEL,eAAe,EAAEN,CAAC,EAAE,GAAGW;QAC/B,IAAIL,iBAAiB;YACnBE,YAAY;YACZtB,SAAS0B,QAAQ,CAAC,GAAGZ;YACrBS,gBAAgBE;QAClB,OAAO;YACLH,YAAY;YACZC,gBAAgBI,MAAM;QACxB;IACF;IAEA,MAAMC,gBAAgB,CAACH;QACrBF,gBAAgBE;IAClB;IAEA,MAAMI,OAAO;QACXP,YAAY;QACZC,gBAAgBI,MAAM;IACxB;IAEA,OAAO;QACLC;QACAC;QACA,IAAIP,aAAY;YACd,OAAOA;QACT;IACF;AACF,EAAE"}

package/dist/cssm/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/cssm/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/cssm/hooks/useResizeObserver.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CustomResizeObserver } from '../lib/floating/customResizeObserver';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useStableCallback } from './useStableCallback';
+/**
+ * Хук вызывает переданный коллбэк при изменении размеров элемента.
+ */ export function useResizeObserver(ref, callback) {
+    const stableCallback = useStableCallback(callback);
+    useIsomorphicLayoutEffect(function addResizeObserverHandler() {
+        /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */ if (!ref.current) {
+            return;
+        }
+        const element = ref.current;
+        const observer = new CustomResizeObserver(()=>stableCallback(element));
+        observer.observe(element);
+        observer.appendToTheDOM();
+        return ()=>observer.disconnect();
+    }, [
+        ref
+    ]);
+}
+
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/cssm/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":["React","CustomResizeObserver","useIsomorphicLayoutEffect","useStableCallback","useResizeObserver","ref","callback","stableCallback","addResizeObserverHandler","current","element","observer","observe","appendToTheDOM","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,yBAAyB,QAAQ,mCAAmC;AAC7E,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD;;CAEC,GACD,OAAO,SAASC,kBACdC,GAA+C,EAC/CC,QAAwC;IAExC,MAAMC,iBAAiBJ,kBAAkBG;IAEzCJ,0BACE,SAASM;QACP,6EAA6E,GAC7E,IAAI,CAACH,IAAII,OAAO,EAAE;YAChB;QACF;QACA,MAAMC,UAAUL,IAAII,OAAO;QAC3B,MAAME,WAAW,IAAIV,qBAAqB,IAAMM,eAAeG;QAC/DC,SAASC,OAAO,CAACF;QACjBC,SAASE,cAAc;QAEvB,OAAO,IAAMF,SAASG,UAAU;IAClC,GACA;QAACT;KAAI;AAET"}

package/dist/cssm/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/cssm/lib/floating/customResizeObserver.js

@@ -6,7 +6,8 @@ const defaultIframeStyles = {
     width: '100%',
     height: '100%',
     pointerEvents: 'none',
-    opacity: '0'
+    opacity: '0',
+    border: '0'
 };
 /*
  * Специальный CustomResizeObserver как fallback для ResizeObserver