@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/cssm/components/FixedLayout/FixedLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n\n  const doResize = () => {\n    if (useParentWidth && ref.current) {\n      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical &&\n          {\n            top: styles['FixedLayout--vertical-top'],\n            bottom: classNames(\n              styles['FixedLayout--vertical-bottom'],\n              'vkuiInternalFixedLayout--vertical-bottom',\n            ),\n          }[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AA0B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWhB;IACjB,MAAMiB,MAAMnB,aAAaY,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACO,OAAOC,SAAS,GAAGvB,MAAMwB,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGrB;IACnB,MAAM,EAAEsB,MAAM,EAAE,GAAG3B,MAAM4B,UAAU,CAACrB;IAEpC,MAAMsB,WAAW;QACf,IAAIX,kBAAkBG,IAAIS,OAAO,EAAE;YACjC,MAAMC,cAAcV,IAAIS,OAAO,CAACE,aAAa,EAAEC,wBAAwBX;YACvEC,SAASQ,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGN;QAC9C,OAAO,IAAIE,QAAQG,SAAS;YAC1B,MAAMI,gBAAgBC,iBAAiBR,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLhB,SAASE;QACX;IACF;IACAzB,MAAMwC,SAAS,CAACX,UAAU;QAACF;QAAQP;QAAUC;QAAKH;KAAe;IACjEf,uBAAuBuB,QAAQ,UAAUG;IAEzC,qBACE,oBAACrB;QACE,GAAGW,SAAS;QACbsB,OAAAA;QACApB,KAAKA;QACLJ,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBW,aAAad,SAASoC,GAAG,IAAI,gCAC7B1B,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE8B,KAAKlC,MAAM,CAAC,4BAA4B;YACxCmC,QAAQ3C,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;OAExBX;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nconst stylesVertical = {\n  top: styles['FixedLayout--vertical-top'],\n  bottom: classNames(\n    styles['FixedLayout--vertical-bottom'],\n    'vkuiInternalFixedLayout--vertical-bottom',\n  ),\n};\n\nexport interface FixedLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n\n  const doResize = () => {\n    if (useParentWidth && ref.current) {\n      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical && stylesVertical[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","stylesVertical","top","bottom","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,4BAA4B;IACxCG,QAAQX,WACNQ,MAAM,CAAC,+BAA+B,EACtC;AAEJ;AAyBA;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWnB;IACjB,MAAMoB,MAAMtB,aAAae,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACO,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGxB;IACnB,MAAM,EAAEyB,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAACxB;IAEpC,MAAMyB,WAAW;QACf,IAAIX,kBAAkBG,IAAIS,OAAO,EAAE;YACjC,MAAMC,cAAcV,IAAIS,OAAO,CAACE,aAAa,EAAEC,wBAAwBX;YACvEC,SAASQ,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGN;QAC9C,OAAO,IAAIE,QAAQG,SAAS;YAC1B,MAAMI,gBAAgBC,iBAAiBR,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLhB,SAASE;QACX;IACF;IACA5B,MAAM2C,SAAS,CAACX,UAAU;QAACF;QAAQP;QAAUC;QAAKH;KAAe;IACjElB,uBAAuB0B,QAAQ,UAAUG;IAEzC,qBACE,oBAACxB;QACE,GAAGc,SAAS;QACbsB,OAAAA;QACApB,KAAKA;QACLJ,WAAWnB,WACTQ,MAAM,CAAC,cAAc,EACrBc,aAAajB,SAASuC,GAAG,IAAI,gCAC7B1B,UAAUV,MAAM,CAAC,sBAAsB,EACvCO,YAAYN,cAAc,CAACM,SAAS,EACpCI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;OAExBX;AAGP,EAAE"}

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

@@ -48,6 +48,8 @@
  * PanelHeader
  */
 
+/* stylelint-disable-next-line selector-max-universal */
+
 :global(.vkuiInternalPanelHeader) ~ .FixedLayout--vertical-top,
 :global(.vkuiInternalPanelHeader)
   ~ *

package/dist/cssm/components/FocusTrap/FocusTrap.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasComponent, HasRootRef } from '../../types';
-export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
+export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends React.AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
     restoreFocus?: boolean;
     timeout?: number;
     onClose?(): void;
@@ -8,4 +8,4 @@ export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, Ha
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-export declare const FocusTrap: ({ Component, onClose, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps) => React.JSX.Element;
+export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => React.JSX.Element;

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 { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } 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\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } 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  restoreFocus?: 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  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"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"}

package/dist/cssm/components/FocusVisible/FocusVisible.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 export type FocusVisibleMode = 'inside' | 'outside' | 'outline';
-export interface FocusVisibleProps {
+export interface FocusVisibleProps extends HasRootRef<HTMLSpanElement> {
     visible: boolean | undefined;
     mode: FocusVisibleMode;
     thin?: boolean;

package/dist/cssm/components/FocusVisible/FocusVisible.js

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './FocusVisible.module.css';
+const stylesMode = {
+    inside: styles['FocusVisible--mode-inside'],
+    outside: styles['FocusVisible--mode-outside'],
+    outline: styles['FocusVisible--mode-outline']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
- */ export const FocusVisible = ({ visible, mode, thin, ...restProps })=>/*#__PURE__*/ React.createElement("span", {
+ */ export const FocusVisible = ({ visible, mode, thin, ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
         "aria-hidden": true,
-        className: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], {
-            inside: styles['FocusVisible--mode-inside'],
-            outside: styles['FocusVisible--mode-outside'],
-            outline: styles['FocusVisible--mode-outline']
-        }[mode])
+        baseClassName: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], stylesMode[mode])
     });
 
 //# sourceMappingURL=FocusVisible.js.map

package/dist/cssm/components/FocusVisible/FocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside' | 'outline';\n\nexport interface FocusVisibleProps {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n  <span\n    {...restProps}\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n        outline: styles['FocusVisible--mode-outline'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","FocusVisible","visible","mode","thin","restProps","span","aria-hidden","className","inside","outside","outline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAU/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,WAA8B,iBACnF,oBAACC;QACE,GAAGD,SAAS;QACbE,eAAAA;QACAC,WAAWT,WACTC,MAAM,CAAC,eAAe,EACtBE,WAAWF,MAAM,CAAC,wBAAwB,EAC1CI,QAAQJ,MAAM,CAAC,qBAAqB,EACpC;YACES,QAAQT,MAAM,CAAC,4BAA4B;YAC3CU,SAASV,MAAM,CAAC,6BAA6B;YAC7CW,SAASX,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACG,KAAK;OAGX"}
+{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FocusVisible.module.css';\n\nconst stylesMode = {\n  inside: styles['FocusVisible--mode-inside'],\n  outside: styles['FocusVisible--mode-outside'],\n  outline: styles['FocusVisible--mode-outline'],\n};\n\nexport type FocusVisibleMode = 'inside' | 'outside' | 'outline';\n\nexport interface FocusVisibleProps extends HasRootRef<HTMLSpanElement> {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n  <RootComponent\n    {...restProps}\n    aria-hidden\n    baseClassName={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      stylesMode[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","stylesMode","inside","outside","outline","FocusVisible","visible","mode","thin","restProps","aria-hidden","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa;IACjBC,QAAQF,MAAM,CAAC,4BAA4B;IAC3CG,SAASH,MAAM,CAAC,6BAA6B;IAC7CI,SAASJ,MAAM,CAAC,6BAA6B;AAC/C;AAUA;;CAEC,GACD,OAAO,MAAMK,eAAe,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,WAA8B,iBACnF,oBAACV;QACE,GAAGU,SAAS;QACbC,eAAAA;QACAC,eAAeb,WACbE,MAAM,CAAC,eAAe,EACtBM,WAAWN,MAAM,CAAC,wBAAwB,EAC1CQ,QAAQR,MAAM,CAAC,qBAAqB,EACpCC,UAAU,CAACM,KAAK;OAGpB"}

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

@@ -63,7 +63,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .FocusVisible--visible.FocusVisible--mode-inside {
-    animation: vkui-animation-focus-visible 0.15s ease-in-out forwards;
+    animation: animation-focus-visible 0.15s ease-in-out forwards;
     animation-delay: 0.01ms;
     will-change: top, left, bottom, right;
 
@@ -71,13 +71,13 @@
   }
 
   .FocusVisible--visible.FocusVisible--mode-outside {
-    animation-name: vkui-animation-focus-visible-outside;
+    animation-name: animation-focus-visible-outside;
 
     --vkui_internal--focus_visible_distance: 0;
   }
 }
 
-@keyframes vkui-animation-focus-visible {
+@keyframes animation-focus-visible {
   0% {
   }
 
@@ -90,7 +90,7 @@
   }
 }
 
-@keyframes vkui-animation-focus-visible-outside {
+@keyframes animation-focus-visible-outside {
   0% {
   }
 

package/dist/cssm/components/FormField/FormField.js

@@ -10,6 +10,10 @@ const sizeYClassNames = {
     none: styles['FormField--sizeY-none'],
     [SizeType.COMPACT]: styles['FormField--sizeY-compact']
 };
+const stylesStatus = {
+    error: styles['FormField--status-error'],
+    valid: styles['FormField--status-valid']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */ export const FormField = ({ Component = 'span', status = 'default', children, getRootRef, before, after, disabled, mode = 'default', className, ...restProps })=>{
@@ -30,10 +34,7 @@ const sizeYClassNames = {
         ref: elRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && ({
-            error: styles['FormField--status-error'],
-            valid: styles['FormField--status-valid']
-        })[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], className)
+        className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && stylesStatus[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], className)
     }, before && /*#__PURE__*/ React.createElement("span", {
         className: styles['FormField__before']
     }, before), children, after && /*#__PURE__*/ React.createElement("span", {

package/dist/cssm/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQnB,aAAaY;IAC3B,MAAMQ,cAAcnB,eAAekB;IACnC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC;IAEzC,MAAMC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,MAAMK,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWnB,WACTM,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEsB,OAAO5B,MAAM,CAAC,0BAA0B;YACxC6B,OAAO7B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXW,UAAUnB,SAASgC,OAAO,IAAI7B,eAAe,CAACgB,MAAM,EACpDN,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYO,SAASlB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACsB;QAAKlB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWnB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACqB;QAAKC,eAAAA;QAAYnB,WAAWb,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAakC,MAAAA;QAAKC,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' && stylesStatus[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","stylesStatus","error","valid","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","REGULAR","span","aria-hidden","thin","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAEA,MAAMI,eAAe;IACnBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,OAAON,MAAM,CAAC,0BAA0B;AAC1C;AAiCA;;CAEC,GACD,OAAO,MAAMO,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQtB,aAAae;IAC3B,MAAMQ,cAActB,eAAeqB;IACnC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAM,CAAC0B,OAAOC,SAAS,GAAG7B,MAAM8B,QAAQ,CAAC;IAEzC,MAAMC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,MAAMK,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWtB,WACTM,MAAM,CAAC,YAAY,EACnBe,SAAS,aAAaf,MAAM,CAAC,0BAA0B,EACvDS,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CW,UAAUtB,SAASiC,OAAO,IAAI9B,eAAe,CAACmB,MAAM,EACpDN,YAAYd,MAAM,CAAC,sBAAsB,EACzC,CAACc,YAAYO,SAASrB,MAAM,CAAC,mBAAmB,EAChDgB;OAGDJ,wBAAU,oBAACoB;QAAKhB,WAAWhB,MAAM,CAAC,oBAAoB;OAAGY,SACzDF,UACAG,uBACC,oBAACmB;QAAKhB,WAAWtB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDa,sBAGL,oBAACmB;QAAKC,eAAAA;QAAYjB,WAAWhB,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAamC,MAAAA;QAAKC,SAAShB;QAAaJ,MAAK;;AAGpD,EAAE"}

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

@@ -21,7 +21,7 @@
   }
 }
 
-/* stylelint-disable-next-line @project-tools/stylelint-atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
 
 .FormField > * {
   border-radius: inherit;
@@ -126,7 +126,7 @@
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
 }
 
-/* stylelint-disable-next-line  @project-tools/stylelint-atomic */
+/* stylelint-disable-next-line  @project-tools/stylelint-atomic, selector-max-universal */
 
 .FormField *:focus {
   outline: none;
@@ -190,6 +190,8 @@
   border-radius: 0;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 :global(.vkuiInternalFormLayoutGroup--segmented) > *:first-of-type:not(:last-of-type) .FormField,
 :global(.vkuiInternalFormLayoutGroup--segmented)
   :global(.vkuiInternalRemovable__content)

package/dist/cssm/components/FormItem/FormItem.d.ts

@@ -17,8 +17,13 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
      * Режим `indent` предназначен для визуального отступа
      */
     removable?: boolean | 'indent';
+    /**
+     * Удаляет внешние отступы вокруг компонента
+     * @since 5.8.0
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, bottomId, ...restProps }: FormItemProps) => React.JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, removable, onRemove, removePlaceholder, getRootRef, htmlFor, bottomId, noPadding, ...restProps }: FormItemProps) => React.JSX.Element;

package/dist/cssm/components/FormItem/FormItem.js

@@ -4,6 +4,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Removable } from '../Removable/Removable';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './FormItem.module.css';
@@ -11,9 +12,13 @@ const sizeYClassNames = {
     none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),
     [SizeType.COMPACT]: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact')
 };
+const stylesStatus = {
+    error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
+    valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid')
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
- */ export const FormItem = ({ children, top, bottom, status = 'default', Component = 'div', removable, onRemove = noop, removePlaceholder = 'Удалить', getRootRef, className, htmlFor, bottomId, ...restProps })=>{
+ */ export const FormItem = ({ children, top, bottom, status = 'default', removable, onRemove = noop, removePlaceholder = 'Удалить', getRootRef, htmlFor, bottomId, noPadding, ...restProps })=>{
     const rootEl = useExternRef(getRootRef);
     const { sizeY = 'none' } = useAdaptivity();
     const wrappedChildren = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(top) && /*#__PURE__*/ React.createElement(Subhead, {
@@ -25,13 +30,10 @@ const sizeYClassNames = {
         id: bottomId,
         role: status === 'error' ? 'alert' : undefined
     }, bottom));
-    return /*#__PURE__*/ React.createElement(Component, {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        ref: rootEl,
-        className: classNames(styles['FormItem'], 'vkuiInternalFormItem', status !== 'default' && ({
-            error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
-            valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid')
-        })[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], hasReactNode(top) && classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'), removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'), className)
+        getRootRef: rootEl,
+        baseClassName: classNames(styles['FormItem'], !noPadding && styles['FormItem--withPadding'], 'vkuiInternalFormItem', status !== 'default' && stylesStatus[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], hasReactNode(top) && classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'), removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'))
     }, removable ? /*#__PURE__*/ React.createElement(Removable, {
         align: "start",
         onRemove: (e)=>{

package/dist/cssm/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  bottomId,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","bottomId","restProps","rootEl","sizeY","wrappedChildren","Fragment","id","role","undefined","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAwBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,YAAY,KAAK,EACjBC,SAAS,EACTC,WAAWlB,IAAI,EACfmB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACW;IACd,MAAMC,SAASvB,aAAakB;IAC5B,MAAM,EAAEM,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAM0B,gCACJ,oBAAC9B,MAAM+B,QAAQ,QACZ7B,aAAac,sBACZ,oBAACP;QACCe,WAAWd,MAAM,CAAC,gBAAgB;QAClCS,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAb,aAAae,yBACZ,oBAACT;QACCgB,WAAWd,MAAM,CAAC,mBAAmB;QACrCsB,IAAIN;QACJO,MAAMf,WAAW,UAAU,UAAUgB;OAEpCjB;IAMT,qBACE,oBAACE;QACE,GAAGQ,SAAS;QACbQ,KAAKP;QACLJ,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEkB,OAAOnC,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEF2B,OAAOpC,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXW,UAAUvB,SAASgC,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpD3B,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACCgC,OAAM;QACNlB,UAAU,CAACmB;YACT,IAAIZ,QAAQa,SAAS;gBACnBpB,SAASmB,GAAGZ,OAAOa,OAAO;YAC5B;QACF;QACAnB,mBAAmBA;QACnBoB,QAAQtB,cAAc;qBAEtB,oBAACuB;QACCnB,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDoB,oBAILA;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nconst stylesStatus = {\n  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles['FormItem'],\n        !noPadding && styles['FormItem--withPadding'],\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","RootComponent","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","stylesStatus","error","valid","FormItem","children","top","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","restProps","rootEl","sizeY","wrappedChildren","Fragment","className","Component","id","role","undefined","baseClassName","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMZ,WAAWU,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACL,SAASQ,OAAO,CAAC,EAAEb,WAClBU,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAEA,MAAMI,eAAe;IACnBC,OAAOf,WAAWU,MAAM,CAAC,yBAAyB,EAAE;IACpDM,OAAOhB,WAAWU,MAAM,CAAC,yBAAyB,EAAE;AACtD;AA6BA;;CAEC,GACD,OAAO,MAAMO,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,WAAWrB,IAAI,EACfsB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACW;IACd,MAAMC,SAAS1B,aAAaqB;IAC5B,MAAM,EAAEM,QAAQ,MAAM,EAAE,GAAG5B;IAE3B,MAAM6B,gCACJ,oBAACjC,MAAMkC,QAAQ,QACZhC,aAAakB,sBACZ,oBAACV;QACCyB,WAAWxB,MAAM,CAAC,gBAAgB;QAClCyB,WAAWT,UAAU,UAAU;QAC/BA,SAASA;OAERP,MAGJD,UACAjB,aAAamB,yBACZ,oBAACZ;QACC0B,WAAWxB,MAAM,CAAC,mBAAmB;QACrC0B,IAAIT;QACJU,MAAMhB,WAAW,UAAU,UAAUiB;OAEpClB;IAMT,qBACE,oBAACb;QACE,GAAGsB,SAAS;QACbJ,YAAYK;QACZS,eAAevC,WACbU,MAAM,CAAC,WAAW,EAClB,CAACkB,aAAalB,MAAM,CAAC,wBAAwB,EAC7C,wBACAW,WAAW,aAAaP,YAAY,CAACO,OAAO,EAC5CU,UAAU1B,SAASmC,OAAO,IAAI7B,eAAe,CAACoB,MAAM,EACpD9B,aAAakB,QACXnB,WAAWU,MAAM,CAAC,oBAAoB,EAAE,kCAC1CY,aAAatB,WAAWU,MAAM,CAAC,sBAAsB,EAAE;OAGxDY,0BACC,oBAAChB;QACCmC,OAAM;QACNlB,UAAU,CAACmB;YACT,IAAIZ,QAAQa,SAAS;gBACnBpB,SAASmB,GAAGZ,OAAOa,OAAO;YAC5B;QACF;QACAnB,mBAAmBA;QACnBoB,QAAQtB,cAAc;qBAEtB,oBAACuB;QACCX,WAAWlC,WAAWU,MAAM,CAAC,sBAAsB,EAAE;OAEpDsB,oBAILA;AAIR,EAAE"}

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

@@ -1,5 +1,8 @@
 .FormItem {
   display: block;
+}
+
+.FormItem--withPadding {
   padding: var(--vkui--size_form_item_padding_vertical--regular)
     var(--vkui--size_base_padding_horizontal--regular);
 }

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
-export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+export interface FormLayoutGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {
     mode?: 'vertical' | 'horizontal';
     /**
      * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
@@ -17,4 +17,4 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
  */
-export declare const FormLayoutGroup: ({ children, mode, removable, segmented, removePlaceholder, onRemove, getRootRef, className, ...restProps }: FormLayoutGroupProps) => React.JSX.Element;
+export declare const FormLayoutGroup: ({ children, mode, removable, segmented, removePlaceholder, onRemove, getRootRef, ...restProps }: FormLayoutGroupProps) => React.JSX.Element;

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js

@@ -4,6 +4,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Removable } from '../Removable/Removable';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './FormLayoutGroup.module.css';
 const sizeYClassNames = {
     none: classNames(styles['FormLayoutGroup--sizeY-none'], 'vkuiInternalFormLayoutGroup--sizeY-none'),
@@ -11,14 +12,14 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
- */ export const FormLayoutGroup = ({ children, mode = 'vertical', removable, segmented, removePlaceholder = 'Удалить', onRemove = noop, getRootRef, className, ...restProps })=>{
+ */ export const FormLayoutGroup = ({ children, mode = 'vertical', removable, segmented, removePlaceholder = 'Удалить', onRemove = noop, getRootRef, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const isRemovable = removable && mode === 'horizontal';
     const isSegmented = segmented && mode === 'horizontal';
     const rootEl = useExternRef(getRootRef);
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: rootEl,
-        className: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], mode === 'horizontal' && classNames(styles['FormLayoutGroup--mode-horizontal'], 'vkuiInternalFormLayoutGroup--mode-horizontal'), isRemovable && classNames(styles['FormLayoutGroup--removable'], 'vkuiInternalFormLayoutGroup--removable'), isSegmented && classNames(styles['FormLayoutGroup--segmented'], 'vkuiInternalFormLayoutGroup--segmented'), className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        getRootRef: rootEl,
+        baseClassName: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], mode === 'horizontal' && classNames(styles['FormLayoutGroup--mode-horizontal'], 'vkuiInternalFormLayoutGroup--mode-horizontal'), isRemovable && classNames(styles['FormLayoutGroup--removable'], 'vkuiInternalFormLayoutGroup--removable'), isSegmented && classNames(styles['FormLayoutGroup--segmented'], 'vkuiInternalFormLayoutGroup--segmented')),
         ...restProps
     }, isRemovable ? /*#__PURE__*/ React.createElement(Removable, {
         className: styles['FormLayoutGroup__removable'],

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,OAAO,CAAC,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWf,IAAI,EACfgB,UAAU,EACVC,SAAS,EACT,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY;YACT,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,QAAQ,QACZpB,wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA;;AAK9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    RemovableProps {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","RootComponent","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","isSegmented","rootEl","baseClassName","REGULAR","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMT,WACJO,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACH,SAASM,OAAO,CAAC,EAAEV,WAClBO,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAmBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWhB,IAAI,EACfiB,UAAU,EACV,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcP,aAAaD,SAAS;IAC1C,MAAMS,cAAcP,aAAaF,SAAS;IAC1C,MAAMU,SAASpB,aAAae;IAE5B,qBACE,oBAACZ;QACCY,YAAYK;QACZC,eAAexB,WACboB,UAAUhB,SAASqB,OAAO,IAAIjB,eAAe,CAACY,MAAM,EACpDP,SAAS,gBACPb,WACEO,MAAM,CAAC,mCAAmC,EAC1C,iDAEJc,eACErB,WACEO,MAAM,CAAC,6BAA6B,EACpC,2CAEJe,eACEtB,WACEO,MAAM,CAAC,6BAA6B,EACpC;QAGL,GAAGY,SAAS;OAEZE,4BACC,oBAAChB;QACCqB,WAAWnB,MAAM,CAAC,6BAA6B;QAC/CoB,OAAM;QACNX,mBAAmBA;QACnBC,UAAU,CAACW;YACT,IAAIL,QAAQM,SAAS;gBACnBZ,SAASW,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQhB,cAAc;OAErBF,0BAGH,oBAACb,MAAMgC,QAAQ,QACZnB,wBACD,oBAACoB;QAAKN,WAAWnB,MAAM,CAAC,0BAA0B;QAAE0B,eAAAA;;AAK9D,EAAE"}

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

@@ -48,13 +48,15 @@
   position: relative;
 }
 
-/* stylelint-disable @project-tools/stylelint-atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
 
 .FormLayoutGroup--segmented > * {
   min-width: 0;
   flex: 1;
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+
 .FormLayoutGroup--segmented > *:not(:first-child):not(.FormLayoutGroup__offset) {
   margin-left: calc(-1 * var(--vkui_internal--thin_border));
 }

package/dist/cssm/components/FormStatus/FormStatus.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'default' | 'error';
     header?: React.ReactNode;
 }

package/dist/cssm/components/FormStatus/FormStatus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}

package/dist/cssm/components/Gradient/Gradient.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Тип градиента
      */
@@ -12,4 +13,4 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */
-export declare const Gradient: ({ mode, children, to, className, ...restProps }: GradientProps) => React.JSX.Element;
+export declare const Gradient: ({ mode, to, ...restProps }: GradientProps) => React.JSX.Element;

package/dist/cssm/components/Gradient/Gradient.js

@@ -1,21 +1,24 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Gradient.module.css';
+const stylesMode = {
+    tint: styles['Gradient--mode-tint'],
+    black: styles['Gradient--mode-black'],
+    white: styles['Gradient--mode-white']
+};
+const stylesTo = {
+    top: styles['Gradient--to-top'],
+    bottom: styles['Gradient--to-bottom']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
- */ export const Gradient = ({ mode = 'tint', children, to = 'top', className, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+ */ export const Gradient = ({ mode = 'tint', to = 'top', ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         role: "presentation",
         ...restProps,
-        className: classNames({
-            tint: styles['Gradient--mode-tint'],
-            black: styles['Gradient--mode-black'],
-            white: styles['Gradient--mode-white']
-        }[mode], {
-            top: styles['Gradient--to-top'],
-            bottom: styles['Gradient--to-bottom']
-        }[to], className)
-    }, children);
+        baseClassName: classNames(stylesMode[mode], stylesTo[to])
+    });
 };
 
 //# sourceMappingURL=Gradient.js.map

package/dist/cssm/components/Gradient/Gradient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        {\n          tint: styles['Gradient--mode-tint'],\n          black: styles['Gradient--mode-black'],\n          white: styles['Gradient--mode-white'],\n        }[mode],\n        {\n          top: styles['Gradient--to-top'],\n          bottom: styles['Gradient--to-bottom'],\n        }[to],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Gradient","mode","children","to","className","restProps","div","role","tint","black","white","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,MAAM,EACbC,QAAQ,EACRC,KAAK,KAAK,EACVC,SAAS,EACT,GAAGC,WACW;IACd,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGF,SAAS;QACbD,WAAWN,WACT;YACEU,MAAMT,MAAM,CAAC,sBAAsB;YACnCU,OAAOV,MAAM,CAAC,uBAAuB;YACrCW,OAAOX,MAAM,CAAC,uBAAuB;QACvC,CAAC,CAACE,KAAK,EACP;YACEU,KAAKZ,MAAM,CAAC,mBAAmB;YAC/Ba,QAAQb,MAAM,CAAC,sBAAsB;QACvC,CAAC,CAACI,GAAG,EACLC;OAGDF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nconst stylesMode = {\n  tint: styles['Gradient--mode-tint'],\n  black: styles['Gradient--mode-black'],\n  white: styles['Gradient--mode-white'],\n};\n\nconst stylesTo = {\n  top: styles['Gradient--to-top'],\n  bottom: styles['Gradient--to-bottom'],\n};\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'tint', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(stylesMode[mode], stylesTo[to])}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesMode","tint","black","white","stylesTo","top","bottom","Gradient","mode","to","restProps","role","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,aAAa;IACjBC,MAAMF,MAAM,CAAC,sBAAsB;IACnCG,OAAOH,MAAM,CAAC,uBAAuB;IACrCI,OAAOJ,MAAM,CAAC,uBAAuB;AACvC;AAEA,MAAMK,WAAW;IACfC,KAAKN,MAAM,CAAC,mBAAmB;IAC/BO,QAAQP,MAAM,CAAC,sBAAsB;AACvC;AAaA;;CAEC,GACD,OAAO,MAAMQ,WAAW,CAAC,EAAEC,OAAO,MAAM,EAAEC,KAAK,KAAK,EAAE,GAAGC,WAA0B;IACjF,qBACE,oBAACZ;QACCa,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAef,WAAWG,UAAU,CAACQ,KAAK,EAAEJ,QAAQ,CAACK,GAAG;;AAG9D,EAAE"}

package/dist/cssm/components/Group/Group.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasChildren, HasRootRef } from '../../types';
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, HasChildren {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
@@ -24,4 +24,4 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */
-export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.JSX.Element;
+export declare const Group: ({ header, description, children, separator, mode: modeProps, padding, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.JSX.Element;