@vkontakte/vkui 6.1.2 → 6.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './FloatingArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['FloatingArrow--placement-right'],\n  bottom: styles['FloatingArrow--placement-bottom'],\n  left: styles['FloatingArrow--placement-left'],\n};\n\nexport interface FloatingArrowProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasDataAttribute {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  offset?: number;\n  /**\n   * Включает абсолютное смещение по `offset`.\n   */\n  isStaticOffset?: boolean;\n  coords?: Coords;\n  placement?: Placement;\n  iconStyle?: React.CSSProperties;\n  iconClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\n/**\n * @private\n */\nexport const FloatingArrow = ({\n  offset,\n  isStaticOffset,\n  coords,\n  iconStyle,\n  iconClassName,\n  placement = 'bottom',\n  getRootRef,\n  Icon = DefaultIcon,\n  ...restProps\n}: FloatingArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(\n    placement,\n    coords,\n    offset,\n    isStaticOffset,\n  );\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['FloatingArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n      {...restProps}\n    >\n      <Icon className={classNames(styles['FloatingArrow__in'], iconClassName)} style={iconStyle} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n  offset = 0,\n  isStaticOffset = false,\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  const withOffset = (isVerticalPlacement: boolean) => {\n    const parsedCoords = { x: coords.x || 0, y: coords.y || 0 };\n\n    if (isVerticalPlacement) {\n      return isStaticOffset ? offset : parsedCoords.y + offset;\n    } else {\n      return isStaticOffset ? offset : parsedCoords.x + offset;\n    }\n  };\n\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: withOffset(false),\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: withOffset(true),\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: withOffset(false),\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: withOffset(true),\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["FloatingArrow","placementClassNames","right","bottom","left","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","DefaultIcon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","classNames","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","top","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;iEAvCU;sBACI;6BAGC;AAQ5B,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAuBO,MAAMJ,gBAAgB;QAAC,EAC5BK,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOC,wBAAW,EAEC,WADhBC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACG,gBAAgBC,YAAY,GAAGC,qBACpCP,WACAH,QACAF,QACAC;IAGF,qBACE,qBAACY;QACCC,KAAKR;QACLS,OAAOJ;QACPK,WAAWC,IAAAA,gBAAU,uBAEnBP,kBAAkBd,mBAAmB,CAACc,eAAe;OAEnDD;kBAEJ,cAAA,qBAACF;YAAKS,WAAWC,IAAAA,gBAAU,2BAA8Bb;YAAgBW,OAAOZ;;;AAGtF;AAEA,SAASS,qBACPP,SAAoB,EACpBH,SAAiB;IAAEgB,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BnB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMmB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGhB,OAAOgB,CAAC,IAAI;YAAGC,GAAGjB,OAAOiB,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOpB,iBAAiBD,SAASsB,aAAaH,CAAC,GAAGnB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASsB,aAAaJ,CAAC,GAAGlB;QACpD;IACF;IAEA,IAAIK,UAAUkB,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLzB,MAAMqB,WAAW;YACnB;SACD;IACH,OAAO,IAAIf,UAAUkB,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKJ,WAAW;gBAChBrB,MAAM;YACR;SACD;IACH,OAAO,IAAIM,UAAUkB,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACE3B,QAAQ;gBACRC,MAAMqB,WAAW;YACnB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEI,KAAKJ,WAAW;gBAChBvB,OAAO;YACT;SACD;IACH;AACF"}
+{"version":3,"sources":["../../../../src/components/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './FloatingArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['FloatingArrow--placement-right'],\n  bottom: styles['FloatingArrow--placement-bottom'],\n  left: styles['FloatingArrow--placement-left'],\n};\n\nexport interface FloatingArrowProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasDataAttribute {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  offset?: number;\n  /**\n   * Включает абсолютное смещение по `offset`.\n   */\n  isStaticOffset?: boolean;\n  coords?: Coords;\n  placement?: Placement;\n  iconStyle?: React.CSSProperties;\n  iconClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\n/**\n * @private\n */\nexport const FloatingArrow = ({\n  offset,\n  isStaticOffset,\n  coords,\n  iconStyle,\n  iconClassName,\n  placement = 'bottom',\n  getRootRef,\n  Icon = DefaultIcon,\n  ...restProps\n}: FloatingArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(\n    placement,\n    coords,\n    offset,\n    isStaticOffset,\n  );\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['FloatingArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n      {...restProps}\n    >\n      <Icon className={classNames(styles['FloatingArrow__in'], iconClassName)} style={iconStyle} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n  offset = 0,\n  isStaticOffset = false,\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  const withOffset = (isVerticalPlacement: boolean) => {\n    const parsedCoords = { x: coords.x || 0, y: coords.y || 0 };\n\n    if (isVerticalPlacement) {\n      return isStaticOffset ? offset : parsedCoords.y + offset;\n    } else {\n      return isStaticOffset ? offset : parsedCoords.x + offset;\n    }\n  };\n\n  if (placement.startsWith('top')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      'bottom',\n      {\n        top: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'left',\n      {\n        [yOffsetProp]: withOffset(true),\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        [xOffsetProp]: withOffset(false),\n      },\n    ];\n  } else {\n    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);\n    return [\n      'right',\n      {\n        [yOffsetProp]: withOffset(true),\n        right: 0,\n      },\n    ];\n  }\n}\n\nfunction getXOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';\n}\n\nfunction getYOffsetProp(placement: Placement, isStaticOffset: boolean) {\n  return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';\n}\n"],"names":["FloatingArrow","placementClassNames","right","bottom","left","offset","isStaticOffset","coords","iconStyle","iconClassName","placement","getRootRef","Icon","DefaultIcon","restProps","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","classNames","x","y","withOffset","isVerticalPlacement","parsedCoords","startsWith","xOffsetProp","getXOffsetProp","top","yOffsetProp","getYOffsetProp","undefined","endsWith"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;iEAvCU;sBACI;6BAGC;AAQ5B,MAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AAuBO,MAAMJ,gBAAgB;QAAC,EAC5BK,MAAM,EACNC,cAAc,EACdC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,YAAY,QAAQ,EACpBC,UAAU,EACVC,OAAOC,wBAAW,EAEC,WADhBC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACG,gBAAgBC,YAAY,GAAGC,qBACpCP,WACAH,QACAF,QACAC;IAGF,qBACE,qBAACY;QACCC,KAAKR;QACLS,OAAOJ;QACPK,WAAWC,IAAAA,gBAAU,uBAEnBP,kBAAkBd,mBAAmB,CAACc,eAAe;OAEnDD;kBAEJ,cAAA,qBAACF;YAAKS,WAAWC,IAAAA,gBAAU,2BAA8Bb;YAAgBW,OAAOZ;;;AAGtF;AAEA,SAASS,qBACPP,SAAoB,EACpBH,SAAiB;IAAEgB,GAAG;IAAGC,GAAG;AAAE,CAAC,EAC/BnB,SAAS,CAAC,EACVC,iBAAiB,KAAK;IAEtB,MAAMmB,aAAa,CAACC;QAClB,MAAMC,eAAe;YAAEJ,GAAGhB,OAAOgB,CAAC,IAAI;YAAGC,GAAGjB,OAAOiB,CAAC,IAAI;QAAE;QAE1D,IAAIE,qBAAqB;YACvB,OAAOpB,iBAAiBD,SAASsB,aAAaH,CAAC,GAAGnB;QACpD,OAAO;YACL,OAAOC,iBAAiBD,SAASsB,aAAaJ,CAAC,GAAGlB;QACpD;IACF;IAEA,IAAIK,UAAUkB,UAAU,CAAC,QAAQ;QAC/B,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACEyB,KAAK;gBACL,CAACF,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO,IAAIf,UAAUkB,UAAU,CAAC,UAAU;QACxC,MAAMI,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BrB,MAAM;YACR;SACD;IACH,OAAO,IAAIM,UAAUkB,UAAU,CAAC,WAAW;QACzC,MAAMC,cAAcC,eAAepB,WAAWJ;QAC9C,OAAO;YACL4B;YACA;gBACE/B,QAAQ;gBACR,CAAC0B,YAAY,EAAEJ,WAAW;YAC5B;SACD;IACH,OAAO;QACL,MAAMO,cAAcC,eAAevB,WAAWJ;QAC9C,OAAO;YACL;YACA;gBACE,CAAC0B,YAAY,EAAEP,WAAW;gBAC1BvB,OAAO;YACT;SACD;IACH;AACF;AAEA,SAAS4B,eAAepB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,UAAU;AACjE;AAEA,SAAS2B,eAAevB,SAAoB,EAAEJ,cAAuB;IACnE,OAAOI,UAAUyB,QAAQ,CAAC,UAAU7B,iBAAiB,WAAW;AAClE"}

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

@@ -3,11 +3,16 @@ import { HasComponent, HasRootRef } from '../../types';
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
     autoFocus?: boolean;
     restoreFocus?: boolean | (() => boolean);
+    mount?: boolean;
     timeout?: number;
     onClose?: () => void;
+    /**
+     * Форсированное отключение захвата фокуса
+     */
+    disabled?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, autoFocus, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, autoFocus, restoreFocus, disabled, mount, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FocusTrap.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAW9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sIASnB,eAAe,CAAC,CAAC,4CA2KnB,CAAC"}
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAWzE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,+HAW5C,cAAc,CAAC,CAAC,CAAC,4CAiMnB,CAAC"}

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

@@ -17,22 +17,23 @@ const _useExternRef = require("../../hooks/useExternRef");
 const _accessibility = require("../../lib/accessibility");
 const _dom = require("../../lib/dom");
 const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-const _AppRootContext = require("../AppRoot/AppRootContext");
 const FOCUSABLE_ELEMENTS = _accessibility.FOCUSABLE_ELEMENTS_LIST.join();
 const FocusTrap = (_param)=>{
-    var { Component = 'div', onClose, autoFocus = true, restoreFocus = true, timeout = 0, getRootRef, children } = _param, restProps = _object_without_properties._(_param, [
+    var { Component = 'div', onClose, autoFocus = true, restoreFocus = true, disabled = false, mount = true, timeout = 0, getRootRef, children } = _param, restProps = _object_without_properties._(_param, [
         "Component",
         "onClose",
         "autoFocus",
         "restoreFocus",
+        "disabled",
+        "mount",
         "timeout",
         "getRootRef",
         "children"
     ]);
     const ref = (0, _useExternRef.useExternRef)(getRootRef);
     const { document } = (0, _dom.useDOM)();
-    const { keyboardInput } = (0, _react.useContext)(_AppRootContext.AppRootContext);
     const focusableNodesRef = (0, _react.useRef)([]);
+    const [restoreFocusTo, setRestoreFocusTo] = (0, _react.useState)(null);
     const focusNodeByIndex = (nodeIndex)=>{
         const element = focusableNodesRef.current[nodeIndex];
         if (element) {
@@ -79,7 +80,7 @@ const FocusTrap = (_param)=>{
         ref
     ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function tryToAutoFocusToFirstNode() {
-        if (!ref.current || !autoFocus || !keyboardInput) {
+        if (!ref.current || !autoFocus || disabled) {
             return;
         }
         const autoFocusToFirstNode = ()=>{
@@ -98,33 +99,56 @@ const FocusTrap = (_param)=>{
     }, [
         autoFocus,
         timeout,
-        keyboardInput
+        disabled
     ]);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function tryToRestoreFocusOnUnmount() {
-        if (!ref.current || !restoreFocus) {
+    const restoreFocusImpl = (0, _react.useCallback)(()=>{
+        const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
+        if (!restoreFocusTo || !(0, _dom.isHTMLElement)(restoreFocusTo) || !shouldRestoreFocus) {
             return;
         }
-        const restoreFocusTo = (0, _dom.getActiveElementByAnotherElement)(ref.current);
-        return ()=>{
-            const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
-            if (!shouldRestoreFocus || !(0, _dom.isHTMLElement)(restoreFocusTo)) {
-                return;
+        setTimeout(()=>{
+            if (restoreFocusTo) {
+                restoreFocusTo.focus();
+                setRestoreFocusTo(null);
             }
-            setTimeout(()=>{
-                if (restoreFocusTo) {
-                    restoreFocusTo.focus();
-                }
-            }, timeout);
-        };
+        }, timeout);
     }, [
         restoreFocus,
+        restoreFocusTo,
         timeout
     ]);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function calculateRestoreFocusTo() {
+        if (!ref.current || !restoreFocus || !mount) {
+            setRestoreFocusTo(null);
+            return;
+        }
+        setRestoreFocusTo((0, _dom.getActiveElementByAnotherElement)(ref.current));
+    }, [
+        ref,
+        mount,
+        restoreFocus
+    ]);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function tryToRestoreFocusOnUnmount() {
+        return ()=>restoreFocusImpl();
+    }, [
+        restoreFocusImpl
+    ]);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function tryToRestoreFocusWhenFakeUnmount() {
+        if (!mount) {
+            restoreFocusImpl();
+        }
+    }, [
+        mount,
+        restoreFocusImpl
+    ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
         if (!ref.current) {
             return;
         }
         const onDocumentKeydown = (event)=>{
+            if (disabled) {
+                return;
+            }
             const pressedKeyResult = (0, _accessibility.pressedKey)(event);
             switch(pressedKeyResult){
                 case _accessibility.Keys.TAB:
@@ -164,7 +188,8 @@ const FocusTrap = (_param)=>{
         };
     }, [
         onClose,
-        ref
+        ref,
+        disabled
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, _object_spread_props._(_object_spread._({
         tabIndex: -1,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useContext, useRef } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const { keyboardInput } = useContext(AppRootContext);\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","keyboardInput","useContext","AppRootContext","focusableNodesRef","useRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  mount?: boolean;\n  timeout?: number;\n  onClose?: () => void;\n  /**\n   * Форсированное отключение захвата фокуса\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  disabled = false,\n  mount = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || disabled) {\n        return;\n      }\n\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, disabled],\n  );\n\n  const restoreFocusImpl = useCallback(() => {\n    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {\n      return;\n    }\n\n    setTimeout(() => {\n      if (restoreFocusTo) {\n        restoreFocusTo.focus();\n        setRestoreFocusTo(null);\n      }\n    }, timeout);\n  }, [restoreFocus, restoreFocusTo, timeout]);\n\n  useIsomorphicLayoutEffect(\n    function calculateRestoreFocusTo() {\n      if (!ref.current || !restoreFocus || !mount) {\n        setRestoreFocusTo(null);\n        return;\n      }\n      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));\n    },\n    [ref, mount, restoreFocus],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      return () => restoreFocusImpl();\n    },\n    [restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusWhenFakeUnmount() {\n      if (!mount) {\n        restoreFocusImpl();\n      }\n    },\n    [mount, restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      if (disabled) {\n        return;\n      }\n\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref, disabled]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;uBAhCoD;8BACpC;+BAC6B;qBAOnD;2CACmC;AAG1C,MAAMC,qBAA6BC,sCAAuB,CAACC,IAAI;AAmBxD,MAAMH,YAAY;QAAsC,EAC7DI,YAAY,KAAK,EACjBC,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,WAAW,KAAK,EAChBC,QAAQ,IAAI,EACZC,UAAU,CAAC,EACXC,UAAU,EACVC,QAAQ,EAEU,WADfC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,MAAMC,IAAAA,0BAAY,EAAIJ;IAC5B,MAAM,EAAEK,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3B,MAAMC,oBAAoBC,IAAAA,aAAM,EAAgB,EAAE;IAElD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,eAAQ,EAAiB;IAErE,MAAMC,mBAAmB,CAACC;QACxB,MAAMC,UAAUP,kBAAkBQ,OAAO,CAACF,UAAU;QAEpD,IAAIC,SAAS;YACXA,QAAQE,KAAK;QACf;IACF;IAEA,MAAMC,+BAA+B,CAACC;QACpC,oDAAoD;QACpD,MAAMC,uBAAuBD,WAAWE,gBAAgB,CAAc9B;QAEtE,MAAM+B,QAAuB,EAAE;QAC/BF,qBAAqBG,OAAO,CAAC,CAACC;YAC5B,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,iBAAiBH;YACjD,IAAIC,YAAY,UAAUC,eAAe,UAAU;gBACjDJ,MAAMM,IAAI,CAACJ;YACb;QACF;QAEA,IAAIF,MAAMO,MAAM,KAAK,GAAG;YACtB,sCAAsC;YACtCP,MAAMM,IAAI,CAACT;QACb;QACAX,kBAAkBQ,OAAO,GAAGM;IAC9B;IAEA,MAAMQ,wBAAwB,CAACX;QAC7BD,6BAA6BC;QAE7B,IAAIb,UAAU;YACZ,MAAMyB,gBAAgBzB,SAASyB,aAAa;YAC5C,MAAMC,sBAAsBC,KAAKC,GAAG,CAClC5B,SAASyB,aAAa,GAAGvB,kBAAkBQ,OAAO,CAACmB,OAAO,CAACJ,iBAAiB,CAAC,GAC7E;YAEFlB,iBAAiBmB;QACnB;IACF;IAEAI,IAAAA,oDAAyB,EACvB,SAASC;QACP,IAAI,CAACjC,IAAIY,OAAO,EAAE;YAChB;QACF;QACA,MAAMG,aAAaf,IAAIY,OAAO;QAC9B,MAAMsB,WAAW,IAAIC,iBAAiB,IAAMT,sBAAsBX;QAClEmB,SAASE,OAAO,CAACpC,IAAIY,OAAO,EAAE;YAC5ByB,SAAS;YACTC,WAAW;QACb;QACAxB,6BAA6BC;QAC7B,OAAO,IAAMmB,SAASK,UAAU;IAClC,GACA;QAACvC;KAAI;IAGPgC,IAAAA,oDAAyB,EACvB,SAASQ;QACP,IAAI,CAACxC,IAAIY,OAAO,IAAI,CAACpB,aAAaE,UAAU;YAC1C;QACF;QAEA,MAAM+C,uBAAuB;YAC3B,IAAI,CAACzC,IAAIY,OAAO,IAAI,CAACR,kBAAkBQ,OAAO,CAACa,MAAM,EAAE;gBACrD;YACF;YACA,MAAME,gBAAgBe,IAAAA,qCAAgC,EAAC1C,IAAIY,OAAO;YAClE,IAAI,CAAC+B,IAAAA,aAAQ,EAAC3C,IAAIY,OAAO,EAAEe,gBAAgB;gBACzCvB,kBAAkBQ,OAAO,CAAC,EAAE,CAACC,KAAK;YACpC;QACF;QACA,MAAM+B,YAAYC,WAAWJ,sBAAsB7C;QACnD,OAAO;YACLkD,aAAaF;QACf;IACF,GACA;QAACpD;QAAWI;QAASF;KAAS;IAGhC,MAAMqD,mBAAmBC,IAAAA,kBAAW,EAAC;QACnC,MAAMC,qBAAqB,OAAOxD,iBAAiB,aAAaA,iBAAiBA;QAEjF,IAAI,CAACa,kBAAkB,CAAC4C,IAAAA,kBAAa,EAAC5C,mBAAmB,CAAC2C,oBAAoB;YAC5E;QACF;QAEAJ,WAAW;YACT,IAAIvC,gBAAgB;gBAClBA,eAAeO,KAAK;gBACpBN,kBAAkB;YACpB;QACF,GAAGX;IACL,GAAG;QAACH;QAAca;QAAgBV;KAAQ;IAE1CoC,IAAAA,oDAAyB,EACvB,SAASmB;QACP,IAAI,CAACnD,IAAIY,OAAO,IAAI,CAACnB,gBAAgB,CAACE,OAAO;YAC3CY,kBAAkB;YAClB;QACF;QACAA,kBAAkBmC,IAAAA,qCAAgC,EAAC1C,IAAIY,OAAO;IAChE,GACA;QAACZ;QAAKL;QAAOF;KAAa;IAG5BuC,IAAAA,oDAAyB,EACvB,SAASoB;QACP,OAAO,IAAML;IACf,GACA;QAACA;KAAiB;IAGpBf,IAAAA,oDAAyB,EACvB,SAASqB;QACP,IAAI,CAAC1D,OAAO;YACVoD;QACF;IACF,GACA;QAACpD;QAAOoD;KAAiB;IAG3Bf,IAAAA,oDAAyB,EAAC;QACxB,IAAI,CAAChC,IAAIY,OAAO,EAAE;YAChB;QACF;QAEA,MAAM0C,oBAAoB,CAACC;YACzB,IAAI7D,UAAU;gBACZ;YACF;YAEA,MAAM8D,mBAAmBC,IAAAA,yBAAU,EAACF;YAEpC,OAAQC;gBACN,KAAKE,mBAAI,CAACC,GAAG;oBAAE;wBACb,IAAI,CAACvD,kBAAkBQ,OAAO,CAACa,MAAM,EAAE;4BACrC,OAAO;wBACT;wBAEA,MAAMmC,UAAUxD,kBAAkBQ,OAAO,CAACa,MAAM,GAAG;wBACnD,MAAMoC,YAAYzD,kBAAkBQ,OAAO,CAACkD,SAAS,CAAC,CAACC,OAASA,SAASR,MAAMS,MAAM;wBAErF,MAAMC,uBACJJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACL,MAAMW,QAAQ;wBAE/D,IAAID,wBAAyBJ,cAAc,KAAKN,MAAMW,QAAQ,EAAG;4BAC/DX,MAAMY,cAAc;4BAEpB,MAAMJ,OAAO3D,kBAAkBQ,OAAO,CAACqD,uBAAuB,IAAIL,QAAQ;4BAE1E,IAAIG,SAASrB,IAAAA,qCAAgC,EAACqB,OAAO;gCACnDA,KAAKlD,KAAK;4BACZ;4BAEA,OAAO;wBACT;wBAEA;oBACF;gBACA,KAAK6C,mBAAI,CAACU,MAAM;oBAAE;wBAChB,IAAI7E,SAAS;4BACXgE,MAAMY,cAAc;4BACpB5E;wBACF;oBACF;YACF;YAEA,OAAO;QACT;QAEA,MAAM8E,MAAMC,IAAAA,cAAS,EAACtE,IAAIY,OAAO,EAAEV,QAAQ;QAC3CmE,IAAIE,gBAAgB,CAAC,WAAWjB,mBAAmB;YACjDkB,SAAS;QACX;QACA,OAAO;YACLH,IAAII,mBAAmB,CAAC,WAAWnB,mBAAmB;QACxD;IACF,GAAG;QAAC/D;QAASS;QAAKN;KAAS;IAE3B,qBACE,qBAACJ;QAAUoF,UAAU,CAAC;QAAG1E,KAAKA;OAASD;kBACpCD;;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["Footer","children","className","restProps","Footnote","Component","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;iEAXU;sBACI;0BAEF;AAQlB,MAAMA,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE,kBAAQ;QAACC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gBAAU,gBAAmBJ;kBACjFD;;AAGP"}
+{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["Footer","children","className","restProps","Footnote","Component","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;;iEAXU;sBACI;0BAEF;AAQlB,MAAMA,SAAS;QAAC,EAAEC,QAAQ,EAAEC,SAAS,EAA6B,WAAxBC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE,kBAAQ;QAACC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gBAAU,gBAAmBJ;kBACjFD;;AAGP"}

package/dist/cjs/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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['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  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\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 { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\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 !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\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    </Component>\n  );\n};\n"],"names":["FormField","sizeYClassNames","none","stylesStatus","error","valid","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","useExternRef","sizeY","useAdaptivity","hover","setHover","React","useState","focusWithin","useFocusWithin","focusVisibleClassNames","useFocusVisibleClassName","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2DaA;;;eAAAA;;;;;;;;iEA3DU;sBACI;+BACG;8BACD;0CACY;gCACV;AAI/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AA0CO,MAAML,YAAY;QAAC,EACxBM,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EAES,WADfC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQC,IAAAA,0BAAY,EAACR;IAC3B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,CAACC,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;IAEzC,MAAMC,cAAcC,IAAAA,8BAAc,EAACT;IACnC,MAAMU,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDC,cAAcJ;QACdX,IAAI;IACN;IAEA,MAAMgB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,MAAMW,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,qBACE,sBAACf,uDACKS;QACJkB,KAAKjB;QACLkB,cAAcL;QACdM,cAAcH;QACdlB,WAAWsB,IAAAA,gBAAU,mBAEnBvB,SAAS,4CACTN,WAAW,aAAaJ,YAAY,CAACI,OAAO,EAC5CW,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CN,uCACA,CAACA,YAAYQ,iCACbM,wBACAZ;;YAGDJ,wBAAU,qBAAC2B;gBAAKvB,SAAS;0BAAgCJ;;YACzDF;YACAG,uBACC,qBAAC0B;gBAAKvB,WAAWsB,IAAAA,gBAAU,0BAA6B;0BACrDzB;;0BAGL,qBAAC0B;gBAAKC,aAAW;gBAACxB,SAAS;;;;AAGjC"}
+{"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 { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['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  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\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 { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\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 !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\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    </Component>\n  );\n};\n"],"names":["FormField","sizeYClassNames","none","stylesStatus","error","valid","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","useExternRef","sizeY","useAdaptivity","hover","setHover","React","useState","focusWithin","useFocusWithin","focusVisibleClassNames","useFocusVisibleClassName","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","span","aria-hidden"],"mappings":";;;;+BA2DaA;;;eAAAA;;;;;;;;iEA3DU;sBACI;+BACG;8BACD;0CACY;gCACV;AAI/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,eAAe;IACnBC,KAAK;IACLC,KAAK;AACP;AA0CO,MAAML,YAAY;QAAC,EACxBM,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EAES,WADfC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,QAAQC,IAAAA,0BAAY,EAACR;IAC3B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,CAACC,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAAC;IAEzC,MAAMC,cAAcC,IAAAA,8BAAc,EAACT;IACnC,MAAMU,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDC,cAAcJ;QACdX,IAAI;IACN;IAEA,MAAMgB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,MAAMW,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBV,SAAS;IACX;IAEA,qBACE,sBAACf,uDACKS;QACJkB,KAAKjB;QACLkB,cAAcL;QACdM,cAAcH;QACdlB,WAAWsB,IAAAA,gBAAU,mBAEnBvB,SAAS,4CACTN,WAAW,aAAaJ,YAAY,CAACI,OAAO,EAC5CW,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CN,uCACA,CAACA,YAAYQ,iCACbM,wBACAZ;;YAGDJ,wBAAU,qBAAC2B;gBAAKvB,SAAS;0BAAgCJ;;YACzDF;YACAG,uBACC,qBAAC0B;gBAAKvB,WAAWsB,IAAAA,gBAAU,0BAA6B;0BACrDzB;;0BAGL,qBAAC0B;gBAAKC,aAAW;gBAACxB,SAAS;;;;AAGjC"}

package/dist/cjs/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 { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\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  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  /**\n   * Позволяет полностью заменить шапку поля пользовательским компонентом.\n   *\n   * @since 6.1.0\n   *\n   * TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n   */\n  topNode?: 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  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  topMultiline,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  topNode,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(topNode) ? (\n        topNode\n      ) : hasReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : null}\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  const context = useObjectMemo({ required, topMultiline });\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 !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\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(\n                styles['FormItem__removable'],\n                'vkuiInternalFormItem__removable',\n              )}\n            >\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["FormItem","sizeYClassNames","none","classNames","stylesStatus","error","valid","children","top","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","noop","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","useExternRef","sizeY","useAdaptivity","wrappedChildren","React","Fragment","hasReactNode","FormItemTop","FormItemTopLabel","Component","multiline","Footnote","className","id","role","undefined","context","useObjectMemo","RootComponent","baseClassName","FormItemContext","Provider","value","Removable","align","e","current","indent","div","displayName","Top","TopLabel","TopAside","FormItemTopAside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;iEA7EU;sBACwB;+BACjB;8BACD;+BACC;2BAEY;+BACZ;0BACL;6BACG;kCACK;kCACA;yBACD;AAGhC,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,8BAAiC;IACjD,CAAC,UAAU,EAAEA,IAAAA,gBAAU,iCAAoC;AAC7D;AAEA,MAAMC,eAAe;IACnBC,OAAOF,IAAAA,gBAAU,gCAAmC;IACpDG,OAAOH,IAAAA,gBAAU,gCAAmC;AACtD;AAsDO,MAAMH,WAAW;QAAC,EACvBO,QAAQ,EACRC,GAAG,EACHC,YAAY,EACZC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,WAAWC,UAAI,EACfC,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,KAAK,EAEF,WADXC;QAfHjB;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,SAASC,IAAAA,0BAAY,EAACR;IAC5B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,gCACJ,sBAACC,OAAMC,QAAQ;;YACZC,IAAAA,kBAAY,EAACV,WACZA,UACEU,IAAAA,kBAAY,EAACxB,qBACf,qBAACyB,wBAAW;0BACV,cAAA,qBAACC,kCAAgB;oBAACf,SAASA;oBAASgB,WAAWxB;oBAAkByB,WAAW3B;8BACzED;;iBAGH;YACHD;YACAyB,IAAAA,kBAAY,EAACpB,yBACZ,qBAACyB,kBAAQ;gBACPC,SAAS;gBACTC,IAAInB;gBACJoB,MAAM3B,WAAW,UAAU,UAAU4B;0BAEpC7B;;;;IAMT,MAAM8B,UAAUC,IAAAA,4BAAa,EAAC;QAAEpB;QAAUd;IAAa;IAEvD,qBACE,qBAACmC,4BAAa,8CACRpB;QACJN,YAAYO;QACZoB,eAAe1C,IAAAA,gBAAU,kBAEvB,CAACkB,0CACD,wBACAR,WAAW,aAAaT,YAAY,CAACS,OAAO,EAC5Cc,UAAU,aAAa1B,eAAe,CAAC0B,MAAM,EAC7CK,IAAAA,kBAAY,EAACxB,QACXL,IAAAA,gBAAU,2BAA8B,kCAC1CW,aAAaX,IAAAA,gBAAU,6BAAgC;kBAGzD,cAAA,qBAAC2C,wBAAe,CAACC,QAAQ;YAACC,OAAON;sBAC9B5B,0BACC,qBAACmC,oBAAS;gBACRC,OAAM;gBACNnC,UAAU,CAACoC;oBACT,IAAI1B,mBAAAA,6BAAAA,OAAQ2B,OAAO,EAAE;wBACnBrC,SAASoC,GAAG1B,OAAO2B,OAAO;oBAC5B;gBACF;gBACAnC,mBAAmBA;gBACnBoC,QAAQvC,cAAc;0BAEtB,cAAA,qBAACwC;oBACChB,WAAWnC,IAAAA,gBAAU,6BAEnB;8BAGD0B;;iBAILA;;;AAKV;AAEA7B,SAASuD,WAAW,GAAG;AAEvBvD,SAASwD,GAAG,GAAGvB,wBAAW;AAC1BjC,SAASwD,GAAG,CAACD,WAAW,GAAG;AAE3BvD,SAASyD,QAAQ,GAAGvB,kCAAgB;AACpClC,SAASyD,QAAQ,CAACF,WAAW,GAAG;AAEhCvD,SAAS0D,QAAQ,GAAGC,kCAAgB;AACpC3D,SAAS0D,QAAQ,CAACH,WAAW,GAAG"}
+{"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 { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\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  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  /**\n   * Позволяет полностью заменить шапку поля пользовательским компонентом.\n   *\n   * @since 6.1.0\n   *\n   * TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n   */\n  topNode?: 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  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  topMultiline,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  topNode,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(topNode) ? (\n        topNode\n      ) : hasReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : null}\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  const context = useObjectMemo({ required, topMultiline });\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 !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\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(\n                styles['FormItem__removable'],\n                'vkuiInternalFormItem__removable',\n              )}\n            >\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["FormItem","sizeYClassNames","none","classNames","stylesStatus","error","valid","children","top","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","noop","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","useExternRef","sizeY","useAdaptivity","wrappedChildren","React","Fragment","hasReactNode","FormItemTop","FormItemTopLabel","Component","multiline","Footnote","className","id","role","undefined","context","useObjectMemo","RootComponent","baseClassName","FormItemContext","Provider","value","Removable","align","e","current","indent","div","displayName","Top","TopLabel","TopAside","FormItemTopAside"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;iEA7EU;sBACwB;+BACjB;8BACD;+BACC;2BAEY;+BACZ;0BACL;6BACG;kCACK;kCACA;yBACD;AAGhC,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,8BAAiC;IACjD,CAAC,UAAU,EAAEA,IAAAA,gBAAU,iCAAoC;AAC7D;AAEA,MAAMC,eAAe;IACnBC,OAAOF,IAAAA,gBAAU,gCAAmC;IACpDG,OAAOH,IAAAA,gBAAU,gCAAmC;AACtD;AAsDO,MAAMH,WAAW;QAAC,EACvBO,QAAQ,EACRC,GAAG,EACHC,YAAY,EACZC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,WAAWC,UAAI,EACfC,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,KAAK,EAEF,WADXC;QAfHjB;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,SAASC,IAAAA,0BAAY,EAACR;IAC5B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,gCACJ,sBAACC,OAAMC,QAAQ;;YACZC,IAAAA,kBAAY,EAACV,WACZA,UACEU,IAAAA,kBAAY,EAACxB,qBACf,qBAACyB,wBAAW;0BACV,cAAA,qBAACC,kCAAgB;oBAACf,SAASA;oBAASgB,WAAWxB;oBAAkByB,WAAW3B;8BACzED;;iBAGH;YACHD;YACAyB,IAAAA,kBAAY,EAACpB,yBACZ,qBAACyB,kBAAQ;gBACPC,SAAS;gBACTC,IAAInB;gBACJoB,MAAM3B,WAAW,UAAU,UAAU4B;0BAEpC7B;;;;IAMT,MAAM8B,UAAUC,IAAAA,4BAAa,EAAC;QAAEpB;QAAUd;IAAa;IAEvD,qBACE,qBAACmC,4BAAa,8CACRpB;QACJN,YAAYO;QACZoB,eAAe1C,IAAAA,gBAAU,kBAEvB,CAACkB,0CACD,wBACAR,WAAW,aAAaT,YAAY,CAACS,OAAO,EAC5Cc,UAAU,aAAa1B,eAAe,CAAC0B,MAAM,EAC7CK,IAAAA,kBAAY,EAACxB,QACXL,IAAAA,gBAAU,2BAA8B,kCAC1CW,aAAaX,IAAAA,gBAAU,6BAAgC;kBAGzD,cAAA,qBAAC2C,wBAAe,CAACC,QAAQ;YAACC,OAAON;sBAC9B5B,0BACC,qBAACmC,oBAAS;gBACRC,OAAM;gBACNnC,UAAU,CAACoC;oBACT,IAAI1B,mBAAAA,6BAAAA,OAAQ2B,OAAO,EAAE;wBACnBrC,SAASoC,GAAG1B,OAAO2B,OAAO;oBAC5B;gBACF;gBACAnC,mBAAmBA;gBACnBoC,QAAQvC,cAAc;0BAEtB,cAAA,qBAACwC;oBACChB,WAAWnC,IAAAA,gBAAU,6BAEnB;8BAGD0B;;iBAILA;;;AAKV;AAEA7B,SAASuD,WAAW,GAAG;AAEvBvD,SAASwD,GAAG,GAAGvB,wBAAW;AAC1BjC,SAASwD,GAAG,CAACD,WAAW,GAAG;AAE3BvD,SAASyD,QAAQ,GAAGvB,kCAAgB;AACpClC,SAASyD,QAAQ,CAACF,WAAW,GAAG;AAEhCvD,SAAS0D,QAAQ,GAAGC,kCAAgB;AACpC3D,SAAS0D,QAAQ,CAACH,WAAW,GAAG"}

package/dist/cjs/components/FormItem/FormItemTop/FormItemTop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTop.tsx"],"sourcesContent":["import { HasComponent, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {}\n\n/**\n * Служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTop = (props: FormItemTopProps) => (\n  <RootComponent {...props} baseClassName={styles.FormItem__top} />\n);\n\nFormItemTop.displayName = 'FormItemTop';\n"],"names":["FormItemTop","props","RootComponent","baseClassName","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;;;+BAXiB;AAWvB,MAAMA,cAAc,CAACC,sBAC1B,qBAACC,4BAAa,8CAAKD;QAAOE,aAAa;;AAGzCH,YAAYI,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTop.tsx"],"sourcesContent":["import { HasComponent, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {}\n\n/**\n * Служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTop = (props: FormItemTopProps) => (\n  <RootComponent {...props} baseClassName={styles.FormItem__top} />\n);\n\nFormItemTop.displayName = 'FormItemTop';\n"],"names":["FormItemTop","props","RootComponent","baseClassName","displayName"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+BAXiB;AAWvB,MAAMA,cAAc,CAACC,sBAC1B,qBAACC,4BAAa,8CAAKD;QAAOE,aAAa;;AAGzCH,YAAYI,WAAW,GAAG"}

package/dist/cjs/components/FormItem/FormItemTop/FormItemTopAside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopAsideProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Отвечает за отрисовку дополнительного контента справа от заголовка поля.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {\n  return (\n    <Subhead className={styles['FormItemTop__aside']} {...restProps}>\n      {children}\n    </Subhead>\n  );\n};\n\nFormItemTopAside.displayName = 'FormItemTopAside';\n"],"names":["FormItemTopAside","children","restProps","Subhead","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;;iEAhBU;yBAEC;AAcjB,MAAMA,mBAAmB;QAAC,EAAEC,QAAQ,EAAuC,WAAlCC;QAAbD;;IACjC,qBACE,qBAACE,gBAAO;QAACC,SAAS;OAAoCF;kBACnDD;;AAGP;AAEAD,iBAAiBK,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopAsideProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Отвечает за отрисовку дополнительного контента справа от заголовка поля.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {\n  return (\n    <Subhead className={styles['FormItemTop__aside']} {...restProps}>\n      {children}\n    </Subhead>\n  );\n};\n\nFormItemTopAside.displayName = 'FormItemTopAside';\n"],"names":["FormItemTopAside","children","restProps","Subhead","className","displayName"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;;iEAhBU;yBAEC;AAcjB,MAAMA,mBAAmB;QAAC,EAAEC,QAAQ,EAAuC,WAAlCC;QAAbD;;IACjC,qBACE,qBAACE,gBAAO;QAACC,SAAS;OAAoCF;kBACnDD;;AAGP;AAEAD,iBAAiBK,WAAW,GAAG"}

package/dist/cjs/components/FormItem/FormItemTop/FormItemTopLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport { FormItemContext } from '../context';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopLabelProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Многострочный вывод заголовка.\n   * TODO [>=7]: удалить и вседа брать из контекста\n   */\n  multiline?: boolean;\n}\n\n/**\n * Отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом `label`, если передано свойство `htmlFor`.\n * Можно переопределить через свойство `Component`.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopLabel = ({\n  children,\n  Component: componentProp,\n  htmlFor,\n  multiline,\n  ...restProps\n}: FormItemTopLabelProps) => {\n  const component = componentProp || (htmlFor && 'label') || 'span';\n  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);\n\n  return (\n    <Subhead\n      className={classNames(\n        styles['FormItemTop__label'],\n        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],\n      )}\n      Component={component}\n      htmlFor={htmlFor}\n      {...restProps}\n    >\n      {children}\n      {required && (\n        <span className={styles['FormItemTop__label--required']} aria-hidden>\n          *\n        </span>\n      )}\n    </Subhead>\n  );\n};\n\nFormItemTopLabel.displayName = 'FormItemTopLabel';\n"],"names":["FormItemTopLabel","children","Component","componentProp","htmlFor","multiline","restProps","component","required","topMultiline","multilineContext","React","useContext","FormItemContext","Subhead","className","classNames","span","aria-hidden","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;yBAEH;yBACQ;AAqBzB,MAAMA,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,OAAO,EACPC,SAAS,EAEa,WADnBC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAME,YAAYJ,iBAAkBC,WAAW,WAAY;IAC3D,MAAM,EAAEI,QAAQ,EAAEC,cAAcC,gBAAgB,EAAE,GAAGC,OAAMC,UAAU,CAACC,wBAAe;IAErF,qBACE,sBAACC,gBAAO;QACNC,WAAWC,IAAAA,gBAAU,4BAEnB,AAACX,CAAAA,sBAAAA,uBAAAA,YAAaK,gBAAe;QAE/BR,WAAWK;QACXH,SAASA;OACLE;;YAEHL;YACAO,0BACC,qBAACS;gBAAKF,SAAS;gBAA0CG,aAAW;0BAAC;;;;AAM7E;AAEAlB,iBAAiBmB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport { FormItemContext } from '../context';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopLabelProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Многострочный вывод заголовка.\n   * TODO [>=7]: удалить и вседа брать из контекста\n   */\n  multiline?: boolean;\n}\n\n/**\n * Отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом `label`, если передано свойство `htmlFor`.\n * Можно переопределить через свойство `Component`.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopLabel = ({\n  children,\n  Component: componentProp,\n  htmlFor,\n  multiline,\n  ...restProps\n}: FormItemTopLabelProps) => {\n  const component = componentProp || (htmlFor && 'label') || 'span';\n  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);\n\n  return (\n    <Subhead\n      className={classNames(\n        styles['FormItemTop__label'],\n        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],\n      )}\n      Component={component}\n      htmlFor={htmlFor}\n      {...restProps}\n    >\n      {children}\n      {required && (\n        <span className={styles['FormItemTop__label--required']} aria-hidden>\n          *\n        </span>\n      )}\n    </Subhead>\n  );\n};\n\nFormItemTopLabel.displayName = 'FormItemTopLabel';\n"],"names":["FormItemTopLabel","children","Component","componentProp","htmlFor","multiline","restProps","component","required","topMultiline","multilineContext","React","useContext","FormItemContext","Subhead","className","classNames","span","aria-hidden","displayName"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;yBAEH;yBACQ;AAqBzB,MAAMA,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,OAAO,EACPC,SAAS,EAEa,WADnBC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAME,YAAYJ,iBAAkBC,WAAW,WAAY;IAC3D,MAAM,EAAEI,QAAQ,EAAEC,cAAcC,gBAAgB,EAAE,GAAGC,OAAMC,UAAU,CAACC,wBAAe;IAErF,qBACE,sBAACC,gBAAO;QACNC,WAAWC,IAAAA,gBAAU,4BAEnB,AAACX,CAAAA,sBAAAA,uBAAAA,YAAaK,gBAAe;QAE/BR,WAAWK;QACXH,SAASA;OACLE;;YAEHL;YACAO,0BACC,qBAACS;gBAAKF,SAAS;gBAA0CG,aAAW;0BAAC;;;;AAM7E;AAEAlB,iBAAiBmB,WAAW,GAAG"}

package/dist/cjs/components/FormItem/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/context.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface FormItemContextProps {\n  required?: boolean;\n  topMultiline?: boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextProps>({\n  required: false,\n  topMultiline: false,\n});\n"],"names":["FormItemContext","React","createContext","required","topMultiline"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;AAOhB,MAAMA,kBAAkBC,OAAMC,aAAa,CAAuB;IACvEC,UAAU;IACVC,cAAc;AAChB"}
+{"version":3,"sources":["../../../../src/components/FormItem/context.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface FormItemContextProps {\n  required?: boolean;\n  topMultiline?: boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextProps>({\n  required: false,\n  topMultiline: false,\n});\n"],"names":["FormItemContext","React","createContext","required","topMultiline"],"mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;AAOhB,MAAMA,kBAAkBC,OAAMC,aAAa,CAAuB;IACvEC,UAAU;IACVC,cAAc;AAChB"}

package/dist/cjs/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 { 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  ['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   * Дает возможность склеить несколько `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 rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        mode === 'vertical' &&\n          classNames(\n            styles['FormLayoutGroup--mode-vertical'],\n            'vkuiInternalFormLayoutGroup--mode-vertical',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        segmented &&\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","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","restProps","sizeY","useAdaptivity","isRemovable","rootEl","useExternRef","RootComponent","baseClassName","Removable","className","align","e","current","indent","React","Fragment","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;;iEAxCU;sBACU;+BACH;8BACD;2BAEa;+BACZ;AAG9B,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,qCAEd;IAEF,CAAC,UAAU,EAAEA,IAAAA,gBAAU,wCAErB;AAEJ;AAsBO,MAAMH,kBAAkB;QAAC,EAC9BI,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWC,UAAI,EACfC,UAAU,EAEW,WADlBC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcT,aAAaD,SAAS;IAC1C,MAAMW,SAASC,IAAAA,0BAAY,EAACN;IAE5B,qBACE,qBAACO,4BAAa;QACZP,YAAYK;QACZG,eAAehB,IAAAA,gBAAU,EACvBU,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CR,SAAS,gBACPF,IAAAA,gBAAU,0CAER,iDAEJE,SAAS,cACPF,IAAAA,gBAAU,wCAER,+CAEJY,eACEZ,IAAAA,gBAAU,oCAER,2CAEJI,aACEJ,IAAAA,gBAAU,oCAER;OAGFS;kBAEHG,4BACC,qBAACK,oBAAS;YACRC,SAAS;YACTC,OAAM;YACNd,mBAAmBA;YACnBC,UAAU,CAACc;gBACT,IAAIP,mBAAAA,6BAAAA,OAAQQ,OAAO,EAAE;oBACnBf,SAASc,GAAGP,OAAOQ,OAAO;gBAC5B;YACF;YACAC,QAAQnB,cAAc;sBAErBF;2BAGH,sBAACsB,OAAMC,QAAQ;;gBACZvB;8BACD,qBAACwB;oBAAKP,SAAS;oBAAqCQ,aAAW;;;;;AAKzE"}
+{"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 { 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  ['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   * Дает возможность склеить несколько `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 rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        mode === 'vertical' &&\n          classNames(\n            styles['FormLayoutGroup--mode-vertical'],\n            'vkuiInternalFormLayoutGroup--mode-vertical',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        segmented &&\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","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","restProps","sizeY","useAdaptivity","isRemovable","rootEl","useExternRef","RootComponent","baseClassName","Removable","className","align","e","current","indent","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;;iEAxCU;sBACU;+BACH;8BACD;2BAEa;+BACZ;AAG9B,MAAMC,kBAAkB;IACtBC,MAAMC,IAAAA,gBAAU,qCAEd;IAEF,CAAC,UAAU,EAAEA,IAAAA,gBAAU,wCAErB;AAEJ;AAsBO,MAAMH,kBAAkB;QAAC,EAC9BI,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWC,UAAI,EACfC,UAAU,EAEW,WADlBC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcT,aAAaD,SAAS;IAC1C,MAAMW,SAASC,IAAAA,0BAAY,EAACN;IAE5B,qBACE,qBAACO,4BAAa;QACZP,YAAYK;QACZG,eAAehB,IAAAA,gBAAU,EACvBU,UAAU,aAAaZ,eAAe,CAACY,MAAM,EAC7CR,SAAS,gBACPF,IAAAA,gBAAU,0CAER,iDAEJE,SAAS,cACPF,IAAAA,gBAAU,wCAER,+CAEJY,eACEZ,IAAAA,gBAAU,oCAER,2CAEJI,aACEJ,IAAAA,gBAAU,oCAER;OAGFS;kBAEHG,4BACC,qBAACK,oBAAS;YACRC,SAAS;YACTC,OAAM;YACNd,mBAAmBA;YACnBC,UAAU,CAACc;gBACT,IAAIP,mBAAAA,6BAAAA,OAAQQ,OAAO,EAAE;oBACnBf,SAASc,GAAGP,OAAOQ,OAAO;gBAC5B;YACF;YACAC,QAAQnB,cAAc;sBAErBF;2BAGH,sBAACsB,OAAMC,QAAQ;;gBACZvB;8BACD,qBAACwB;oBAAKP,SAAS;oBAAqCQ,aAAW;;;;;AAKzE"}

package/dist/cjs/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 { 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 = ({\n  mode,\n  children,\n  className,\n  role = mode === 'error' ? 'alert' : 'status',\n  ...restProps\n}: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      role={role}\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","role","restProps","Banner","subheader","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;iEAdU;sBACI;wBAEJ;AAWhB,MAAMA,aAAa;QAAC,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAOH,SAAS,UAAU,UAAU,QAAQ,EAE5B,WADbI;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,cAAM,8CACDD;QACJD,MAAMA;QACNG,WAAWL;QACXC,WAAWK,IAAAA,gBAAU,EACnB,0BACAP,SAAS,WACPO,IAAAA,gBAAU,gCAAmC,uCAC/CL;;AAIR"}
+{"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 = ({\n  mode,\n  children,\n  className,\n  role = mode === 'error' ? 'alert' : 'status',\n  ...restProps\n}: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      role={role}\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","role","restProps","Banner","subheader","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;iEAdU;sBACI;wBAEJ;AAWhB,MAAMA,aAAa;QAAC,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAOH,SAAS,UAAU,UAAU,QAAQ,EAE5B,WADbI;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,cAAM,8CACDD;QACJD,MAAMA;QACNG,WAAWL;QACXC,WAAWK,IAAAA,gBAAU,EACnB,0BACAP,SAAS,WACPO,IAAAA,gBAAU,gCAAmC,uCAC/CL;;AAIR"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","React","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","useIsClient","handleChange","useCallback","current","useAutoPlay","safeSlideIndex","clamp","useEffect","Component","CarouselBase","BaseGallery","dragDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;iEAlBU;sBACD;6BACM;6BACA;8BACC;uBAED;AAYrB,MAAMA,UAAU;QAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EAEO,WADVC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiBC,cAAc,GAAGC,OAAMC,QAAQ,CAACV;IACxD,MAAMW,eAAe,OAAOL,MAAMM,UAAU,KAAK;QACfN;IAAlC,MAAMM,aAAaD,eAAeL,CAAAA,oBAAAA,MAAMM,UAAU,cAAhBN,+BAAAA,oBAAoB,IAAIC;IAC1D,MAAMM,SAASJ,OAAMK,OAAO,CAC1B,IAAML,OAAMM,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAACjB;KAAS;IAEZ,MAAMmB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,eAAyCf,OAAMgB,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYd,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBH,cAAckB;QAC/BvB,YAAYA,SAASuB;IACvB,GACA;QAACf;QAAcR;QAAUS;KAAW;IAGtCe,IAAAA,kBAAW,EAACzB,SAASU,YAAY,IAAMY,aAAa,AAACZ,CAAAA,aAAa,CAAA,IAAKQ;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMQ,iBAAiBR,aAAa,IAAIS,IAAAA,WAAK,EAACjB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnCH,OAAMqB,SAAS,CAAC;QACd,IAAI3B,YAAYyB,mBAAmBhB,YAAY;YAC7CT,SAASyB;QACX;QACApB,cAAcoB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBhB;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMS,YAAY1B,SAAS2B,0BAAY,GAAGC,wBAAW;IAErD,qBACE,qBAACF;QACCG,cAAcvB,gBAAgB,CAACR;OAC3BG;QACJF,SAASgB,aAAa,KAAKhB;QAC3BQ,YAAYgB;QACZzB,UAAUqB;kBAETX;;AAGP"}
+{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","React","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","useIsClient","handleChange","useCallback","current","useAutoPlay","safeSlideIndex","clamp","useEffect","Component","CarouselBase","BaseGallery","dragDisabled"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;iEAlBU;sBACD;6BACM;6BACA;8BACC;uBAED;AAYrB,MAAMA,UAAU;QAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EAEO,WADVC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiBC,cAAc,GAAGC,OAAMC,QAAQ,CAACV;IACxD,MAAMW,eAAe,OAAOL,MAAMM,UAAU,KAAK;QACfN;IAAlC,MAAMM,aAAaD,eAAeL,CAAAA,oBAAAA,MAAMM,UAAU,cAAhBN,+BAAAA,oBAAoB,IAAIC;IAC1D,MAAMM,SAASJ,OAAMK,OAAO,CAC1B,IAAML,OAAMM,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAACjB;KAAS;IAEZ,MAAMmB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,eAAyCf,OAAMgB,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYd,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBH,cAAckB;QAC/BvB,YAAYA,SAASuB;IACvB,GACA;QAACf;QAAcR;QAAUS;KAAW;IAGtCe,IAAAA,kBAAW,EAACzB,SAASU,YAAY,IAAMY,aAAa,AAACZ,CAAAA,aAAa,CAAA,IAAKQ;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMQ,iBAAiBR,aAAa,IAAIS,IAAAA,WAAK,EAACjB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnCH,OAAMqB,SAAS,CAAC;QACd,IAAI3B,YAAYyB,mBAAmBhB,YAAY;YAC7CT,SAASyB;QACX;QACApB,cAAcoB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBhB;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMS,YAAY1B,SAAS2B,0BAAY,GAAGC,wBAAW;IAErD,qBACE,qBAACF;QACCG,cAAcvB,gBAAgB,CAACR;OAC3BG;QACJF,SAASgB,aAAa,KAAKhB;QAC3BQ,YAAYgB;QACZzB,UAAUqB;kBAETX;;AAGP"}

package/dist/cjs/components/Gallery/hooks.d.ts

@@ -1,2 +1,2 @@
-export declare function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction): void;
+export declare function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction): void;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/cjs/components/Gallery/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,QAkCxF"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,QAyC5F"}

package/dist/cjs/components/Gallery/hooks.js

@@ -10,40 +10,43 @@ Object.defineProperty(exports, "useAutoPlay", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useTimeout = require("../../hooks/useTimeout");
+const _useStableCallback = require("../../hooks/useStableCallback");
 const _dom = require("../../lib/dom");
-function useAutoPlay(timeout, slideIndex, callbackFn) {
-    const { clear: clearAutoPlay, set: setAutoPlay } = (0, _useTimeout.useTimeout)(callbackFn, timeout);
+function useAutoPlay(timeout, slideIndex, callbackFnProp) {
     const { document } = (0, _dom.useDOM)();
-    _react.useEffect(()=>timeout ? setAutoPlay() : clearAutoPlay(), [
-        timeout,
-        slideIndex,
-        clearAutoPlay,
-        setAutoPlay
-    ]);
-    // Отключаем прокрутку слайдов при неактивной вкладке
-    _react.useEffect(function preventSlideChange() {
+    const callbackFn = (0, _useStableCallback.useStableCallback)(callbackFnProp);
+    _react.useEffect(function initializeAutoPlay() {
         if (!document || !timeout) {
             return;
         }
-        const changeAutoPlay = ()=>{
-            if (document.visibilityState === 'visible') {
-                clearAutoPlay();
-                setAutoPlay();
+        let timeoutId = null;
+        const stop = ()=>{
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
             }
-            if (document.visibilityState === 'hidden') {
-                clearAutoPlay();
+        };
+        const start = ()=>{
+            switch(document.visibilityState){
+                case 'visible':
+                    stop();
+                    timeoutId = setTimeout(callbackFn, timeout);
+                    break;
+                case 'hidden':
+                    stop();
             }
         };
-        document.addEventListener('visibilitychange', changeAutoPlay);
+        start();
+        document.addEventListener('visibilitychange', start);
         return ()=>{
-            document.removeEventListener('visibilitychange', changeAutoPlay);
+            stop();
+            document.removeEventListener('visibilitychange', start);
         };
     }, [
         document,
         timeout,
-        clearAutoPlay,
-        setAutoPlay
+        slideIndex,
+        callbackFn
     ]);
 }
 

package/dist/cjs/components/Gallery/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {\n  const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);\n  const { document } = useDOM();\n\n  React.useEffect(\n    () => (timeout ? setAutoPlay() : clearAutoPlay()),\n    [timeout, slideIndex, clearAutoPlay, setAutoPlay],\n  );\n\n  // Отключаем прокрутку слайдов при неактивной вкладке\n  React.useEffect(\n    function preventSlideChange() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      const changeAutoPlay = () => {\n        if (document.visibilityState === 'visible') {\n          clearAutoPlay();\n          setAutoPlay();\n        }\n        if (document.visibilityState === 'hidden') {\n          clearAutoPlay();\n        }\n      };\n\n      document.addEventListener('visibilitychange', changeAutoPlay);\n\n      return () => {\n        document.removeEventListener('visibilitychange', changeAutoPlay);\n      };\n    },\n    [document, timeout, clearAutoPlay, setAutoPlay],\n  );\n}\n"],"names":["useAutoPlay","timeout","slideIndex","callbackFn","clear","clearAutoPlay","set","setAutoPlay","useTimeout","document","useDOM","React","useEffect","preventSlideChange","changeAutoPlay","visibilityState","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;4BACI;qBACJ;AAEhB,SAASA,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,UAAwB;IACvF,MAAM,EAAEC,OAAOC,aAAa,EAAEC,KAAKC,WAAW,EAAE,GAAGC,IAAAA,sBAAU,EAACL,YAAYF;IAC1E,MAAM,EAAEQ,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3BC,OAAMC,SAAS,CACb,IAAOX,UAAUM,gBAAgBF,iBACjC;QAACJ;QAASC;QAAYG;QAAeE;KAAY;IAGnD,qDAAqD;IACrDI,OAAMC,SAAS,CACb,SAASC;QACP,IAAI,CAACJ,YAAY,CAACR,SAAS;YACzB;QACF;QAEA,MAAMa,iBAAiB;YACrB,IAAIL,SAASM,eAAe,KAAK,WAAW;gBAC1CV;gBACAE;YACF;YACA,IAAIE,SAASM,eAAe,KAAK,UAAU;gBACzCV;YACF;QACF;QAEAI,SAASO,gBAAgB,CAAC,oBAAoBF;QAE9C,OAAO;YACLL,SAASQ,mBAAmB,CAAC,oBAAoBH;QACnD;IACF,GACA;QAACL;QAAUR;QAASI;QAAeE;KAAY;AAEnD"}
+{"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport { TimeoutId } from '../../types';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction) {\n  const { document } = useDOM();\n  const callbackFn = useStableCallback(callbackFnProp);\n\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      let timeoutId: TimeoutId = null;\n\n      const stop = () => {\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n          timeoutId = null;\n        }\n      };\n\n      const start = () => {\n        switch (document.visibilityState) {\n          case 'visible':\n            stop();\n            timeoutId = setTimeout(callbackFn, timeout);\n            break;\n          case 'hidden':\n            stop();\n        }\n      };\n\n      start();\n\n      document.addEventListener('visibilitychange', start);\n\n      return () => {\n        stop();\n        document.removeEventListener('visibilitychange', start);\n      };\n    },\n    [document, timeout, slideIndex, callbackFn],\n  );\n}\n"],"names":["useAutoPlay","timeout","slideIndex","callbackFnProp","document","useDOM","callbackFn","useStableCallback","React","useEffect","initializeAutoPlay","timeoutId","stop","clearTimeout","start","visibilityState","setTimeout","addEventListener","removeEventListener"],"mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;mCACW;qBACX;AAGhB,SAASA,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,cAA4B;IAC3F,MAAM,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAC3B,MAAMC,aAAaC,IAAAA,oCAAiB,EAACJ;IAErCK,OAAMC,SAAS,CACb,SAASC;QACP,IAAI,CAACN,YAAY,CAACH,SAAS;YACzB;QACF;QAEA,IAAIU,YAAuB;QAE3B,MAAMC,OAAO;YACX,IAAID,WAAW;gBACbE,aAAaF;gBACbA,YAAY;YACd;QACF;QAEA,MAAMG,QAAQ;YACZ,OAAQV,SAASW,eAAe;gBAC9B,KAAK;oBACHH;oBACAD,YAAYK,WAAWV,YAAYL;oBACnC;gBACF,KAAK;oBACHW;YACJ;QACF;QAEAE;QAEAV,SAASa,gBAAgB,CAAC,oBAAoBH;QAE9C,OAAO;YACLF;YACAR,SAASc,mBAAmB,CAAC,oBAAoBJ;QACnD;IACF,GACA;QAACV;QAAUH;QAASC;QAAYI;KAAW;AAE/C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && styles['Gradient--mode-tint'],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["Gradient","mode","to","restProps","RootComponent","role","baseClassName","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;;;;;sBAnBc;+BAEG;AAiBvB,MAAMA,WAAW;QAAC,EAAEC,OAAO,SAAS,EAAEC,KAAK,KAAK,EAA+B,WAA1BC;QAAjCF;QAAkBC;;IAC3C,qBACE,qBAACE,4BAAa;QACZC,MAAK;OACDF;QACJG,eAAeC,IAAAA,gBAAU,kBAEvBN,SAAS,wCACTC,OAAO;;AAIf"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && styles['Gradient--mode-tint'],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["Gradient","mode","to","restProps","RootComponent","role","baseClassName","classNames"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;;sBAnBc;+BAEG;AAiBvB,MAAMA,WAAW;QAAC,EAAEC,OAAO,SAAS,EAAEC,KAAK,KAAK,EAA+B,WAA1BC;QAAjCF;QAAkBC;;IAC3C,qBACE,qBAACE,4BAAa;QACZC,MAAK;OACDF;QACJG,eAAeC,IAAAA,gBAAU,kBAEvBN,SAAS,wCACTC,OAAO;;AAIf"}

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

@@ -14,6 +14,6 @@ export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackI
  */
 export declare const GridAvatar: {
     ({ src, size, className, children, ...restProps }: GridAvatarProps): import("react/jsx-runtime").JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => import("react/jsx-runtime").JSX.Element;
+    Badge: ({ className, ...restProps }: GridAvatarBadgeProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=GridAvatar.d.ts.map

package/dist/cjs/components/GridAvatar/GridAvatar.js

@@ -54,7 +54,7 @@ const GridAvatar = (_param)=>{
                         style: {
                             backgroundImage: `url(${url})`
                         }
-                    }, url) : null)
+                    }, index) : null)
             }),
             children
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["GRID_AVATAR_DEFAULT_SIZE","GridAvatar","MAX_GRID_LENGTH","warn","warnOnce","src","size","className","children","restProps","process","env","NODE_ENV","length","ImageBase","classNames","div","aria-hidden","map","url","index","style","backgroundImage","Badge","GridAvatarBadge"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,wBAAwB;eAAxBA;;IAgBAC,UAAU;eAAVA;;IAdAC,eAAe;eAAfA;;;;;;;sBAVc;0BACF;2BACsB;iCACY;AAKpD,MAAMF,2BAA2B;AAEjC,MAAME,kBAAkB;AAS/B,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMH,aAAa;QAAC,EACzBI,MAAM,EAAE,EACRC,OAAON,wBAAwB,EAC/BO,SAAS,EACTC,QAAQ,EAEQ,WADbC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,sBAACY,oBAAS,8CAAKL;QAAWH,MAAMA;QAAMC,WAAWQ,IAAAA,gBAAU,oBAAuBR;;0BAChF,qBAACS;gBAAIT,SAAS;gBAA4BU,aAAW;0BAClDZ,IAAIa,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQlB,gCACN,qBAACc;wBAECT,SAAS;wBACTc,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCA,OAIL;;YAGPX;;;AAGP;AAEAP,WAAWsB,KAAK,GAAGC,gCAAe"}
+{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={index}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["GRID_AVATAR_DEFAULT_SIZE","GridAvatar","MAX_GRID_LENGTH","warn","warnOnce","src","size","className","children","restProps","process","env","NODE_ENV","length","ImageBase","classNames","div","aria-hidden","map","url","index","style","backgroundImage","Badge","GridAvatarBadge"],"mappings":";;;;;;;;;;;IAQaA,wBAAwB;eAAxBA;;IAgBAC,UAAU;eAAVA;;IAdAC,eAAe;eAAfA;;;;;;;sBAVc;0BACF;2BACsB;iCACY;AAKpD,MAAMF,2BAA2B;AAEjC,MAAME,kBAAkB;AAS/B,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMH,aAAa;QAAC,EACzBI,MAAM,EAAE,EACRC,OAAON,wBAAwB,EAC/BO,SAAS,EACTC,QAAQ,EAEQ,WADbC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,sBAACY,oBAAS,8CAAKL;QAAWH,MAAMA;QAAMC,WAAWQ,IAAAA,gBAAU,oBAAuBR;;0BAChF,qBAACS;gBAAIT,SAAS;gBAA4BU,aAAW;0BAClDZ,IAAIa,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQlB,gCACN,qBAACc;wBAECT,SAAS;wBACTc,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCC,SAIL;;YAGPZ;;;AAGP;AAEAP,WAAWsB,KAAK,GAAGC,gCAAe"}