@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/dist/cssm/components/ModalRoot/withModalRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/withModalRootContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ModalRootContextInterface } from './ModalRootContext';\nimport { useModalRootContext } from './useModalRootContext';\n\ntype PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;\n\nexport function withModalRootContext<P extends PickedProps>(\n  Component: React.ComponentType<P>,\n): React.ComponentType<Omit<P, keyof PickedProps>> {\n  function WithModalRootContext(props: Omit<P, keyof PickedProps>) {\n    const { updateModalHeight } = useModalRootContext();\n\n    return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;\n  }\n  return WithModalRootContext;\n}\n"],"names":["React","useModalRootContext","withModalRootContext","Component","WithModalRootContext","props","updateModalHeight"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,2BAAwB;AAI5D,OAAO,SAASC,qBACdC,SAAiC;IAEjC,SAASC,qBAAqBC,KAAiC;QAC7D,MAAM,EAAEC,iBAAiB,EAAE,GAAGL;QAE9B,qBAAO,KAACE;YAAW,GAAIE,KAAK;YAAQC,mBAAmBA;;IACzD;IACA,OAAOF;AACT"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/withModalRootContext.tsx"],"sourcesContent":["'use client';\n\n/** TODO [>=8] Удалить HOC */\nimport * as React from 'react';\nimport { ModalRootContext } from './ModalRootContext';\nimport type { ModalRootContextInterface } from './types';\n\ntype PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;\n\n/**\n * @deprecated HOC не актуален и будет удалён в **VKUI v8**, т.к. вызывать `updateModalHeight()`\n *  для модальных окон с `dynamicContentHeight` больше не требуется.\n */\nexport function withModalRootContext<P extends PickedProps>(\n  Component: React.ComponentType<P>,\n): React.ComponentType<Omit<P, keyof PickedProps>> {\n  function WithModalRootContext(props: Omit<P, keyof PickedProps>) {\n    const { updateModalHeight } = React.useContext(ModalRootContext);\n\n    return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;\n  }\n  return WithModalRootContext;\n}\n"],"names":["React","ModalRootContext","withModalRootContext","Component","WithModalRootContext","props","updateModalHeight","useContext"],"mappings":"AAAA;;AAEA,2BAA2B,GAC3B,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,wBAAqB;AAKtD;;;CAGC,GACD,OAAO,SAASC,qBACdC,SAAiC;IAEjC,SAASC,qBAAqBC,KAAiC;QAC7D,MAAM,EAAEC,iBAAiB,EAAE,GAAGN,MAAMO,UAAU,CAACN;QAE/C,qBAAO,KAACE;YAAW,GAAIE,KAAK;YAAQC,mBAAmBA;;IACzD;IACA,OAAOF;AACT"}

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -37,7 +37,13 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
     };
     const _onChange = (e)=>{
         const newValue = remapFromNativeValueToSelectValue(e.target.value);
-        onChange?.(newValue);
+        if (e.target.value === NOT_SELECTED.NATIVE) {
+            e.target.value = '';
+        }
+        if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+            e.currentTarget.value = '';
+        }
+        onChange?.(e, newValue);
     };
     useIsomorphicLayoutEffect(checkSelectedOption, [
         children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`\n   */\n  value?: SelectValue;\n  /**\n   * см. `value`\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Коллбэк срабатывающий при изменении выбранного значения.\n   */\n  onChange?: (newValue: SelectValue) => void;\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\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  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    onChange?.(newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","Component","host","hasBefore","alignCenter","alignRight","after","mode","select","undefined","el","ref","option","div","container","aria-hidden"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`\n   */\n  value?: SelectValue;\n  /**\n   * см. `value`\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Коллбэк срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом\n   */\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","host","hasBefore","alignCenter","alignRight","after","mode","select","undefined","el","ref","option","div","container","aria-hidden"],"mappings":"AAAA;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,8BAA8B,QAAQ,sBAAmB;AAClE,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,SAAS,QAA6B,4BAAyB;AAExE,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,OAAO,MAAMC,eAAe;IAC1BC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEF,OAAO,MAAMC,oCAAoC,CAACC,QAChDA,UAAUJ,aAAaE,MAAM,GAAGF,aAAaC,MAAM,GAAGG,MAAM;AAE9D,OAAO,MAAMC,oCAAoC,CAACD,QAChDA,UAAUJ,aAAaC,MAAM,GAAGD,aAAaE,MAAM,GAAGE,MAAM;AAuC9D;;CAEC,GACD,MAAME,eAAe,CAAC,EACpBC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,aAAa,SAAS,EACtBC,MAAM,EACNC,qBAAO,KAAC3B,iBAAe,EACvB4B,MAAM,EACNC,QAAQ,EACRhB,KAAK,EACLiB,YAAY,EACZ,GAAGC,WACe;IAClB,MAAM,CAACC,OAAOC,SAAS,GAAGxC,MAAMyC,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAG3C,MAAMyC,QAAQ,CAAC;IACzC,MAAMG,YAAYzC,aAAayB;IAC/B,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAG3C;IAE3B,MAAM4C,sBAAsB;QAC1B,MAAMC,iBAAiBH,UAAUI,OAAO,EAAEC,OAAO,CAACL,UAAUI,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBP,SAASO,eAAeI,IAAI;YAC5BR,SAASI,eAAe3B,KAAK,KAAKJ,aAAaC,MAAM,IAAIQ,eAAe;QAC1E;IACF;IAEA,MAAM2B,YAAmD,CAACC;QACxD,MAAMC,WAAWjC,kCAAkCgC,EAAEE,MAAM,CAACnC,KAAK;QACjE,IAAIiC,EAAEE,MAAM,CAACnC,KAAK,KAAKJ,aAAaC,MAAM,EAAE;YAC1CoC,EAAEE,MAAM,CAACnC,KAAK,GAAG;QACnB;QACA,IAAIiC,EAAEG,aAAa,CAACpC,KAAK,KAAKJ,aAAaC,MAAM,EAAE;YACjDoC,EAAEG,aAAa,CAACpC,KAAK,GAAG;QAC1B;QACAgB,WAAWiB,GAAGC;IAChB;IACAhD,0BAA0BwC,qBAAqB;QAACpB;KAAS;IAEzD,qBACE,MAAClB;QACCiD,WAAU;QACV9B,WAAW1B,WACTS,OAAOgD,IAAI,EACX,4BACAvB,UAAUzB,OAAOiD,SAAS,EAC1BjB,SAAShC,OAAOgC,KAAK,EACrBX,aAAarB,OAAOqB,SAAS,EAC7BP,UAAU,YAAYd,OAAOkD,WAAW,EACxCpC,UAAU,WAAWd,OAAOmD,UAAU,EACtChB,UAAU,aAAalC,eAAe,CAACkC,MAAM,EAC7ClB;QAEFJ,OAAOA;QACPM,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACR2B,OAAO5B;QACPD,QAAQA;QACR8B,MAAM1D,+BAA+B2B;;0BAErC,MAACgC;gBACE,GAAG1B,SAAS;gBACblB,OAAOA,UAAU6C,YAAY9C,kCAAkCC,SAASA;gBACxEiB,cACEA,iBAAiB4B,YACb9C,kCAAkCkB,gBAClCA;gBAENP,UAAUA;gBACVH,WAAWjB,OAAOwD,EAAE;gBACpB9B,UAAUhC,aAAagD,WAAWN;gBAClCqB,KAAKvB;;oBAEJnB,6BAAe,KAAC2C;wBAAOhD,OAAOJ,aAAaC,MAAM;kCAAGQ;;oBACpDC;;;0BAEH,KAAC2C;gBAAI1C,WAAWjB,OAAO4D,SAAS;gBAAEC,aAAW;0BAC3C,cAAA,KAAC9D;oBAAiBkB,WAAWjB,OAAO6B,KAAK;oBAAEP,YAAYA;8BACpDO;;;;;AAKX;AAEA,SAASjB,YAAY,GAAG"}

package/dist/cssm/components/NavTransitionContext/NavTransitionContext.js

@@ -1,16 +1,18 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 const TransitionContext = /*#__PURE__*/ React.createContext({
     entering: false
 });
 export const useNavTransition = ()=>React.useContext(TransitionContext);
 export const NavTransitionProvider = ({ children, entering })=>{
     const parentContext = useNavTransition();
-    const contextValue = useObjectMemo({
-        entering: parentContext.entering || entering
-    });
+    const contextValue = React.useMemo(()=>({
+            entering: parentContext.entering || entering
+        }), [
+        entering,
+        parentContext.entering
+    ]);
     return /*#__PURE__*/ _jsx(TransitionContext.Provider, {
         value: contextValue,
         children: children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["'use client';\n\nimport * 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 = (): TransitionContextProps => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n  children,\n  entering,\n}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {\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"],"names":["React","useObjectMemo","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,+BAA4B;AAK1D,MAAMC,kCAAoBF,MAAMG,aAAa,CAAyB;IACpEC,UAAU;AACZ;AACA,OAAO,MAAMC,mBAAmB,IAA8BL,MAAMM,UAAU,CAACJ,mBAAmB;AAElG,OAAO,MAAMK,wBAAwB,CAAC,EACpCC,QAAQ,EACRJ,QAAQ,EACwC;IAChD,MAAMK,gBAAgBJ;IACtB,MAAMK,eAAeT,cAAc;QACjCG,UAAUK,cAAcL,QAAQ,IAAIA;IACtC;IACA,qBAAO,KAACF,kBAAkBS,QAAQ;QAACC,OAAOF;kBAAeF;;AAC3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport interface TransitionContextProps {\n  entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n  entering: false,\n});\nexport const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n  children,\n  entering,\n}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {\n  const parentContext = useNavTransition();\n  const contextValue = React.useMemo(\n    () => ({\n      entering: parentContext.entering || entering,\n    }),\n    [entering, parentContext.entering],\n  );\n\n  return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["React","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue","useMemo","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAK/B,MAAMC,kCAAoBD,MAAME,aAAa,CAAyB;IACpEC,UAAU;AACZ;AACA,OAAO,MAAMC,mBAAmB,IAA8BJ,MAAMK,UAAU,CAACJ,mBAAmB;AAElG,OAAO,MAAMK,wBAAwB,CAAC,EACpCC,QAAQ,EACRJ,QAAQ,EACwC;IAChD,MAAMK,gBAAgBJ;IACtB,MAAMK,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLP,UAAUK,cAAcL,QAAQ,IAAIA;QACtC,CAAA,GACA;QAACA;QAAUK,cAAcL,QAAQ;KAAC;IAGpC,qBAAO,KAACF,kBAAkBU,QAAQ;QAACC,OAAOH;kBAAeF;;AAC3D,EAAE"}

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useModalContext } from "../../context/ModalContext.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditionalRender/index.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { FixedLayout } from "../FixedLayout/FixedLayout.js";
-import { ModalRootContext } from "../ModalRoot/ModalRootContext.js";
 import { OnboardingTooltipContainer } from "../OnboardingTooltip/OnboardingTooltipContainer.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Separator } from "../Separator/Separator.js";
@@ -30,7 +30,7 @@ const sizeYClassNames = {
 const PanelHeaderIn = ({ before, after, children, typographyProps = {} })=>{
     const { Component = 'span', ...restProps } = typographyProps;
     const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();
-    const { isInsideModal } = React.useContext(ModalRootContext);
+    const isInsideModal = useModalContext().id !== null;
     const platform = usePlatform();
     const afterSlotProps = !hasCustomPanelHeaderAfter || isInsideModal ? {
         children: after

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type {\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: classNames(styles.vkcom, 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles.contentIn} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles.in}>\n      <div className={classNames(styles.before, 'vkuiInternalPanelHeader__before')}>{before}</div>\n      <div className={styles.content}>{typographyNode}</div>\n      <div\n        className={classNames(styles.after, 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles.trnsp,\n        shadow && styles.shadow,\n        !float && classNames(styles.static, 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible && classNames(styles.sep, 'vkuiInternalPanelHeader--sep'),\n        !before && classNames(styles.noBefore, 'vkuiInternalPanelHeader--no-before'),\n        !after && styles.noAfter,\n        isFixed && styles.hasFixed,\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles.fixed, 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} padding />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","ModalRootContext","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","sizeYClassNames","sizeYNone","compact","sizeYCompact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","useContext","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","contentIn","fixed","in","div","content","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","host","hasOwnProperty","trnsp","static","sep","noBefore","noAfter","hasFixed","vertical","padding","size","separator"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type {\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: classNames(styles.vkcom, 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const isInsideModal = useModalContext().id !== null;\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles.contentIn} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles.in}>\n      <div className={classNames(styles.before, 'vkuiInternalPanelHeader__before')}>{before}</div>\n      <div className={styles.content}>{typographyNode}</div>\n      <div\n        className={classNames(styles.after, 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles.trnsp,\n        shadow && styles.shadow,\n        !float && classNames(styles.static, 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible && classNames(styles.sep, 'vkuiInternalPanelHeader--sep'),\n        !before && classNames(styles.noBefore, 'vkuiInternalPanelHeader--no-before'),\n        !after && styles.noAfter,\n        isFixed && styles.hasFixed,\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles.fixed, 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} padding />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","sizeYClassNames","sizeYNone","compact","sizeYCompact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","id","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","contentIn","fixed","in","div","content","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","host","hasOwnProperty","trnsp","static","sep","noBefore","noAfter","hasFixed","vertical","padding","size","separator"],"mappings":"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"}

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon20ChevronLeftOutline, Icon24ArrowLeftOutline, Icon28ArrowLeftOutline, Icon28ChevronBack, Icon28ChevronLeftOutline } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
@@ -31,22 +31,19 @@ const getBackIcon = (platform)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
- */ export const PanelHeaderBack = ({ label, className, children = 'Назад', ...restProps })=>{
+ */ export const PanelHeaderBack = ({ label = 'Назад', className, hideLabelOnVKCom = false, hideLabelOnIOS = false, ...restProps })=>{
     const platform = usePlatform();
     const { sizeX = 'none' } = useAdaptivity();
     // также label нужно скрывать при platform === 'ios' && sizeX === regular
     // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
-    const showLabel = platform === 'vkcom' || platform === 'ios';
-    return /*#__PURE__*/ _jsxs(PanelHeaderButton, {
+    const showLabel = platform === 'vkcom' && !hideLabelOnVKCom || platform === 'ios' && !hideLabelOnIOS;
+    return /*#__PURE__*/ _jsx(PanelHeaderButton, {
         ...restProps,
-        className: classNames(sizeX !== 'regular' && sizeXClassNames[sizeX], platform === 'ios' && styles['backIos'], platform === 'vkcom' && styles['backVkcom'], showLabel && !!label && styles['backHasLabel'], className),
-        label: showLabel && label,
-        children: [
-            children && /*#__PURE__*/ _jsx(VisuallyHidden, {
-                children: children
-            }),
-            getBackIcon(platform)
-        ]
+        className: classNames(sizeX !== 'regular' && sizeXClassNames[sizeX], platform === 'ios' && styles.backIos, platform === 'vkcom' && styles.backVkcom, showLabel && !!label && styles.backHasLabel, className),
+        label: showLabel ? label : label && /*#__PURE__*/ _jsx(VisuallyHidden, {
+            children: label
+        }),
+        children: getBackIcon(platform)
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nconst sizeXClassNames = {\n  none: styles.backSizeXNone,\n  compact: styles.backSizeXCompact,\n};\n\nexport interface PanelHeaderBackProps extends Omit<PanelHeaderButtonProps, 'children'> {\n  children?: string;\n}\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label,\n  className,\n  children = 'Назад',\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === 'vkcom' || platform === 'ios';\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n        platform === 'ios' && styles['backIos'],\n        platform === 'vkcom' && styles['backVkcom'],\n        showLabel && !!label && styles['backHasLabel'],\n        className,\n      )}\n      label={showLabel && label}\n    >\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","sizeXClassNames","none","backSizeXNone","compact","backSizeXCompact","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","children","restProps","sizeX","showLabel"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAEvE,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,aAAa;IAC1BC,SAASJ,OAAOK,gBAAgB;AAClC;AAMA,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAACf;QACV,KAAK;YACH,qBACE,KAACK;gBACCW,aAAanB;gBACboB,aAAahB;;QAGnB;YACE,qBACE,KAACI;gBACCW,aAAalB;gBACbmB,aAAalB;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmB,kBAAkB,CAAC,EAC9BC,KAAK,EACLC,SAAS,EACTC,WAAW,OAAO,EAClB,GAAGC,WACoB;IACvB,MAAMP,WAAWX;IACjB,MAAM,EAAEmB,QAAQ,MAAM,EAAE,GAAGpB;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMqB,YAAYT,aAAa,WAAWA,aAAa;IAEvD,qBACE,MAACT;QACE,GAAGgB,SAAS;QACbF,WAAWlB,WACTqB,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CR,aAAa,SAASP,MAAM,CAAC,UAAU,EACvCO,aAAa,WAAWP,MAAM,CAAC,YAAY,EAC3CgB,aAAa,CAAC,CAACL,SAASX,MAAM,CAAC,eAAe,EAC9CY;QAEFD,OAAOK,aAAaL;;YAEnBE,0BAAY,KAACd;0BAAgBc;;YAC7BP,YAAYC;;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nconst sizeXClassNames = {\n  none: styles.backSizeXNone,\n  compact: styles.backSizeXCompact,\n};\n\nexport type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {\n  hideLabelOnVKCom?: boolean;\n  hideLabelOnIOS?: boolean;\n};\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label = 'Назад',\n  className,\n  hideLabelOnVKCom = false,\n  hideLabelOnIOS = false,\n  ...restProps\n}: PanelHeaderBackProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel =\n    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n        platform === 'ios' && styles.backIos,\n        platform === 'vkcom' && styles.backVkcom,\n        showLabel && !!label && styles.backHasLabel,\n        className,\n      )}\n      label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","sizeXClassNames","none","backSizeXNone","compact","backSizeXCompact","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","hideLabelOnVKCom","hideLabelOnIOS","restProps","sizeX","showLabel","backIos","backVkcom","backHasLabel"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAEvE,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,aAAa;IAC1BC,SAASJ,OAAOK,gBAAgB;AAClC;AAOA,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAACf;QACV,KAAK;YACH,qBACE,KAACK;gBACCW,aAAanB;gBACboB,aAAahB;;QAGnB;YACE,qBACE,KAACI;gBACCW,aAAalB;gBACbmB,aAAalB;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmB,kBAAkB,CAAC,EAC9BC,QAAQ,OAAO,EACfC,SAAS,EACTC,mBAAmB,KAAK,EACxBC,iBAAiB,KAAK,EACtB,GAAGC,WACkB;IACrB,MAAMR,WAAWX;IACjB,MAAM,EAAEoB,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMsB,YACJ,AAACV,aAAa,WAAW,CAACM,oBAAsBN,aAAa,SAAS,CAACO;IAEzE,qBACE,KAAChB;QACE,GAAGiB,SAAS;QACbH,WAAWlB,WACTsB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CT,aAAa,SAASP,OAAOkB,OAAO,EACpCX,aAAa,WAAWP,OAAOmB,SAAS,EACxCF,aAAa,CAAC,CAACN,SAASX,OAAOoB,YAAY,EAC3CR;QAEFD,OAAOM,YAAYN,QAAQA,uBAAS,KAACZ;sBAAgBY;;kBAEpDL,YAAYC;;AAGnB,EAAE"}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js

@@ -63,13 +63,18 @@ const warn = warnOnce('PanelHeaderButton');
             warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');
         }
     }
+    const elements = [
+        label,
+        children
+    ].filter((item)=>!!item);
+    const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);
     return /*#__PURE__*/ _jsxs(Tappable, {
         Component: restProps.href ? 'a' : 'button',
         ...restProps,
         hoverMode: hoverMode,
         activeEffectDelay: 200,
         activeMode: activeMode,
-        className: classNames(styles.host, platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && styles.primitive, !isPrimitive && !isPrimitiveLabel && styles.notPrimitive, className),
+        className: classNames(styles.host, platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, onlyPrimitive && styles.primitive, !isPrimitive && !isPrimitiveLabel && styles.notPrimitive, className),
         children: [
             isPrimitive ? /*#__PURE__*/ _jsx(ButtonTypography, {
                 primary: primary,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","host","hasOwnProperty","primitive","notPrimitive"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,SAAS,EACT,GAAGC,WACoB;IACvB,MAAMC,cAAc1B,qBAAqBe;IACzC,MAAMY,mBAAmB3B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI2B;IACJ,IAAIC;IAEJ,OAAQb;QACN,KAAK;YACHY,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYpB,OAAOsB,KAAK;YACxBD,aAAarB,OAAOuB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAejC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBd,KAAKlB,gBAAgBiC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAAChC;QACCY,WAAWQ,UAAUY,IAAI,GAAG,MAAM;QACjC,GAAGZ,SAAS;QACbG,WAAWA;QACXU,mBAAmB;QACnBT,YAAYA;QACZL,WAAWzB,WACTS,OAAO+B,IAAI,EACX9B,mBAAmB+B,cAAc,CAACxB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9Be,eAAelB,OAAOiC,SAAS,EAC/B,CAACf,eAAe,CAACC,oBAAoBnB,OAAOkC,YAAY,EACxDlB;;YAGDE,4BAAc,KAACb;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFY,iCACC,KAACd;gBAAiBC,SAASA;gBAASU,WAAWhB,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","host","hasOwnProperty","primitive","notPrimitive"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,SAAS,EACT,GAAGC,WACoB;IACvB,MAAMC,cAAc1B,qBAAqBe;IACzC,MAAMY,mBAAmB3B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI2B;IACJ,IAAIC;IAEJ,OAAQb;QACN,KAAK;YACHY,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYpB,OAAOsB,KAAK;YACxBD,aAAarB,OAAOuB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAejC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBd,KAAKlB,gBAAgBiC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACf;QAAOR;KAAS,CAACwB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAK1C,qBAAqBsC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAACjC;QACCY,WAAWQ,UAAUY,IAAI,GAAG,MAAM;QACjC,GAAGZ,SAAS;QACbG,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;QACZL,WAAWzB,WACTS,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B8B,iBAAiBjC,OAAOsC,SAAS,EACjC,CAACpB,eAAe,CAACC,oBAAoBnB,OAAOuC,YAAY,EACxDvB;;YAGDE,4BAAc,KAACb;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFY,iCACC,KAACd;gBAAiBC,SAASA;gBAASU,WAAWhB,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}

package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon24CancelOutline, Icon28CancelOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { AdaptiveIconRenderer } from "../AdaptiveIconRenderer/AdaptiveIconRenderer.js";
@@ -7,20 +7,16 @@ import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
- */ export const PanelHeaderClose = ({ children = 'Отмена', ...restProps })=>{
+ */ export const PanelHeaderClose = ({ label = 'Отмена', ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ _jsx(PanelHeaderButton, {
         ...restProps,
-        children: platform === 'ios' ? children : /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(VisuallyHidden, {
-                    children: children
-                }),
-                /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {
-                    IconCompact: Icon24CancelOutline,
-                    IconRegular: Icon28CancelOutline
-                })
-            ]
+        label: platform === 'ios' ? label : label && /*#__PURE__*/ _jsx(VisuallyHidden, {
+            children: label
+        }),
+        children: platform !== 'ios' && /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {
+            IconCompact: Icon24CancelOutline,
+            IconRegular: Icon28CancelOutline
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["'use client';\n\nimport { Icon24CancelOutline, Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderClose = ({\n  children = 'Отмена',\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={Icon24CancelOutline}\n            IconRegular={Icon28CancelOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24CancelOutline","Icon28CancelOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderClose","children","restProps","platform","IconCompact","IconRegular"],"mappings":"AAAA;;AAEA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,WAAW,QAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAmB,GAAGI,SAAS;kBAC7BC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBACCO,aAAaV;oBACbW,aAAaV;;;;;AAMzB,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["'use client';\n\nimport { Icon24CancelOutline, Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport type PanelHeaderCloseProps = Omit<PanelHeaderButtonProps, 'children'>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderClose = ({\n  label = 'Отмена',\n  ...restProps\n}: PanelHeaderCloseProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      label={platform === 'ios' ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {platform !== 'ios' && (\n        <AdaptiveIconRenderer IconCompact={Icon24CancelOutline} IconRegular={Icon28CancelOutline} />\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24CancelOutline","Icon28CancelOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderClose","label","restProps","platform","IconCompact","IconRegular"],"mappings":"AAAA;;AAEA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAIlE;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,QAAQ,QAAQ,EAChB,GAAGC,WACmB;IACtB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QACE,GAAGI,SAAS;QACbD,OAAOE,aAAa,QAAQF,QAAQA,uBAAS,KAACF;sBAAgBE;;kBAE7DE,aAAa,uBACZ,KAACN;YAAqBO,aAAaV;YAAqBW,aAAaV;;;AAI7E,EAAE"}

package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon24DoneOutline, Icon24PenOutline, Icon28DoneOutline, Icon28EditOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform.js";
@@ -13,16 +13,12 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
     const label = isActive ? doneLabel : editLabel;
     return /*#__PURE__*/ _jsx(PanelHeaderButton, {
         ...restProps,
-        children: platform === 'ios' ? label : /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(VisuallyHidden, {
-                    children: label
-                }),
-                /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {
-                    IconCompact: isActive ? Icon24DoneOutline : Icon24PenOutline,
-                    IconRegular: isActive ? Icon28DoneOutline : Icon28EditOutline
-                })
-            ]
+        label: platform === 'ios' ? label : label && /*#__PURE__*/ _jsx(VisuallyHidden, {
+            children: label
+        }),
+        children: platform !== 'ios' && /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {
+            IconCompact: isActive ? Icon24DoneOutline : Icon24PenOutline,
+            IconRegular: isActive ? Icon28DoneOutline : Icon28EditOutline
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon24DoneOutline,\n  Icon24PenOutline,\n  Icon28DoneOutline,\n  Icon28EditOutline,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS\n   */\n  editLabel?: string;\n  /**\n   * Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps): React.ReactNode => {\n  const platform = usePlatform();\n  const label = isActive ? doneLabel : editLabel;\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        label\n      ) : (\n        <>\n          <VisuallyHidden>{label}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}\n            IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon24DoneOutline","Icon24PenOutline","Icon28DoneOutline","Icon28EditOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","label","IconCompact","IconRegular"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,QACZ,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAiBlE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,WAAWT;IACjB,MAAMU,QAAQL,WAAWE,YAAYD;IAErC,qBACE,KAACJ;QAAmB,GAAGM,SAAS;kBAC7BC,aAAa,QACZC,sBAEA;;8BACE,KAACP;8BAAgBO;;8BACjB,KAACT;oBACCU,aAAaN,WAAWT,oBAAoBC;oBAC5Ce,aAAaP,WAAWP,oBAAoBC;;;;;AAMxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon24DoneOutline,\n  Icon24PenOutline,\n  Icon28DoneOutline,\n  Icon28EditOutline,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface PanelHeaderEditProps extends Omit<PanelHeaderButtonProps, 'label' | 'children'> {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS\n   */\n  editLabel?: string;\n  /**\n   * Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps): React.ReactNode => {\n  const platform = usePlatform();\n  const label = isActive ? doneLabel : editLabel;\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      label={platform === 'ios' ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {platform !== 'ios' && (\n        <AdaptiveIconRenderer\n          IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}\n          IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}\n        />\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon24DoneOutline","Icon24PenOutline","Icon28DoneOutline","Icon28EditOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","label","IconCompact","IconRegular"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,QACZ,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAiBlE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,WAAWT;IACjB,MAAMU,QAAQL,WAAWE,YAAYD;IAErC,qBACE,KAACJ;QACE,GAAGM,SAAS;QACbE,OAAOD,aAAa,QAAQC,QAAQA,uBAAS,KAACP;sBAAgBO;;kBAE7DD,aAAa,uBACZ,KAACR;YACCU,aAAaN,WAAWT,oBAAoBC;YAC5Ce,aAAaP,WAAWP,oBAAoBC;;;AAKtD,EAAE"}

package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon24DoneOutline, Icon28DoneOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { AdaptiveIconRenderer } from "../AdaptiveIconRenderer/AdaptiveIconRenderer.js";
@@ -7,21 +7,17 @@ import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
- */ export const PanelHeaderSubmit = ({ children = 'Готово', ...restProps })=>{
+ */ export const PanelHeaderSubmit = ({ label = 'Готово', ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ _jsx(PanelHeaderButton, {
         primary: true,
+        label: platform === 'ios' ? label : label && /*#__PURE__*/ _jsx(VisuallyHidden, {
+            children: label
+        }),
         ...restProps,
-        children: platform === 'ios' ? children : /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(VisuallyHidden, {
-                    children: children
-                }),
-                /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {
-                    IconCompact: Icon24DoneOutline,
-                    IconRegular: Icon28DoneOutline
-                })
-            ]
+        children: platform !== 'ios' && /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {
+            IconCompact: Icon24DoneOutline,
+            IconRegular: Icon28DoneOutline
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["'use client';\n\nimport { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton primary {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24DoneOutline","Icon28DoneOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderSubmit","children","restProps","platform","primary","IconCompact","IconRegular"],"mappings":"AAAA;;AAEA,SAASA,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,WAAW,QAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAkBM,OAAO;QAAE,GAAGF,SAAS;kBACrCC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBAAqBQ,aAAaX;oBAAmBY,aAAaX;;;;;AAK7E,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["'use client';\n\nimport { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport type PanelHeaderSubmitProps = Omit<PanelHeaderButtonProps, 'children'>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  label = 'Готово',\n  ...restProps\n}: PanelHeaderSubmitProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton\n      primary\n      label={platform === 'ios' ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {...restProps}\n    >\n      {platform !== 'ios' && (\n        <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24DoneOutline","Icon28DoneOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderSubmit","label","restProps","platform","primary","IconCompact","IconRegular"],"mappings":"AAAA;;AAEA,SAASA,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAIlE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,QAAQ,QAAQ,EAChB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QACCM,OAAO;QACPH,OAAOE,aAAa,QAAQF,QAAQA,uBAAS,KAACF;sBAAgBE;;QAC7D,GAAGC,SAAS;kBAEZC,aAAa,uBACZ,KAACN;YAAqBQ,aAAaX;YAAmBY,aAAaX;;;AAI3E,EAAE"}

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js

@@ -16,10 +16,14 @@ const stylesAlignY = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
- */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, noBackground = false, fixed = true, children, onClick, ...restProps })=>{
+ */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, noBackground = false, fixed = true, children, onClick, zIndex = 'var(--vkui--z_index_popout)', ...restProps })=>{
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles.host, stylesAlignY[alignY], stylesAlignX[alignX], closing ? styles.closing : styles.opened, fixed && styles.fixed, !noBackground && styles.masked),
+        style: {
+            zIndex,
+            ...restProps.style
+        },
         children: /*#__PURE__*/ _jsxs("div", {
             className: styles.container,
             children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles.alignXCenter,\n  left: styles.alignXLeft,\n  right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n  center: styles.alignYCenter,\n  top: styles.alignYTop,\n  bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles.closing : styles.opened,\n        fixed && styles.fixed,\n        !noBackground && styles.masked,\n      )}\n    >\n      <div className={styles.container}>\n        <div className={styles.overlay} onClick={onClick} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesAlignX","center","alignXCenter","left","alignXLeft","right","alignXRight","stylesAlignY","alignYCenter","top","alignYTop","bottom","alignYBottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","baseClassName","host","opened","masked","div","className","container","overlay","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,OAAOG,YAAY;IAC3BC,MAAMJ,OAAOK,UAAU;IACvBC,OAAON,OAAOO,WAAW;AAC3B;AAEA,MAAMC,eAAe;IACnBN,QAAQF,OAAOS,YAAY;IAC3BC,KAAKV,OAAOW,SAAS;IACrBC,QAAQZ,OAAOa,YAAY;AAC7B;AA2BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACP,GAAGC,WACgB;IACnB,qBACE,KAACvB;QACE,GAAGuB,SAAS;QACbC,eAAezB,WACbE,OAAOwB,IAAI,EACXhB,YAAY,CAACO,OAAO,EACpBd,YAAY,CAACe,OAAO,EACpBC,UAAUjB,OAAOiB,OAAO,GAAGjB,OAAOyB,MAAM,EACxCN,SAASnB,OAAOmB,KAAK,EACrB,CAACD,gBAAgBlB,OAAO0B,MAAM;kBAGhC,cAAA,MAACC;YAAIC,WAAW5B,OAAO6B,SAAS;;8BAC9B,KAACF;oBAAIC,WAAW5B,OAAO8B,OAAO;oBAAET,SAASA;;8BACzC,KAACM;oBAAIC,WAAW5B,OAAO+B,OAAO;8BAAGX;;;;;AAIzC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles.alignXCenter,\n  left: styles.alignXLeft,\n  right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n  center: styles.alignYCenter,\n  top: styles.alignYTop,\n  bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n  /**\n   * Позволяет задать z-index через токен или числом\n   */\n  zIndex?: number | string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  zIndex = 'var(--vkui--z_index_popout)',\n  ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles.closing : styles.opened,\n        fixed && styles.fixed,\n        !noBackground && styles.masked,\n      )}\n      style={{\n        zIndex,\n        ...restProps.style,\n      }}\n    >\n      <div className={styles.container}>\n        <div className={styles.overlay} onClick={onClick} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesAlignX","center","alignXCenter","left","alignXLeft","right","alignXRight","stylesAlignY","alignYCenter","top","alignYTop","bottom","alignYBottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","zIndex","restProps","baseClassName","host","opened","masked","style","div","className","container","overlay","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,OAAOG,YAAY;IAC3BC,MAAMJ,OAAOK,UAAU;IACvBC,OAAON,OAAOO,WAAW;AAC3B;AAEA,MAAMC,eAAe;IACnBN,QAAQF,OAAOS,YAAY;IAC3BC,KAAKV,OAAOW,SAAS;IACrBC,QAAQZ,OAAOa,YAAY;AAC7B;AA+BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EACtC,GAAGC,WACgB;IACnB,qBACE,KAACxB;QACE,GAAGwB,SAAS;QACbC,eAAe1B,WACbE,OAAOyB,IAAI,EACXjB,YAAY,CAACO,OAAO,EACpBd,YAAY,CAACe,OAAO,EACpBC,UAAUjB,OAAOiB,OAAO,GAAGjB,OAAO0B,MAAM,EACxCP,SAASnB,OAAOmB,KAAK,EACrB,CAACD,gBAAgBlB,OAAO2B,MAAM;QAEhCC,OAAO;YACLN;YACA,GAAGC,UAAUK,KAAK;QACpB;kBAEA,cAAA,MAACC;YAAIC,WAAW9B,OAAO+B,SAAS;;8BAC9B,KAACF;oBAAIC,WAAW9B,OAAOgC,OAAO;oBAAEX,SAASA;;8BACzC,KAACQ;oBAAIC,WAAW9B,OAAOiC,OAAO;8BAAGb;;;;;AAIzC,EAAE"}

package/dist/cssm/components/PullToRefresh/PullToRefresh.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
-import { usePrevious } from "../../hooks/usePrevious.js";
+import { useStateWithPrev } from "../../hooks/useStateWithPrev.js";
 import { initializeBrowserGesturePreventionEffect, useDOM } from "../../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { useScroll } from "../AppRoot/ScrollContext.js";
@@ -32,7 +32,10 @@ function cancelEvent(event) {
     const platform = usePlatform();
     const scroll = useScroll();
     const { window } = useDOM();
-    const prevIsFetching = usePrevious(isFetching);
+    const prevIsFetchingRef = React.useRef(undefined);
+    React.useEffect(()=>{
+        prevIsFetchingRef.current = isFetching;
+    });
     const initParams = React.useMemo(()=>({
             start: platform === 'ios' ? -10 : -45,
             max: platform === 'ios' ? 50 : 80,
@@ -46,8 +49,7 @@ function cancelEvent(event) {
     const [watching, setWatching] = React.useState(false);
     const [refreshing, setRefreshing] = React.useState(false);
     const [canRefresh, setCanRefresh] = React.useState(false);
-    const [touchDown, setTouchDown] = React.useState(false);
-    const prevTouchDown = usePrevious(touchDown);
+    const [[touchDown, prevTouchDown], setTouchDown] = useStateWithPrev(false);
     const touchY = React.useRef(0);
     const [contentShift, setContentShift] = React.useState(0);
     const [spinnerProgress, setSpinnerProgress] = React.useState(0);
@@ -71,21 +73,21 @@ function cancelEvent(event) {
     ]);
     const waitFetchingTimeoutId = React.useRef();
     useIsomorphicLayoutEffect(()=>{
+        const prevIsFetching = prevIsFetchingRef.current;
         if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {
             onRefreshingFinish();
         }
     }, [
-        prevIsFetching,
         isFetching,
         onRefreshingFinish
     ]);
     useIsomorphicLayoutEffect(()=>{
+        const prevIsFetching = prevIsFetchingRef.current;
         if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {
             clearTimeout(waitFetchingTimeoutId.current);
         }
     }, [
-        isFetching,
-        prevIsFetching
+        isFetching
     ]);
     const runRefreshing = React.useCallback(()=>{
         if (!refreshing && onRefresh) {
@@ -120,7 +122,6 @@ function cancelEvent(event) {
         }
     }, [
         initParams,
-        prevIsFetching,
         isFetching,
         onRefreshingFinish,
         prevTouchDown,