npm - @vkontakte/vkui - Versions diffs - 5.7.2 → 5.8.0 - Mend

@vkontakte/vkui 5.7.2 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1106) hide show

package/dist/cjs/components/FixedLayout/FixedLayout.js CHANGED Viewed

@@ -22,6 +22,10 @@ var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var _SplitColContext = require("../SplitCol/SplitColContext");
 var _TooltipContainer = require("../Tooltip/TooltipContainer");
+var stylesVertical = {
+    top: "vkuiFixedLayout--vertical-top",
+    bottom: (0, _vkjs.classNames)("vkuiFixedLayout--vertical-bottom", "vkuiInternalFixedLayout--vertical-bottom")
+};
 var FixedLayout = function(_param) {
     var children = _param.children, style = _param.style, vertical = _param.vertical, getRootRef = _param.getRootRef, getRef = _param.getRef, filled = _param.filled, className = _param.className, useParentWidth = _param.useParentWidth, restProps = _object_without_properties._(_param, [
         "children",
@@ -61,10 +65,7 @@ var FixedLayout = function(_param) {
     return /*#__PURE__*/ _react.createElement(_TooltipContainer.TooltipContainer, _object_spread_props._(_object_spread._({}, restProps), {
         fixed: true,
         ref: ref,
-        className: (0, _vkjs.classNames)("vkuiFixedLayout", platform === _platform.Platform.IOS && "vkuiInternalFixedLayout--ios", filled && "vkuiFixedLayout--filled", vertical && ({
-            top: "vkuiFixedLayout--vertical-top",
-            bottom: (0, _vkjs.classNames)("vkuiFixedLayout--vertical-bottom", "vkuiInternalFixedLayout--vertical-bottom")
-        })[vertical], className),
+        className: (0, _vkjs.classNames)("vkuiFixedLayout", platform === _platform.Platform.IOS && "vkuiInternalFixedLayout--ios", filled && "vkuiFixedLayout--filled", vertical && stylesVertical[vertical], className),
         style: _object_spread_props._(_object_spread._({}, style), {
             width: width
         })

package/dist/cjs/components/FixedLayout/FixedLayout.js.map CHANGED Viewed

	@@ -1 +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":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","window","useDOM","colRef","useContext","SplitColContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","TooltipContainer","fixed","~~classNames","~~Platform","IOS"~~,"top","bottom"~~],"mappings":";;;;+~~BAuCaA~~;;;eAAAA;;;;;;;;+~~DAvCU~~;oBACI;4BACE;sCACU;2BACX;mBACL;wBACE;+BAEO;gCACC;~~AA8B1B~~,~~IAAMA~~,cAAc;~~QACzBC~~,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACAC,wBAAAA,gBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,MAAMC,IAAAA,0BAAY,EAACT,YAAYC,SAAS,6BAA6B;IAC3E,IAA0BS,qCAAAA,OAAMC,QAAQ,CAAqBC,gBAAtDC,QAAmBH,oBAAZI,WAAYJ;IAC1B,IAAM,AAAEK,SAAWC,IAAAA,WAAM,IAAjBD;IACR,IAAM,AAAEE,SAAWP,OAAMQ,UAAU,CAACC,gCAAe,EAA3CF;IAER,IAAMG,WAAW;YAIJH;QAHX,IAAIb,kBAAkBI,IAAIa,OAAO,EAAE;gBACbb;YAApB,IAAMc,eAAcd,6BAAAA,IAAIa,OAAO,CAACE,aAAa,cAAzBf,iDAAAA,2BAA2BgB,qBAAqB,GAAGX,KAAK;YAC5EC,SAASQ,cAAc,AAAC,GAAc,OAAZA,aAAY,QAAMV;QAC9C,OAAO,KAAIK,UAAAA,oBAAAA,8BAAAA,QAAQI,OAAO,EAAE;YAC1B,IAAMI,gBAAgBC,iBAAiBT,OAAOI,OAAO;YAErDP,SACE,AAAC,GAIA,OAHCG,OAAOI,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,GACtC;QAEL,OAAO;YACLhB,SAASF;QACX;IACF;IACAF,OAAMqB,SAAS,CAACX,UAAU;QAACH;QAAQX;QAAUE;QAAKJ;KAAe;IACjE4B,IAAAA,8CAAsB,EAACjB,QAAQ,UAAUK;IAEzC,qBACE,qBAACa,kCAAgB,8CACX5B;QACJ6B,OAAAA;QACA1B,KAAKA;QACLL,~~WAAWgC~~,IAAAA,gBAAU,~~qBAEnB7B~~,~~aAAa8B~~,kBAAQ,CAACC,GAAG,IAAI,~~gCAC7BnC~~,qCACAH,~~YACE~~,~~CAAA;YACEuC~~,~~GAAG;YACHC~~,~~QAAQJ,IAAAA,gBAAU,sCAEhB;QAEJ,CAAA,CAAC,CAACpC,~~SAAS,~~EACbI~~;QAEFL,OAAO,4CAAKA;YAAOe,OAAAA;;QAElBhB;AAGP"}
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, 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":["FixedLayout","stylesVertical","top","bottom","classNames","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","window","useDOM","colRef","useContext","SplitColContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","TooltipContainer","fixed","Platform","IOS"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;;+DA9CU;oBACI;4BACE;sCACU;2BACX;mBACL;wBACE;+BAEO;gCACC;AAGjC,IAAMC,iBAAiB;IACrBC,GAAG;IACHC,QAAQC,IAAAA,gBAAU,sCAEhB;AAEJ;AA4BO,IAAMJ,cAAc;QACzBK,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACAC,wBAAAA,gBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,MAAMC,IAAAA,0BAAY,EAACT,YAAYC,SAAS,6BAA6B;IAC3E,IAA0BS,qCAAAA,OAAMC,QAAQ,CAAqBC,gBAAtDC,QAAmBH,oBAAZI,WAAYJ;IAC1B,IAAM,AAAEK,SAAWC,IAAAA,WAAM,IAAjBD;IACR,IAAM,AAAEE,SAAWP,OAAMQ,UAAU,CAACC,gCAAe,EAA3CF;IAER,IAAMG,WAAW;YAIJH;QAHX,IAAIb,kBAAkBI,IAAIa,OAAO,EAAE;gBACbb;YAApB,IAAMc,eAAcd,6BAAAA,IAAIa,OAAO,CAACE,aAAa,cAAzBf,iDAAAA,2BAA2BgB,qBAAqB,GAAGX,KAAK;YAC5EC,SAASQ,cAAc,AAAC,GAAc,OAAZA,aAAY,QAAMV;QAC9C,OAAO,KAAIK,UAAAA,oBAAAA,8BAAAA,QAAQI,OAAO,EAAE;YAC1B,IAAMI,gBAAgBC,iBAAiBT,OAAOI,OAAO;YAErDP,SACE,AAAC,GAIA,OAHCG,OAAOI,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,GACtC;QAEL,OAAO;YACLhB,SAASF;QACX;IACF;IACAF,OAAMqB,SAAS,CAACX,UAAU;QAACH;QAAQX;QAAUE;QAAKJ;KAAe;IACjE4B,IAAAA,8CAAsB,EAACjB,QAAQ,UAAUK;IAEzC,qBACE,qBAACa,kCAAgB,8CACX5B;QACJ6B,OAAAA;QACA1B,KAAKA;QACLL,WAAWP,IAAAA,gBAAU,qBAEnBU,aAAa6B,kBAAQ,CAACC,GAAG,IAAI,gCAC7BlC,qCACAH,YAAYN,cAAc,CAACM,SAAS,EACpCI;QAEFL,OAAO,4CAAKA;YAAOe,OAAAA;;QAElBhB;AAGP"}

package/dist/cjs/components/FocusTrap/FocusTrap.d.ts CHANGED Viewed

@@ -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/cjs/components/FocusTrap/FocusTrap.js.map CHANGED Viewed

	@@ -1 +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":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","AppRootContext","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture","tabIndex"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;+DAvBU;4BACM;sCACU;0BACZ;6BAC+B;mBACnC;yCACmB;8BAEX;AAE/B,IAAMC,qBAA6BC,sCAAuB,CAACC,IAAI;AAaxD,IAAMH,YAAY;kCACvBI,WAAAA,0CAAY,0BACZC,iBAAAA,sCACAC,cAAAA,gDAAe,oDACfC,SAAAA,sCAAU,oBACVC,oBAAAA,YACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,MAAMC,IAAAA,0BAAY,~~EAAcJ~~;~~IAEtC~~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"}
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<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":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","AppRootContext","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture","tabIndex"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;+DAvBU;4BACM;sCACU;0BACZ;6BAC+B;mBACnC;yCACmB;8BAEX;AAE/B,IAAMC,qBAA6BC,sCAAuB,CAACC,IAAI;AAaxD,IAAMH,YAAY;kCACvBI,WAAAA,0CAAY,0BACZC,iBAAAA,sCACAC,cAAAA,gDAAe,oDACfC,SAAAA,sCAAU,oBACVC,oBAAAA,YACAC,kBAAAA,UACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,MAAMC,IAAAA,0BAAY,EAAIJ;IAE5B,IAA6BK,UAAAA,IAAAA,WAAM,KAA3BC,WAAqBD,QAArBC,UAAUC,SAAWF,QAAXE;IAElB,IAA4CC,qCAAAA,OAAMC,QAAQ,CAAuB,WAA1EC,iBAAqCF,oBAArBG,oBAAqBH;IAC5C,IAA4CA,sCAAAA,OAAMC,QAAQ,CAAqB,WAAxEG,iBAAqCJ,qBAArBK,oBAAqBL;IAE5C,oBAAoB;IAEpB,IAAM,AAAEM,gBAAkBN,OAAMO,UAAU,CAACC,8BAAc,EAAjDF;IACR,IAAMG,mBAAmBC,IAAAA,sBAAU,EAAC;YAG/Bf,cACDO;QAHF,IACEI,iBACA,GAACX,eAAAA,IAAIgB,OAAO,cAAXhB,mCAAAA,aAAaiB,QAAQ,CAACd,SAAUe,aAAa,QAC9CX,kBAAAA,4BAAAA,sCAAAA,gBAAgBY,MAAM,GACtB;YACAZ,cAAc,CAAC,EAAE,CAACa,KAAK;QACzB;IACF,GAAGxB;IACHyB,IAAAA,oDAAyB,EAAC;QACxBP,iBAAiBQ,GAAG;IACtB,GAAG,EAAE;IAEL,yBAAyB;IAEzBD,IAAAA,oDAAyB,EAAC;QACxB,IAAI,CAACrB,IAAIgB,OAAO,EAAE;YAChB;QACF;QAEA,IAAMO,QAAuB,EAAE;QAC/BC,MAAMC,SAAS,CAACC,OAAO,CAACC,IAAI,CAC1B,oDAAoD;QACpD3B,IAAIgB,OAAO,CAACY,gBAAgB,CAACtC,qBAC7B,SAACuC;YACC,IAAgCzB,2BAAAA,OAAQ0B,gBAAgB,CAACD,cAAjDE,UAAwB3B,yBAAxB2B,SAASC,aAAe5B,yBAAf4B;YAEjB,IAAID,YAAY,UAAUC,eAAe,UAAU;gBACjDT,MAAMU,IAAI,CAACJ;YACb;QACF;QAGF,IAAIN,MAAMJ,MAAM,KAAK,GAAG;YACtB,sCAAsC;YACtCI,MAAMU,IAAI,CAACjC,IAAIgB,OAAO;QACxB;QAEAR,kBAAkBe;IACpB,GAAG;QAACzB;KAAS;IAEb,sBAAsB;IAEtB,IAAMoC,qBAAqBnB,IAAAA,sBAAU,EAAC;QACpC,IAAIN,gBAAgB;YAClBA,eAAeW,KAAK;QACtB;IACF,GAAGxB;IACHyB,IAAAA,oDAAyB,EAAC;QACxB,IAAI1B,gBAAgBQ,SAAUe,aAAa,EAAE;YAC3CR,kBAAkBP,SAAUe,aAAa;YAEzC,OAAO;gBACLgB,mBAAmBZ,GAAG;YACxB;QACF;QAEA;IACF,GAAG;QAAC3B;KAAa;IAEjB,IAAMwC,oBAAoB,SAACC;YACS7B;QAAlC,IAAI8B,IAAAA,yBAAU,EAACD,OAAOE,mBAAI,CAACC,GAAG,MAAIhC,kBAAAA,4BAAAA,sCAAAA,gBAAgBY,MAAM,GAAE;YACxD,IAAMqB,UAAUjC,eAAeY,MAAM,GAAG;YACxC,IAAMsB,YAAYlC,eAAemC,SAAS,CAAC,SAACC;uBAASA,SAASP,EAAEQ,MAAM;;YAEtE,IAAMC,uBAAuBJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACJ,EAAEU,QAAQ;YAEtF,IAAID,wBAAyBJ,cAAc,KAAKL,EAAEU,QAAQ,EAAG;gBAC3DV,EAAEW,cAAc;gBAEhB,IAAMJ,OAAOpC,cAAc,CAACsC,uBAAuB,IAAIL,QAAQ;gBAE/D,IAAIG,SAASxC,SAAUe,aAAa,EAAE;oBACpCyB,KAAKvB,KAAK;gBACZ;gBAEA,OAAO;YACT;QACF;QAEA,IAAI1B,WAAW2C,IAAAA,yBAAU,EAACD,OAAOE,mBAAI,CAACU,MAAM,EAAE;YAC5CtD;QACF;QAEA,OAAO;IACT;IACAuD,IAAAA,8CAAsB,EAAC9C,UAAU,WAAWgC,mBAAmB;QAC7De,SAAS;IACX;IAEA,qBACE,qBAACzD;QAAU0D,UAAU,CAAC;QAAGnD,KAAKA;OAASD,YACpCD;AAGP"}

package/dist/cjs/components/FocusVisible/FocusVisible.d.ts CHANGED Viewed

@@ -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/cjs/components/FocusVisible/FocusVisible.js CHANGED Viewed

@@ -14,19 +14,21 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesMode = {
+    inside: "vkuiFocusVisible--mode-inside",
+    outside: "vkuiFocusVisible--mode-outside",
+    outline: "vkuiFocusVisible--mode-outline"
+};
 var FocusVisible = function(_param) /*#__PURE__*/ {
     var visible = _param.visible, mode = _param.mode, thin = _param.thin, restProps = _object_without_properties._(_param, [
         "visible",
         "mode",
         "thin"
     ]);
-    return _react.createElement("span", _object_spread_props._(_object_spread._({}, restProps), {
+    return _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         "aria-hidden": true,
-        className: (0, _vkjs.classNames)("vkuiFocusVisible", visible && "vkuiFocusVisible--visible", thin && "vkuiFocusVisible--thin", {
-            inside: "vkuiFocusVisible--mode-inside",
-            outside: "vkuiFocusVisible--mode-outside",
-            outline: "vkuiFocusVisible--mode-outline"
-        }[mode])
+        baseClassName: (0, _vkjs.classNames)("vkuiFocusVisible", visible && "vkuiFocusVisible--visible", thin && "vkuiFocusVisible--thin", stylesMode[mode])
     }));
 };

package/dist/cjs/components/FocusVisible/FocusVisible.js.map CHANGED Viewed

	@@ -1 +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":["FocusVisible","~~visible~~","~~mode~~","~~thin~~","~~restProps~~","~~span~~","~~aria-hidden~~","~~className~~","~~classNames~~","~~inside~~","~~outside~~","~~outline~~"],"mappings":";;;;+~~BAeaA~~;;;eAAAA;;;;;;;+~~DAfU~~;oBACI;~~AAcpB~~,~~IAAMA~~,eAAe;~~QAAGC~~,iBAAAA,SAASC,cAAAA,MAAMC,cAAAA,MAASC;QAAxBH;QAASC;QAAMC;;WAC5C,qBAACE,~~oDACKD~~;QACJE,eAAAA;QACAC,~~WAAWC~~,IAAAA,gBAAU,~~sBAEnBP~~,wCACAE,~~kCACA;YACEM~~,~~MAAM;YACNC~~,~~OAAO;YACPC~~,~~OAAO;QACT,CAAC,CAACT,~~KAAK;;~~AAEV~~"}
1	+ {"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":["FocusVisible","stylesMode","inside","outside","outline","visible","mode","thin","restProps","RootComponent","aria-hidden","baseClassName","classNames"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;+DAvBU;oBACI;6BAEG;AAG9B,IAAMC,aAAa;IACjBC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT;AAaO,IAAMJ,eAAe;QAAGK,iBAAAA,SAASC,cAAAA,MAAMC,cAAAA,MAASC;QAAxBH;QAASC;QAAMC;;WAC5C,qBAACE,4BAAa,8CACRD;QACJE,eAAAA;QACAC,eAAeC,IAAAA,gBAAU,sBAEvBP,wCACAE,kCACAN,UAAU,CAACK,KAAK;;AAEnB"}

package/dist/cjs/components/FormField/FormField.js CHANGED Viewed

@@ -24,6 +24,10 @@ var _FocusVisible = require("../FocusVisible/FocusVisible");
 var sizeYClassNames = _define_property._({
     none: "vkuiFormField--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiFormField--sizeY-compact");
+var stylesStatus = {
+    error: "vkuiFormField--status-error",
+    valid: "vkuiFormField--status-valid"
+};
 var FormField = function(_param) {
     var _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, children = _param.children, getRootRef = _param.getRootRef, before = _param.before, after = _param.after, disabled = _param.disabled, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, restProps = _object_without_properties._(_param, [
         "Component",
@@ -52,10 +56,7 @@ var FormField = function(_param) {
         ref: elRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        className: (0, _vkjs.classNames)("vkuiFormField", mode === "default" && "vkuiFormField--mode-default", status !== "default" && ({
-            error: "vkuiFormField--status-error",
-            valid: "vkuiFormField--status-valid"
-        })[status], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
+        className: (0, _vkjs.classNames)("vkuiFormField", mode === "default" && "vkuiFormField--mode-default", status !== "default" && stylesStatus[status], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
     }), before && /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiFormField__before"
     }, before), children, after && /*#__PURE__*/ _react.createElement("span", {

package/dist/cjs/components/FormField/FormField.js.map CHANGED Viewed

	@@ -1 +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":["FormField","sizeYClassNames","none","SizeType","COMPACT","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","useExternRef","focusWithin","useFocusWithin","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","~~error","valid","~~REGULAR","span","aria-hidden","FocusVisible","thin","visible"],"mappings":";;;;+~~BAiDaA~~;;;eAAAA;;;;;;;;;+~~DAjDU~~;oBACI;6BACG;4BACD;8BACE;0BACN;4BAEI;AAG7B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;~~AAqCZ~~,~~IAAMJ~~,YAAY;~~kCACvBK~~,WAAAA,0CAAY,kDACZC,QAAAA,oCAAS,2BACTC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,QAAQC,IAAAA,0BAAY,EAACR;IAC3B,IAAMS,cAAcC,IAAAA,8BAAc,EAACH;IACnC,IAA2BI,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0BC,qCAAAA,OAAMC,QAAQ,CAAC,YAAlCC,QAAmBF,oBAAZG,WAAYH;IAE1B,IAAMI,mBAAmB,SAACC;QACxBA,EAAEC,eAAe;QACjBH,SAAS;IACX;IAEA,IAAMI,mBAAmB,SAACF;QACxBA,EAAEC,eAAe;QACjBH,SAAS;IACX;IAEA,qBACE,qBAACnB,uDACKS;QACJe,KAAKd;QACLe,cAAcL;QACdM,cAAcH;QACdf,WAAWmB,IAAAA,gBAAU,mBAEnBpB,SAAS,4CACTN,WAAW,~~aACT~~,~~CAAA;YACE2B~~,~~KAAK;YACLC~~,~~KAAK;QACP,CAAA,CAAC,CAAC5B,~~OAAO,~~EACXc~~,~~UAAUjB~~,oBAAQ,~~CAACgC~~,OAAO,~~IAAIlC~~,eAAe,~~CAACmB~~,MAAM,EACpDT,uCACA,CAACA,YAAYY,iCACbV;QAGDJ,wBAAU,~~qBAAC2B~~;~~QAAKvB~~,SAAS;OAAgCJ,SACzDF,UACAG,uBACC,~~qBAAC0B~~;~~QAAKvB~~,WAAWmB,IAAAA,gBAAU,0BAA6B;OACrDtB,sBAGL,~~qBAAC0B~~;QAAKC,eAAAA;~~QAAYxB~~,SAAS;sBAC3B,~~qBAACyB~~,0BAAY;QAACC,MAAAA;QAAKC,~~SAASvB~~;QAAaL,MAAK;;AAGpD"}
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\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":["FormField","sizeYClassNames","none","SizeType","COMPACT","stylesStatus","error","valid","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","useExternRef","focusWithin","useFocusWithin","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","REGULAR","span","aria-hidden","FocusVisible","thin","visible"],"mappings":";;;;+BAsDaA;;;eAAAA;;;;;;;;;+DAtDU;oBACI;6BACG;4BACD;8BACE;0BACN;4BAEI;AAG7B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AAoCO,IAAMP,YAAY;kCACvBQ,WAAAA,0CAAY,kDACZC,QAAAA,oCAAS,2BACTC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,QAAQC,IAAAA,0BAAY,EAACR;IAC3B,IAAMS,cAAcC,IAAAA,8BAAc,EAACH;IACnC,IAA2BI,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0BC,qCAAAA,OAAMC,QAAQ,CAAC,YAAlCC,QAAmBF,oBAAZG,WAAYH;IAE1B,IAAMI,mBAAmB,SAACC;QACxBA,EAAEC,eAAe;QACjBH,SAAS;IACX;IAEA,IAAMI,mBAAmB,SAACF;QACxBA,EAAEC,eAAe;QACjBH,SAAS;IACX;IAEA,qBACE,qBAACnB,uDACKS;QACJe,KAAKd;QACLe,cAAcL;QACdM,cAAcH;QACdf,WAAWmB,IAAAA,gBAAU,mBAEnBpB,SAAS,4CACTN,WAAW,aAAaJ,YAAY,CAACI,OAAO,EAC5Cc,UAAUpB,oBAAQ,CAACiC,OAAO,IAAInC,eAAe,CAACsB,MAAM,EACpDT,uCACA,CAACA,YAAYY,iCACbV;QAGDJ,wBAAU,qBAACyB;QAAKrB,SAAS;OAAgCJ,SACzDF,UACAG,uBACC,qBAACwB;QAAKrB,WAAWmB,IAAAA,gBAAU,0BAA6B;OACrDtB,sBAGL,qBAACwB;QAAKC,eAAAA;QAAYtB,SAAS;sBAC3B,qBAACuB,0BAAY;QAACC,MAAAA;QAAKC,SAASrB;QAAaL,MAAK;;AAGpD"}

package/dist/cjs/components/FormItem/FormItem.d.ts CHANGED Viewed

@@ -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/cjs/components/FormItem/FormItem.js CHANGED Viewed

@@ -19,25 +19,29 @@ var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
 var _Removable = require("../Removable/Removable");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var sizeYClassNames = _define_property._({
     none: (0, _vkjs.classNames)("vkuiFormItem--sizeY-none", "vkuiInternalFormItem--sizeY-none")
 }, _adaptivity.SizeType.COMPACT, (0, _vkjs.classNames)("vkuiFormItem--sizeY-compact", "vkuiInternalFormItem--sizeY-compact"));
+var stylesStatus = {
+    error: (0, _vkjs.classNames)("vkuiFormItem--status-error", "vkuiInternalFormItem--status-error"),
+    valid: (0, _vkjs.classNames)("vkuiFormItem--status-valid", "vkuiInternalFormItem--status-valid")
+};
 var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, bottomId = _param.bottomId, restProps = _object_without_properties._(_param, [
+    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, htmlFor = _param.htmlFor, bottomId = _param.bottomId, noPadding = _param.noPadding, restProps = _object_without_properties._(_param, [
         "children",
         "top",
         "bottom",
         "status",
-        "Component",
         "removable",
         "onRemove",
         "removePlaceholder",
         "getRootRef",
-        "className",
         "htmlFor",
-        "bottomId"
+        "bottomId",
+        "noPadding"
     ]);
     var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
@@ -50,12 +54,9 @@ var FormItem = function(_param) {
         id: bottomId,
         role: status === "error" ? "alert" : undefined
     }, bottom));
-    return /*#__PURE__*/ _react.createElement(Component, _object_spread_props._(_object_spread._({}, restProps), {
-        ref: rootEl,
-        className: (0, _vkjs.classNames)("vkuiFormItem", "vkuiInternalFormItem", status !== "default" && ({
-            error: (0, _vkjs.classNames)("vkuiFormItem--status-error", "vkuiInternalFormItem--status-error"),
-            valid: (0, _vkjs.classNames)("vkuiFormItem--status-valid", "vkuiInternalFormItem--status-valid")
-        })[status], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], (0, _vkjs.hasReactNode)(top) && (0, _vkjs.classNames)("vkuiFormItem--withTop", "vkuiInternalFormItem--withTop"), removable && (0, _vkjs.classNames)("vkuiFormItem--removable", "vkuiInternalFormItem--removable"), className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        getRootRef: rootEl,
+        baseClassName: (0, _vkjs.classNames)("vkuiFormItem", !noPadding && "vkuiFormItem--withPadding", "vkuiInternalFormItem", status !== "default" && stylesStatus[status], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], (0, _vkjs.hasReactNode)(top) && (0, _vkjs.classNames)("vkuiFormItem--withTop", "vkuiInternalFormItem--withTop"), removable && (0, _vkjs.classNames)("vkuiFormItem--removable", "vkuiInternalFormItem--removable"))
     }), removable ? /*#__PURE__*/ _react.createElement(_Removable.Removable, {
         align: "start",
         onRemove: function(e) {

package/dist/cjs/components/FormItem/FormItem.js.map CHANGED Viewed

	@@ -1 +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":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","~~Component","~~removable","onRemove","noop","removePlaceholder","getRootRef","~~className~~","~~htmlFor~~","~~bottomId~~","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","id","role","undefined","~~ref~~","~~error~~","~~valid","~~REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+~~BA4CaA~~;;;eAAAA;;;;;;;;+~~DA5CU~~;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;~~wBACjB~~;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,gBAAU,8BAAiC;GAChDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,iCAE5B;~~AA6BG~~,IAAMH,WAAW;~~QACtBM~~,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,~~qDACTC~~,~~WAAAA,0CAAY,0BACZC,~~mBAAAA,oCACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,~~mBAAAA,WACAC,~~iBAAAA,SACAC,kBAAAA,~~UACGC~~;~~QAZHb~~;QACAC;QACAC;QACAC;QACAC;QACAC;~~QACAC;~~QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,0BAAY,EAACN;IAC5B,IAA2BO,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,~~EAACpB~~,sBACZ,~~qBAACqB~~,gBAAO;~~QACNZ~~,SAAS;~~QACTN~~,~~WAAWO~~,UAAU,UAAU;QAC/BA,SAASA;~~OAERV~~,MAGJD,~~UACAqB~~,IAAAA,kBAAY,~~EAACnB~~,yBACZ,~~qBAACqB~~,kBAAQ;~~QACPb~~,SAAS;~~QACTc~~,~~IAAIZ~~;~~QACJa~~,~~MAAMtB~~,WAAW,UAAU,~~UAAUuB~~;~~OAEpCxB~~;IAMT,qBACE,~~qBAACE~~,~~uDACKS;QACJc~~,~~KAAKb~~;~~QACLJ~~,~~WAAWb,IAAAA,gBAAU,kBAEnB,wBACAM,WAAW,aACT,CAAA~~;~~YACEyB~~,~~OAAO/B~~,IAAAA,gBAAU,~~gCAEf;YAEFgC~~,~~OAAOhC~~,~~IAAAA~~,~~gBAAU~~,~~gCAEf;QAEJ~~,~~CAAA~~,~~CAAC~~,CAACM,OAAO,~~EACXc~~,~~UAAUnB~~,oBAAQ,~~CAACgC~~,OAAO,~~IAAInC~~,eAAe,~~CAACsB~~,MAAM,EACpDI,IAAAA,kBAAY,~~EAACpB~~,~~QACXJ~~,IAAAA,gBAAU,2BAA8B,~~kCAC1CQ~~,~~aAAaR~~,IAAAA,gBAAU,6BAAgC~~,oCACvDa~~;~~QAGDL~~,0BACC,~~qBAAC0B~~,oBAAS;QACRC,OAAM;~~QACN1B~~,UAAU,~~SAAC2B~~;~~gBACLnB~~;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,~~QAAQoB~~,OAAO,EAAE;~~gBACnB5B~~,~~SAAS2B~~,~~GAAGnB~~,~~OAAOoB~~,OAAO;YAC5B;QACF;~~QACA1B~~,mBAAmBA;~~QACnB2B~~,~~QAAQ9B~~,cAAc;qBAEtB,~~qBAAC+B~~;~~QACC1B~~,~~WAAWb~~,IAAAA,gBAAU,6BAAgC;~~OAEpDqB~~,oBAILA;AAIR"}
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 { 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":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","stylesStatus","error","valid","children","top","bottom","status","removable","onRemove","noop","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","className","Component","Footnote","id","role","undefined","RootComponent","baseClassName","REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+BAuDaA;;;eAAAA;;;;;;;;+DAvDU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;6BACZ;wBACL;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,gBAAU,8BAAiC;GAChDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,iCAE5B;AAIJ,IAAMG,eAAe;IACnBC,OAAOJ,IAAAA,gBAAU,gCAAmC;IACpDK,OAAOL,IAAAA,gBAAU,gCAAmC;AACtD;AAgCO,IAAMH,WAAW;QACtBS,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,2BACTC,mBAAAA,oCACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,iBAAAA,SACAC,kBAAAA,UACAC,mBAAAA,WACGC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,0BAAY,EAACN;IAC5B,IAA2BO,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACnB,sBACZ,qBAACoB,gBAAO;QACNC,SAAS;QACTC,WAAWd,UAAU,UAAU;QAC/BA,SAASA;OAERR,MAGJD,UACAoB,IAAAA,kBAAY,EAAClB,yBACZ,qBAACsB,kBAAQ;QACPF,SAAS;QACTG,IAAIf;QACJgB,MAAMvB,WAAW,UAAU,UAAUwB;OAEpCzB;IAMT,qBACE,qBAAC0B,4BAAa,8CACRhB;QACJJ,YAAYK;QACZgB,eAAenC,IAAAA,gBAAU,kBAEvB,CAACiB,0CACD,wBACAR,WAAW,aAAaN,YAAY,CAACM,OAAO,EAC5Ca,UAAUrB,oBAAQ,CAACmC,OAAO,IAAItC,eAAe,CAACwB,MAAM,EACpDI,IAAAA,kBAAY,EAACnB,QACXP,IAAAA,gBAAU,2BAA8B,kCAC1CU,aAAaV,IAAAA,gBAAU,6BAAgC;QAGxDU,0BACC,qBAAC2B,oBAAS;QACRC,OAAM;QACN3B,UAAU,SAAC4B;gBACLpB;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQqB,OAAO,EAAE;gBACnB7B,SAAS4B,GAAGpB,OAAOqB,OAAO;YAC5B;QACF;QACA3B,mBAAmBA;QACnB4B,QAAQ/B,cAAc;qBAEtB,qBAACgC;QACCd,WAAW5B,IAAAA,gBAAU,6BAAgC;OAEpDuB,oBAILA;AAIR"}

package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.d.ts CHANGED Viewed

@@ -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/cjs/components/FormLayoutGroup/FormLayoutGroup.js CHANGED Viewed

@@ -18,27 +18,27 @@ var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
 var _Removable = require("../Removable/Removable");
+var _RootComponent = require("../RootComponent/RootComponent");
 var sizeYClassNames = _define_property._({
     none: (0, _vkjs.classNames)("vkuiFormLayoutGroup--sizeY-none", "vkuiInternalFormLayoutGroup--sizeY-none")
 }, _adaptivity.SizeType.COMPACT, (0, _vkjs.classNames)("vkuiFormLayoutGroup--sizeY-compact", "vkuiInternalFormLayoutGroup--sizeY-compact"));
 var FormLayoutGroup = function(_param) {
-    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "vertical" : _param_mode, removable = _param.removable, segmented = _param.segmented, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties._(_param, [
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "vertical" : _param_mode, removable = _param.removable, segmented = _param.segmented, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
         "children",
         "mode",
         "removable",
         "segmented",
         "removePlaceholder",
         "onRemove",
-        "getRootRef",
-        "className"
+        "getRootRef"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var isRemovable = removable && mode === "horizontal";
     var isSegmented = segmented && mode === "horizontal";
     var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        ref: rootEl,
-        className: (0, _vkjs.classNames)(sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], mode === "horizontal" && (0, _vkjs.classNames)("vkuiFormLayoutGroup--mode-horizontal", "vkuiInternalFormLayoutGroup--mode-horizontal"), isRemovable && (0, _vkjs.classNames)("vkuiFormLayoutGroup--removable", "vkuiInternalFormLayoutGroup--removable"), isSegmented && (0, _vkjs.classNames)("vkuiFormLayoutGroup--segmented", "vkuiInternalFormLayoutGroup--segmented"), className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        getRootRef: rootEl,
+        baseClassName: (0, _vkjs.classNames)(sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], mode === "horizontal" && (0, _vkjs.classNames)("vkuiFormLayoutGroup--mode-horizontal", "vkuiInternalFormLayoutGroup--mode-horizontal"), isRemovable && (0, _vkjs.classNames)("vkuiFormLayoutGroup--removable", "vkuiInternalFormLayoutGroup--removable"), isSegmented && (0, _vkjs.classNames)("vkuiFormLayoutGroup--segmented", "vkuiInternalFormLayoutGroup--segmented"))
     }, restProps), isRemovable ? /*#__PURE__*/ _react.createElement(_Removable.Removable, {
         className: "vkuiFormLayoutGroup__removable",
         align: "start",

package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js.map CHANGED Viewed

	@@ -1 +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":["FormLayoutGroup","sizeYClassNames","none","classNames","SizeType","COMPACT","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","~~className","~~restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","~~div~~","~~ref~~","REGULAR","Removable","align","e","current","indent","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;+DAzCU;oBACU;6BACH;4BACD;0BACJ;yBAEiB;~~AAG1C~~,IAAMC,kBAKJ;IAJAC,MAAMC,IAAAA,gBAAU,qCAEd;GAEDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,wCAE5B;~~AAyBG~~,IAAMH,kBAAkB;QAC7BM,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWC,UAAI,oBACfC,oBAAAA,~~YACAC,mBAAAA,WACGC~~;~~QARHT~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE~~;QACAC~~;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,~~cAAcV~~,aAAaD,SAAS;IAC1C,~~IAAMY~~,~~cAAcV~~,aAAaF,SAAS;IAC1C,~~IAAMa~~,SAASC,IAAAA,0BAAY,~~EAACR~~;IAE5B,qBACE,~~qBAACS~~;~~QACCC~~,~~KAAKH~~;~~QACLN~~,~~WAAWX~~,IAAAA,gBAAU,~~EACnBc~~,~~UAAUb~~,oBAAQ,~~CAACoB~~,OAAO,~~IAAIvB~~,eAAe,~~CAACgB~~,MAAM,~~EACpDV~~,SAAS,gBACPJ,IAAAA,gBAAU,0CAER,~~iDAEJe~~,~~eACEf~~,IAAAA,gBAAU,oCAER,~~2CAEJgB~~,~~eACEhB~~,IAAAA,gBAAU,oCAER~~,2CAEJW~~;~~OAEEC~~,YAEHG,4BACC,qBAACO,oBAAS;~~QACRX~~,SAAS;~~QACTY~~,OAAM;QACNhB,mBAAmBA;QACnBC,UAAU,SAACgB;~~gBACLP~~;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,~~QAAQQ~~,OAAO,EAAE;gBACnBjB,SAASgB,~~GAAGP~~,~~OAAOQ~~,OAAO;YAC5B;QACF;QACAC,QAAQrB,cAAc;OAErBF,0BAGH,qBAACwB,OAAMC,QAAQ,QACZzB,wBACD,qBAAC0B;~~QAAKlB~~,SAAS;~~QAAqCmB~~,eAAAA;;AAK9D"}
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 { 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":["FormLayoutGroup","sizeYClassNames","none","classNames","SizeType","COMPACT","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","RootComponent","baseClassName","REGULAR","Removable","className","align","e","current","indent","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;+DAzCU;oBACU;6BACH;4BACD;0BACJ;yBAEiB;6BACZ;AAG9B,IAAMC,kBAKJ;IAJAC,MAAMC,IAAAA,gBAAU,qCAEd;GAEDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,wCAE5B;AAwBG,IAAMH,kBAAkB;QAC7BM,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWC,UAAI,oBACfC,oBAAAA,YACGC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,cAAcT,aAAaD,SAAS;IAC1C,IAAMW,cAAcT,aAAaF,SAAS;IAC1C,IAAMY,SAASC,IAAAA,0BAAY,EAACP;IAE5B,qBACE,qBAACQ,4BAAa;QACZR,YAAYM;QACZG,eAAenB,IAAAA,gBAAU,EACvBa,UAAUZ,oBAAQ,CAACmB,OAAO,IAAItB,eAAe,CAACe,MAAM,EACpDT,SAAS,gBACPJ,IAAAA,gBAAU,0CAER,iDAEJc,eACEd,IAAAA,gBAAU,oCAER,2CAEJe,eACEf,IAAAA,gBAAU,oCAER;OAGFW,YAEHG,4BACC,qBAACO,oBAAS;QACRC,SAAS;QACTC,OAAM;QACNhB,mBAAmBA;QACnBC,UAAU,SAACgB;gBACLR;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQS,OAAO,EAAE;gBACnBjB,SAASgB,GAAGR,OAAOS,OAAO;YAC5B;QACF;QACAC,QAAQrB,cAAc;OAErBF,0BAGH,qBAACwB,OAAMC,QAAQ,QACZzB,wBACD,qBAAC0B;QAAKP,SAAS;QAAqCQ,eAAAA;;AAK9D"}

package/dist/cjs/components/FormStatus/FormStatus.d.ts CHANGED Viewed

@@ -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/cjs/components/FormStatus/FormStatus.js.map CHANGED Viewed

	@@ -1 +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":["FormStatus","mode","children","className","restProps","Banner","subheader","classNames"],"mappings":";;;;+~~BAgBaA~~;;;eAAAA;;;;;;;+~~DAhBU~~;oBACI;sBAEJ;~~AAahB~~,IAAMA,aAAa;QAAGC,cAAAA,MAAMC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAA9BH;QAAMC;QAAUC;;IAC3C,qBACE,qBAACE,cAAM,8CACDD;QACJE,WAAWJ;QACXC,WAAWI,IAAAA,gBAAU,EACnB,0BACAN,SAAS,WACPM,IAAAA,gBAAU,gCAAmC,uCAC/CJ;;AAIR"}
1	+ {"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":["FormStatus","mode","children","className","restProps","Banner","subheader","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;sBAEJ;AAWhB,IAAMA,aAAa;QAAGC,cAAAA,MAAMC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAA9BH;QAAMC;QAAUC;;IAC3C,qBACE,qBAACE,cAAM,8CACDD;QACJE,WAAWJ;QACXC,WAAWI,IAAAA,gBAAU,EACnB,0BACAN,SAAS,WACPM,IAAAA,gBAAU,gCAAmC,uCAC/CJ;;AAIR"}

package/dist/cjs/components/Gradient/Gradient.d.ts CHANGED Viewed

@@ -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/cjs/components/Gradient/Gradient.js CHANGED Viewed

@@ -14,25 +14,26 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesMode = {
+    tint: "vkuiGradient--mode-tint",
+    black: "vkuiGradient--mode-black",
+    white: "vkuiGradient--mode-white"
+};
+var stylesTo = {
+    top: "vkuiGradient--to-top",
+    bottom: "vkuiGradient--to-bottom"
+};
 var Gradient = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, children = _param.children, _param_to = _param.to, to = _param_to === void 0 ? "top" : _param_to, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_to = _param.to, to = _param_to === void 0 ? "top" : _param_to, restProps = _object_without_properties._(_param, [
         "mode",
-        "children",
-        "to",
-        "className"
+        "to"
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         role: "presentation"
     }, restProps), {
-        className: (0, _vkjs.classNames)({
-            tint: "vkuiGradient--mode-tint",
-            black: "vkuiGradient--mode-black",
-            white: "vkuiGradient--mode-white"
-        }[mode], {
-            top: "vkuiGradient--to-top",
-            bottom: "vkuiGradient--to-bottom"
-        }[to], className)
-    }), children);
+        baseClassName: (0, _vkjs.classNames)(stylesMode[mode], stylesTo[to])
+    }));
 };
 //# sourceMappingURL=Gradient.js.map

package/dist/cjs/components/Gradient/Gradient.js.map CHANGED Viewed

	@@ -1 +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":["Gradient","~~mode~~","~~children~~","to","~~className~~","~~restProps~~","~~div~~","~~role~~","~~classNames~~","~~tint~~","~~black~~","~~white~~","~~top~~","~~bottom~~"],"mappings":";;;;+~~BAkBaA~~;;;eAAAA;;;;;;;+~~DAlBU~~;oBACI;~~AAiBpB~~,~~IAAMA~~,WAAW;~~6BACtBC~~,MAAAA,gCAAO,~~sBACPC~~,~~kBAAAA,6BACAC,~~IAAAA,4BAAK,~~mBACLC,mBAAAA,WACGC~~;~~QAJHJ~~;~~QACAC;QACAC;QACAC~~;;~~IAGA~~,qBACE,qBAACE;~~QACCC~~,MAAK;OACDF;~~QACJD~~,~~WAAWI~~,IAAAA,gBAAU,~~EACnB;YACEC~~,~~IAAI;YACJC~~,~~KAAK;YACLC~~,KAAK~~;QACP~~,~~CAAC~~,~~CAACV~~,~~KAAK~~,~~EACP;YACEW,~~GAAG~~;YACHC,MAAM;QACR,CAAC,CAACV,GAAG,EACLC;QAGDF;AAGP~~"}
1	+ {"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":["Gradient","stylesMode","tint","black","white","stylesTo","top","bottom","mode","to","restProps","RootComponent","role","baseClassName","classNames"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;+DA/BU;oBACI;6BAEG;AAG9B,IAAMC,aAAa;IACjBC,IAAI;IACJC,KAAK;IACLC,KAAK;AACP;AAEA,IAAMC,WAAW;IACfC,GAAG;IACHC,MAAM;AACR;AAgBO,IAAMP,WAAW;6BAAGQ,MAAAA,gCAAO,yCAAQC,IAAAA,4BAAK,mBAAUC;QAA9BF;QAAeC;;IACxC,qBACE,qBAACE,4BAAa;QACZC,MAAK;OACDF;QACJG,eAAeC,IAAAA,gBAAU,EAACb,UAAU,CAACO,KAAK,EAAEH,QAAQ,CAACI,GAAG;;AAG9D"}

package/dist/cjs/components/Group/Group.d.ts CHANGED Viewed

@@ -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;