@vkontakte/vkui 5.7.2 → 5.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","div","classNames","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","SegmentedControlOption","key","checked"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;;+DAzCU;oBACI;6BACG;iCACU;qBAClB;0BACG;yCACiB;wBACjB;sCAEc;IAqCtBC;AAlCjB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAsBnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMP,mBAAmB;6BAC9BQ,MAAAA,gCAAO,mBACPC,cAAAA,MACAR,iBAAAA,SACAS,oBAAAA,yCACAC,cAAAA,iDAAeV,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYW,KAAK,wBAChCC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAR;QACAS;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKC,IAAAA,YAAK;IAEhB,IAA0BC,8CAAAA,IAAAA,0CAAuB,EAAC;QAChDN,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBS,6BAAZN,WAAYM;IAM1B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,cAAcvB,QAAQwB,SAAS,CAAC,SAACC;eAAWA,OAAOd,KAAK,KAAKA;;IAEnEe,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChExB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACkB;KAAY;IAEhB,IAAMO,aAAa,AAAC,cAA+B,OAAlB,MAAMP,aAAY;IAEnD,qBACE,qBAACQ,mDACKd;QACJJ,WAAWmB,IAAAA,gBAAU,0BAEnBV,UAAUnB,oBAAQ,CAAC8B,OAAO,IAAIhC,eAAe,CAACqB,MAAM,EACpDf,SAAS,uCACTM;QAEFqB,KAAKzB;sBAEL,qBAACsB;QAAII,MAAK;QAAatB,SAAS;OAC7BU,cAAc,CAAC,mBACd,qBAACQ;QACCK,eAAAA;QACAvB,SAAS;QACTwB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMtC,QAAQuC,MAAM,EAAC;YAC/BC,WAAWV;YACXW,iBAAiBX;QACnB;QAGH9B,QAAQ0C,GAAG,CAAC;YAAGC,eAAAA,OAAO9B,AAAW+B,yBAAX/B,WAA+BgC;YAAtCF;YAAO9B;;eACrB,qBAACiC,8CAAsB;YACrBC,KAAK,AAAC,GAAoB,OAAlBF,YAAYlC,KAAK;WACrBkC;YACJhC,WAAWmB,IAAAA,gBAAU,kCAAqCY;YAC1DpC,MAAMA,iBAAAA,kBAAAA,OAAQU;YACd8B,SAASrC,UAAUkC,YAAYlC,KAAK;YACpCG,UAAU;uBAAMA,SAAS+B,YAAYlC,KAAK;;YAEzCgC;IACqB;AAKlC"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","RootComponent","baseClassName","classNames","COMPACT","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","SegmentedControlOption","key","checked"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;;+DAzCU;oBACI;6BACG;iCACU;qBAClB;0BACG;yCACiB;wBACjB;6BAEK;sCACS;IAmCtBC;AAhCjB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAqBnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMP,mBAAmB;6BAC9BQ,MAAAA,gCAAO,mBACPC,cAAAA,MACAR,iBAAAA,sCACAS,cAAAA,iDAAeT,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYU,KAAK,wBAChCC,kBAAAA,UACAC,AAAUC,sBAAVD,UACAF,AAAOI,mBAAPJ,OACGK;QAPHR;QACAC;QACAR;QACAS;QACAE;QACAC;QACAF;;IAGA,IAAMM,KAAKC,IAAAA,YAAK;IAEhB,IAA0BC,8CAAAA,IAAAA,0CAAuB,EAAC;QAChDN,UAAUC;QACVH,OAAOI;QACPL,cAAAA;IACF,QAJOC,QAAmBQ,6BAAZN,WAAYM;IAM1B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,cAAcrB,QAAQsB,SAAS,CAAC,SAACC;eAAWA,OAAOb,KAAK,KAAKA;;IAEnEc,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEtB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACgB;KAAY;IAEhB,IAAMO,aAAa,AAAC,cAA+B,OAAlB,MAAMP,aAAY;IAEnD,qBACE,qBAACQ,4BAAa,8CACRd;QACJe,eAAeC,IAAAA,gBAAU,0BAEvBX,UAAUjB,oBAAQ,CAAC6B,OAAO,IAAI/B,eAAe,CAACmB,MAAM,EACpDb,SAAS;sBAGX,qBAAC0B;QAAIC,MAAK;QAAaC,SAAS;OAC7Bd,cAAc,CAAC,mBACd,qBAACY;QACCG,eAAAA;QACAD,SAAS;QACTE,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMtC,QAAQuC,MAAM,EAAC;YAC/BC,WAAWZ;YACXa,iBAAiBb;QACnB;QAGH5B,QAAQ0C,GAAG,CAAC;YAAGC,eAAAA,OAAOR,AAAWS,yBAAXT,WAA+BU;YAAtCF;YAAOR;;eACrB,qBAACW,8CAAsB;YACrBC,KAAK,AAAC,GAAoB,OAAlBF,YAAYnC,KAAK;WACrBmC;YACJV,WAAWJ,IAAAA,gBAAU,kCAAqCa;YAC1DpC,MAAMA,iBAAAA,kBAAAA,OAAQQ;YACdgC,SAAStC,UAAUmC,YAAYnC,KAAK;YACpCE,UAAU;uBAAMA,SAASiC,YAAYnC,KAAK;;YAEzCiC;IACqB;AAKlC"}

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasRef } from '../../../types';
-export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+import { HasRef, HasRootRef } from '../../../types';
+export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControlOption: ({ getRef, className, style, children, ...restProps }: SegmentedControlOptionProps) => React.JSX.Element;
+export declare const SegmentedControlOption: ({ getRef, className, style, children, getRootRef, ...restProps }: SegmentedControlOptionProps) => React.JSX.Element;

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js

@@ -20,15 +20,17 @@ var _FocusVisible = require("../../FocusVisible/FocusVisible");
 var _Headline = require("../../Typography/Headline/Headline");
 var _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
 var SegmentedControlOption = function(_param) {
-    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, restProps = _object_without_properties._(_param, [
+    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
         "getRef",
         "className",
         "style",
-        "children"
+        "children",
+        "getRootRef"
     ]);
     var _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(), focusVisible = _useFocusVisible1.focusVisible, onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.onFocus;
     return /*#__PURE__*/ _react.createElement("label", {
         className: (0, _vkjs.classNames)("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", className),
+        ref: getRootRef,
         style: style
     }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, _object_spread_props._(_object_spread._({}, restProps), {
         Component: "input",

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["SegmentedControlOption","getRef","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","label","classNames","checked","VisuallyHidden","Component","getRootRef","type","callMultiple","Headline","level","weight","FocusVisible","visible","mode"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;+BACK;4BACH;4BAEA;wBACJ;8BACM;AAUxB,IAAMA,yBAAyB;QACpCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCR,WAAWS,IAAAA,gBAAU,gCAEnBN,UAAUO,OAAO,2CACjBV;QAEFC,OAAOA;qBAEP,qBAACU,8BAAc,8CACTR;QACJS,WAAU;QACVC,YAAYd;QACZe,MAAK;QACLR,QAAQS,IAAAA,0BAAY,EAACT,QAAQH,UAAUG,MAAM;QAC7CC,SAASQ,IAAAA,0BAAY,EAACR,SAASJ,UAAUI,OAAO;uBAElD,qBAACS,kBAAQ;QAAChB,SAAS;QAA6CiB,OAAM;QAAIC,QAAO;OAC9EhB,yBAEH,qBAACiB,0BAAY;QAACC,SAASf;QAAcgB,MAAK;;AAGhD"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  getRootRef,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["SegmentedControlOption","getRef","className","style","children","getRootRef","restProps","useFocusVisible","focusVisible","onBlur","onFocus","label","classNames","checked","ref","VisuallyHidden","Component","type","callMultiple","Headline","level","weight","FocusVisible","visible","mode"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;+DAlBU;oBACI;+BACK;4BACH;4BAEA;wBACJ;8BACM;AAWxB,IAAMA,yBAAyB;QACpCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCT,WAAWU,IAAAA,gBAAU,gCAEnBN,UAAUO,OAAO,2CACjBX;QAEFY,KAAKT;QACLF,OAAOA;qBAEP,qBAACY,8BAAc,8CACTT;QACJU,WAAU;QACVX,YAAYJ;QACZgB,MAAK;QACLR,QAAQS,IAAAA,0BAAY,EAACT,QAAQH,UAAUG,MAAM;QAC7CC,SAASQ,IAAAA,0BAAY,EAACR,SAASJ,UAAUI,OAAO;uBAElD,qBAACS,kBAAQ;QAACjB,SAAS;QAA6CkB,OAAM;QAAIC,QAAO;OAC9EjB,yBAEH,qBAACkB,0BAAY;QAACC,SAASf;QAAcgB,MAAK;;AAGhD"}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasAlign, HasRootRef } from '../../types';
+import { HasAlign, HTMLAttributesWithRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
+export interface SelectMimicryProps extends HTMLAttributesWithRootRef<HTMLElement>, HasAlign, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;
     disabled?: boolean;
     selectType?: SelectType;

package/dist/cjs/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 { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\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  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":["SelectMimicry","sizeYClassNames","none","SizeType","COMPACT","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","autoFocus","restProps","rootRef","useExternRef","useAdaptivity","sizeY","title","useAutoFocus","FormField","undefined","classNames","REGULAR","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;;+DAhCU;oBACI;6BACG;4BACD;4BACA;0BACJ;sBACsB;4BAElB;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAgBZ,IAAMJ,gBAAgB;iCAC3BK,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,qBAACC,0BAAY,mDACrBC,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,IAAME,UAAUC,IAAAA,0BAAY,EAACb;IAE7B,IAA2Bc,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,QAAQlB,YAAYD;IAE1BoB,IAAAA,0BAAY,EAACL,SAASF;IAEtB,qBACE,qBAACQ,oBAAS,8CACJP;QACJf,UAAUM,WAAWiB,YAAYvB;QACjCa,WAAWW,IAAAA,gBAAU,gBAEnBL,UAAUrB,oBAAQ,CAAC2B,OAAO,IAAI7B,eAAe,CAACuB,MAAM,EACpD,CAACjB,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYY;QACZT,SAASD,WAAWiB,YAAYhB;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPiB,MAAMC,IAAAA,sCAA8B,EAAChB;QACrCC,QAAQA;sBAER,qBAACgB;QAAIf,SAAS;qBACZ,qBAACgB,kCAAgB;QAAClB,YAAYA;QAAYE,SAAS;OAChDO;AAKX"}
+{"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":["SelectMimicry","sizeYClassNames","none","SizeType","COMPACT","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","autoFocus","restProps","rootRef","useExternRef","useAdaptivity","sizeY","title","useAutoFocus","FormField","undefined","classNames","REGULAR","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;+DA/BU;oBACI;6BACG;4BACD;4BACA;0BACJ;sBACsB;4BAElB;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAeZ,IAAMJ,gBAAgB;iCAC3BK,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,qBAACC,0BAAY,mDACrBC,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,IAAME,UAAUC,IAAAA,0BAAY,EAACb;IAE7B,IAA2Bc,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,QAAQlB,YAAYD;IAE1BoB,IAAAA,0BAAY,EAACL,SAASF;IAEtB,qBACE,qBAACQ,oBAAS,8CACJP;QACJf,UAAUM,WAAWiB,YAAYvB;QACjCa,WAAWW,IAAAA,gBAAU,gBAEnBL,UAAUrB,oBAAQ,CAAC2B,OAAO,IAAI7B,eAAe,CAACuB,MAAM,EACpD,CAACjB,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYY;QACZT,SAASD,WAAWiB,YAAYhB;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPiB,MAAMC,IAAAA,sCAA8B,EAAChB;QACrCC,QAAQA;sBAER,qBAACgB;QAAIf,SAAS;qBACZ,qBAACgB,kCAAgB;QAAClB,YAAYA;QAAYE,SAAS;OAChDO;AAKX"}

package/dist/cjs/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/cjs/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":["SelectTypography","selectType","children","restProps","Text","weight"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;oBAGF;AASd,IAAMA,mBAAmB;mCAC9BC,YAAAA,4CAAa,+BACbC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,UAAI;QAACC,QAAQJ,eAAe,WAAW,MAAM;OAASE,YACpDD;AAGP"}
+{"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":["SelectTypography","selectType","children","restProps","Text","weight"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;+DAdU;oBAGF;AAWd,IAAMA,mBAAmB;mCAC9BC,YAAAA,4CAAa,+BACbC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,UAAI;QAACC,QAAQJ,eAAe,WAAW,MAAM;OAASE,YACpDD;AAGP"}

package/dist/cjs/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/cjs/components/Separator/Separator.js

@@ -14,13 +14,13 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 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: (0, _vkjs.classNames)("vkuiSeparator", !wide && "vkuiSeparator--padded", className)
+    return _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiSeparator", !wide && "vkuiSeparator--padded")
     }), /*#__PURE__*/ _react.createElement("hr", {
         className: "vkuiSeparator__in"
     }));

package/dist/cjs/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":["Separator","wide","className","restProps","div","classNames","hr"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;AAapB,IAAMA,YAAY;QAAGC,cAAAA,MAAMC,mBAAAA,WAAcC;QAApBF;QAAMC;;WAChC,qBAACE,mDACKD;QACJD,WAAWG,IAAAA,gBAAU,mBAAsB,CAACJ,iCAAqCC;sBAEjF,qBAACI;QAAGJ,SAAS;;AACV"}
+{"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":["Separator","wide","restProps","RootComponent","baseClassName","classNames","hr","className"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;+DAhBU;oBACI;6BAEG;AAavB,IAAMA,YAAY;QAAGC,cAAAA,MAASC;QAATD;;WAC1B,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,mBAAsB,CAACJ;sBAEhD,qBAACK;QAAGC,SAAS;;AACA"}

package/dist/cjs/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/cjs/components/Slider/Slider.js

@@ -31,7 +31,7 @@ var Slider = function(_param) {
     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",
@@ -43,7 +43,8 @@ var Slider = function(_param) {
         "getRootRef",
         "getAriaLabel",
         "getAriaValueText",
-        "onChange"
+        "onChange",
+        "withTooltip"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var isControlled = valueProp !== undefined;
@@ -165,6 +166,7 @@ var Slider = function(_param) {
             // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
             zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
         },
+        withTooltip: withTooltip,
         inputProps: {
             "data-type": "start",
             "ref": thumbStartInputRef,
@@ -184,6 +186,7 @@ var Slider = function(_param) {
         style: {
             left: "".concat(endReversedValueInPercent, "%")
         },
+        withTooltip: withTooltip,
         inputProps: {
             "data-type": "end",
             "ref": thumbEndInputRef,

package/dist/cjs/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":["Slider","sizeYClassNames","none","SizeType","COMPACT","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","useAdaptivity","sizeY","isControlled","undefined","React","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","getDraggingTypeByTargetDataset","originalEvent","target","nextStartX","offsetToValue","nextDragging","snapDirection","updatedInternalStateValue","updateInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","updateInternalStateValueByNativeChange","Number","Touch","data-value","classNames","REGULAR","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","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":["Slider","sizeYClassNames","none","SizeType","COMPACT","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","restProps","useAdaptivity","sizeY","isControlled","undefined","React","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","getDraggingTypeByTargetDataset","originalEvent","target","nextStartX","offsetToValue","nextDragging","snapDirection","updatedInternalStateValue","updateInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","updateInternalStateValueByNativeChange","Number","Touch","data-value","classNames","REGULAR","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps"],"mappings":"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"}

package/dist/cjs/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/cjs/components/Slider/SliderThumb/SliderThumb.js

@@ -12,21 +12,64 @@ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcar
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _useBooleanState = require("../../../hooks/useBooleanState");
+var _useExternRef = require("../../../hooks/useExternRef");
 var _useFocusVisible = require("../../../hooks/useFocusVisible");
+var _floating = require("../../../lib/floating");
 var _FocusVisible = require("../../FocusVisible/FocusVisible");
+var _TooltipBase = require("../../TooltipBase/TooltipBase");
 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 _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(false), focusVisible = _useFocusVisible1.focusVisible, onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.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 [
+            (0, _floating.offsetMiddleware)({
+                crossAxis: 0,
+                mainAxis: 15
+            }),
+            (0, _floating.flipMiddleware)(),
+            (0, _floating.shiftMiddleware)({
+                padding: 8
+            }),
+            (0, _floating.arrowMiddleware)({
+                element: arrowRef
+            })
+        ];
+    }, [
+        arrowRef
+    ]);
+    var _useFloating = (0, _floating.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 _useBooleanState1 = (0, _useBooleanState.useBooleanState)(false), isHovered = _useBooleanState1.value, setHoveredTrue = _useBooleanState1.setTrue, setHoveredFalse = _useBooleanState1.setFalse;
+    var handleRootRef = (0, _useExternRef.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: (0, _vkjs.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",
@@ -35,6 +78,14 @@ var SliderThumb = function(_param) {
     })), /*#__PURE__*/ _react.createElement(_FocusVisible.FocusVisible, {
         visible: focusVisible,
         mode: "outside"
+    })), shouldShowTooltip && /*#__PURE__*/ _react.createElement(_TooltipBase.TooltipBase, {
+        appearance: "neutral",
+        getRootRef: refs.setFloating,
+        floatingStyle: (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY),
+        arrowCoords: arrowCoords,
+        arrowPlacement: resolvedPlacement,
+        getArrowRef: setArrowRef,
+        text: inputValue
     }));
 };
 

package/dist/cjs/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":["SliderThumb","className","getRootRef","inputProps","restProps","useFocusVisible","focusVisible","onBlur","onFocus","span","ref","classNames","input","type","aria-orientation","FocusVisible","visible","mode"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;+BACK;4BAEH;AAWtB,IAAMA,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAHHH;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,EAAC,QAAlDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCC,KAAKR;QACLD,WAAWU,IAAAA,gBAAU,qBAEnBL,4CACAL;OAEEG,0BAEJ,qBAACQ,qDACKT;QACJU,MAAK;QACLZ,SAAS;QACTa,oBAAiB;QACjBP,QAAQA;QACRC,SAASA;uBAEX,qBAACO,0BAAY;QAACC,SAASV;QAAcW,MAAK;;AAGhD"}
+{"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":["SliderThumb","className","getRootRef","inputProps","withTooltip","restProps","useFocusVisible","focusVisible","onBlur","onFocus","React","useState","arrowRef","setArrowRef","memoizedMiddlewares","useMemo","offsetMiddleware","crossAxis","mainAxis","flipMiddleware","shiftMiddleware","padding","arrowMiddleware","element","useFloating","placement","middleware","x","floatingDataX","y","floatingDataY","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","useBooleanState","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","handleRootRef","useExternRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","classNames","input","type","aria-orientation","FocusVisible","visible","mode","TooltipBase","appearance","setFloating","floatingStyle","convertFloatingDataToReactCSSProperties","arrowPlacement","getArrowRef","text"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;;+DA3BU;oBACI;+BACK;4BACH;+BACG;wBAQzB;4BAEsB;2BACD;AAYrB,IAAMA,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACAC,qBAAAA,aACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,EAAC,QAAlDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAC9B,IAAgCC,qCAAAA,OAAMC,QAAQ,CAAwB,WAA/DC,WAAyBF,oBAAfG,cAAeH;IAEhC,IAAMI,sBAAsBJ,OAAMK,OAAO,CAAC;QACxC,OAAO;YACLC,IAAAA,0BAAgB,EAAC;gBACfC,WAAW;gBACXC,UAAU;YACZ;YACAC,IAAAA,wBAAc;YACdC,IAAAA,yBAAe,EAAC;gBAAEC,SAAS;YAAE;YAC7BC,IAAAA,yBAAe,EAAC;gBACdC,SAASX;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,IAQIY,eAAAA,IAAAA,qBAAW,EAAC;QACdC,WAAW;QACXC,YAAYZ;IACd,IAVEa,AAAGC,gBAODJ,aAPFG,GACAE,AAAGC,gBAMDN,aANFK,GACAJ,AAAWM,oBAKTP,aALFC,WACAO,OAIER,aAJFQ,MACAC,AAAUC,2BAGRV,aAHFS,wCAGET,aAFFW,gBAAkBC,AAAOC,0CAAPD,OAClBE,AAAQC,wBACNf,aADFc;IAMF,IAIIE,oBAAAA,IAAAA,gCAAe,EAAC,QAHlBC,AAAOC,YAGLF,kBAHFC,OACAE,AAASC,iBAEPJ,kBAFFG,SACAE,AAAUC,kBACRN,kBADFK;IAGF,IAAME,gBAAgBC,IAAAA,0BAAY,EAAkB9C,YAAY8B,KAAKiB,YAAY;IAEjF,IAAMC,oBAAoB9C,eAAgBG,CAAAA,gBAAgBmC,SAAQ;IAElE,IAAMS,aAAahD,cAAcA,WAAWsC,KAAK;IACjD/B,OAAM0C,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDZ;QACF;IACF,GACA;QAACY;QAAYZ;QAAuBW;KAAkB;IAGxD,qBACE,qBAACxC,OAAM4C,QAAQ,sBACb,qBAACC,oDACKlD;QACJmD,KAAKT;QACLU,cAAcb;QACdc,cAAcZ;QACd7C,WAAW0D,IAAAA,gBAAU,qBAEnBpD,4CACAN;sBAGF,qBAAC2D,qDACKzD;QACJ0D,MAAK;QACL5D,SAAS;QACT6D,oBAAiB;QACjBtD,QAAQA;QACRC,SAASA;uBAEX,qBAACsD,0BAAY;QAACC,SAASzD;QAAc0D,MAAK;SAE3Cf,mCACC,qBAACgB,wBAAW;QACVC,YAAW;QACXjE,YAAY8B,KAAKoC,WAAW;QAC5BC,eAAeC,IAAAA,iDAAuC,EACpDpC,0BACAN,eACAE;QAEFO,aAAaA;QACbkC,gBAAgBxC;QAChByC,aAAa3D;QACb4D,MAAMtB;;AAKhB"}

package/dist/cjs/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/cjs/components/Snackbar/Snackbar.js

@@ -24,11 +24,16 @@ var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _Button = require("../Button/Button");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Touch = require("../Touch/Touch");
 var _Paragraph = require("../Typography/Paragraph/Paragraph");
 var _Subhead = require("../Typography/Subhead/Subhead");
+var stylesLayout = {
+    vertical: "vkuiSnackbar--layout-vertical",
+    horizontal: "vkuiSnackbar--layout-horizontal"
+};
 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",
@@ -38,7 +43,6 @@ var Snackbar = function(_param) {
         "onActionClick",
         "onClose",
         "mode",
-        "className",
         "subtitle",
         "offsetY",
         "style"
@@ -127,11 +131,8 @@ var Snackbar = function(_param) {
         closeTimeout
     ]);
     var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
-    return /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiSnackbar", platform === _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.AppRootPortal, null, /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar", platform === _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