@vkontakte/vkui 5.0.3 → 5.1.2

package/dist/components/NativeSelect/NativeSelect.js

@@ -1,27 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "className", "getRef", "getRootRef", "disabled", "multiline", "selectType", "status"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import { FormField } from "../FormField/FormField";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { useEnsuredControl } from "../../hooks/useEnsuredControl";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { SelectTypography } from "../Select/Select";
+var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "className", "getRef", "getRootRef", "disabled", "multiline", "selectType", "status", "onChange", "value"];
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
+import { FormField } from '../FormField/FormField';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useEnsuredControl } from '../../hooks/useEnsuredControl';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { SelectTypography } from '../SelectTypography/SelectTypography';
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
 var NativeSelect = function NativeSelect(_ref) {
   var style = _ref.style,
     _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
     align = _ref.align,
     placeholder = _ref.placeholder,
     children = _ref.children,
@@ -31,11 +31,13 @@ var NativeSelect = function NativeSelect(_ref) {
     disabled = _ref.disabled,
     multiline = _ref.multiline,
     _ref$selectType = _ref.selectType,
-    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
     status = _ref.status,
+    onChangeProp = _ref.onChange,
+    valueProp = _ref.value,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  var _React$useState = React.useState(""),
+  var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     title = _React$useState2[0],
     setTitle = _React$useState2[1];
@@ -43,8 +45,11 @@ var NativeSelect = function NativeSelect(_ref) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     empty = _React$useState4[0],
     setEmpty = _React$useState4[1];
-  var _useEnsuredControl = useEnsuredControl(restProps, {
-      defaultValue: defaultValue
+  var _useEnsuredControl = useEnsuredControl({
+      defaultValue: defaultValue,
+      disabled: disabled,
+      onChange: onChangeProp,
+      value: valueProp
     }),
     _useEnsuredControl2 = _slicedToArray(_useEnsuredControl, 2),
     value = _useEnsuredControl2[0],
@@ -58,12 +63,12 @@ var NativeSelect = function NativeSelect(_ref) {
     var selectedOption = (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.options[selectRef.current.selectedIndex];
     if (selectedOption) {
       setTitle(selectedOption.text);
-      setEmpty(selectedOption.value === "" && placeholder != null);
+      setEmpty(selectedOption.value === '' && placeholder != null);
     }
   }, [value, children]);
   return /*#__PURE__*/React.createElement(FormField, {
     Component: "label",
-    className: classNamesString("vkuiSelect", getPlatformClassName("vkuiSelect", platform), empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], getSizeXClassName("vkuiSelect", sizeX), getSizeYClassName("vkuiSelect", sizeY), className),
+    className: classNames("vkuiSelect", getPlatformClassName("vkuiSelect", platform), empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], getSizeXClassName("vkuiSelect", sizeX), getSizeYClassName("vkuiSelect", sizeY), className),
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","names":["React","classNamesString","DropdownIcon","FormField","getPlatformClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectTypography","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","restProps","platform","useState","title","setTitle","empty","setEmpty","value","onChange","selectRef","sizeX","sizeY","selectedOption","current","options","selectedIndex","text","styles"],"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { SelectType, SelectTypography } from \"../Select/Select\";\nimport styles from \"../Select/Select.module.css\";\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, \"status\"> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>[\"value\"];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = \"\",\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = \"default\",\n  status,\n  ...restProps\n}: NativeSelectProps) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState(\"\");\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  const { sizeX, sizeY } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption =\n      selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === \"\" && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNamesString(\n        styles[\"Select\"],\n        getPlatformClassName(styles[\"Select\"], platform),\n        empty && styles[\"Select--empty\"],\n        multiline && styles[\"Select--multiline\"],\n        align && styles[`Select--align-${align}`],\n        getSizeXClassName(styles[\"Select\"], sizeX),\n        getSizeYClassName(styles[\"Select\"], sizeY),\n        className\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles[\"Select__el\"]}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles[\"Select__container\"]}>\n        <SelectTypography\n          className={styles[\"Select__title\"]}\n          selectType={selectType}\n        >\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"mappings":"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"}
+{"version":3,"file":"NativeSelect.js","names":["React","classNames","DropdownIcon","FormField","getPlatformClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectTypography","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChangeProp","onChange","valueProp","value","restProps","platform","useState","title","setTitle","empty","setEmpty","selectRef","sizeX","sizeY","selectedOption","current","options","selectedIndex","text","styles"],"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeX, sizeY } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        getSizeXClassName(styles['Select'], sizeX),\n        getSizeYClassName(styles['Select'], sizeY),\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']}>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,iBAAiB,QAAQ,iCAAiC;AAEnE,SAASC,gBAAgB,QAAQ,sCAAsC;AAoBvE;AACA;AACA;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAgBO;EAAA,IAfvBC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IACjBC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,uBACTC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,IAAMC,QAAQ,GAAGvB,WAAW,EAAE;EAC9B,sBAA0BR,KAAK,CAACgC,QAAQ,CAAC,EAAE,CAAC;IAAA;IAArCC,KAAK;IAAEC,QAAQ;EACtB,uBAA0BlC,KAAK,CAACgC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCG,KAAK;IAAEC,QAAQ;EACtB,yBAA0B9B,iBAAiB,CAAC;MAC1CS,YAAY,EAAZA,YAAY;MACZO,QAAQ,EAARA,QAAQ;MACRK,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IALKC,KAAK;IAAEF,QAAQ;EAMtB,IAAMU,SAAS,GAAG9B,YAAY,CAACa,MAAM,CAAC;EACtC,qBAAyBX,aAAa,EAAE;IAAhC6B,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EAEpBlC,yBAAyB,CAAC,YAAM;IAAA;IAC9B,IAAMmC,cAAc,yBAAGH,SAAS,CAACI,OAAO,uDAAjB,mBAAmBC,OAAO,CAACL,SAAS,CAACI,OAAO,CAACE,aAAa,CAAC;IAClF,IAAIH,cAAc,EAAE;MAClBN,QAAQ,CAACM,cAAc,CAACI,IAAI,CAAC;MAC7BR,QAAQ,CAACI,cAAc,CAACX,KAAK,KAAK,EAAE,IAAIZ,WAAW,IAAI,IAAI,CAAC;IAC9D;EACF,CAAC,EAAE,CAACY,KAAK,EAAEX,QAAQ,CAAC,CAAC;EAErB,oBACE,oBAAC,SAAS;IACR,SAAS,EAAC,OAAO;IACjB,SAAS,EAAEjB,UAAU,eAEnBG,oBAAoB,eAAmB2B,QAAQ,CAAC,EAChDI,KAAK,uBAA2B,EAChCZ,SAAS,2BAA+B,EACxCP,KAAK,IAAI6B,MAAM,yBAAkB7B,KAAK,EAAG,EACzCN,iBAAiB,eAAmB4B,KAAK,CAAC,EAC1C3B,iBAAiB,eAAmB4B,KAAK,CAAC,EAC1CpB,SAAS,CACT;IACF,KAAK,EAAEL,KAAM;IACb,UAAU,EAAEO,UAAW;IACvB,QAAQ,EAAEC,QAAS;IACnB,KAAK,eAAE,oBAAC,YAAY,OAAI;IACxB,MAAM,EAAEG;EAAO,gBAEf,2CACMK,SAAS;IACb,QAAQ,EAAER,QAAS;IACnB,SAAS,kBAAuB;IAChC,QAAQ,EAAEK,QAAS;IACnB,KAAK,EAAEE,KAAM;IACb,GAAG,EAAEQ;EAAU,IAEdpB,WAAW,iBAAI;IAAQ,KAAK,EAAC;EAAE,GAAEA,WAAW,CAAU,EACtDC,QAAQ,CACF,eACT;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IAAC,SAAS,qBAA0B;IAAC,UAAU,EAAEM;EAAW,GAC1ES,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAED,SAASpB,YAAY;AAAG;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/NavTransitionContext/NavTransitionContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface TransitionContextProps {
     entering: boolean;
 }

package/dist/components/NavTransitionContext/NavTransitionContext.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { useObjectMemo } from "../../hooks/useObjectMemo";
+import * as React from 'react';
+import { useObjectMemo } from '../../hooks/useObjectMemo';
 var TransitionContext = /*#__PURE__*/React.createContext({
   entering: false
 });

package/dist/components/NavTransitionContext/NavTransitionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavTransitionContext.js","names":["React","useObjectMemo","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue"],"sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\n\nexport interface TransitionContextProps {\n  entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n  entering: false,\n});\nexport const useNavTransition = () => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n  children,\n  entering,\n}: React.PropsWithChildren<TransitionContextProps>) => {\n  const parentContext = useNavTransition();\n  const contextValue = useObjectMemo({\n    entering: parentContext.entering || entering,\n  });\n  return (\n    <TransitionContext.Provider value={contextValue}>\n      {children}\n    </TransitionContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,2BAA2B;AAKzD,IAAMC,iBAAiB,gBAAGF,KAAK,CAACG,aAAa,CAAyB;EACpEC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB;EAAA,OAASL,KAAK,CAACM,UAAU,CAACJ,iBAAiB,CAAC;AAAA;AAEzE,OAAO,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGqB;EAAA,IAFrDC,QAAQ,QAARA,QAAQ;IACRJ,QAAQ,QAARA,QAAQ;EAER,IAAMK,aAAa,GAAGJ,gBAAgB,EAAE;EACxC,IAAMK,YAAY,GAAGT,aAAa,CAAC;IACjCG,QAAQ,EAAEK,aAAa,CAACL,QAAQ,IAAIA;EACtC,CAAC,CAAC;EACF,oBACE,oBAAC,iBAAiB,CAAC,QAAQ;IAAC,KAAK,EAAEM;EAAa,GAC7CF,QAAQ,CACkB;AAEjC,CAAC"}
+{"version":3,"file":"NavTransitionContext.js","names":["React","useObjectMemo","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue"],"sources":["../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\n\nexport interface TransitionContextProps {\n  entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n  entering: false,\n});\nexport const useNavTransition = () => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n  children,\n  entering,\n}: React.PropsWithChildren<TransitionContextProps>) => {\n  const parentContext = useNavTransition();\n  const contextValue = useObjectMemo({\n    entering: parentContext.entering || entering,\n  });\n  return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,2BAA2B;AAKzD,IAAMC,iBAAiB,gBAAGF,KAAK,CAACG,aAAa,CAAyB;EACpEC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB;EAAA,OAASL,KAAK,CAACM,UAAU,CAACJ,iBAAiB,CAAC;AAAA;AAEzE,OAAO,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAqB,OAGqB;EAAA,IAFrDC,QAAQ,QAARA,QAAQ;IACRJ,QAAQ,QAARA,QAAQ;EAER,IAAMK,aAAa,GAAGJ,gBAAgB,EAAE;EACxC,IAAMK,YAAY,GAAGT,aAAa,CAAC;IACjCG,QAAQ,EAAEK,aAAa,CAACL,QAAQ,IAAIA;EACtC,CAAC,CAAC;EACF,oBAAO,oBAAC,iBAAiB,CAAC,QAAQ;IAAC,KAAK,EAAEM;EAAa,GAAEF,QAAQ,CAA8B;AACjG,CAAC"}

package/dist/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import type { HasRootRef } from "../../types";
-export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange">, HasRootRef<HTMLElement> {
+import * as React from 'react';
+import type { HasRootRef } from '../../types';
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, HasRootRef<HTMLElement> {
     /**
      * Текущая страница.
      */

package/dist/components/Pagination/Pagination.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["currentPage", "siblingCount", "boundaryCount", "totalPages", "disabled", "getPageAriaLabel", "prevButtonAriaLabel", "nextButtonAriaLabel", "getRootRef", "onChange", "className"];
-import * as React from "react";
-import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from "@vkontakte/icons";
-import { classNamesString } from "../../lib/classNames";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { usePagination } from "../../hooks/usePagination";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { Tappable } from "../Tappable/Tappable";
-import { Button } from "../Button/Button";
+import * as React from 'react';
+import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePagination } from '../../hooks/usePagination';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { Tappable } from '../Tappable/Tappable';
+import { Button } from '../Button/Button';
 function getPageAriaLabelDefault(page, isCurrent) {
   return isCurrent ? "".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430") : "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 ".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443");
 }
@@ -28,9 +28,9 @@ export var Pagination = function Pagination(_ref) {
     _ref$getPageAriaLabel = _ref.getPageAriaLabel,
     getPageAriaLabel = _ref$getPageAriaLabel === void 0 ? getPageAriaLabelDefault : _ref$getPageAriaLabel,
     _ref$prevButtonAriaLa = _ref.prevButtonAriaLabel,
-    prevButtonAriaLabel = _ref$prevButtonAriaLa === void 0 ? "Перейти на предыдущую страницу" : _ref$prevButtonAriaLa,
+    prevButtonAriaLabel = _ref$prevButtonAriaLa === void 0 ? 'Перейти на предыдущую страницу' : _ref$prevButtonAriaLa,
     _ref$nextButtonAriaLa = _ref.nextButtonAriaLabel,
-    nextButtonAriaLabel = _ref$nextButtonAriaLa === void 0 ? "Перейти на следующую страницу" : _ref$nextButtonAriaLa,
+    nextButtonAriaLabel = _ref$nextButtonAriaLa === void 0 ? 'Перейти на следующую страницу' : _ref$nextButtonAriaLa,
     getRootRef = _ref.getRootRef,
     onChange = _ref.onChange,
     className = _ref.className,
@@ -51,7 +51,7 @@ export var Pagination = function Pagination(_ref) {
     }
   }, [currentPage, isFirstPage, onChange]);
   var handleClick = React.useCallback(function (event) {
-    var page = event.currentTarget.dataset.page || "1";
+    var page = event.currentTarget.dataset.page || '1';
     onChange === null || onChange === void 0 ? void 0 : onChange(Number(page));
   }, [onChange]);
   var handleNextClick = React.useCallback(function () {
@@ -61,12 +61,12 @@ export var Pagination = function Pagination(_ref) {
   }, [currentPage, isLastPage, onChange]);
   var renderPages = React.useCallback(function (page) {
     switch (page) {
-      case "start-ellipsis":
-      case "end-ellipsis":
+      case 'start-ellipsis':
+      case 'end-ellipsis':
         return /*#__PURE__*/React.createElement("li", {
           key: page
         }, /*#__PURE__*/React.createElement("div", {
-          className: classNamesString("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", getSizeYClassName("vkuiPagination__page", sizeY), disabled && "vkuiPagination__page--disabled")
+          className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", getSizeYClassName("vkuiPagination__page", sizeY), disabled && "vkuiPagination__page--disabled")
         }, "..."));
       default:
         {
@@ -74,7 +74,7 @@ export var Pagination = function Pagination(_ref) {
           return /*#__PURE__*/React.createElement("li", {
             key: page
           }, /*#__PURE__*/React.createElement(Tappable, {
-            className: classNamesString("vkuiPagination__page", getSizeYClassName("vkuiPagination__page", sizeY), _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
+            className: classNames("vkuiPagination__page", getSizeYClassName("vkuiPagination__page", sizeY), _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
             activeMode: "vkuiPagination__page--state-active",
             hoverMode: "vkuiPagination__page--state-hover",
             hasActive: !_isCurrent,
@@ -90,7 +90,7 @@ export var Pagination = function Pagination(_ref) {
     }
   }, [sizeY, currentPage, disabled, getPageAriaLabel, handleClick]);
   return /*#__PURE__*/React.createElement("nav", _extends({
-    className: classNamesString("vkuiPagination", className),
+    className: classNames("vkuiPagination", className),
     role: "navigation",
     "aria-label": "\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C",
     ref: getRootRef
@@ -105,7 +105,6 @@ export var Pagination = function Pagination(_ref) {
     }),
     appearance: "accent",
     mode: "tertiary",
-    stretched: true,
     disabled: isFirstPage || disabled,
     "aria-label": prevButtonAriaLabel,
     onClick: handlePrevClick
@@ -118,7 +117,6 @@ export var Pagination = function Pagination(_ref) {
     }),
     appearance: "accent",
     mode: "tertiary",
-    stretched: true,
     disabled: isLastPage || disabled,
     "aria-label": nextButtonAriaLabel,
     onClick: handleNextClick

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNamesString","useAdaptivity","usePagination","getSizeYClassName","Tappable","Button","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24ChevronCompactLeft,\n  Icon24ChevronCompactRight,\n} from \"@vkontakte/icons\";\n\nimport type { HasRootRef } from \"../../types\";\n\nimport { classNamesString } from \"../../lib/classNames\";\n\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { PaginationPageType, usePagination } from \"../../hooks/usePagination\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\n\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Button } from \"../Button/Button\";\n\nimport styles from \"./Pagination.module.css\";\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\">,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = \"Перейти на предыдущую страницу\",\n  nextButtonAriaLabel = \"Перейти на следующую страницу\",\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || \"1\";\n      onChange?.(Number(page));\n    },\n    [onChange]\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case \"start-ellipsis\":\n        case \"end-ellipsis\":\n          return (\n            <li key={page}>\n              <div\n                className={classNamesString(\n                  styles[\"Pagination__page\"],\n                  styles[\"Pagination__page--type-ellipsis\"],\n                  getSizeYClassName(styles[\"Pagination__page\"], sizeY),\n                  disabled && styles[\"Pagination__page--disabled\"]\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNamesString(\n                  styles[\"Pagination__page\"],\n                  getSizeYClassName(styles[\"Pagination__page\"], sizeY),\n                  isCurrent && styles[\"Pagination__page--current\"],\n                  disabled && styles[\"Pagination__page--disabled\"]\n                )}\n                activeMode={styles[\"Pagination__page--state-active\"]}\n                hoverMode={styles[\"Pagination__page--state-hover\"]}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick]\n  );\n\n  return (\n    <nav\n      className={classNamesString(styles[\"Pagination\"], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles[\"Pagination__list\"]}>\n        <li className={styles[\"Pagination__prevButtonContainer\"]}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            stretched\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles[\"Pagination__nextButtonContainer\"]}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            stretched\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","getSizeYClassName","Tappable","Button","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nimport type { HasRootRef } from '../../types';\n\nimport { classNames } from '@vkontakte/vkjs';\n\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\n\nimport { Tappable } from '../Tappable/Tappable';\nimport { Button } from '../Button/Button';\n\nimport styles from './Pagination.module.css';\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  getSizeYClassName(styles['Pagination__page'], sizeY),\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  getSizeYClassName(styles['Pagination__page'], sizeY),\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Panel/Panel.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { NavIdProps } from '../../lib/getNavId';
 export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
 }

package/dist/components/Panel/Panel.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["centered", "children", "getRootRef", "nav", "className"];
-import * as React from "react";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { classNamesString } from "../../lib/classNames";
-import { Touch } from "../Touch/Touch";
-import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import { Platform } from "../../lib/platform";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { classNames } from '@vkontakte/vkjs';
+import { Touch } from '../Touch/Touch';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { Platform } from '../../lib/platform';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
@@ -25,7 +25,7 @@ export var Panel = function Panel(_ref) {
     sizeX = _useAdaptivity.sizeX;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNamesString("vkuiPanel", getSizeXClassName("vkuiPanel", sizeX), centered && "vkuiPanel--centered", className)
+    className: classNames("vkuiPanel", getSizeXClassName("vkuiPanel", sizeX), centered && "vkuiPanel--centered", className)
   }), /*#__PURE__*/React.createElement(Touch, {
     Component: TooltipContainer,
     className: "vkuiPanel__in"

package/dist/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","getSizeXClassName","classNamesString","Touch","TooltipContainer","Platform","usePlatform","useAdaptivity","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Touch } from \"../Touch/Touch\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { HasRootRef } from \"../../types\";\nimport { Platform } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { NavIdProps } from \"../../lib/getNavId\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./Panel.module.css\";\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"Panel\"],\n        getSizeXClassName(styles[\"Panel\"], sizeX),\n        centered && styles[\"Panel--centered\"],\n        className\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles[\"Panel__in\"]}>\n        {platform === Platform.IOS && <div className={styles[\"Panel__fade\"]} />}\n        <div className={styles[\"Panel__in-before\"]} />\n        {centered ? (\n          <div className={styles[\"Panel__centered\"]}>{children}</div>\n        ) : (\n          children\n        )}\n        <div className={styles[\"Panel__in-after\"]} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBS,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAET,gBAAgB,cAEzBD,iBAAiB,cAAkBe,KAAK,CAAC,EACzCP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAET,gBAAiB;IAAC,SAAS;EAAsB,GAChEW,QAAQ,KAAKV,QAAQ,CAACY,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBACP;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAE3DA,QACD,eACD;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}
+{"version":3,"file":"Panel.js","names":["React","getSizeXClassName","classNames","Touch","TooltipContainer","Platform","usePlatform","useAdaptivity","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Touch } from '../Touch/Touch';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { HasRootRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Panel.module.css';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        getSizeXClassName(styles['Panel'], sizeX),\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBS,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAET,UAAU,cAEnBD,iBAAiB,cAAkBe,KAAK,CAAC,EACzCP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAET,gBAAiB;IAAC,SAAS;EAAsB,GAChEW,QAAQ,KAAKV,QAAQ,CAACY,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}

package/dist/components/PanelHeader/PanelHeader.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     before?: React.ReactNode;
     after?: React.ReactNode;

package/dist/components/PanelHeader/PanelHeader.js

@@ -1,21 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["before", "children", "after", "separator", "visor", "transparent", "shadow", "getRef", "getRootRef", "fixed", "className"];
-import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { classNamesString } from "../../lib/classNames";
-import { FixedLayout } from "../FixedLayout/FixedLayout";
-import { Separator } from "../Separator/Separator";
-import { Platform } from "../../lib/platform";
-import { useConfigProvider, WebviewType } from "../ConfigProvider/ConfigProviderContext";
-import { Text } from "../Typography/Text/Text";
-import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import { ModalRootContext } from "../ModalRoot/ModalRootContext";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditionalRender";
-import { Spacing } from "../Spacing/Spacing";
+import * as React from 'react';
+import { usePlatform } from '../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
+import { FixedLayout } from '../FixedLayout/FixedLayout';
+import { Separator } from '../Separator/Separator';
+import { Platform } from '../../lib/platform';
+import { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';
+import { Text } from '../Typography/Text/Text';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { Spacing } from '../Spacing/Spacing';
+function getPlatformClassName(platform) {
+  switch (platform) {
+    case 'ios':
+      return "vkuiPanelHeader--ios";
+    case 'vkcom':
+      return "vkuiPanelHeader--vkcom";
+    default:
+      return "vkuiPanelHeader--android";
+  }
+}
+var sizeXClassNames = {
+  compact: '',
+  regular: "vkuiPanelHeader--sizeX-regular",
+  none: "vkuiPanelHeader--sizeX-none"
+};
 var PanelHeaderIn = function PanelHeaderIn(_ref) {
   var before = _ref.before,
     after = _ref.after,
@@ -69,12 +82,13 @@ export var PanelHeader = function PanelHeader(_ref2) {
   var _React$useContext2 = React.useContext(ModalRootContext),
     isInsideModal = _React$useContext2.isInsideModal;
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   var _useAdaptivityConditi = useAdaptivityConditionalRender(),
     adaptiveSizeX = _useAdaptivityConditi.sizeX;
   var isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiPanelHeader", getPlatformClassName("vkuiPanelHeader", platform), transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", getSizeXClassName("vkuiPanelHeader", sizeX), className),
+    className: classNames("vkuiPanelHeader", getPlatformClassName(platform), transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeXClassNames[sizeX], className),
     ref: isFixed ? getRootRef : getRef
   }), isFixed ? /*#__PURE__*/React.createElement(FixedLayout, {
     className: "vkuiPanelHeader__fixed",

package/dist/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.js","names":["React","usePlatform","getPlatformClassName","getSizeXClassName","classNamesString","FixedLayout","Separator","Platform","useConfigProvider","WebviewType","Text","TooltipContainer","ModalRootContext","useAdaptivity","useAdaptivityConditionalRender","Spacing","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","platform","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","VKAPPS","compact","regular"],"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { Separator } from \"../Separator/Separator\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport {\n  useConfigProvider,\n  WebviewType,\n} from \"../ConfigProvider/ConfigProviderContext\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAdaptivityConditionalRender } from \"../../hooks/useAdaptivityConditionalRender\";\nimport { Spacing } from \"../Spacing/Spacing\";\nimport styles from \"./PanelHeader.module.css\";\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n}: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles[\"PanelHeader__in\"]}>\n        <div className={styles[\"PanelHeader__before\"]}>{before}</div>\n        <div className={styles[\"PanelHeader__content\"]}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles[\"PanelHeader__content-in\"]}>\n              {children}\n            </span>\n          )}\n        </div>\n        <div className={styles[\"PanelHeader__after\"]}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"PanelHeader\"],\n        getPlatformClassName(styles[\"PanelHeader\"], platform),\n        transparent && styles[\"PanelHeader--trnsp\"],\n        shadow && styles[\"PanelHeader--shadow\"],\n        visor && styles[\"PanelHeader--vis\"],\n        separator && visor && styles[\"PanelHeader--sep\"],\n        webviewType === WebviewType.VKAPPS &&\n          !isInsideModal &&\n          styles[\"PanelHeader--vkapps\"],\n        !before && styles[\"PanelHeader--no-before\"],\n        !after && styles[\"PanelHeader--no-after\"],\n        isFixed && styles[\"PanelHeader--fixed\"],\n        getSizeXClassName(styles[\"PanelHeader\"], sizeX),\n        className\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={styles[\"PanelHeader__fixed\"]}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} />\n          )}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeader.js","names":["React","usePlatform","classNames","FixedLayout","Separator","Platform","useConfigProvider","WebviewType","Text","TooltipContainer","ModalRootContext","useAdaptivity","useAdaptivityConditionalRender","Spacing","getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","VKAPPS"],"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Separator } from '../Separator/Separator';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { Text } from '../Typography/Text/Text';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { Spacing } from '../Spacing/Spacing';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  compact: '',\n  regular: styles['PanelHeader--sizeX-regular'],\n  none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/PanelHeaderBack/PanelHeaderBack.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { PanelHeaderButtonProps } from "../PanelHeaderButton/PanelHeaderButton";
+import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 export declare type PanelHeaderBackProps = PanelHeaderButtonProps & {
-    "aria-label"?: string;
+    'aria-label'?: string;
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack

package/dist/components/PanelHeaderBack/PanelHeaderBack.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "aria-label", "className"];
-import * as React from "react";
-import { Icon28ChevronBack, Icon28ChevronLeftOutline, Icon28ArrowLeftOutline } from "@vkontakte/icons";
-import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { Platform } from "../../lib/platform";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { classNamesString } from "../../lib/classNames";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { Icon28ChevronBack, Icon28ChevronLeftOutline, Icon28ArrowLeftOutline } from '@vkontakte/icons';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { Platform } from '../../lib/platform';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { usePlatform } from '../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
  */
 export var PanelHeaderBack = function PanelHeaderBack(_ref) {
   var label = _ref.label,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Назад" : _ref$ariaLabel,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Назад' : _ref$ariaLabel,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
@@ -34,7 +34,7 @@ export var PanelHeaderBack = function PanelHeaderBack(_ref) {
       break;
   }
   return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({}, restProps, {
-    className: classNamesString("vkuiPanelHeaderBack", getSizeXClassName("vkuiPanelHeaderBack", sizeX), platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
+    className: classNames("vkuiPanelHeaderBack", getSizeXClassName("vkuiPanelHeaderBack", sizeX), platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
     label: showLabel && label,
     "aria-label": ariaLabel
   }), icon);