@vkontakte/vkui 5.10.0 → 6.0.0-beta.1

package/README.md

@@ -22,19 +22,19 @@ VKUI — это библиотека адаптивных React-компонен
 **npm:**
 
 ```sh
-npm i @vkontakte/vkui @vkontakte/vk-bridge
+npm i @vkontakte/vkui
 ```
 
 **yarn:**
 
 ```sh
-yarn add @vkontakte/vkui @vkontakte/vk-bridge
+yarn add @vkontakte/vkui
 ```
 
 **pnpm:**
 
 ```sh
-pnpm add @vkontakte/vkui @vkontakte/vk-bridge
+pnpm add @vkontakte/vkui
 ```
 
 > _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) `^17.0.0` и `^18.1.0`

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

@@ -1,17 +1,24 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> & HasRootRef<HTMLDetailsElement>;
-/**
- * Компонент, позволяет отображать несколько разделов контента в ограниченном
- * пространстве и сворачивать или разворачивать их пользователем.
- *
- * Обертка над details.
- *
- * @since 5.3.0
- * @see https://vkcom.github.io/VKUI/#/Accordion
- */
+import { HasChildren } from '../../types';
+export interface AccordionProps extends HasChildren {
+    id?: string;
+    /**
+     * Управляет раскрытием и скрытием контента.
+     */
+    expanded?: boolean;
+    /**
+     * Значение по умолчанию.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Функция изменения
+     */
+    onChange?(e: boolean): void;
+    disabled?: boolean;
+}
 export declare const Accordion: {
-    (props: AccordionProps): React.JSX.Element;
-    Summary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: import("./AccordionSummary").AccordionSummaryProps) => React.JSX.Element;
+    ({ id, expanded: expandedProp, defaultExpanded, onChange: onChangeProp, children, ...restProps }: AccordionProps): React.JSX.Element;
+    Summary: ({ after, before, ExpandIcon, CollapseIcon, iconPosition, onClick, children, ...restProps }: import("./AccordionSummary").AccordionSummaryProps) => React.JSX.Element;
+    Content: ({ getRootRef, getRef, className, children, ...restProps }: import("./AccordionContent").AccordionContentProps) => React.JSX.Element;
 };
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKzC,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,qBAAqB,CAAC,kBAAkB,CAAC,GAC1E,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAEjC;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS;YAAW,cAAc;;CAE9C,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAa1C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS;sGAOnB,cAAc;;;CAkBhB,CAAC"}

package/dist/cjs/components/Accordion/Accordion.js

@@ -8,17 +8,49 @@ Object.defineProperty(exports, "Accordion", {
         return Accordion;
     }
 });
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _RootComponent = require("../RootComponent/RootComponent");
-var _AccordionSummary = require("./AccordionSummary");
-var Accordion = function(props) {
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
-        Component: "details",
-        baseClassName: "vkuiAccordion"
-    }, props));
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useEnsuredControl = require("../../hooks/useEnsuredControl");
+const _useObjectMemo = require("../../hooks/useObjectMemo");
+const _AccordionContent = require("./AccordionContent");
+const _AccordionContext = require("./AccordionContext");
+const _AccordionSummary = require("./AccordionSummary");
+function useAccordionId(id) {
+    const generatedId = _react.useId();
+    const labelId = id !== null && id !== void 0 ? id : `Accordion${generatedId}`;
+    const contentId = `AccordionContent${id !== null && id !== void 0 ? id : generatedId}`;
+    return {
+        labelId,
+        contentId
+    };
+}
+const Accordion = (_param)=>{
+    var { id, expanded: expandedProp, defaultExpanded = false, onChange: onChangeProp, children } = _param, restProps = _object_without_properties._(_param, [
+        "id",
+        "expanded",
+        "defaultExpanded",
+        "onChange",
+        "children"
+    ]);
+    const { labelId, contentId } = useAccordionId(id);
+    const [expanded, onChange] = (0, _useEnsuredControl.useCustomEnsuredControl)({
+        value: expandedProp,
+        defaultValue: defaultExpanded,
+        onChange: onChangeProp,
+        disabled: restProps.disabled
+    });
+    const context = (0, _useObjectMemo.useObjectMemo)({
+        labelId,
+        contentId,
+        expanded: expanded || false,
+        onChange
+    });
+    return /*#__PURE__*/ _react.createElement(_AccordionContext.AccordionContext.Provider, {
+        value: context
+    }, children);
 };
 Accordion.Summary = _AccordionSummary.AccordionSummary;
+Accordion.Content = _AccordionContent.AccordionContent;
 
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { AccordionSummary } from './AccordionSummary';\nimport styles from './Accordion.module.css';\n\nexport type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> &\n  HasRootRef<HTMLDetailsElement>;\n\n/**\n * Компонент, позволяет отображать несколько разделов контента в ограниченном\n * пространстве и сворачивать или разворачивать их пользователем.\n *\n * Обертка над details.\n *\n * @since 5.3.0\n * @see https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const Accordion = (props: AccordionProps) => (\n  <RootComponent Component=\"details\" baseClassName={styles['Accordion']} {...props} />\n);\n\nAccordion.Summary = AccordionSummary;\n"],"names":["Accordion","props","RootComponent","Component","baseClassName","Summary","AccordionSummary"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;+DAlBU;6BAEO;gCACG;AAe1B,IAAMA,YAAY,SAACC;yBACxB,qBAACC,4BAAa;QAACC,WAAU;QAAUC,aAAa;OAA2BH;;AAG7ED,UAAUK,OAAO,GAAGC,kCAAgB"}
+{"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.Summary = AccordionSummary;\nAccordion.Content = AccordionContent;\n"],"names":["Accordion","useAccordionId","id","generatedId","React","useId","labelId","contentId","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","useCustomEnsuredControl","value","defaultValue","disabled","context","useObjectMemo","AccordionContext","Provider","Summary","AccordionSummary","Content","AccordionContent"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;iEAjCU;mCACiB;+BACV;kCAEG;kCACA;kCACA;AAEjC,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcC,OAAMC,KAAK;IAC/B,MAAMC,UAAUJ,eAAAA,gBAAAA,KAAM,CAAC,SAAS,EAAEC,YAAY,CAAC;IAC/C,MAAMI,YAAY,CAAC,gBAAgB,EAAEL,eAAAA,gBAAAA,KAAMC,YAAY,CAAC;IAExD,OAAO;QAAEG;QAASC;IAAU;AAC9B;AAmBO,MAAMP,YAAY;QAAC,EACxBE,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EAEO,WADZC;QALHZ;QACAM;QACAE;QACAC;QACAE;;IAGA,MAAM,EAAEP,OAAO,EAAEC,SAAS,EAAE,GAAGN,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGI,IAAAA,0CAAuB,EAAC;QACnDC,OAAOP;QACPQ,cAAcP;QACdC,UAAUC;QACVM,UAAUJ,UAAUI,QAAQ;IAC9B;IAEA,MAAMC,UAAUC,IAAAA,4BAAa,EAAC;QAC5Bd;QACAC;QACAC,UAAUA,YAAY;QACtBG;IACF;IAEA,qBAAO,qBAACU,kCAAgB,CAACC,QAAQ;QAACN,OAAOG;OAAUN;AACrD;AAEAb,UAAUuB,OAAO,GAAGC,kCAAgB;AACpCxB,UAAUyB,OAAO,GAAGC,kCAAgB"}

package/dist/cjs/components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
+export interface AccordionContentProps extends HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement>, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AccordionContent: ({ getRootRef, getRef, className, children, ...restProps }: AccordionContentProps) => React.JSX.Element;
+//# sourceMappingURL=AccordionContent.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AAsDjD,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,8DAM1B,qBAAqB,sBAqBvB,CAAC"}

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AccordionContent", {
+    enumerable: true,
+    get: function() {
+        return AccordionContent;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _vkjs = require("@vkontakte/vkjs");
+const _useExternRef = require("../../hooks/useExternRef");
+const _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+const _dom = require("../../lib/dom");
+const _AccordionContext = require("./AccordionContext");
+/**
+ * Функция расчета отрицательного margin, для скрытия контента.
+ */ function calcMarginTop(expanded, el) {
+    if (expanded) {
+        return `0px`;
+    }
+    // В первый рендеринг нельзя узнать высоту элемента, поэтому прячем таким образом
+    if (el === null) {
+        return '-100%';
+    }
+    return `${-el.clientHeight}px`;
+}
+/**
+ * В первый рендеринг отключаем анимации.
+ */ function calcTransition(el) {
+    return el === null ? 'none' : undefined;
+}
+/**
+ * Хук для отслеживания изменения высоты контента.
+ */ function useResizeContent(expanded, inRef) {
+    const resize = ()=>{
+        inRef.current.style.marginTop = calcMarginTop(expanded, inRef.current);
+    };
+    const { window } = (0, _dom.useDOM)();
+    (0, _useGlobalEventListener.useGlobalEventListener)(window, 'resize', resize);
+}
+/**
+ * Хук для скрывания или раскрывания контента. Возвращает стили для in элемента.
+ */ function useAccordionContent(expanded, inRef) {
+    const marginTop = calcMarginTop(expanded, inRef.current);
+    const transition = calcTransition(inRef.current);
+    useResizeContent(expanded, inRef);
+    return {
+        marginTop,
+        transition
+    };
+}
+const AccordionContent = (_param)=>{
+    var { getRootRef, getRef, className, children } = _param, restProps = _object_without_properties._(_param, [
+        "getRootRef",
+        "getRef",
+        "className",
+        "children"
+    ]);
+    const inRef = (0, _useExternRef.useExternRef)(getRef);
+    const { expanded, labelId, contentId } = _react.useContext(_AccordionContext.AccordionContext);
+    const inStyle = useAccordionContent(expanded, inRef);
+    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
+        ref: getRootRef,
+        id: contentId,
+        role: "region",
+        "aria-labelledby": labelId,
+        "aria-hidden": !expanded,
+        className: (0, _vkjs.classNames)("vkuiAccordionContent", className)
+    }, restProps), /*#__PURE__*/ _react.createElement("div", {
+        ref: inRef,
+        className: "vkuiAccordionContent__in",
+        style: inStyle
+    }, children));
+};
+
+//# sourceMappingURL=AccordionContent.js.map

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

@@ -0,0 +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 { HasRef, HasRootRef } from '../../types';\nimport { AccordionContext } from './AccordionContext';\nimport styles from './Accordion.module.css';\n\n/**\n * Функция расчета отрицательного margin, для скрытия контента.\n */\nfunction calcMarginTop(expanded: boolean, el: HTMLElement | null): string {\n  if (expanded) {\n    return `0px`;\n  }\n\n  // В первый рендеринг нельзя узнать высоту элемента, поэтому прячем таким образом\n  if (el === null) {\n    return '-100%';\n  }\n\n  return `${-el.clientHeight}px`;\n}\n\n/**\n * В первый рендеринг отключаем анимации.\n */\nfunction calcTransition(el: HTMLElement | null) {\n  return el === null ? 'none' : undefined;\n}\n\n/**\n * Хук для отслеживания изменения высоты контента.\n */\nfunction useResizeContent(expanded: boolean, inRef: React.MutableRefObject<HTMLDivElement | null>) {\n  const resize = () => {\n    inRef.current!.style.marginTop = calcMarginTop(expanded, inRef.current);\n  };\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'resize', resize);\n}\n\n/**\n * Хук для скрывания или раскрывания контента. Возвращает стили для in элемента.\n */\nfunction useAccordionContent(\n  expanded: boolean,\n  inRef: React.MutableRefObject<HTMLDivElement | null>,\n) {\n  const marginTop = calcMarginTop(expanded, inRef.current);\n  const transition = calcTransition(inRef.current);\n\n  useResizeContent(expanded, inRef);\n\n  return { marginTop, transition };\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"],"names":["AccordionContent","calcMarginTop","expanded","el","clientHeight","calcTransition","undefined","useResizeContent","inRef","resize","current","style","marginTop","window","useDOM","useGlobalEventListener","useAccordionContent","transition","getRootRef","getRef","className","children","restProps","useExternRef","labelId","contentId","React","useContext","AccordionContext","inStyle","div","ref","id","role","aria-labelledby","aria-hidden","classNames"],"mappings":";;;;+BAgEaA;;;eAAAA;;;;;;iEAhEU;sBACI;8BACE;wCACU;qBAChB;kCAEU;AAGjC;;CAEC,GACD,SAASC,cAAcC,QAAiB,EAAEC,EAAsB;IAC9D,IAAID,UAAU;QACZ,OAAO,CAAC,GAAG,CAAC;IACd;IAEA,iFAAiF;IACjF,IAAIC,OAAO,MAAM;QACf,OAAO;IACT;IAEA,OAAO,CAAC,EAAE,CAACA,GAAGC,YAAY,CAAC,EAAE,CAAC;AAChC;AAEA;;CAEC,GACD,SAASC,eAAeF,EAAsB;IAC5C,OAAOA,OAAO,OAAO,SAASG;AAChC;AAEA;;CAEC,GACD,SAASC,iBAAiBL,QAAiB,EAAEM,KAAoD;IAC/F,MAAMC,SAAS;QACbD,MAAME,OAAO,CAAEC,KAAK,CAACC,SAAS,GAAGX,cAAcC,UAAUM,MAAME,OAAO;IACxE;IAEA,MAAM,EAAEG,MAAM,EAAE,GAAGC,IAAAA,WAAM;IACzBC,IAAAA,8CAAsB,EAACF,QAAQ,UAAUJ;AAC3C;AAEA;;CAEC,GACD,SAASO,oBACPd,QAAiB,EACjBM,KAAoD;IAEpD,MAAMI,YAAYX,cAAcC,UAAUM,MAAME,OAAO;IACvD,MAAMO,aAAaZ,eAAeG,MAAME,OAAO;IAE/CH,iBAAiBL,UAAUM;IAE3B,OAAO;QAAEI;QAAWK;IAAW;AACjC;AAOO,MAAMjB,mBAAmB;QAAC,EAC/BkB,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,QAAQ,EAEc,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAMb,QAAQe,IAAAA,0BAAY,EAACJ;IAC3B,MAAM,EAAEjB,QAAQ,EAAEsB,OAAO,EAAEC,SAAS,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAE1E,MAAMC,UAAUb,oBAAoBd,UAAUM;IAE9C,qBACE,qBAACsB;QACCC,KAAKb;QACLc,IAAIP;QACJQ,MAAK;QACLC,mBAAiBV;QACjBW,eAAa,CAACjC;QACdkB,WAAWgB,IAAAA,gBAAU,0BAA6BhB;OAC9CE,0BAEJ,qBAACQ;QAAIC,KAAKvB;QAAOY,SAAS;QAAkCT,OAAOkB;OAChER;AAIT"}

package/dist/cjs/components/Accordion/AccordionContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface AccordionContextProps {
+    labelId: string;
+    contentId: string;
+    expanded: boolean;
+    onChange: (e: boolean) => void;
+}
+export declare const AccordionContext: React.Context<AccordionContextProps>;
+//# sourceMappingURL=AccordionContext.d.ts.map

package/dist/cjs/components/Accordion/AccordionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,sCAK3B,CAAC"}

package/dist/cjs/components/Accordion/AccordionContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AccordionContext", {
+    enumerable: true,
+    get: function() {
+        return AccordionContext;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _vkjs = require("@vkontakte/vkjs");
+const AccordionContext = /*#__PURE__*/ _react.createContext({
+    labelId: '',
+    contentId: '',
+    expanded: false,
+    onChange: _vkjs.noop
+});
+
+//# sourceMappingURL=AccordionContext.js.map

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

@@ -0,0 +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":["AccordionContext","React","createContext","labelId","contentId","expanded","onChange","noop"],"mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;sBACF;AASd,MAAMA,iCAAmBC,OAAMC,aAAa,CAAwB;IACzEC,SAAS;IACTC,WAAW;IACXC,UAAU;IACVC,UAAUC,UAAI;AAChB"}

package/dist/cjs/components/Accordion/AccordionSummary.d.ts

@@ -14,11 +14,5 @@ export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable
      */
     iconPosition?: 'before' | 'after';
 }
-/**
- * Обертка над summary.
- *
- * @since 5.3.0
- * @see  https://vkcom.github.io/VKUI/#/Accordion
- */
-export declare const AccordionSummary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: AccordionSummaryProps) => React.JSX.Element;
+export declare const AccordionSummary: ({ after, before, ExpandIcon, CollapseIcon, iconPosition, onClick, children, ...restProps }: AccordionSummaryProps) => React.JSX.Element;
 //# sourceMappingURL=AccordionSummary.d.ts.map

package/dist/cjs/components/Accordion/AccordionSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGvE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAChF;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACnC;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iGAS1B,qBAAqB,sBAyCvB,CAAC"}
+{"version":3,"file":"AccordionSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/AccordionSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAIvE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAChF;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,+FAS1B,qBAAqB,sBAqCvB,CAAC"}

package/dist/cjs/components/Accordion/AccordionSummary.js

@@ -8,37 +8,40 @@ Object.defineProperty(exports, "AccordionSummary", {
         return AccordionSummary;
     }
 });
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _icons = require("@vkontakte/icons");
-var _vkjs = require("@vkontakte/vkjs");
-var _SimpleCell = require("../SimpleCell/SimpleCell");
-var AccordionSummary = function(_param) {
-    var className = _param.className, after = _param.after, before = _param.before, _param_ExpandIcon = _param.ExpandIcon, ExpandIcon = _param_ExpandIcon === void 0 ? _icons.Icon24ChevronDown : _param_ExpandIcon, _param_CollapseIcon = _param.CollapseIcon, CollapseIcon = _param_CollapseIcon === void 0 ? _icons.Icon24ChevronUp : _param_CollapseIcon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "after" : _param_iconPosition, children = _param.children, restProps = _object_without_properties._(_param, [
-        "className",
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _icons = require("@vkontakte/icons");
+const _callMultiple = require("../../lib/callMultiple");
+const _SimpleCell = require("../SimpleCell/SimpleCell");
+const _AccordionContext = require("./AccordionContext");
+const AccordionSummary = (_param)=>{
+    var { after, before, ExpandIcon = _icons.Icon24ChevronDown, CollapseIcon = _icons.Icon24ChevronUp, iconPosition = 'after', onClick, children } = _param, restProps = _object_without_properties._(_param, [
         "after",
         "before",
         "ExpandIcon",
         "CollapseIcon",
         "iconPosition",
+        "onClick",
         "children"
     ]);
-    var accordionIcon = // Обертка нужна для правильной работы с отступами в SimpleCell
-    // Без обертки на AccordionSummary__icon--collapse не будет действовать правило `last-child`
+    const { expanded, labelId, contentId, onChange } = _react.useContext(_AccordionContext.AccordionContext);
+    const Icon = expanded ? CollapseIcon : ExpandIcon;
+    const icon = // Обертка нужна для правильной работы с отступами в SimpleCell
     /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiIcon"
-    }, /*#__PURE__*/ _react.createElement(ExpandIcon, {
-        className: (0, _vkjs.classNames)("vkuiAccordionSummary__icon", "vkuiAccordionSummary__icon--expand")
-    }), /*#__PURE__*/ _react.createElement(CollapseIcon, {
-        className: (0, _vkjs.classNames)("vkuiAccordionSummary__icon", "vkuiAccordionSummary__icon--collapse")
+    }, /*#__PURE__*/ _react.createElement(Icon, {
+        className: "vkuiAccordionSummary__icon"
     }));
+    const toggle = ()=>onChange(!expanded);
     return /*#__PURE__*/ _react.createElement(_SimpleCell.SimpleCell, _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiAccordionSummary", className),
-        Component: "summary",
-        before: /*#__PURE__*/ _react.createElement(_react.Fragment, null, iconPosition === "before" && accordionIcon, before),
-        after: /*#__PURE__*/ _react.createElement(_react.Fragment, null, after, iconPosition === "after" && accordionIcon)
+        id: labelId,
+        "aria-expanded": expanded,
+        "aria-controls": contentId,
+        onClick: (0, _callMultiple.callMultiple)(toggle, onClick),
+        before: /*#__PURE__*/ _react.createElement(_react.Fragment, null, iconPosition === 'before' && icon, before),
+        after: /*#__PURE__*/ _react.createElement(_react.Fragment, null, after, iconPosition === 'after' && icon)
     }, restProps), children);
 };
 

package/dist/cjs/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 { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\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\n/**\n * Обертка над summary.\n *\n * @since 5.3.0\n * @see  https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const AccordionSummary = ({\n  className,\n  after,\n  before,\n  ExpandIcon = Icon24ChevronDown,\n  CollapseIcon = Icon24ChevronUp,\n  iconPosition = 'after',\n  children,\n  ...restProps\n}: AccordionSummaryProps) => {\n  const accordionIcon = (\n    // Обертка нужна для правильной работы с отступами в SimpleCell\n    // Без обертки на AccordionSummary__icon--collapse не будет действовать правило `last-child`\n    <span className=\"vkuiIcon\">\n      <ExpandIcon\n        className={classNames(\n          styles['AccordionSummary__icon'],\n          styles['AccordionSummary__icon--expand'],\n        )}\n      />\n      <CollapseIcon\n        className={classNames(\n          styles['AccordionSummary__icon'],\n          styles['AccordionSummary__icon--collapse'],\n        )}\n      />\n    </span>\n  );\n\n  return (\n    <SimpleCell\n      className={classNames(styles['AccordionSummary'], className)}\n      Component=\"summary\"\n      before={\n        <>\n          {iconPosition === 'before' && accordionIcon}\n          {before}\n        </>\n      }\n      after={\n        <>\n          {after}\n          {iconPosition === 'after' && accordionIcon}\n        </>\n      }\n      {...restProps}\n    >\n      {children}\n    </SimpleCell>\n  );\n};\n"],"names":["AccordionSummary","className","after","before","ExpandIcon","Icon24ChevronDown","CollapseIcon","Icon24ChevronUp","iconPosition","children","restProps","accordionIcon","span","classNames","SimpleCell","Component"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;+DA3BU;qBAC4B;oBACxB;0BACiB;AAwBrC,IAAMA,mBAAmB;QAC9BC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,mCACAC,YAAAA,4CAAaC,wBAAiB,mDAC9BC,cAAAA,gDAAeC,sBAAe,qDAC9BC,cAAAA,gDAAe,+BACfC,kBAAAA,UACGC;QAPHT;QACAC;QACAC;QACAC;QACAE;QACAE;QACAC;;IAGA,IAAME,gBACJ,+DAA+D;IAC/D,4FAA4F;kBAC5F,qBAACC;QAAKX,WAAU;qBACd,qBAACG;QACCH,WAAWY,IAAAA,gBAAU;sBAKvB,qBAACP;QACCL,WAAWY,IAAAA,gBAAU;;IAQ3B,qBACE,qBAACC,sBAAU;QACTb,WAAWY,IAAAA,gBAAU,0BAA6BZ;QAClDc,WAAU;QACVZ,sBACE,4CACGK,iBAAiB,YAAYG,eAC7BR;QAGLD,qBACE,4CACGA,OACAM,iBAAiB,WAAWG;OAG7BD,YAEHD;AAGP"}
+{"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"],"names":["AccordionSummary","after","before","ExpandIcon","Icon24ChevronDown","CollapseIcon","Icon24ChevronUp","iconPosition","onClick","children","restProps","expanded","labelId","contentId","onChange","React","useContext","AccordionContext","Icon","icon","span","className","toggle","SimpleCell","id","aria-expanded","aria-controls","callMultiple"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;iEAtBU;uBAC4B;8BACtB;4BACe;kCACX;AAkB1B,MAAMA,mBAAmB;QAAC,EAC/BC,KAAK,EACLC,MAAM,EACNC,aAAaC,wBAAiB,EAC9BC,eAAeC,sBAAe,EAC9BC,eAAe,OAAO,EACtBC,OAAO,EACPC,QAAQ,EAEc,WADnBC;QAPHT;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAEpF,MAAMC,OAAOP,WAAWN,eAAeF;IAEvC,MAAMgB,OACJ,+DAA+D;kBAC/D,qBAACC;QAAKC,WAAU;qBACd,qBAACH;QAAKG,SAAS;;IAInB,MAAMC,SAAS,IAAMR,SAAS,CAACH;IAE/B,qBACE,qBAACY,sBAAU;QACTC,IAAIZ;QACJa,iBAAed;QACfe,iBAAeb;QACfL,SAASmB,IAAAA,0BAAY,EAACL,QAAQd;QAC9BN,sBACE,4CACGK,iBAAiB,YAAYY,MAC7BjB;QAGLD,qBACE,4CACGA,OACAM,iBAAiB,WAAWY;OAG7BT,YAEHD;AAGP"}

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

@@ -4,7 +4,7 @@ type CloseInitiators = 'action-item' | 'cancel-item' | 'other';
 export interface ActionSheetOnCloseOptions {
     closedBy: CloseInitiators;
 }
-export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'>, React.HTMLAttributes<HTMLDivElement> {
+export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>, React.HTMLAttributes<HTMLDivElement> {
     header?: React.ReactNode;
     text?: React.ReactNode;
     /**
@@ -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, popupDirection, popupOffsetDistance, placement, mode: modeProp, ...restProps }: ActionSheetProps) => React.JSX.Element;
+export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupOffsetDistance, placement, mode: modeProp, ...restProps }: ActionSheetProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=ActionSheet.d.ts.map

package/dist/cjs/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;AAe/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,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,CACR,mBAAmB,EACnB,WAAW,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,WAAW,CACrE,EACD,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,CAAC,OAAO,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD;;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,6IAYrB,gBAAgB,sBA+GlB,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,CAAC,OAAO,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD;;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,sBAsGlB,CAAC"}

package/dist/cjs/components/ActionSheet/ActionSheet.js

@@ -8,62 +8,55 @@ Object.defineProperty(exports, "ActionSheet", {
         return ActionSheet;
     }
 });
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
-var _useObjectMemo = require("../../hooks/useObjectMemo");
-var _usePlatform = require("../../hooks/usePlatform");
-var _useTimeout = require("../../hooks/useTimeout");
-var _platform = require("../../lib/platform");
-var _warnOnce = require("../../lib/warnOnce");
-var _ScrollContext = require("../AppRoot/ScrollContext");
-var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
-var _Footnote = require("../Typography/Footnote/Footnote");
-var _ActionSheetContext = require("./ActionSheetContext");
-var _ActionSheetDefaultIosCloseItem = require("./ActionSheetDefaultIosCloseItem");
-var _ActionSheetDropdownMenu = require("./ActionSheetDropdownMenu");
-var _ActionSheetDropdownSheet = require("./ActionSheetDropdownSheet");
-var warn = (0, _warnOnce.warnOnce)("ActionSheet");
-var ActionSheet = function(_param) {
-    var children = _param.children, className = _param.className, header = _param.header, text = _param.text, style = _param.style, iosCloseItem = _param.iosCloseItem, popupDirection = _param.popupDirection, popupOffsetDistance = _param.popupOffsetDistance, placement = _param.placement, modeProp = _param.mode, restProps = _object_without_properties._(_param, [
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _vkjs = require("@vkontakte/vkjs");
+const _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+const _useObjectMemo = require("../../hooks/useObjectMemo");
+const _usePlatform = require("../../hooks/usePlatform");
+const _useTimeout = require("../../hooks/useTimeout");
+const _ScrollContext = require("../AppRoot/ScrollContext");
+const _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
+const _Footnote = require("../Typography/Footnote/Footnote");
+const _ActionSheetContext = require("./ActionSheetContext");
+const _ActionSheetDefaultIosCloseItem = require("./ActionSheetDefaultIosCloseItem");
+const _ActionSheetDropdownMenu = require("./ActionSheetDropdownMenu");
+const _ActionSheetDropdownSheet = require("./ActionSheetDropdownSheet");
+const ActionSheet = (_param)=>{
+    var { children, className, header, text, style, iosCloseItem, popupOffsetDistance, placement, mode: modeProp } = _param, restProps = _object_without_properties._(_param, [
         "children",
         "className",
         "header",
         "text",
         "style",
         "iosCloseItem",
-        "popupDirection",
         "popupOffsetDistance",
         "placement",
         "mode"
     ]);
-    var platform = (0, _usePlatform.usePlatform)();
-    var _React_useState = _sliced_to_array._(_react.useState(undefined), 2), closingBy = _React_useState[0], setClosingBy = _React_useState[1];
-    var onClose = function() {
-        return setClosingBy("other");
-    };
-    var _action = _react.useRef(_vkjs.noop);
-    var afterClose = function() {
+    const platform = (0, _usePlatform.usePlatform)();
+    const [closingBy, setClosingBy] = _react.useState(undefined);
+    const onClose = ()=>setClosingBy('other');
+    const _action = _react.useRef(_vkjs.noop);
+    const afterClose = ()=>{
         restProps.onClose({
-            closedBy: closingBy || "other"
+            closedBy: closingBy || 'other'
         });
         _action.current();
         _action.current = _vkjs.noop;
     };
-    var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
-    var mode = modeProp !== null && modeProp !== void 0 ? modeProp : isDesktop ? "menu" : "sheet";
-    (0, _ScrollContext.useScrollLock)(mode === "sheet");
-    var timeout = platform === _platform.Platform.IOS ? 300 : 200;
-    if (mode === "menu") {
+    const { isDesktop } = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)();
+    const mode = modeProp !== null && modeProp !== void 0 ? modeProp : isDesktop ? 'menu' : 'sheet';
+    (0, _ScrollContext.useScrollLock)(mode === 'sheet');
+    let timeout = platform === 'ios' ? 300 : 200;
+    if (mode === 'menu') {
         timeout = 0;
     }
-    var fallbackTransitionFinish = (0, _useTimeout.useTimeout)(afterClose, timeout);
-    _react.useEffect(function() {
+    const fallbackTransitionFinish = (0, _useTimeout.useTimeout)(afterClose, timeout);
+    _react.useEffect(()=>{
         if (closingBy) {
             fallbackTransitionFinish.set();
         } else {
@@ -73,45 +66,34 @@ var ActionSheet = function(_param) {
         closingBy,
         fallbackTransitionFinish
     ]);
-    var onItemClick = _react.useCallback(function(param) {
-        var action = param.action, immediateAction = param.immediateAction, autoClose = param.autoClose, isCancelItem = param.isCancelItem;
-        return function(event) {
+    const onItemClick = _react.useCallback(({ action, immediateAction, autoClose, isCancelItem })=>(event)=>{
             event.persist();
             immediateAction && immediateAction(event);
             if (autoClose) {
-                _action.current = function() {
-                    return action && action(event);
-                };
-                setClosingBy(isCancelItem ? "cancel-item" : "action-item");
+                _action.current = ()=>action && action(event);
+                setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');
             } else {
                 action && action(event);
             }
-        };
-    }, []);
-    var contextValue = (0, _useObjectMemo.useObjectMemo)({
-        onItemClick: onItemClick,
-        mode: mode
+        }, []);
+    const contextValue = (0, _useObjectMemo.useObjectMemo)({
+        onItemClick,
+        mode
     });
-    var DropdownComponent = mode === "menu" ? _ActionSheetDropdownMenu.ActionSheetDropdownMenu : _ActionSheetDropdownSheet.ActionSheetDropdownSheet;
-    if (process.env.NODE_ENV === "development" && popupDirection) {
-        // TODO [>=6]: popupDirection
-        warn('Свойство "popupDirection" будет удалено в v6. Используйте свойство "placement"');
-    }
-    popupDirection = popupDirection !== undefined ? popupDirection : "bottom";
-    var dropdownProps = mode === "menu" ? Object.assign(restProps, {
-        popupOffsetDistance: popupOffsetDistance,
-        popupDirection: popupDirection,
-        placement: placement
+    const DropdownComponent = mode === 'menu' ? _ActionSheetDropdownMenu.ActionSheetDropdownMenu : _ActionSheetDropdownSheet.ActionSheetDropdownSheet;
+    const dropdownProps = mode === 'menu' ? Object.assign(restProps, {
+        popupOffsetDistance,
+        placement
     }) : restProps;
-    var actionSheet = /*#__PURE__*/ _react.createElement(_ActionSheetContext.ActionSheetContext.Provider, {
+    const actionSheet = /*#__PURE__*/ _react.createElement(_ActionSheetContext.ActionSheetContext.Provider, {
         value: contextValue
     }, /*#__PURE__*/ _react.createElement(DropdownComponent, _object_spread_props._(_object_spread._({
         closing: Boolean(closingBy),
         timeout: timeout
     }, dropdownProps), {
         onClose: onClose,
-        className: mode === "menu" ? className : undefined,
-        style: mode === "menu" ? style : undefined
+        className: mode === 'menu' ? className : undefined,
+        style: mode === 'menu' ? style : undefined
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiActionSheet__content-wrapper"
     }, (header || text) && /*#__PURE__*/ _react.createElement("div", {
@@ -121,10 +103,10 @@ var ActionSheet = function(_param) {
         className: "vkuiActionSheet__title"
     }, header), text && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiActionSheet__text"
-    }, text)), children), platform === _platform.Platform.IOS && mode === "sheet" && /*#__PURE__*/ _react.createElement("div", {
+    }, text)), children), platform === 'ios' && mode === 'sheet' && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiActionSheet__close-item-wrapper--ios"
     }, iosCloseItem !== null && iosCloseItem !== void 0 ? iosCloseItem : /*#__PURE__*/ _react.createElement(_ActionSheetDefaultIosCloseItem.ActionSheetDefaultIosCloseItem, null))));
-    if (mode === "menu") {
+    if (mode === 'menu') {
         return actionSheet;
     }
     return /*#__PURE__*/ _react.createElement(_PopoutWrapper.PopoutWrapper, {