@vkontakte/vkui 7.0.0-dev-efd91c.4 → 7.0.0

package/dist/components/ModalRoot/useModalManager.js

@@ -6,6 +6,7 @@ import { VisuallyHiddenModalOverlay } from "./VisuallyHiddenModalOverlay/Visuall
 export const useModalManager = ({ id, open, keepMounted, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed })=>{
     const context = useContext(ModalRootContext);
     const opened = context.isInsideModal ? context.activeModal === id : open;
+    const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;
     const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);
     useIsomorphicLayoutEffect(function unsetUnmounted() {
         if (!keepMounted && opened) {
@@ -17,12 +18,14 @@ export const useModalManager = ({ id, open, keepMounted, modalOverlayTestId, noF
     ]);
     if (unmounted) {
         return {
-            mounted: false
+            mounted: false,
+            shouldPreserveSnapPoint
         };
     }
     return {
         mounted: true,
         open: opened,
+        shouldPreserveSnapPoint,
         noFocusToDialog: noFocusToDialog || context.noFocusToDialog,
         modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
         ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,

package/dist/components/ModalRoot/useModalManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction } from '../../types';\nimport { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext } from './ModalRootContext';\nimport { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';\nimport type { ModalRootCallbackFunction } from './types';\n\nexport interface UseModalManager {\n  id: string;\n  open: boolean;\n  keepMounted: boolean;\n  modalOverlayTestId?: string;\n  noFocusToDialog?: boolean;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport interface UseModalManagerResolvedProps {\n  open: boolean;\n  noFocusToDialog?: boolean;\n  modalOverlayTestId?: string;\n  ModalOverlay: React.ComponentType<ModalOverlayProps>;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport type UseModalManagerResult =\n  | { mounted: false }\n  | ({ mounted: true } & UseModalManagerResolvedProps);\n\nexport const useModalManager = ({\n  id,\n  open,\n  keepMounted,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: UseModalManager): UseModalManagerResult => {\n  const context = useContext(ModalRootContext);\n  const opened = context.isInsideModal ? context.activeModal === id : open;\n\n  const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);\n\n  useIsomorphicLayoutEffect(\n    function unsetUnmounted() {\n      if (!keepMounted && opened) {\n        setUnmounted((prev) => (prev ? false : prev));\n      }\n    },\n    [opened, keepMounted],\n  );\n\n  if (unmounted) {\n    return { mounted: false };\n  }\n\n  return {\n    mounted: true,\n    open: opened,\n    noFocusToDialog: noFocusToDialog || context.noFocusToDialog,\n    modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,\n    ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,\n    onOpen: onOpen || getContextCallback(id, context.onOpen),\n    onOpened: onOpened || getContextCallback(id, context.onOpened),\n    onClose: onClose || getContextCallback(id, context.onClose),\n    onClosed: function handleClosed(...args: any[]) {\n      if (!keepMounted) {\n        setUnmounted(true);\n      }\n\n      if (onClosed) {\n        onClosed(...args);\n      } else {\n        context.onClosed?.(id);\n      }\n    },\n  };\n};\n\nfunction getContextCallback(id: string, fn: ModalRootCallbackFunction | undefined) {\n  return fn ? () => fn(id) : undefined;\n}\n"],"names":["useContext","useState","useIsomorphicLayoutEffect","ModalOverlay","ModalRootContext","VisuallyHiddenModalOverlay","useModalManager","id","open","keepMounted","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","context","opened","isInsideModal","activeModal","unmounted","setUnmounted","unsetUnmounted","prev","mounted","getContextCallback","handleClosed","args","fn","undefined"],"mappings":"AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAgC,kCAA+B;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,0BAA0B,QAAQ,6DAA0D;AA8BrG,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,EAAE,EACFC,IAAI,EACJC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACQ;IAChB,MAAMC,UAAUhB,WAAWI;IAC3B,MAAMa,SAASD,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAKZ,KAAKC;IAEpE,MAAM,CAACY,WAAWC,aAAa,GAAGpB,SAASQ,cAAc,QAAQ,CAACQ;IAElEf,0BACE,SAASoB;QACP,IAAI,CAACb,eAAeQ,QAAQ;YAC1BI,aAAa,CAACE,OAAUA,OAAO,QAAQA;QACzC;IACF,GACA;QAACN;QAAQR;KAAY;IAGvB,IAAIW,WAAW;QACb,OAAO;YAAEI,SAAS;QAAM;IAC1B;IAEA,OAAO;QACLA,SAAS;QACThB,MAAMS;QACNN,iBAAiBA,mBAAmBK,QAAQL,eAAe;QAC3DD,oBAAoBA,sBAAsBM,QAAQN,kBAAkB;QACpEP,cAAca,QAAQE,aAAa,GAAGb,6BAA6BF;QACnES,QAAQA,UAAUa,mBAAmBlB,IAAIS,QAAQJ,MAAM;QACvDC,UAAUA,YAAYY,mBAAmBlB,IAAIS,QAAQH,QAAQ;QAC7DC,SAASA,WAAWW,mBAAmBlB,IAAIS,QAAQF,OAAO;QAC1DC,UAAU,SAASW,aAAa,GAAGC,IAAW;YAC5C,IAAI,CAAClB,aAAa;gBAChBY,aAAa;YACf;YAEA,IAAIN,UAAU;gBACZA,YAAYY;YACd,OAAO;oBACLX;iBAAAA,oBAAAA,QAAQD,QAAQ,cAAhBC,wCAAAA,uBAAAA,SAAmBT;YACrB;QACF;IACF;AACF,EAAE;AAEF,SAASkB,mBAAmBlB,EAAU,EAAEqB,EAAyC;IAC/E,OAAOA,KAAK,IAAMA,GAAGrB,MAAMsB;AAC7B"}
+{"version":3,"sources":["../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction } from '../../types';\nimport { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext } from './ModalRootContext';\nimport { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';\nimport type { ModalRootCallbackFunction } from './types';\n\nexport interface UseModalManager {\n  id: string;\n  open: boolean;\n  keepMounted: boolean;\n  modalOverlayTestId?: string;\n  noFocusToDialog?: boolean;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport interface UseModalManagerResolvedProps {\n  open: boolean;\n  noFocusToDialog?: boolean;\n  modalOverlayTestId?: string;\n  ModalOverlay: React.ComponentType<ModalOverlayProps>;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport type UseModalManagerResult =\n  | { mounted: false; shouldPreserveSnapPoint: boolean }\n  | ({ mounted: true; shouldPreserveSnapPoint: boolean } & UseModalManagerResolvedProps);\n\nexport const useModalManager = ({\n  id,\n  open,\n  keepMounted,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: UseModalManager): UseModalManagerResult => {\n  const context = useContext(ModalRootContext);\n  const opened = context.isInsideModal ? context.activeModal === id : open;\n  const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;\n\n  const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);\n\n  useIsomorphicLayoutEffect(\n    function unsetUnmounted() {\n      if (!keepMounted && opened) {\n        setUnmounted((prev) => (prev ? false : prev));\n      }\n    },\n    [opened, keepMounted],\n  );\n\n  if (unmounted) {\n    return { mounted: false, shouldPreserveSnapPoint };\n  }\n\n  return {\n    mounted: true,\n    open: opened,\n    shouldPreserveSnapPoint,\n    noFocusToDialog: noFocusToDialog || context.noFocusToDialog,\n    modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,\n    ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,\n    onOpen: onOpen || getContextCallback(id, context.onOpen),\n    onOpened: onOpened || getContextCallback(id, context.onOpened),\n    onClose: onClose || getContextCallback(id, context.onClose),\n    onClosed: function handleClosed(...args: any[]) {\n      if (!keepMounted) {\n        setUnmounted(true);\n      }\n\n      if (onClosed) {\n        onClosed(...args);\n      } else {\n        context.onClosed?.(id);\n      }\n    },\n  };\n};\n\nfunction getContextCallback(id: string, fn: ModalRootCallbackFunction | undefined) {\n  return fn ? () => fn(id) : undefined;\n}\n"],"names":["useContext","useState","useIsomorphicLayoutEffect","ModalOverlay","ModalRootContext","VisuallyHiddenModalOverlay","useModalManager","id","open","keepMounted","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","context","opened","isInsideModal","activeModal","shouldPreserveSnapPoint","unmounted","setUnmounted","unsetUnmounted","prev","mounted","getContextCallback","handleClosed","args","fn","undefined"],"mappings":"AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAgC,kCAA+B;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,0BAA0B,QAAQ,6DAA0D;AA8BrG,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,EAAE,EACFC,IAAI,EACJC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACQ;IAChB,MAAMC,UAAUhB,WAAWI;IAC3B,MAAMa,SAASD,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAKZ,KAAKC;IACpE,MAAMY,0BAA0BJ,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAK,OAAO;IAEvF,MAAM,CAACE,WAAWC,aAAa,GAAGrB,SAASQ,cAAc,QAAQ,CAACQ;IAElEf,0BACE,SAASqB;QACP,IAAI,CAACd,eAAeQ,QAAQ;YAC1BK,aAAa,CAACE,OAAUA,OAAO,QAAQA;QACzC;IACF,GACA;QAACP;QAAQR;KAAY;IAGvB,IAAIY,WAAW;QACb,OAAO;YAAEI,SAAS;YAAOL;QAAwB;IACnD;IAEA,OAAO;QACLK,SAAS;QACTjB,MAAMS;QACNG;QACAT,iBAAiBA,mBAAmBK,QAAQL,eAAe;QAC3DD,oBAAoBA,sBAAsBM,QAAQN,kBAAkB;QACpEP,cAAca,QAAQE,aAAa,GAAGb,6BAA6BF;QACnES,QAAQA,UAAUc,mBAAmBnB,IAAIS,QAAQJ,MAAM;QACvDC,UAAUA,YAAYa,mBAAmBnB,IAAIS,QAAQH,QAAQ;QAC7DC,SAASA,WAAWY,mBAAmBnB,IAAIS,QAAQF,OAAO;QAC1DC,UAAU,SAASY,aAAa,GAAGC,IAAW;YAC5C,IAAI,CAACnB,aAAa;gBAChBa,aAAa;YACf;YAEA,IAAIP,UAAU;gBACZA,YAAYa;YACd,OAAO;oBACLZ;iBAAAA,oBAAAA,QAAQD,QAAQ,cAAhBC,wCAAAA,uBAAAA,SAAmBT;YACrB;QACF;IACF;AACF,EAAE;AAEF,SAASmB,mBAAmBnB,EAAU,EAAEsB,EAAyC;IAC/E,OAAOA,KAAK,IAAMA,GAAGtB,MAAMuB;AAC7B"}

package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","hasOwnProperty","className"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAGlD,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBACE,KAACR;YAAMS,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACR;QAAKY,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOhB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMiB,oBAAoB;QAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EAEkB,WADpBC;QAHHT;QACAD;QACAS;;IAGA,MAAME,cAAcxB,qBAAqBc;IACzC,MAAMW,mBAAmBzB,qBAAqBsB;IAC9C,MAAMP,WAAWd;IAEjB,IAAIyB;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe7B,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUQ;aAAM;WACxBC;QAGL,IAAI,CAACQ,cAAc;YACjBX,KAAKjB,gBAAgB6B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACZ;QAAOR;KAAS,CAACqB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKtC,qBAAqBkC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAC7B;QACCW,WAAWO,UAAUU,IAAI,GAAG,MAAM;OAC9BV;QACJG,WAAWA;QACXa,mBAAmB;QACnBZ,YAAYA;QACZa,eAAezC,0CAEbS,mBAAmBiC,cAAc,CAAC1B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B2B,qDACA,CAACb,eAAe,CAACC;;YAGlBD,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAAS6B,SAAS;0BAC1CpB;iBAGHA;;;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  // TODO [>=8]: добавить св-во `indicator`, чтобы разграничить кейсы\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","hasOwnProperty","className"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAGlD,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBACE,KAACR;YAAMS,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACR;QAAKY,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOhB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMiB,oBAAoB;QAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EAEkB,WADpBC;QAHHT;QACAD;QACAS;;IAGA,MAAME,cAAcxB,qBAAqBc;IACzC,MAAMW,mBAAmBzB,qBAAqBsB;IAC9C,MAAMP,WAAWd;IAEjB,IAAIyB;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe7B,kBAAkB;YACrCY,UAAU;gBAACA;gBAAUQ;aAAM;WACxBC;QAGL,IAAI,CAACQ,cAAc;YACjBX,KAAKjB,gBAAgB6B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACZ;QAAOR;KAAS,CAACqB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKtC,qBAAqBkC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAC7B;QACCW,WAAWO,UAAUU,IAAI,GAAG,MAAM;OAC9BV;QACJG,WAAWA;QACXa,mBAAmB;QACnBZ,YAAYA;QACZa,eAAezC,0CAEbS,mBAAmBiC,cAAc,CAAC1B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B2B,qDACA,CAACb,eAAe,CAACC;;YAGlBD,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAAS6B,SAAS;0BAC1CpB;iBAGHA;;;AAIR,EAAE"}

package/dist/components/PopoutWrapper/PopoutWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgB7D,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,8FAUvB,kBAAkB,KAAG,KAAK,CAAC,SAuB7B,CAAC"}
+{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgB7D,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,8FAUvB,kBAAkB,KAAG,KAAK,CAAC,SAoB7B,CAAC"}

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -31,9 +31,9 @@ const stylesAlignY = {
     ]);
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         baseClassName: classNames("vkuiPopoutWrapper__host", stylesAlignY[alignY], stylesAlignX[alignX], closing ? "vkuiPopoutWrapper__closing" : "vkuiPopoutWrapper__opened", fixed && "vkuiPopoutWrapper__fixed", !noBackground && "vkuiPopoutWrapper__masked"),
-        style: _object_spread({
+        baseStyle: {
             zIndex
-        }, restProps.style),
+        },
         children: /*#__PURE__*/ _jsxs("div", {
             className: "vkuiPopoutWrapper__container",
             children: [

package/dist/components/PopoutWrapper/PopoutWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles.alignXCenter,\n  left: styles.alignXLeft,\n  right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n  center: styles.alignYCenter,\n  top: styles.alignYTop,\n  bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n  /**\n   * Позволяет задать z-index через токен или числом\n   */\n  zIndex?: number | string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  zIndex = 'var(--vkui--z_index_popout)',\n  ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles.closing : styles.opened,\n        fixed && styles.fixed,\n        !noBackground && styles.masked,\n      )}\n      style={{\n        zIndex,\n        ...restProps.style,\n      }}\n    >\n      <div className={styles.container}>\n        <div className={styles.overlay} onClick={onClick} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","zIndex","restProps","baseClassName","style","div","className"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA+BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EAEnB,WADhBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAAChB,uDACKiB;QACJC,eAAenB,sCAEbM,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,sEACAE,qCACA,CAACD;QAEHO,OAAO;YACLH;WACGC,UAAUE,KAAK;kBAGpB,cAAA,MAACC;YAAIC,SAAS;;8BACZ,KAACD;oBAAIC,SAAS;oBAAkBN,SAASA;;8BACzC,KAACK;oBAAIC,SAAS;8BAAmBP;;;;;AAIzC,EAAE"}
+{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles.alignXCenter,\n  left: styles.alignXLeft,\n  right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n  center: styles.alignYCenter,\n  top: styles.alignYTop,\n  bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n  /**\n   * Позволяет задать z-index через токен или числом\n   */\n  zIndex?: number | string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  zIndex = 'var(--vkui--z_index_popout)',\n  ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles.closing : styles.opened,\n        fixed && styles.fixed,\n        !noBackground && styles.masked,\n      )}\n      baseStyle={{ zIndex }}\n    >\n      <div className={styles.container}>\n        <div className={styles.overlay} onClick={onClick} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","zIndex","restProps","baseClassName","baseStyle","div","className"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA+BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EAEnB,WADhBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAAChB,uDACKiB;QACJC,eAAenB,sCAEbM,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,sEACAE,qCACA,CAACD;QAEHO,WAAW;YAAEH;QAAO;kBAEpB,cAAA,MAACI;YAAIC,SAAS;;8BACZ,KAACD;oBAAIC,SAAS;oBAAkBN,SAASA;;8BACzC,KAACK;oBAAIC,SAAS;8BAAmBP;;;;;AAIzC,EAAE"}

package/dist/components/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiE1C,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAa7D,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsB1C,CAAC"}

package/dist/components/Spinner/Spinner.js

@@ -1,4 +1,3 @@
-'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
@@ -6,9 +5,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
-import { useReducedMotion } from "../../lib/animation/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { SpinnerAnimation } from "./SpinnerAnimation.js";
+const spinnerIconMap = {
+    s: Icon16Spinner,
+    m: Icon24Spinner,
+    l: Icon32Spinner,
+    xl: Icon44Spinner
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ export const Spinner = /*#__PURE__*/ React.memo((_param)=>{
@@ -18,46 +23,7 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         "disableAnimation",
         "noColor"
     ]);
-    const isReducedMotion = useReducedMotion();
-    const SpinnerIcon = {
-        s: Icon16Spinner,
-        m: Icon24Spinner,
-        l: Icon32Spinner,
-        xl: Icon44Spinner
-    }[size];
-    let svgAnimateElement = null;
-    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(disableAnimation ? true : false);
-    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {
-        setIsReadyForSetSVGAnimateElement(true);
-    }, []);
-    if (isReadyForSetSVGAnimateElement && !disableAnimation) {
-        if (isReducedMotion) {
-            svgAnimateElement = /*#__PURE__*/ _jsx("animate", {
-                attributeName: "opacity",
-                keyTimes: "0; 0.5; 1",
-                values: "1; 0.1; 1",
-                begin: "0s",
-                dur: "2s",
-                repeatCount: "indefinite"
-            });
-        } else {
-            const center = {
-                s: 8,
-                m: 12,
-                l: 16,
-                xl: 22
-            }[size];
-            svgAnimateElement = /*#__PURE__*/ _jsx("animateTransform", {
-                attributeType: "XML",
-                attributeName: "transform",
-                type: "rotate",
-                from: `0 ${center} ${center}`,
-                to: `360 ${center} ${center}`,
-                dur: "0.7s",
-                repeatCount: "indefinite"
-            });
-        }
-    }
+    const SpinnerIcon = spinnerIconMap[size];
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
         Component: "span",
         role: "status"
@@ -65,7 +31,9 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         baseClassName: classNames("vkuiSpinner__host", noColor && "vkuiSpinner__noColor"),
         children: [
             /*#__PURE__*/ _jsx(SpinnerIcon, {
-                children: svgAnimateElement
+                children: disableAnimation ? null : /*#__PURE__*/ _jsx(SpinnerAnimation, {
+                    size: size
+                })
             }),
             hasReactNode(children) && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 children: children

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useReducedMotion } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 's' | 'm' | 'l' | 'xl';\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner: React.FC<SpinnerProps> = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const isReducedMotion = useReducedMotion();\n    const SpinnerIcon = {\n      s: Icon16Spinner,\n      m: Icon24Spinner,\n      l: Icon32Spinner,\n      xl: Icon44Spinner,\n    }[size];\n    let svgAnimateElement: React.ReactNode = null;\n\n    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(\n      disableAnimation ? true : false,\n    );\n\n    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {\n      setIsReadyForSetSVGAnimateElement(true);\n    }, []);\n\n    if (isReadyForSetSVGAnimateElement && !disableAnimation) {\n      if (isReducedMotion) {\n        svgAnimateElement = (\n          <animate\n            attributeName=\"opacity\"\n            keyTimes=\"0; 0.5; 1\"\n            values=\"1; 0.1; 1\"\n            begin=\"0s\"\n            dur=\"2s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      } else {\n        const center = { s: 8, m: 12, l: 16, xl: 22 }[size];\n        svgAnimateElement = (\n          <animateTransform\n            attributeType=\"XML\"\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from={`0 ${center} ${center}`}\n            to={`360 ${center} ${center}`}\n            dur=\"0.7s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      }\n    }\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles.host, noColor && styles.noColor)}\n      >\n        <SpinnerIcon>{svgAnimateElement}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","hasReactNode","useReducedMotion","RootComponent","VisuallyHidden","Spinner","memo","size","children","disableAnimation","noColor","restProps","isReducedMotion","SpinnerIcon","s","m","l","xl","svgAnimateElement","isReadyForSetSVGAnimateElement","setIsReadyForSetSVGAnimateElement","useState","useEffect","waitReactHydrationBeforeSetSVGAnimateElement","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","animateTransform","attributeType","type","from","to","Component","role","baseClassName","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,gBAAgB,QAAQ,+BAAsB;AAEvD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAYlE;;CAEC,GACD,OAAO,MAAMC,wBAAkCV,MAAMW,IAAI,CACvD;QAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EAEF,WADVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,kBAAkBV;IACxB,MAAMW,cAAc;QAClBC,GAAGlB;QACHmB,GAAGlB;QACHmB,GAAGlB;QACHmB,IAAIlB;IACN,CAAC,CAACQ,KAAK;IACP,IAAIW,oBAAqC;IAEzC,MAAM,CAACC,gCAAgCC,kCAAkC,GAAGzB,MAAM0B,QAAQ,CACxFZ,mBAAmB,OAAO;IAG5Bd,MAAM2B,SAAS,CAAC,SAASC;QACvBH,kCAAkC;IACpC,GAAG,EAAE;IAEL,IAAID,kCAAkC,CAACV,kBAAkB;QACvD,IAAIG,iBAAiB;YACnBM,kCACE,KAACM;gBACCC,eAAc;gBACdC,UAAS;gBACTC,QAAO;gBACPC,OAAM;gBACNC,KAAI;gBACJC,aAAY;;QAGlB,OAAO;YACL,MAAMC,SAAS;gBAAEjB,GAAG;gBAAGC,GAAG;gBAAIC,GAAG;gBAAIC,IAAI;YAAG,CAAC,CAACV,KAAK;YACnDW,kCACE,KAACc;gBACCC,eAAc;gBACdR,eAAc;gBACdS,MAAK;gBACLC,MAAM,CAAC,EAAE,EAAEJ,OAAO,CAAC,EAAEA,QAAQ;gBAC7BK,IAAI,CAAC,IAAI,EAAEL,OAAO,CAAC,EAAEA,QAAQ;gBAC7BF,KAAI;gBACJC,aAAY;;QAGlB;IACF;IAEA,qBACE,MAAC3B;QACCkC,WAAU;QACVC,MAAK;OACD3B;QACJ4B,eAAevC,gCAAwBU;;0BAEvC,KAACG;0BAAaK;;YACbjB,aAAaO,2BAAa,KAACJ;0BAAgBI;;;;AAGlD,GACA;AAEFH,QAAQmC,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport styles from './Spinner.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 's' | 'm' | 'l' | 'xl';\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner: React.FC<SpinnerProps> = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles.host, noColor && styles.noColor)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","hasReactNode","RootComponent","VisuallyHidden","SpinnerAnimation","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","restProps","SpinnerIcon","Component","role","baseClassName","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AAGtD,MAAMC,iBAAiB;IACrBC,GAAGV;IACHW,GAAGV;IACHW,GAAGV;IACHW,IAAIV;AACN;AAWA;;CAEC,GACD,OAAO,MAAMW,wBAAkCf,MAAMgB,IAAI,CACvD;QAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EAEF,WADVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcZ,cAAc,CAACO,KAAK;IAExC,qBACE,MAACV;QACCgB,WAAU;QACVC,MAAK;OACDH;QACJI,eAAepB,gCAAwBe;;0BAEvC,KAACE;0BAAaH,mBAAmB,qBAAO,KAACV;oBAAiBQ,MAAMA;;;YAC/DX,aAAaY,2BAAa,KAACV;0BAAgBU;;;;AAGlD,GACA;AAEFH,QAAQW,WAAW,GAAG"}

package/dist/components/Spinner/SpinnerAnimation.d.ts

@@ -0,0 +1,7 @@
+import { type SpinnerProps } from './Spinner';
+interface SpinnerAnimationProps {
+    size: SpinnerProps['size'];
+}
+export declare function SpinnerAnimation({ size }: SpinnerAnimationProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SpinnerAnimation.d.ts.map

package/dist/components/Spinner/SpinnerAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerAnimation.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/SpinnerAnimation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,UAAU,qBAAqB;IAC7B,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAU,EAAE,EAAE,qBAAqB,kDAgCrE"}

package/dist/components/Spinner/SpinnerAnimation.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReducedMotion } from "../../lib/animation/index.js";
+export function SpinnerAnimation({ size = 'm' }) {
+    const isReducedMotion = useReducedMotion();
+    if (isReducedMotion === undefined) {
+        return null;
+    }
+    if (isReducedMotion) {
+        return /*#__PURE__*/ _jsx("animate", {
+            attributeName: "opacity",
+            keyTimes: "0; 0.5; 1",
+            values: "1; 0.1; 1",
+            begin: "0s",
+            dur: "2s",
+            repeatCount: "indefinite"
+        });
+    }
+    const center = {
+        s: 8,
+        m: 12,
+        l: 16,
+        xl: 22
+    }[size];
+    return /*#__PURE__*/ _jsx("animateTransform", {
+        attributeType: "XML",
+        attributeName: "transform",
+        type: "rotate",
+        from: `0 ${center} ${center}`,
+        to: `360 ${center} ${center}`,
+        dur: "0.7s",
+        repeatCount: "indefinite"
+    });
+}
+
+//# sourceMappingURL=SpinnerAnimation.js.map

package/dist/components/Spinner/SpinnerAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Spinner/SpinnerAnimation.tsx"],"sourcesContent":["'use client';\n\nimport { useReducedMotion } from '../../lib/animation';\nimport { type SpinnerProps } from './Spinner';\n\ninterface SpinnerAnimationProps {\n  size: SpinnerProps['size'];\n}\n\nexport function SpinnerAnimation({ size = 'm' }: SpinnerAnimationProps) {\n  const isReducedMotion = useReducedMotion();\n\n  if (isReducedMotion === undefined) {\n    return null;\n  }\n\n  if (isReducedMotion) {\n    return (\n      <animate\n        attributeName=\"opacity\"\n        keyTimes=\"0; 0.5; 1\"\n        values=\"1; 0.1; 1\"\n        begin=\"0s\"\n        dur=\"2s\"\n        repeatCount=\"indefinite\"\n      />\n    );\n  }\n\n  const center = { s: 8, m: 12, l: 16, xl: 22 }[size];\n  return (\n    <animateTransform\n      attributeType=\"XML\"\n      attributeName=\"transform\"\n      type=\"rotate\"\n      from={`0 ${center} ${center}`}\n      to={`360 ${center} ${center}`}\n      dur=\"0.7s\"\n      repeatCount=\"indefinite\"\n    />\n  );\n}\n"],"names":["useReducedMotion","SpinnerAnimation","size","isReducedMotion","undefined","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","s","m","l","xl","animateTransform","attributeType","type","from","to"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,QAAQ,+BAAsB;AAOvD,OAAO,SAASC,iBAAiB,EAAEC,OAAO,GAAG,EAAyB;IACpE,MAAMC,kBAAkBH;IAExB,IAAIG,oBAAoBC,WAAW;QACjC,OAAO;IACT;IAEA,IAAID,iBAAiB;QACnB,qBACE,KAACE;YACCC,eAAc;YACdC,UAAS;YACTC,QAAO;YACPC,OAAM;YACNC,KAAI;YACJC,aAAY;;IAGlB;IAEA,MAAMC,SAAS;QAAEC,GAAG;QAAGC,GAAG;QAAIC,GAAG;QAAIC,IAAI;IAAG,CAAC,CAACd,KAAK;IACnD,qBACE,KAACe;QACCC,eAAc;QACdZ,eAAc;QACda,MAAK;QACLC,MAAM,CAAC,EAAE,EAAER,OAAO,CAAC,EAAEA,QAAQ;QAC7BS,IAAI,CAAC,IAAI,EAAET,OAAO,CAAC,EAAEA,QAAQ;QAC7BF,KAAI;QACJC,aAAY;;AAGlB"}

package/dist/components/SplitLayout/SplitLayout.d.ts

@@ -4,17 +4,17 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
      *
-     * @deprecated будет удалёно в **VKUI v8**
+     * @deprecated будет удалeно в **VKUI v8**.
      * Начиная с **VKUI v7** компоненты можно располагать в любом
-     * месте приложения в пределах `AppRoot`
+     * месте приложения в пределах `AppRoot`.
      */
     popout?: React.ReactNode;
     /**
      * Свойство для отрисовки `ModalRoot`.
      *
-     * @deprecated будет удалёно в **VKUI v8**
+     * @deprecated будет удалeно в **VKUI v8**.
      * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
-     * месте приложения в пределах `AppRoot`
+     * месте приложения в пределах `AppRoot`.
      */
     modal?: React.ReactNode;
     header?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","ref"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AA8BtD;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWX;IAEjB,qBACE,MAACY;QAAIN,WAAWP,oCAAwBY,aAAa;QAAsBE,KAAKT;;YAC7EF;0BACD,MAACU,+CACKF;gBACJG,KAAKR;gBACLC,WAAWP,qCAET,CAAC,CAACG,0CACFK,0CACAD;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","ref"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AA8BtD;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWX;IAEjB,qBACE,MAACY;QAAIN,WAAWP,oCAAwBY,aAAa;QAAsBE,KAAKT;;YAC7EF;0BACD,MAACU,+CACKF;gBACJG,KAAKR;gBACLC,WAAWP,qCAET,CAAC,CAACG,0CACFK,0CACAD;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}