@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/components/SelectMimicry/SelectMimicry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, 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['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAanB;;CAEC,GACD,OAAO,IAAMC,gBAAgB;iCAC3BC,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,oBAAChB,+DACTiB,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BtB,iBAAAA,wCAAAA,eAAnBwB,OAAAA,0CAAQ;IAChB,IAAMC,QAAQb,YAAYD;IAE1B,qBACE,oBAACP,mDACKmB;QACJb,UAAUM,WAAWU,YAAYhB;QACjCY,WAAWvB,yBAETyB,UAAUvB,SAAS0B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAI;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM1B,+BAA+BkB;QACrCC,QAAQA;sBAER,oBAACQ;QAAIP,SAAS;qBACZ,oBAACjB;QAAiBe,YAAYA;QAAYE,SAAS;OAChDG;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HTMLAttributesWithRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, 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['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  autoFocus,\n  ...restProps\n}: SelectMimicryProps) => {\n  const rootRef = useExternRef(getRootRef);\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  useAutoFocus(rootRef, autoFocus);\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={rootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useAutoFocus","useExternRef","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","REGULAR","mode","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAYnB;;CAEC,GACD,OAAO,IAAMC,gBAAgB;iCAC3BC,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,oBAAChB,+DACTiB,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,UAAUzB,aAAac;IAE7B,IAA2BhB,iBAAAA,wCAAAA,eAAnB4B,OAAAA,0CAAQ;IAChB,IAAMC,QAAQf,YAAYD;IAE1BZ,aAAa0B,SAASF;IAEtB,qBACE,oBAACnB,mDACKoB;QACJd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWzB,yBAET6B,UAAUzB,SAAS4B,OAAO,IAAIvB,eAAe,CAACoB,MAAM,EACpD,CAACd,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAI;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPW,MAAM5B,+BAA+BkB;QACrCC,QAAQA;sBAER,oBAACU;QAAIT,SAAS;qBACZ,oBAACjB;QAAiBe,YAAYA;QAAYE,SAAS;OAChDK;AAKX,EAAE"}

package/dist/components/SelectTypography/SelectTypography.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasChildren } from '../../types';
+import { HasChildren, HTMLAttributesWithRootRef } from '../../types';
 import type { SelectType } from '../Select/Select';
-export interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {
+export interface SelectTypographyProps extends HTMLAttributesWithRootRef<HTMLSpanElement>, HasChildren {
     selectType?: SelectType;
 }
 /**

package/dist/components/SelectTypography/SelectTypography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps) => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["React","Text","SelectTypography","selectType","children","restProps","weight"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,IAAI,QAAQ,0BAA0B;AAM/C;;CAEC,GACD,OAAO,IAAMC,mBAAmB;mCAC9BC,YAAAA,4CAAa,+BACbC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,qBACE,oBAACH;QAAKK,QAAQH,eAAe,WAAW,MAAM;OAASE,YACpDD;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps\n  extends HTMLAttributesWithRootRef<HTMLSpanElement>,\n    HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps) => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["React","Text","SelectTypography","selectType","children","restProps","weight"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,IAAI,QAAQ,0BAA0B;AAQ/C;;CAEC,GACD,OAAO,IAAMC,mBAAmB;mCAC9BC,YAAAA,4CAAa,+BACbC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,qBACE,oBAACH;QAAKK,QAAQH,eAAe,WAAW,MAAM;OAASE,YACpDD;AAGP,EAAE"}

package/dist/components/Separator/Separator.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * С этим свойством компонент не будет иметь отступы слева и справа
      */
@@ -8,4 +9,4 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export declare const Separator: ({ wide, className, ...restProps }: SeparatorProps) => React.JSX.Element;
+export declare const Separator: ({ wide, ...restProps }: SeparatorProps) => React.JSX.Element;

package/dist/components/Separator/Separator.js

@@ -3,15 +3,15 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */ export var Separator = function(_param) /*#__PURE__*/ {
-    var wide = _param.wide, className = _param.className, restProps = _object_without_properties(_param, [
-        "wide",
-        "className"
+    var wide = _param.wide, restProps = _object_without_properties(_param, [
+        "wide"
     ]);
-    return React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiSeparator", !wide && "vkuiSeparator--padded", className)
+    return React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiSeparator", !wide && "vkuiSeparator--padded")
     }), /*#__PURE__*/ React.createElement("hr", {
         className: "vkuiSeparator__in"
     }));

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","Separator","wide","className","restProps","div","hr"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,IAAMC,YAAY;QAAGC,cAAAA,MAAMC,mBAAAA,WAAcC;QAApBF;QAAMC;;WAChC,oBAACE,+CACKD;QACJD,WAAWH,4BAAgC,CAACE,iCAAqCC;sBAEjF,oBAACG;QAAGH,SAAS;;AACV,EACL"}
+{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}\n  >\n    <hr className={styles['Separator__in']} />\n  </RootComponent>\n);\n"],"names":["React","classNames","RootComponent","Separator","wide","restProps","baseClassName","hr","className"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAU/D;;CAEC,GACD,OAAO,IAAMC,YAAY;QAAGC,cAAAA,MAASC;QAATD;;WAC1B,oBAACF,uDACKG;QACJC,eAAeL,4BAAgC,CAACG;sBAEhD,oBAACG;QAAGC,SAAS;;AACA,EACf"}

package/dist/components/SimpleCell/SimpleCell.js

@@ -79,7 +79,6 @@ var sizeYClassNames = (_obj = {
     }, subtitle), badgeAfterSubtitle && /*#__PURE__*/ React.createElement("span", {
         className: "vkuiSimpleCell__badge"
     }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/ React.createElement(Footnote, {
-        normalize: false,
         className: classNames("vkuiSimpleCell__text", "vkuiSimpleCell__extraSubtitle")
     }, extraSubtitle)), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Headline, {
         Component: "span",

package/dist/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","Tappable","Footnote","Headline","Subhead","Chevron","warn","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","process","env","NODE_ENV","hasChevron","IOS","hasAfter","sizeY","hasOwnProperty","div","Component","span","weight","normalize","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,IAAMC,OAAON,SAAS;AAEtB,IAAMO,qBAAqB;IACzBC,KAAKd,kCAAsC;IAC3Ce,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMlB,yCAA6C;GACnD,iBAFsB,MAErBI,SAASe,OAAO,EAAGnB,4CAElB,4DAJoB,MAMrBI,SAASgB,OAAO,oCANK;AAsExB;;CAEC,GACD,OAAO,IAAMC,aAAa;QACxBC,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,uCACAC,aAAAA,8CAAc,0BACXC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWnC;IAEjB,IAAIoC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBX,eAAe,MAAM;QACjE,yDAAyD;QACzDlB,KACE;IAEJ;IAEA,IAAM8B,aACJZ,eAAe,YACd,AAACA,CAAAA,eAAe,QAAQA,eAAe,MAAK,KAAMQ,aAAajC,SAASsC,GAAG;IAE9E,IAAMC,WAAW3C,aAAa4B,UAAUa;IACxC,IAA2BxC,iBAAAA,wCAAAA,eAAnB2C,OAAAA,0CAAQ;IAEhB,qBACE,oBAACtC,kDACK8B;QACJF,WAAWnC,6BAET,0BACAa,mBAAmBiC,cAAc,CAACR,YAC9BzB,kBAAkB,CAACyB,SAAS,GAC5BzB,mBAAmBE,OAAO,EAC9BE,eAAe,CAAC4B,MAAM,EACtBd,qCACAI;QAGDT,sBACD,oBAACqB;QAAIZ,WAAWnC,mCAAuC;OACpDgC,yBACC,oBAACtB;QACCsC,WAAU;QACVb,WAAWnC;OAEVgC,wBAGL,oBAACe;QAAIZ,SAAS;OACXb,kCACC,oBAAC2B;QAAKd,SAAS;OAAgCb,iCAEjD,oBAACb;QAASuC,WAAU;QAAOb,SAAS;QAAkCe,QAAO;OAC1EtB,WAEF3B,aAAasB,kCACZ,oBAAC0B;QAAKd,SAAS;OAAgCZ,mBAGlDU,0BACC,oBAACc;QAAIZ,SAAS;OACXX,qCACC,oBAACyB;QAAKd,SAAS;OAAgCX,oCAEjD,oBAAChB;QACC2C,WAAW;QACXhB,WAAWnC;OAEViC,WAEFR,oCACC,oBAACwB;QAAKd,SAAS;OAAgCV,sBAIpDS,+BACC,oBAAC1B;QACC2C,WAAW;QACXhB,WAAWnC;OAEVkC,iBAINjC,aAAa0B,4BACZ,oBAAClB;QAASuC,WAAU;QAAOE,QAAO;QAAIf,SAAS;OAC5CR,YAGJiB,0BACC,oBAACG;QAAIZ,WAAWnC,oCAAwC;OACrD6B,OACAa,4BACC,oBAAC/B;QAAQyC,MAAMhB;QAAaD,SAAS;;AAMjD,EAAE"}
+{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","Tappable","Footnote","Headline","Subhead","Chevron","warn","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","process","env","NODE_ENV","hasChevron","IOS","hasAfter","sizeY","hasOwnProperty","div","Component","span","weight","normalize","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,IAAMC,OAAON,SAAS;AAEtB,IAAMO,qBAAqB;IACzBC,KAAKd,kCAAsC;IAC3Ce,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMlB,yCAA6C;GACnD,iBAFsB,MAErBI,SAASe,OAAO,EAAGnB,4CAElB,4DAJoB,MAMrBI,SAASgB,OAAO,oCANK;AAsExB;;CAEC,GACD,OAAO,IAAMC,aAAa;QACxBC,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,uCACAC,aAAAA,8CAAc,0BACXC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWnC;IAEjB,IAAIoC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBX,eAAe,MAAM;QACjE,yDAAyD;QACzDlB,KACE;IAEJ;IAEA,IAAM8B,aACJZ,eAAe,YACd,AAACA,CAAAA,eAAe,QAAQA,eAAe,MAAK,KAAMQ,aAAajC,SAASsC,GAAG;IAE9E,IAAMC,WAAW3C,aAAa4B,UAAUa;IACxC,IAA2BxC,iBAAAA,wCAAAA,eAAnB2C,OAAAA,0CAAQ;IAEhB,qBACE,oBAACtC,kDACK8B;QACJF,WAAWnC,6BAET,0BACAa,mBAAmBiC,cAAc,CAACR,YAC9BzB,kBAAkB,CAACyB,SAAS,GAC5BzB,mBAAmBE,OAAO,EAC9BE,eAAe,CAAC4B,MAAM,EACtBd,qCACAI;QAGDT,sBACD,oBAACqB;QAAIZ,WAAWnC,mCAAuC;OACpDgC,yBACC,oBAACtB;QACCsC,WAAU;QACVb,WAAWnC;OAEVgC,wBAGL,oBAACe;QAAIZ,SAAS;OACXb,kCACC,oBAAC2B;QAAKd,SAAS;OAAgCb,iCAEjD,oBAACb;QAASuC,WAAU;QAAOb,SAAS;QAAkCe,QAAO;OAC1EtB,WAEF3B,aAAasB,kCACZ,oBAAC0B;QAAKd,SAAS;OAAgCZ,mBAGlDU,0BACC,oBAACc;QAAIZ,SAAS;OACXX,qCACC,oBAACyB;QAAKd,SAAS;OAAgCX,oCAEjD,oBAAChB;QACC2C,WAAW;QACXhB,WAAWnC;OAEViC,WAEFR,oCACC,oBAACwB;QAAKd,SAAS;OAAgCV,sBAIpDS,+BACC,oBAAC1B;QACC2B,WAAWnC;OAEVkC,iBAINjC,aAAa0B,4BACZ,oBAAClB;QAASuC,WAAU;QAAOE,QAAO;QAAIf,SAAS;OAC5CR,YAGJiB,0BACC,oBAACG;QAAIZ,WAAWnC,oCAAwC;OACrD6B,OACAa,4BACC,oBAAC/B;QAAQyC,MAAMhB;QAAaD,SAAS;;AAMjD,EAAE"}

package/dist/components/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { type TouchEvent } from '../Touch/Touch';
-export interface SliderBaseProps extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
+export interface SliderBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
     min?: number;
     max?: number;
     step?: number;
@@ -20,6 +20,7 @@ export interface SliderBaseProps extends HasRootRef<HTMLDivElement>, Omit<React.
      * > Перебивает `aria-valuetext`.
      */
     getAriaValueText?(value: number, index: number): string;
+    withTooltip?: boolean;
 }
 export interface SliderProps extends SliderBaseProps {
     multiple?: false;
@@ -42,4 +43,4 @@ export interface SliderMultipleProps extends SliderBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, ...restProps }: SliderProps | SliderMultipleProps) => React.JSX.Element;
+export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, ...restProps }: SliderProps | SliderMultipleProps) => React.JSX.Element;

package/dist/components/Slider/Slider.js

@@ -22,7 +22,7 @@ var sizeYClassNames = _define_property({
     step = _param.step, _param_min = _param.min, min = _param_min === void 0 ? 0 : _param_min, _param_max = _param.max, max = _param_max === void 0 ? 100 : _param_max, valueProp = _param.value, multipleProp = _param.multiple, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? multipleProp ? [
         min,
         max
-    ] : min : _param_defaultValue, disabled = _param.disabled, className = _param.className, getRootRef = _param.getRootRef, getAriaLabel = _param.getAriaLabel, getAriaValueText = _param.getAriaValueText, onChange = _param.onChange, restProps = _object_without_properties(_param, [
+    ] : min : _param_defaultValue, disabled = _param.disabled, className = _param.className, getRootRef = _param.getRootRef, getAriaLabel = _param.getAriaLabel, getAriaValueText = _param.getAriaValueText, onChange = _param.onChange, withTooltip = _param.withTooltip, restProps = _object_without_properties(_param, [
         "step",
         "min",
         "max",
@@ -34,7 +34,8 @@ var sizeYClassNames = _define_property({
         "getRootRef",
         "getAriaLabel",
         "getAriaValueText",
-        "onChange"
+        "onChange",
+        "withTooltip"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var isControlled = valueProp !== undefined;
@@ -156,6 +157,7 @@ var sizeYClassNames = _define_property({
             // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
             zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
         },
+        withTooltip: withTooltip,
         inputProps: {
             "data-type": "start",
             "ref": thumbStartInputRef,
@@ -175,6 +177,7 @@ var sizeYClassNames = _define_property({
         style: {
             left: "".concat(endReversedValueInPercent, "%")
         },
+        withTooltip: withTooltip,
         inputProps: {
             "data-type": "end",
             "ref": thumbEndInputRef,

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?(index: number): string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?(value: number, index: number): string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (nextValue: InternalValueState, event: TouchEvent) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","SizeType","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","COMPACT","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","sizeY","isControlled","undefined","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","REGULAR","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?(index: number): string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?(value: number, index: number): string;\n  withTooltip?: boolean;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  withTooltip,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (nextValue: InternalValueState, event: TouchEvent) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","SizeType","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","COMPACT","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","restProps","sizeY","isControlled","undefined","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","REGULAR","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"mappings":"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"}

package/dist/components/Slider/SliderThumb/SliderThumb.d.ts

@@ -4,6 +4,7 @@ interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute
     className?: string;
     style?: React.CSSProperties;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & HasDataAttribute;
+    withTooltip?: boolean;
 }
-export declare const SliderThumb: ({ className, getRootRef, inputProps, ...restProps }: SliderThumbProps) => React.JSX.Element;
+export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, ...restProps }: SliderThumbProps) => React.JSX.Element;
 export {};

package/dist/components/Slider/SliderThumb/SliderThumb.js

@@ -1,21 +1,64 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useBooleanState } from "../../../hooks/useBooleanState";
+import { useExternRef } from "../../../hooks/useExternRef";
 import { useFocusVisible } from "../../../hooks/useFocusVisible";
+import { arrowMiddleware, convertFloatingDataToReactCSSProperties, flipMiddleware, offsetMiddleware, shiftMiddleware, useFloating } from "../../../lib/floating";
 import { FocusVisible } from "../../FocusVisible/FocusVisible";
+import { TooltipBase } from "../../TooltipBase/TooltipBase";
 export var SliderThumb = function(_param) {
-    var className = _param.className, getRootRef = _param.getRootRef, inputProps = _param.inputProps, restProps = _object_without_properties(_param, [
+    var className = _param.className, getRootRef = _param.getRootRef, inputProps = _param.inputProps, withTooltip = _param.withTooltip, restProps = _object_without_properties(_param, [
         "className",
         "getRootRef",
-        "inputProps"
+        "inputProps",
+        "withTooltip"
     ]);
     var _useFocusVisible = useFocusVisible(false), focusVisible = _useFocusVisible.focusVisible, onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
-    return /*#__PURE__*/ React.createElement("span", _object_spread({
-        ref: getRootRef,
+    var _React_useState = _sliced_to_array(React.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
+    var memoizedMiddlewares = React.useMemo(function() {
+        return [
+            offsetMiddleware({
+                crossAxis: 0,
+                mainAxis: 15
+            }),
+            flipMiddleware(),
+            shiftMiddleware({
+                padding: 8
+            }),
+            arrowMiddleware({
+                element: arrowRef
+            })
+        ];
+    }, [
+        arrowRef
+    ]);
+    var _useFloating = useFloating({
+        placement: "top",
+        middleware: memoizedMiddlewares
+    }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, floatingPositionStrategy = _useFloating.strategy, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow, updateTooltipPosition = _useFloating.update;
+    var _useBooleanState = useBooleanState(false), isHovered = _useBooleanState.value, setHoveredTrue = _useBooleanState.setTrue, setHoveredFalse = _useBooleanState.setFalse;
+    var handleRootRef = useExternRef(getRootRef, refs.setReference);
+    var shouldShowTooltip = withTooltip && (focusVisible || isHovered);
+    var inputValue = inputProps && inputProps.value;
+    React.useEffect(function udpateTooltipPositionOnValueChange() {
+        if (shouldShowTooltip && inputValue !== "undefined") {
+            updateTooltipPosition();
+        }
+    }, [
+        inputValue,
+        updateTooltipPosition,
+        shouldShowTooltip
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", _object_spread_props(_object_spread({}, restProps), {
+        ref: handleRootRef,
+        onMouseEnter: setHoveredTrue,
+        onMouseLeave: setHoveredFalse,
         className: classNames("vkuiSliderThumb", focusVisible && "vkuiSliderThumb--focused", className)
-    }, restProps), /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({}, inputProps), {
+    }), /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({}, inputProps), {
         type: "range",
         className: "vkuiSliderThumb__nativeInput",
         "aria-orientation": "horizontal",
@@ -24,6 +67,14 @@ export var SliderThumb = function(_param) {
     })), /*#__PURE__*/ React.createElement(FocusVisible, {
         visible: focusVisible,
         mode: "outside"
+    })), shouldShowTooltip && /*#__PURE__*/ React.createElement(TooltipBase, {
+        appearance: "neutral",
+        getRootRef: refs.setFloating,
+        floatingStyle: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY),
+        arrowCoords: arrowCoords,
+        arrowPlacement: resolvedPlacement,
+        getArrowRef: setArrowRef,
+        text: inputValue
     }));
 };
 

package/dist/components/Slider/SliderThumb/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\n    >\n      <input\n        {...inputProps}\n        type=\"range\"\n        className={styles['SliderThumb__nativeInput']}\n        aria-orientation=\"horizontal\"\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","FocusVisible","SliderThumb","className","getRootRef","inputProps","restProps","focusVisible","onBlur","onFocus","span","ref","input","type","aria-orientation","visible","mode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,YAAY,QAAQ,kCAAkC;AAW/D,OAAO,IAAMC,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAHHH;QACAC;QACAC;;IAGA,IAA0CL,mBAAAA,gBAAgB,QAAlDO,eAAkCP,iBAAlCO,cAAcC,SAAoBR,iBAApBQ,QAAQC,UAAYT,iBAAZS;IAE9B,qBACE,oBAACC;QACCC,KAAKP;QACLD,WAAWJ,8BAETQ,4CACAJ;OAEEG,0BAEJ,oBAACM,iDACKP;QACJQ,MAAK;QACLV,SAAS;QACTW,oBAAiB;QACjBN,QAAQA;QACRC,SAASA;uBAEX,oBAACR;QAAac,SAASR;QAAcS,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport {\n  arrowMiddleware,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  offsetMiddleware,\n  shiftMiddleware,\n  useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n  withTooltip?: boolean;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  withTooltip,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    return [\n      offsetMiddleware({\n        crossAxis: 0,\n        mainAxis: 15,\n      }),\n      flipMiddleware(),\n      shiftMiddleware({ padding: 8 }),\n      arrowMiddleware({\n        element: arrowRef,\n      }),\n    ];\n  }, [arrowRef]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    strategy: floatingPositionStrategy,\n    middlewareData: { arrow: arrowCoords },\n    update: updateTooltipPosition,\n  } = useFloating({\n    placement: 'top',\n    middleware: memoizedMiddlewares,\n  });\n\n  const {\n    value: isHovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n  const shouldShowTooltip = withTooltip && (focusVisible || isHovered);\n\n  const inputValue = inputProps && inputProps.value;\n  React.useEffect(\n    function udpateTooltipPositionOnValueChange() {\n      if (shouldShowTooltip && inputValue !== 'undefined') {\n        updateTooltipPosition();\n      }\n    },\n    [inputValue, updateTooltipPosition, shouldShowTooltip],\n  );\n\n  return (\n    <React.Fragment>\n      <span\n        {...restProps}\n        ref={handleRootRef}\n        onMouseEnter={setHoveredTrue}\n        onMouseLeave={setHoveredFalse}\n        className={classNames(\n          styles['SliderThumb'],\n          focusVisible && styles['SliderThumb--focused'],\n          className,\n        )}\n      >\n        <input\n          {...inputProps}\n          type=\"range\"\n          className={styles['SliderThumb__nativeInput']}\n          aria-orientation=\"horizontal\"\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n        <FocusVisible visible={focusVisible} mode=\"outside\" />\n      </span>\n      {shouldShowTooltip && (\n        <TooltipBase\n          appearance=\"neutral\"\n          getRootRef={refs.setFloating}\n          floatingStyle={convertFloatingDataToReactCSSProperties(\n            floatingPositionStrategy,\n            floatingDataX,\n            floatingDataY,\n          )}\n          arrowCoords={arrowCoords}\n          arrowPlacement={resolvedPlacement}\n          getArrowRef={setArrowRef}\n          text={inputValue}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","FocusVisible","TooltipBase","SliderThumb","className","getRootRef","inputProps","withTooltip","restProps","focusVisible","onBlur","onFocus","useState","arrowRef","setArrowRef","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","placement","middleware","x","floatingDataX","y","floatingDataY","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","input","type","aria-orientation","visible","mode","appearance","setFloating","floatingStyle","arrowPlacement","getArrowRef","text"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,wBAAwB;AAE/B,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,WAAW,QAAQ,gCAAgC;AAY5D,OAAO,IAAMC,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACAC,qBAAAA,aACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0Cb,mBAAAA,gBAAgB,QAAlDe,eAAkCf,iBAAlCe,cAAcC,SAAoBhB,iBAApBgB,QAAQC,UAAYjB,iBAAZiB;IAC9B,IAAgCrB,mCAAAA,MAAMsB,QAAQ,CAAwB,WAA/DC,WAAyBvB,oBAAfwB,cAAexB;IAEhC,IAAMyB,sBAAsBzB,MAAM0B,OAAO,CAAC;QACxC,OAAO;YACLlB,iBAAiB;gBACfmB,WAAW;gBACXC,UAAU;YACZ;YACArB;YACAE,gBAAgB;gBAAEoB,SAAS;YAAE;YAC7BxB,gBAAgB;gBACdyB,SAASP;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,IAQIb,eAAAA,YAAY;QACdqB,WAAW;QACXC,YAAYP;IACd,IAVEQ,AAAGC,gBAODxB,aAPFuB,GACAE,AAAGC,gBAMD1B,aANFyB,GACAJ,AAAWM,oBAKT3B,aALFqB,WACAO,OAIE5B,aAJF4B,MACAC,AAAUC,2BAGR9B,aAHF6B,wCAGE7B,aAFF+B,gBAAkBC,AAAOC,0CAAPD,OAClBE,AAAQC,wBACNnC,aADFkC;IAMF,IAII1C,mBAAAA,gBAAgB,QAHlB4C,AAAOC,YAGL7C,iBAHF4C,OACAE,AAASC,iBAEP/C,iBAFF8C,SACAE,AAAUC,kBACRjD,iBADFgD;IAGF,IAAME,gBAAgBjD,aAA8BY,YAAYuB,KAAKe,YAAY;IAEjF,IAAMC,oBAAoBrC,eAAgBE,CAAAA,gBAAgB4B,SAAQ;IAElE,IAAMQ,aAAavC,cAAcA,WAAW8B,KAAK;IACjD9C,MAAMwD,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDV;QACF;IACF,GACA;QAACU;QAAYV;QAAuBS;KAAkB;IAGxD,qBACE,oBAACtD,MAAM0D,QAAQ,sBACb,oBAACC,gDACKzC;QACJ0C,KAAKR;QACLS,cAAcZ;QACda,cAAcX;QACdrC,WAAWb,8BAETkB,4CACAL;sBAGF,oBAACiD,iDACK/C;QACJgD,MAAK;QACLlD,SAAS;QACTmD,oBAAiB;QACjB7C,QAAQA;QACRC,SAASA;uBAEX,oBAACV;QAAauD,SAAS/C;QAAcgD,MAAK;SAE3Cb,mCACC,oBAAC1C;QACCwD,YAAW;QACXrD,YAAYuB,KAAK+B,WAAW;QAC5BC,eAAehE,wCACbkC,0BACAN,eACAE;QAEFO,aAAaA;QACb4B,gBAAgBlC;QAChBmC,aAAahD;QACbiD,MAAMlB;;AAKhB,EAAE"}

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement> {
     /**
      * Название кнопки действия в уведомлении
      * Не может использоваться одновременно с `subtitle`
@@ -50,4 +51,4 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, offsetY, style, ...restProps }: SnackbarProps) => React.JSX.Element;
+export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, subtitle, offsetY, style, ...restProps }: SnackbarProps) => React.JSX.Element;

package/dist/components/Snackbar/Snackbar.js

@@ -13,13 +13,18 @@ import { Platform } from "../../lib/platform";
 import { rubber } from "../../lib/touch";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { Button } from "../Button/Button";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Touch } from "../Touch/Touch";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Subhead } from "../Typography/Subhead/Subhead";
+var stylesLayout = {
+    vertical: "vkuiSnackbar--layout-vertical",
+    horizontal: "vkuiSnackbar--layout-horizontal"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */ export var Snackbar = function(_param) {
-    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, subtitle = _param.subtitle, offsetY = _param.offsetY, style = _param.style, restProps = _object_without_properties(_param, [
+    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, subtitle = _param.subtitle, offsetY = _param.offsetY, style = _param.style, restProps = _object_without_properties(_param, [
         "children",
         "layout",
         "action",
@@ -29,7 +34,6 @@ import { Subhead } from "../Typography/Subhead/Subhead";
         "onActionClick",
         "onClose",
         "mode",
-        "className",
         "subtitle",
         "offsetY",
         "style"
@@ -118,11 +122,8 @@ import { Subhead } from "../Typography/Subhead/Subhead";
         closeTimeout
     ]);
     var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
-    return /*#__PURE__*/ React.createElement(AppRootPortal, null, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiSnackbar", platform === Platform.IOS && "vkuiSnackbar--ios", {
-            vertical: "vkuiSnackbar--layout-vertical",
-            horizontal: "vkuiSnackbar--layout-horizontal"
-        }[layout], mode === "dark" && "vkuiSnackbar--mode-dark", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className),
+    return /*#__PURE__*/ React.createElement(AppRootPortal, null, /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiSnackbar", platform === Platform.IOS && "vkuiSnackbar--ios", stylesLayout[layout], mode === "dark" && "vkuiSnackbar--mode-dark", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop"),
         style: offsetY ? _object_spread_props(_object_spread({}, style), {
             bottom: offsetY
         }) : style

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  offsetY,\n  style,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","offsetY","style","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","bottom","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nconst stylesLayout = {\n  vertical: styles['Snackbar--layout-vertical'],\n  horizontal: styles['Snackbar--layout-horizontal'],\n};\n\nexport interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  style,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          stylesLayout[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n        )}\n        style={offsetY ? { ...style, bottom: offsetY } : style}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </RootComponent>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","RootComponent","Touch","Paragraph","Subhead","stylesLayout","vertical","horizontal","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","baseClassName","bottom","className","getRootRef","onStart","onMoveX","onEnd","div","ref","align","appearance","size","onClick"],"mappings":"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"}

package/dist/components/Spacing/Spacing.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasChildren } from '../../types';
-export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
      */
@@ -9,4 +9,4 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasC
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => React.JSX.Element;
+export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => React.JSX.Element;