@vkontakte/vkui 6.1.1 → 6.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasChildren } from '../../types';\nimport { AccordionContent } from './AccordionContent';\nimport { AccordionContext } from './AccordionContext';\nimport { AccordionSummary } from './AccordionSummary';\n\nfunction useAccordionId(id: AccordionProps['id']) {\n  const generatedId = React.useId();\n  const labelId = id ?? `Accordion${generatedId}`;\n  const contentId = `AccordionContent${id ?? generatedId}`;\n\n  return { labelId, contentId };\n}\n\nexport interface AccordionProps extends HasChildren {\n  id?: string;\n  /**\n   * Управляет раскрытием и скрытием контента.\n   */\n  expanded?: boolean;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Функция изменения\n   */\n  onChange?: (e: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Accordion = ({\n  id,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onChange: onChangeProp,\n  children,\n  ...restProps\n}: AccordionProps) => {\n  const { labelId, contentId } = useAccordionId(id);\n\n  const [expanded, onChange] = useCustomEnsuredControl({\n    value: expandedProp,\n    defaultValue: defaultExpanded,\n    onChange: onChangeProp,\n    disabled: restProps.disabled,\n  });\n\n  const context = useObjectMemo({\n    labelId,\n    contentId,\n    expanded: expanded || false,\n    onChange,\n  });\n\n  return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;\n};\n\nAccordion.displayName = 'Accordion';\n\nAccordion.Summary = AccordionSummary;\nAccordion.Summary.displayName = 'Accordion.Summary';\n\nAccordion.Content = AccordionContent;\nAccordion.Content.displayName = 'Accordion.Content';\n"],"names":["React","useCustomEnsuredControl","useObjectMemo","AccordionContent","AccordionContext","AccordionSummary","useAccordionId","id","generatedId","useId","labelId","contentId","Accordion","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","value","defaultValue","disabled","context","Provider","displayName","Summary","Content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcR,MAAMS,KAAK;IAC/B,MAAMC,UAAUH,MAAM,CAAC,SAAS,EAAEC,YAAY,CAAC;IAC/C,MAAMG,YAAY,CAAC,gBAAgB,EAAEJ,MAAMC,YAAY,CAAC;IAExD,OAAO;QAAEE;QAASC;IAAU;AAC9B;AAmBA,OAAO,MAAMC,YAAY,CAAC,EACxBL,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACY;IACf,MAAM,EAAET,OAAO,EAAEC,SAAS,EAAE,GAAGL,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGf,wBAAwB;QACnDmB,OAAON;QACPO,cAAcN;QACdC,UAAUC;QACVK,UAAUH,UAAUG,QAAQ;IAC9B;IAEA,MAAMC,UAAUrB,cAAc;QAC5BQ;QACAC;QACAE,UAAUA,YAAY;QACtBG;IACF;IAEA,qBAAO,KAACZ,iBAAiBoB,QAAQ;QAACJ,OAAOG;kBAAUL;;AACrD,EAAE;AAEFN,UAAUa,WAAW,GAAG;AAExBb,UAAUc,OAAO,GAAGrB;AACpBO,UAAUc,OAAO,CAACD,WAAW,GAAG;AAEhCb,UAAUe,OAAO,GAAGxB;AACpBS,UAAUe,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasChildren } from '../../types';\nimport { AccordionContent } from './AccordionContent';\nimport { AccordionContext } from './AccordionContext';\nimport { AccordionSummary } from './AccordionSummary';\n\nfunction useAccordionId(id: AccordionProps['id']) {\n  const generatedId = React.useId();\n  const labelId = id ?? `Accordion${generatedId}`;\n  const contentId = `AccordionContent${id ?? generatedId}`;\n\n  return { labelId, contentId };\n}\n\nexport interface AccordionProps extends HasChildren {\n  id?: string;\n  /**\n   * Управляет раскрытием и скрытием контента.\n   */\n  expanded?: boolean;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Функция изменения\n   */\n  onChange?: (e: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Accordion = ({\n  id,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onChange: onChangeProp,\n  children,\n  ...restProps\n}: AccordionProps) => {\n  const { labelId, contentId } = useAccordionId(id);\n\n  const [expanded, onChange] = useCustomEnsuredControl({\n    value: expandedProp,\n    defaultValue: defaultExpanded,\n    onChange: onChangeProp,\n    disabled: restProps.disabled,\n  });\n\n  const context = useObjectMemo({\n    labelId,\n    contentId,\n    expanded: expanded || false,\n    onChange,\n  });\n\n  return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;\n};\n\nAccordion.displayName = 'Accordion';\n\nAccordion.Summary = AccordionSummary;\nAccordion.Summary.displayName = 'Accordion.Summary';\n\nAccordion.Content = AccordionContent;\nAccordion.Content.displayName = 'Accordion.Content';\n"],"names":["React","useCustomEnsuredControl","useObjectMemo","AccordionContent","AccordionContext","AccordionSummary","useAccordionId","id","generatedId","useId","labelId","contentId","Accordion","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","value","defaultValue","disabled","context","Provider","displayName","Summary","Content"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcR,MAAMS,KAAK;IAC/B,MAAMC,UAAUH,MAAM,CAAC,SAAS,EAAEC,YAAY,CAAC;IAC/C,MAAMG,YAAY,CAAC,gBAAgB,EAAEJ,MAAMC,YAAY,CAAC;IAExD,OAAO;QAAEE;QAASC;IAAU;AAC9B;AAmBA,OAAO,MAAMC,YAAY,CAAC,EACxBL,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACY;IACf,MAAM,EAAET,OAAO,EAAEC,SAAS,EAAE,GAAGL,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGf,wBAAwB;QACnDmB,OAAON;QACPO,cAAcN;QACdC,UAAUC;QACVK,UAAUH,UAAUG,QAAQ;IAC9B;IAEA,MAAMC,UAAUrB,cAAc;QAC5BQ;QACAC;QACAE,UAAUA,YAAY;QACtBG;IACF;IAEA,qBAAO,KAACZ,iBAAiBoB,QAAQ;QAACJ,OAAOG;kBAAUL;;AACrD,EAAE;AAEFN,UAAUa,WAAW,GAAG;AAExBb,UAAUc,OAAO,GAAGrB;AACpBO,UAAUc,OAAO,CAACD,WAAW,GAAG;AAEhCb,UAAUe,OAAO,GAAGxB;AACpBS,UAAUe,OAAO,CAACF,WAAW,GAAG"}

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

@@ -7,6 +7,98 @@
 }
 
 .AccordionContent__in {
-  max-block-size: 0;
-  transition: max-height 100ms ease-in-out;
+  --vkui_internal--AccordionContent_height: initial;
+
+  animation-duration: 100ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .AccordionContent__in {
+    animation-duration: 300ms;
+    animation-timing-function: linear;
+  }
+}
+
+.AccordionContent__in--enter {
+  animation-name: animation-expand;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .AccordionContent__in--enter {
+    animation-name: animation-fade-in;
+  }
+}
+
+.AccordionContent__in--entered {
+  block-size: var(--vkui_internal--AccordionContent_height);
+}
+
+.AccordionContent__in--exit {
+  animation-name: animation-collapse;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .AccordionContent__in--exit {
+    animation-name: animation-fade-out;
+  }
+}
+
+.AccordionContent__in--exited {
+  block-size: 0;
+}
+
+@keyframes animation-expand {
+  0% {
+    block-size: 0;
+  }
+
+  100% {
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+}
+
+@keyframes animation-collapse {
+  0% {
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  100% {
+    block-size: 0;
+  }
+}
+
+@keyframes animation-fade-in {
+  0% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  50% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  100% {
+    opacity: 1;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+}
+
+@keyframes animation-fade-out {
+  0% {
+    opacity: 1;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  50% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
+
+  100% {
+    opacity: 0;
+    block-size: var(--vkui_internal--AccordionContent_height);
+  }
 }

package/dist/cssm/components/Accordion/AccordionContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AA+CjD,MAAM,WAAW,qBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,MAAM,CAAC,cAAc,CAAC,EACtB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,gBAAgB;gEAM1B,qBAAqB;;CAqBvB,CAAC"}
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAejD,MAAM,WAAW,qBACf,SAAQ,UAAU,CAAC,cAAc,CAAC,EAChC,MAAM,CAAC,cAAc,CAAC,EACtB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,gBAAgB;gEAM1B,qBAAqB;;CAiDvB,CAAC"}

package/dist/cssm/components/Accordion/AccordionContent.js

@@ -2,46 +2,42 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useDOM } from '../../lib/dom';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { AccordionContext } from './AccordionContext';
 import styles from './Accordion.module.css';
-/**
- * Функция расчета max-height, для скрытия или раскрытия контента.
- */ function calcMaxHeight(expanded, el) {
-    if (!expanded) {
-        return '0px';
-    }
-    // В первый рендеринг нельзя узнать высоту элемента
-    if (el === null) {
-        return 'inherit';
-    }
-    return `${el.scrollHeight}px`;
-}
-/**
- * Хук для отслеживания изменения высоты контента.
- */ function useResizeContent(expanded, inRef) {
-    const resize = ()=>{
-        inRef.current.style.maxHeight = calcMaxHeight(expanded, inRef.current);
-    };
-    const { window } = useDOM();
-    useGlobalEventListener(window, 'resize', resize);
-    useIsomorphicLayoutEffect(resize, []);
-}
-/**
- * Хук для скрывания или раскрывания контента. Возвращает стили для in элемента.
- */ function useAccordionContent(expanded, inRef) {
-    const maxHeight = calcMaxHeight(expanded, inRef.current);
-    useResizeContent(expanded, inRef);
-    return {
-        maxHeight
-    };
-}
+const CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT = '--vkui_internal--AccordionContent_height';
+const stateClassNames = {
+    enter: styles['AccordionContent__in--enter'],
+    entering: styles['AccordionContent__in--enter'],
+    entered: styles['AccordionContent__in--entered'],
+    exit: styles['AccordionContent__in--exit'],
+    exiting: styles['AccordionContent__in--exit'],
+    exited: styles['AccordionContent__in--exited']
+};
 export const AccordionContent = ({ getRootRef, getRef, className, children, ...restProps })=>{
-    const inRef = useExternRef(getRef);
     const { expanded, labelId, contentId } = React.useContext(AccordionContext);
-    const inStyle = useAccordionContent(expanded, inRef);
+    const inRef = useExternRef(getRef);
+    const [animationState, animationHandlers] = useCSSKeyframesAnimationController(expanded ? 'enter' : 'exit', undefined, true);
+    useIsomorphicLayoutEffect(()=>{
+        const inEl = inRef.current;
+        /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */ if (!inEl) {
+            return;
+        }
+        switch(animationState){
+            case 'enter':
+            case 'exit':
+                inEl.style.setProperty(CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT, `${inEl.scrollHeight}px`);
+                break;
+            case 'entered':
+            case 'exited':
+                inEl.style.removeProperty(CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT);
+                break;
+        }
+    }, [
+        animationState,
+        inRef
+    ]);
     return /*#__PURE__*/ _jsx("div", {
         ref: getRootRef,
         id: contentId,
@@ -52,8 +48,8 @@ export const AccordionContent = ({ getRootRef, getRef, className, children, ...r
         ...restProps,
         children: /*#__PURE__*/ _jsx("div", {
             ref: inRef,
-            className: styles['AccordionContent__in'],
-            style: inStyle,
+            className: classNames(styles['AccordionContent__in'], stateClassNames[animationState]),
+            ...animationHandlers,
             children: children
         })
     });

package/dist/cssm/components/Accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasRef, HasRootRef } from '../../types';\nimport { AccordionContext } from './AccordionContext';\nimport styles from './Accordion.module.css';\n\n/**\n * Функция расчета max-height, для скрытия или раскрытия контента.\n */\nfunction calcMaxHeight(expanded: boolean, el: HTMLElement | null): string {\n  if (!expanded) {\n    return '0px';\n  }\n\n  // В первый рендеринг нельзя узнать высоту элемента\n  if (el === null) {\n    return 'inherit';\n  }\n\n  return `${el.scrollHeight}px`;\n}\n\n/**\n * Хук для отслеживания изменения высоты контента.\n */\nfunction useResizeContent(expanded: boolean, inRef: React.MutableRefObject<HTMLDivElement | null>) {\n  const resize = () => {\n    inRef.current!.style.maxHeight = calcMaxHeight(expanded, inRef.current);\n  };\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'resize', resize);\n  useIsomorphicLayoutEffect(resize, []);\n}\n\n/**\n * Хук для скрывания или раскрывания контента. Возвращает стили для in элемента.\n */\nfunction useAccordionContent(\n  expanded: boolean,\n  inRef: React.MutableRefObject<HTMLDivElement | null>,\n) {\n  const maxHeight = calcMaxHeight(expanded, inRef.current);\n\n  useResizeContent(expanded, inRef);\n\n  return { maxHeight };\n}\n\nexport interface AccordionContentProps\n  extends HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AccordionContent = ({\n  getRootRef,\n  getRef,\n  className,\n  children,\n  ...restProps\n}: AccordionContentProps) => {\n  const inRef = useExternRef(getRef);\n  const { expanded, labelId, contentId } = React.useContext(AccordionContext);\n\n  const inStyle = useAccordionContent(expanded, inRef);\n\n  return (\n    <div\n      ref={getRootRef}\n      id={contentId}\n      role=\"region\"\n      aria-labelledby={labelId}\n      aria-hidden={!expanded}\n      className={classNames(styles['AccordionContent'], className)}\n      {...restProps}\n    >\n      <div ref={inRef} className={styles['AccordionContent__in']} style={inStyle}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","AccordionContext","styles","calcMaxHeight","expanded","el","scrollHeight","useResizeContent","inRef","resize","current","style","maxHeight","window","useAccordionContent","AccordionContent","getRootRef","getRef","className","children","restProps","labelId","contentId","useContext","inStyle","div","ref","id","role","aria-labelledby","aria-hidden","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAE5C;;CAEC,GACD,SAASC,cAAcC,QAAiB,EAAEC,EAAsB;IAC9D,IAAI,CAACD,UAAU;QACb,OAAO;IACT;IAEA,mDAAmD;IACnD,IAAIC,OAAO,MAAM;QACf,OAAO;IACT;IAEA,OAAO,CAAC,EAAEA,GAAGC,YAAY,CAAC,EAAE,CAAC;AAC/B;AAEA;;CAEC,GACD,SAASC,iBAAiBH,QAAiB,EAAEI,KAAoD;IAC/F,MAAMC,SAAS;QACbD,MAAME,OAAO,CAAEC,KAAK,CAACC,SAAS,GAAGT,cAAcC,UAAUI,MAAME,OAAO;IACxE;IAEA,MAAM,EAAEG,MAAM,EAAE,GAAGd;IACnBD,uBAAuBe,QAAQ,UAAUJ;IACzCT,0BAA0BS,QAAQ,EAAE;AACtC;AAEA;;CAEC,GACD,SAASK,oBACPV,QAAiB,EACjBI,KAAoD;IAEpD,MAAMI,YAAYT,cAAcC,UAAUI,MAAME,OAAO;IAEvDH,iBAAiBH,UAAUI;IAE3B,OAAO;QAAEI;IAAU;AACrB;AAOA,OAAO,MAAMG,mBAAmB,CAAC,EAC/BC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACmB;IACtB,MAAMZ,QAAQX,aAAaoB;IAC3B,MAAM,EAAEb,QAAQ,EAAEiB,OAAO,EAAEC,SAAS,EAAE,GAAG3B,MAAM4B,UAAU,CAACtB;IAE1D,MAAMuB,UAAUV,oBAAoBV,UAAUI;IAE9C,qBACE,KAACiB;QACCC,KAAKV;QACLW,IAAIL;QACJM,MAAK;QACLC,mBAAiBR;QACjBS,eAAa,CAAC1B;QACdc,WAAWtB,WAAWM,MAAM,CAAC,mBAAmB,EAAEgB;QACjD,GAAGE,SAAS;kBAEb,cAAA,KAACK;YAAIC,KAAKlB;YAAOU,WAAWhB,MAAM,CAAC,uBAAuB;YAAES,OAAOa;sBAChEL;;;AAIT,EAAE;AAEFJ,iBAAiBgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasRef, HasRootRef } from '../../types';\nimport { AccordionContext } from './AccordionContext';\nimport styles from './Accordion.module.css';\n\nconst CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT = '--vkui_internal--AccordionContent_height';\n\nconst stateClassNames = {\n  enter: styles['AccordionContent__in--enter'],\n  entering: styles['AccordionContent__in--enter'],\n  entered: styles['AccordionContent__in--entered'],\n  exit: styles['AccordionContent__in--exit'],\n  exiting: styles['AccordionContent__in--exit'],\n  exited: styles['AccordionContent__in--exited'],\n};\n\nexport interface AccordionContentProps\n  extends HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AccordionContent = ({\n  getRootRef,\n  getRef,\n  className,\n  children,\n  ...restProps\n}: AccordionContentProps) => {\n  const { expanded, labelId, contentId } = React.useContext(AccordionContext);\n\n  const inRef = useExternRef(getRef);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    expanded ? 'enter' : 'exit',\n    undefined,\n    true,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const inEl = inRef.current;\n\n    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n    if (!inEl) {\n      return;\n    }\n\n    switch (animationState) {\n      case 'enter':\n      case 'exit':\n        inEl.style.setProperty(CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT, `${inEl.scrollHeight}px`);\n        break;\n      case 'entered':\n      case 'exited':\n        inEl.style.removeProperty(CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT);\n        break;\n    }\n  }, [animationState, inRef]);\n\n  return (\n    <div\n      ref={getRootRef}\n      id={contentId}\n      role=\"region\"\n      aria-labelledby={labelId}\n      aria-hidden={!expanded}\n      className={classNames(styles['AccordionContent'], className)}\n      {...restProps}\n    >\n      <div\n        ref={inRef}\n        className={classNames(styles['AccordionContent__in'], stateClassNames[animationState])}\n        {...animationHandlers}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n"],"names":["React","classNames","useExternRef","useCSSKeyframesAnimationController","useIsomorphicLayoutEffect","AccordionContext","styles","CUSTOM_PROPERTY_ACCORDION_CONTENT_HEIGHT","stateClassNames","enter","entering","entered","exit","exiting","exited","AccordionContent","getRootRef","getRef","className","children","restProps","expanded","labelId","contentId","useContext","inRef","animationState","animationHandlers","undefined","inEl","current","style","setProperty","scrollHeight","removeProperty","div","ref","id","role","aria-labelledby","aria-hidden","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,kCAAkC,QAAQ,sBAAsB;AACzE,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,2CAA2C;AAEjD,MAAMC,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,8BAA8B;IAC5CI,UAAUJ,MAAM,CAAC,8BAA8B;IAC/CK,SAASL,MAAM,CAAC,gCAAgC;IAChDM,MAAMN,MAAM,CAAC,6BAA6B;IAC1CO,SAASP,MAAM,CAAC,6BAA6B;IAC7CQ,QAAQR,MAAM,CAAC,+BAA+B;AAChD;AAOA,OAAO,MAAMS,mBAAmB,CAAC,EAC/BC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACmB;IACtB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGvB,MAAMwB,UAAU,CAACnB;IAE1D,MAAMoB,QAAQvB,aAAae;IAC3B,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGxB,mCAC1CkB,WAAW,UAAU,QACrBO,WACA;IAGFxB,0BAA0B;QACxB,MAAMyB,OAAOJ,MAAMK,OAAO;QAE1B,6EAA6E,GAC7E,IAAI,CAACD,MAAM;YACT;QACF;QAEA,OAAQH;YACN,KAAK;YACL,KAAK;gBACHG,KAAKE,KAAK,CAACC,WAAW,CAACzB,0CAA0C,CAAC,EAAEsB,KAAKI,YAAY,CAAC,EAAE,CAAC;gBACzF;YACF,KAAK;YACL,KAAK;gBACHJ,KAAKE,KAAK,CAACG,cAAc,CAAC3B;gBAC1B;QACJ;IACF,GAAG;QAACmB;QAAgBD;KAAM;IAE1B,qBACE,KAACU;QACCC,KAAKpB;QACLqB,IAAId;QACJe,MAAK;QACLC,mBAAiBjB;QACjBkB,eAAa,CAACnB;QACdH,WAAWjB,WAAWK,MAAM,CAAC,mBAAmB,EAAEY;QACjD,GAAGE,SAAS;kBAEb,cAAA,KAACe;YACCC,KAAKX;YACLP,WAAWjB,WAAWK,MAAM,CAAC,uBAAuB,EAAEE,eAAe,CAACkB,eAAe;YACpF,GAAGC,iBAAiB;sBAEpBR;;;AAIT,EAAE;AAEFJ,iBAAiB0B,WAAW,GAAG"}

package/dist/cssm/components/Accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/AccordionContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport interface AccordionContextProps {\n  labelId: string;\n  contentId: string;\n  expanded: boolean;\n  onChange: (e: boolean) => void;\n}\n\nexport const AccordionContext = React.createContext<AccordionContextProps>({\n  labelId: '',\n  contentId: '',\n  expanded: false,\n  onChange: noop,\n});\n"],"names":["React","noop","AccordionContext","createContext","labelId","contentId","expanded","onChange"],"rangeMappings":";;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AASvC,OAAO,MAAMC,iCAAmBF,MAAMG,aAAa,CAAwB;IACzEC,SAAS;IACTC,WAAW;IACXC,UAAU;IACVC,UAAUN;AACZ,GAAG"}
+{"version":3,"sources":["../../../../src/components/Accordion/AccordionContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport interface AccordionContextProps {\n  labelId: string;\n  contentId: string;\n  expanded: boolean;\n  onChange: (e: boolean) => void;\n}\n\nexport const AccordionContext = React.createContext<AccordionContextProps>({\n  labelId: '',\n  contentId: '',\n  expanded: false,\n  onChange: noop,\n});\n"],"names":["React","noop","AccordionContext","createContext","labelId","contentId","expanded","onChange"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AASvC,OAAO,MAAMC,iCAAmBF,MAAMG,aAAa,CAAwB;IACzEC,SAAS;IACTC,WAAW;IACXC,UAAU;IACVC,UAAUN;AACZ,GAAG"}

package/dist/cssm/components/Accordion/AccordionSummary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/AccordionSummary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronDown, Icon24ChevronUp } from '@vkontakte/icons';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { AccordionContext } from './AccordionContext';\nimport styles from './Accordion.module.css';\n\nexport interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable'> {\n  /**\n   * Иконка для раскрытия контента.\n   */\n  ExpandIcon?: React.ElementType;\n  /**\n   * Иконка для сворачивания контента.\n   */\n  CollapseIcon?: React.ElementType;\n  /**\n   * Позиция иконки.\n   */\n  iconPosition?: 'before' | 'after';\n}\n\nexport const AccordionSummary = ({\n  after,\n  before,\n  ExpandIcon = Icon24ChevronDown,\n  CollapseIcon = Icon24ChevronUp,\n  iconPosition = 'after',\n  onClick,\n  children,\n  ...restProps\n}: AccordionSummaryProps) => {\n  const { expanded, labelId, contentId, onChange } = React.useContext(AccordionContext);\n\n  const Icon = expanded ? CollapseIcon : ExpandIcon;\n\n  const icon = (\n    // Обертка нужна для правильной работы с отступами в SimpleCell\n    <span className=\"vkuiIcon\">\n      <Icon className={styles['AccordionSummary__icon']} />\n    </span>\n  );\n\n  const toggle = () => onChange(!expanded);\n\n  return (\n    <SimpleCell\n      id={labelId}\n      aria-expanded={expanded}\n      aria-controls={contentId}\n      onClick={callMultiple(toggle, onClick)}\n      before={\n        <>\n          {iconPosition === 'before' && icon}\n          {before}\n        </>\n      }\n      after={\n        <>\n          {after}\n          {iconPosition === 'after' && icon}\n        </>\n      }\n      {...restProps}\n    >\n      {children}\n    </SimpleCell>\n  );\n};\n\nAccordionSummary.displayName = 'AccordionSummary';\n"],"names":["React","Icon24ChevronDown","Icon24ChevronUp","callMultiple","SimpleCell","AccordionContext","styles","AccordionSummary","after","before","ExpandIcon","CollapseIcon","iconPosition","onClick","children","restProps","expanded","labelId","contentId","onChange","useContext","Icon","icon","span","className","toggle","id","aria-expanded","aria-controls","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,mBAAmB;AACtE,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,UAAU,QAAyB,2BAA2B;AACvE,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAiB5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,KAAK,EACLC,MAAM,EACNC,aAAaT,iBAAiB,EAC9BU,eAAeT,eAAe,EAC9BU,eAAe,OAAO,EACtBC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACmB;IACtB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGnB,MAAMoB,UAAU,CAACf;IAEpE,MAAMgB,OAAOL,WAAWL,eAAeD;IAEvC,MAAMY,OACJ,+DAA+D;kBAC/D,KAACC;QAAKC,WAAU;kBACd,cAAA,KAACH;YAAKG,WAAWlB,MAAM,CAAC,yBAAyB;;;IAIrD,MAAMmB,SAAS,IAAMN,SAAS,CAACH;IAE/B,qBACE,KAACZ;QACCsB,IAAIT;QACJU,iBAAeX;QACfY,iBAAeV;QACfL,SAASV,aAAasB,QAAQZ;QAC9BJ,sBACE;;gBACGG,iBAAiB,YAAYU;gBAC7Bb;;;QAGLD,qBACE;;gBACGA;gBACAI,iBAAiB,WAAWU;;;QAGhC,GAAGP,SAAS;kBAEZD;;AAGP,EAAE;AAEFP,iBAAiBsB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Accordion/AccordionSummary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronDown, Icon24ChevronUp } from '@vkontakte/icons';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { AccordionContext } from './AccordionContext';\nimport styles from './Accordion.module.css';\n\nexport interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable'> {\n  /**\n   * Иконка для раскрытия контента.\n   */\n  ExpandIcon?: React.ElementType;\n  /**\n   * Иконка для сворачивания контента.\n   */\n  CollapseIcon?: React.ElementType;\n  /**\n   * Позиция иконки.\n   */\n  iconPosition?: 'before' | 'after';\n}\n\nexport const AccordionSummary = ({\n  after,\n  before,\n  ExpandIcon = Icon24ChevronDown,\n  CollapseIcon = Icon24ChevronUp,\n  iconPosition = 'after',\n  onClick,\n  children,\n  ...restProps\n}: AccordionSummaryProps) => {\n  const { expanded, labelId, contentId, onChange } = React.useContext(AccordionContext);\n\n  const Icon = expanded ? CollapseIcon : ExpandIcon;\n\n  const icon = (\n    // Обертка нужна для правильной работы с отступами в SimpleCell\n    <span className=\"vkuiIcon\">\n      <Icon className={styles['AccordionSummary__icon']} />\n    </span>\n  );\n\n  const toggle = () => onChange(!expanded);\n\n  return (\n    <SimpleCell\n      id={labelId}\n      aria-expanded={expanded}\n      aria-controls={contentId}\n      onClick={callMultiple(toggle, onClick)}\n      before={\n        <>\n          {iconPosition === 'before' && icon}\n          {before}\n        </>\n      }\n      after={\n        <>\n          {after}\n          {iconPosition === 'after' && icon}\n        </>\n      }\n      {...restProps}\n    >\n      {children}\n    </SimpleCell>\n  );\n};\n\nAccordionSummary.displayName = 'AccordionSummary';\n"],"names":["React","Icon24ChevronDown","Icon24ChevronUp","callMultiple","SimpleCell","AccordionContext","styles","AccordionSummary","after","before","ExpandIcon","CollapseIcon","iconPosition","onClick","children","restProps","expanded","labelId","contentId","onChange","useContext","Icon","icon","span","className","toggle","id","aria-expanded","aria-controls","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,mBAAmB;AACtE,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,UAAU,QAAyB,2BAA2B;AACvE,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAiB5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,KAAK,EACLC,MAAM,EACNC,aAAaT,iBAAiB,EAC9BU,eAAeT,eAAe,EAC9BU,eAAe,OAAO,EACtBC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACmB;IACtB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGnB,MAAMoB,UAAU,CAACf;IAEpE,MAAMgB,OAAOL,WAAWL,eAAeD;IAEvC,MAAMY,OACJ,+DAA+D;kBAC/D,KAACC;QAAKC,WAAU;kBACd,cAAA,KAACH;YAAKG,WAAWlB,MAAM,CAAC,yBAAyB;;;IAIrD,MAAMmB,SAAS,IAAMN,SAAS,CAACH;IAE/B,qBACE,KAACZ;QACCsB,IAAIT;QACJU,iBAAeX;QACfY,iBAAeV;QACfL,SAASV,aAAasB,QAAQZ;QAC9BJ,sBACE;;gBACGG,iBAAiB,YAAYU;gBAC7Bb;;;QAGLD,qBACE;;gBACGA;gBACAI,iBAAiB,WAAWU;;;QAGhC,GAAGP,SAAS;kBAEZD;;AAGP,EAAE;AAEFP,iBAAiBsB,WAAW,GAAG"}

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

@@ -20,6 +20,6 @@ export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef'
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */
-export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupOffsetDistance, placement, mode: modeProp, ...restProps }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupOffsetDistance, placement, mode: modeProp, onClose, ...restProps }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ActionSheet.d.ts.map

package/dist/cssm/components/ActionSheet/ActionSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,qBAAqB,GAAG,WAAW,CAAC,EAClF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6HAWrB,gBAAgB,4CAqGlB,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,qBAAqB,GAAG,WAAW,CAAC,EAClF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,sIAYrB,gBAAgB,4CAgGlB,CAAC"}

package/dist/cssm/components/ActionSheet/ActionSheet.js

@@ -4,7 +4,7 @@ import { noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -15,41 +15,30 @@ import { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';
 import styles from './ActionSheet.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
- */ export const ActionSheet = ({ children, className, header, text, style, iosCloseItem, popupOffsetDistance, placement, mode: modeProp, ...restProps })=>{
+ */ export const ActionSheet = ({ children, className, header, text, style, iosCloseItem, popupOffsetDistance, placement, mode: modeProp, onClose, ...restProps })=>{
     const platform = usePlatform();
     const [closingBy, setClosingBy] = React.useState(undefined);
-    const onClose = ()=>setClosingBy('other');
-    const _action = React.useRef(noop);
-    const afterClose = ()=>{
-        restProps.onClose({
-            closedBy: closingBy || 'other'
-        });
-        _action.current();
-        _action.current = noop;
-    };
+    const onCloseWithOther = ()=>setClosingBy('other');
+    const actionCallbackRef = React.useRef(noop);
+    const [animationState, animationHandlers] = useCSSKeyframesAnimationController(closingBy !== undefined ? 'exit' : 'enter', {
+        onExited () {
+            onClose({
+                closedBy: closingBy || 'other'
+            });
+            actionCallbackRef.current();
+            actionCallbackRef.current = noop;
+        }
+    });
     const { isDesktop } = useAdaptivityWithJSMediaQueries();
     const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');
     useScrollLock(mode === 'sheet');
-    let timeout = platform === 'ios' ? 300 : 200;
-    if (mode === 'menu') {
-        timeout = 0;
-    }
-    const fallbackTransitionFinish = useTimeout(afterClose, timeout);
-    React.useEffect(()=>{
-        if (closingBy) {
-            fallbackTransitionFinish.set();
-        } else {
-            fallbackTransitionFinish.clear();
-        }
-    }, [
-        closingBy,
-        fallbackTransitionFinish
-    ]);
     const onItemClick = React.useCallback(({ action, immediateAction, autoClose, isCancelItem })=>(event)=>{
             event.persist();
             immediateAction && immediateAction(event);
             if (autoClose) {
-                _action.current = ()=>action && action(event);
+                if (action) {
+                    actionCallbackRef.current = ()=>action(event);
+                }
                 setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');
             } else {
                 action && action(event);
@@ -68,9 +57,12 @@ import styles from './ActionSheet.module.css';
         value: contextValue,
         children: /*#__PURE__*/ _jsxs(DropdownComponent, {
             closing: Boolean(closingBy),
-            timeout: timeout,
+            role: "dialog",
+            "aria-modal": "true",
+            autoFocus: animationState === 'entered',
             ...dropdownProps,
-            onClose: onClose,
+            ...animationHandlers,
+            onClose: onCloseWithOther,
             className: mode === 'menu' ? className : undefined,
             style: mode === 'menu' ? style : undefined,
             children: [
@@ -109,7 +101,7 @@ import styles from './ActionSheet.module.css';
         alignY: "bottom",
         className: className,
         style: style,
-        onClick: onClose,
+        onClick: onCloseWithOther,
         fixed: true,
         children: actionSheet
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  let timeout = platform === 'ios' ? 300 : 200;\n\n  if (mode === 'menu') {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, mode });\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles['ActionSheet__content-wrapper']}>\n          {(header || text) && (\n            <div className={styles['ActionSheet__header']}>\n              {header && (\n                <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                  {header}\n                </Footnote>\n              )}\n              {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles['ActionSheet__close-item-wrapper--ios']}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","styles","ActionSheet","children","className","header","text","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","restProps","platform","closingBy","setClosingBy","useState","undefined","onClose","_action","useRef","afterClose","closedBy","current","isDesktop","timeout","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","div","weight","alignY","onClick","fixed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = () => setClosingBy('other');\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, mode });\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles['ActionSheet__content-wrapper']}>\n          {(header || text) && (\n            <div className={styles['ActionSheet__header']}>\n              {header && (\n                <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                  {header}\n                </Footnote>\n              )}\n              {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles['ActionSheet__close-item-wrapper--ios']}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onCloseWithOther}\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useCSSKeyframesAnimationController","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","styles","ActionSheet","children","className","header","text","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","weight","alignY","onClick","fixed"],"mappings":"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"}

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

@@ -1,9 +1,18 @@
 .ActionSheet {
+  --vkui_internal--actionsheet_animation_opacity_initial: 1;
+  --vkui_internal--actionsheet_animation_translateY_initial: 100%;
+
   inline-size: 100%;
   max-inline-size: var(--vkui--size_popup_small--regular);
   padding: 10px;
   box-sizing: border-box;
-  animation: animation-actionsheet-intro 0.2s var(--vkui--animation_easing_platform);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .ActionSheet {
+    --vkui_internal--actionsheet_animation_opacity_initial: 0;
+    --vkui_internal--actionsheet_animation_translateY_initial: 0%;
+  }
 }
 
 .ActionSheet__content-wrapper {
@@ -21,9 +30,15 @@
   padding-inline: 16px;
 }
 
+.ActionSheet--opening {
+  /* prettier-ignore */
+  animation: animation-actionsheet-slide-up var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
+}
+
 .ActionSheet--closing {
-  transform: translateY(calc(100% + 20px));
-  transition: transform 0.2s var(--vkui--animation_easing_platform);
+  opacity: 0;
+  /* prettier-ignore */
+  animation: animation-actionsheet-slide-down var(--vkui--animation_duration_m) var(--vkui--animation_easing_platform);
 }
 
 .ActionSheet__title + .ActionSheet__text {
@@ -37,7 +52,6 @@
 
 .ActionSheet--ios {
   padding: 8px;
-  animation: animation-actionsheet-intro 0.3s var(--vkui--animation_easing_platform);
   background: transparent;
 }
 
@@ -56,7 +70,6 @@
 
 .ActionSheet--ios.ActionSheet--closing {
   transform: translateY(100%);
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
 }
 
 .ActionSheet--ios .ActionSheet__header {
@@ -95,9 +108,11 @@
  */
 
 .ActionSheet--menu {
+  --vkui_internal--actionsheet_animation_opacity_initial: 0;
+  --vkui_internal--actionsheet_animation_translateY_initial: 5%;
+
   inline-size: auto;
   block-size: auto;
-  animation: none;
   padding: 0;
   max-inline-size: 100%;
 }
@@ -107,16 +122,32 @@
   padding: 0;
 }
 
-/**
-* Animations
-*/
+@media screen and (prefers-reduced-motion: reduce) {
+  .ActionSheet--menu {
+    --vkui_internal--actionsheet_animation_translateY_initial: 0%;
+  }
+}
 
-@keyframes animation-actionsheet-intro {
+@keyframes animation-actionsheet-slide-up {
   from {
-    transform: translateY(100%);
+    opacity: var(--vkui_internal--actionsheet_animation_opacity_initial);
+    transform: translateY(var(--vkui_internal--actionsheet_animation_translateY_initial));
   }
 
   to {
+    opacity: 1;
     transform: translateY(0);
   }
 }
+
+@keyframes animation-actionsheet-slide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: var(--vkui_internal--actionsheet_animation_opacity_initial);
+    transform: translateY(var(--vkui_internal--actionsheet_animation_translateY_initial));
+  }
+}

package/dist/cssm/components/ActionSheet/ActionSheetContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (options: {\n  action: ActionType<T> | undefined;\n  immediateAction: ActionType<T> | undefined;\n  autoClose: boolean;\n  isCancelItem: boolean;\n}) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  mode?: 'sheet' | 'menu';\n};\n\nexport const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});\n"],"names":["React","ActionSheetContext","createContext"],"rangeMappings":";","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAgB/B,OAAO,MAAMC,qBAAqBD,MAAME,aAAa,CAA8B,CAAC,GAAG"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (options: {\n  action: ActionType<T> | undefined;\n  immediateAction: ActionType<T> | undefined;\n  autoClose: boolean;\n  isCancelItem: boolean;\n}) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  mode?: 'sheet' | 'menu';\n};\n\nexport const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});\n"],"names":["React","ActionSheetContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAgB/B,OAAO,MAAMC,qBAAqBD,MAAME,aAAa,CAA8B,CAAC,GAAG"}

package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem mode=\"cancel\" isCancelItem {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["ActionSheetItem","ActionSheetDefaultIosCloseItem","props","mode","isCancelItem"],"rangeMappings":";;;;;;;;;","mappings":";AAAA,SAASA,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,qBACE,KAACF;QAAgBG,MAAK;QAASC,YAAY;QAAE,GAAGF,KAAK;kBAAE;;AAI3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem mode=\"cancel\" isCancelItem {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["ActionSheetItem","ActionSheetDefaultIosCloseItem","props","mode","isCancelItem"],"mappings":";AAAA,SAASA,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,qBACE,KAACF;QAAgBG,MAAK;QAASC,YAAY;QAAE,GAAGF,KAAK;kBAAE;;AAI3D,EAAE"}

package/dist/cssm/components/ActionSheet/ActionSheetDropdownMenu.d.ts

@@ -1,3 +1,3 @@
 import { SharedDropdownProps } from './types';
-export declare const ActionSheetDropdownMenu: ({ children, toggleRef, closing, onClose, className, style, popupOffsetDistance, placement, ...restProps }: SharedDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionSheetDropdownMenu: ({ children, toggleRef, closing, onClose, className, style, popupOffsetDistance, placement, onAnimationStart, onAnimationEnd, ...restProps }: SharedDropdownProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActionSheetDropdownMenu.d.ts.map

package/dist/cssm/components/ActionSheet/ActionSheetDropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheetDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionSheet/ActionSheetDropdownMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,uBAAuB,8GAUjC,mBAAmB,4CAyDrB,CAAC"}
+{"version":3,"file":"ActionSheetDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionSheet/ActionSheetDropdownMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQ9C,eAAO,MAAM,uBAAuB,gJAYjC,mBAAmB,4CA4DrB,CAAC"}

package/dist/cssm/components/ActionSheet/ActionSheetDropdownMenu.js

@@ -15,7 +15,7 @@ const warn = warnOnce('ActionSheet');
 function getEl(ref) {
     return ref && 'current' in ref ? ref.current : ref;
 }
-export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose, className, style, popupOffsetDistance = 0, placement, ...restProps })=>{
+export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose, className, style, popupOffsetDistance = 0, placement, onAnimationStart, onAnimationEnd, ...restProps })=>{
     const { document } = useDOM();
     const platform = usePlatform();
     const { sizeY } = useAdaptivityWithJSMediaQueries();
@@ -57,10 +57,12 @@ export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose,
         targetRef: targetRef,
         offsetByMainAxis: popupOffsetDistance,
         placement: placement,
-        className: classNames(styles['ActionSheet'], platform === 'ios' && styles['ActionSheet--ios'], styles['ActionSheet--menu'], sizeY === 'compact' && styles['ActionSheet--sizeY-compact'], className),
+        className: classNames(styles['ActionSheet'], platform === 'ios' && styles['ActionSheet--ios'], styles['ActionSheet--menu'], closing ? styles['ActionSheet--closing'] : styles['ActionSheet--opening'], sizeY === 'compact' && styles['ActionSheet--sizeY-compact'], className),
         style: style,
         getRootRef: elementRef,
         usePortal: false,
+        onAnimationStart: onAnimationStart,
+        onAnimationEnd: onAnimationEnd,
         children: /*#__PURE__*/ _jsx(FocusTrap, {
             onClose: onClose,
             ...restProps,

package/dist/cssm/components/ActionSheet/ActionSheetDropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownMenu = ({\n  children,\n  toggleRef,\n  closing,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  placement,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={popupOffsetDistance}\n      placement={placement}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === 'ios' && styles['ActionSheet--ios'],\n        styles['ActionSheet--menu'],\n        sizeY === 'compact' && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n      style={style}\n      getRootRef={elementRef}\n      usePortal={false}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","useDOM","isRefObject","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownMenu","children","toggleRef","closing","onClose","className","style","popupOffsetDistance","placement","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","useMemo","offsetByMainAxis","getRootRef","usePortal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEA,OAAO,MAAME,0BAA0B,CAAC,EACtCC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,sBAAsB,CAAC,EACvBC,SAAS,EACT,GAAGC,WACiB;IACpB,MAAM,EAAEC,QAAQ,EAAE,GAAGpB;IACrB,MAAMqB,WAAWtB;IACjB,MAAM,EAAEuB,KAAK,EAAE,GAAG1B;IAClB,MAAM2B,aAAa7B,MAAM8B,MAAM,CAAwB;IAEvD3B,aAAa;QACX,MAAM4B,WAAWlB,MAAMK;QACvB,IAAI,CAACa,UAAU;YACbnB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMc,oBAAoB5B,iBAAiB,SAAS,CAAC6B;QACnD,MAAMC,kBAAkBL,YAAYd;QACpC,IAAImB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClEhB;QACF;IACF;IAEApB,MAAMqC,SAAS,CAAC;QACdC,WAAW;YACTN,kBAAkBO,GAAG,CAACb,SAAUc,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBN;KAAS;IAEhC,MAAMe,UAAUzC,MAAM0C,WAAW,CAAC,CAACT,IAAqCA,EAAEU,eAAe,IAAI,EAAE;IAE/F,MAAMC,YAAY5C,MAAM6C,OAAO,CAAC;QAC9B,IAAItC,YAA2DW,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,KAACR;QACCkC,WAAWA;QACXE,kBAAkBvB;QAClBC,WAAWA;QACXH,WAAWpB,WACTU,MAAM,CAAC,cAAc,EACrBgB,aAAa,SAAShB,MAAM,CAAC,mBAAmB,EAChDA,MAAM,CAAC,oBAAoB,EAC3BiB,UAAU,aAAajB,MAAM,CAAC,6BAA6B,EAC3DU;QAEFC,OAAOA;QACPyB,YAAYlB;QACZmB,WAAW;kBAEX,cAAA,KAACvC;YAAUW,SAASA;YAAU,GAAGK,SAAS;YAAEgB,SAASA;sBAClDxB;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownMenu = ({\n  children,\n  toggleRef,\n  closing,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  placement,\n  onAnimationStart,\n  onAnimationEnd,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={popupOffsetDistance}\n      placement={placement}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === 'ios' && styles['ActionSheet--ios'],\n        styles['ActionSheet--menu'],\n        closing ? styles['ActionSheet--closing'] : styles['ActionSheet--opening'],\n        sizeY === 'compact' && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n      style={style}\n      getRootRef={elementRef}\n      usePortal={false}\n      onAnimationStart={onAnimationStart}\n      onAnimationEnd={onAnimationEnd}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","useDOM","isRefObject","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownMenu","children","toggleRef","closing","onClose","className","style","popupOffsetDistance","placement","onAnimationStart","onAnimationEnd","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","useMemo","offsetByMainAxis","getRootRef","usePortal"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEA,OAAO,MAAME,0BAA0B,CAAC,EACtCC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,sBAAsB,CAAC,EACvBC,SAAS,EACTC,gBAAgB,EAChBC,cAAc,EACd,GAAGC,WACiB;IACpB,MAAM,EAAEC,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,WAAWxB;IACjB,MAAM,EAAEyB,KAAK,EAAE,GAAG5B;IAClB,MAAM6B,aAAa/B,MAAMgC,MAAM,CAAwB;IAEvD7B,aAAa;QACX,MAAM8B,WAAWpB,MAAMK;QACvB,IAAI,CAACe,UAAU;YACbrB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMgB,oBAAoB9B,iBAAiB,SAAS,CAAC+B;QACnD,MAAMC,kBAAkBL,YAAYhB;QACpC,IAAIqB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClElB;QACF;IACF;IAEApB,MAAMuC,SAAS,CAAC;QACdC,WAAW;YACTN,kBAAkBO,GAAG,CAACb,SAAUc,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBN;KAAS;IAEhC,MAAMe,UAAU3C,MAAM4C,WAAW,CAAC,CAACT,IAAqCA,EAAEU,eAAe,IAAI,EAAE;IAE/F,MAAMC,YAAY9C,MAAM+C,OAAO,CAAC;QAC9B,IAAIxC,YAA2DW,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,KAACR;QACCoC,WAAWA;QACXE,kBAAkBzB;QAClBC,WAAWA;QACXH,WAAWpB,WACTU,MAAM,CAAC,cAAc,EACrBkB,aAAa,SAASlB,MAAM,CAAC,mBAAmB,EAChDA,MAAM,CAAC,oBAAoB,EAC3BQ,UAAUR,MAAM,CAAC,uBAAuB,GAAGA,MAAM,CAAC,uBAAuB,EACzEmB,UAAU,aAAanB,MAAM,CAAC,6BAA6B,EAC3DU;QAEFC,OAAOA;QACP2B,YAAYlB;QACZmB,WAAW;QACXzB,kBAAkBA;QAClBC,gBAAgBA;kBAEhB,cAAA,KAACjB;YAAUW,SAASA;YAAU,GAAGO,SAAS;YAAEgB,SAASA;sBAClD1B;;;AAIT,EAAE"}