@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\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 { 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 styles from './SimpleCell.module.css';\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;\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  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\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          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["SimpleCell","platformClassNames","ios","classNames","android","vkcom","sizeYClassNames","none","SizeType","COMPACT","REGULAR","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","usePlatform","hasAfter","hasReactNode","Platform","IOS","useAdaptivity","sizeY","Tappable","hasOwnProperty","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Icon24Chevron"],"mappings":";;;;+BAyFaA;;;eAAAA;;;;;;;;2DAzFU;qBACO;oBACW;6BACX;2BACF;0BACH;wBACA;wBAEe;wBACf;wBACA;uBACD;AAGxB,IAAMC,qBAAqB;IACzBC,KAAKC,IAAAA,gBAAU,yBAA4B;IAC3CC,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMJ,IAAAA,gBAAU,gCAAmC;GACnD,gBAFsB,MAErBK,oBAAQ,CAACC,OAAO,EAAGN,IAAAA,gBAAU,mCAE5B,2DAJoB,MAMrBK,oBAAQ,CAACE,OAAO,oCANK;AAqEjB,IAAMV,aAAa,iBAgBH;QAfrBW,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,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,WAAWC,IAAAA,kBAAY,EAACX,UAAWC,cAAcO,aAAaI,kBAAQ,CAACC,GAAG;IAChF,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,uCACHT;QACJD,WAAWrB,IAAAA,gBAAU,oBAEnB,0BACAF,mBAAmBkC,cAAc,CAACT,YAC9BzB,kBAAkB,CAACyB,SAAS,GAC5BzB,mBAAmBG,OAAO,EAC9BE,eAAe,CAAC2B,MAAM,EACtBb,qCACAI;QAGDT,sBACD,qBAACqB;QAAIZ,WAAWrB,IAAAA,gBAAU,0BAA6B;OACpDkB,yBACC,qBAACgB,gBAAO;QACNC,WAAU;QACVd,WAAWrB,IAAAA,gBAAU;OAEpBkB,wBAGL,qBAACe;QAAIZ,SAAS;OACXb,kCACC,qBAAC4B;QAAKf,SAAS;OAAgCb,iCAEjD,qBAAC6B,kBAAQ;QAACF,WAAU;QAAOd,SAAS;QAAkCiB,QAAO;OAC1ExB,WAEFY,IAAAA,kBAAY,EAACjB,kCACZ,qBAAC2B;QAAKf,SAAS;OAAgCZ,mBAGlDU,0BACC,qBAACc;QAAIZ,SAAS;OACXX,qCACC,qBAAC0B;QAAKf,SAAS;OAAgCX,oCAEjD,qBAAC6B,kBAAQ;QACPC,WAAW,KAAK;QAChBnB,WAAWrB,IAAAA,gBAAU;OAEpBmB,WAEFR,oCACC,qBAACyB;QAAKf,SAAS;OAAgCV,sBAIpDS,+BACC,qBAACmB,kBAAQ;QACPC,WAAW,KAAK;QAChBnB,WAAWrB,IAAAA,gBAAU;OAEpBoB,iBAINM,IAAAA,kBAAY,EAACb,4BACZ,qBAACwB,kBAAQ;QAACF,WAAU;QAAOG,QAAO;QAAIjB,SAAS;OAC5CR,YAGJY,0BACC,qBAACQ;QAAIZ,WAAWrB,IAAAA,gBAAU,2BAA8B;OACrDe,OACAC,cAAcO,aAAaI,kBAAQ,CAACC,GAAG,kBAAI,qBAACa,oBAAa;AAKpE"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\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 { 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 styles from './SimpleCell.module.css';\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;\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  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\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          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["SimpleCell","platformClassNames","ios","classNames","android","vkcom","sizeYClassNames","none","SizeType","COMPACT","REGULAR","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","usePlatform","hasAfter","hasReactNode","Platform","IOS","useAdaptivity","sizeY","Tappable","hasOwnProperty","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Icon24Chevron"],"mappings":";;;;+BAyFaA;;;eAAAA;;;;;;;;+DAzFU;qBACO;oBACW;6BACX;2BACF;0BACH;wBACA;wBAEe;wBACf;wBACA;uBACD;AAGxB,IAAMC,qBAAqB;IACzBC,KAAKC,IAAAA,yCAAsC;IAC3CC,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMJ,IAAAA,gDAA6C;GACnD,mBAFsB,MAErBK,qBAASC,SAAUN,IAAAA,mDAElB,8DAJoB,MAMrBK,qBAASE,2CANY;AAqEjB,IAAMV,aAAa;QACxBW,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,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAAMC,WAAWC,IAAAA,oBAAaX,UAAWC,cAAcO,aAAaI,mBAASC;IAC7E,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,gEACKT;QACJD,WAAWrB,IAAAA,oCAET,0BACAF,mBAAmBkC,eAAeT,YAC9BzB,kBAAkB,CAACyB,SAAS,GAC5BzB,mBAAmBG,SACvBE,eAAe,CAAC2B,MAAM,EACtBb,qCACAI;QAGDT,sBACD,qBAACqB;QAAIZ,WAAWrB,IAAAA,0CAAuC;OACpDkB,yBACC,qBAACgB;QACCC,WAAU;QACVd,WAAWrB,IAAAA;OAEVkB,wBAGL,qBAACe;QAAIZ,SAAS;OACXb,kCACC,qBAAC4B;QAAKf,SAAS;OAAgCb,iCAEjD,qBAAC6B;QAASF,WAAU;QAAOd,SAAS;QAAkCiB,QAAO;OAC1ExB,WAEFY,IAAAA,oBAAajB,kCACZ,qBAAC2B;QAAKf,SAAS;OAAgCZ,mBAGlDU,0BACC,qBAACc;QAAIZ,SAAS;OACXX,qCACC,qBAAC0B;QAAKf,SAAS;OAAgCX,oCAEjD,qBAAC6B;QACCC,WAAW;QACXnB,WAAWrB,IAAAA;OAEVmB,WAEFR,oCACC,qBAACyB;QAAKf,SAAS;OAAgCV,sBAIpDS,+BACC,qBAACmB;QACCC,WAAW;QACXnB,WAAWrB,IAAAA;OAEVoB,iBAINM,IAAAA,oBAAab,4BACZ,qBAACwB;QAASF,WAAU;QAAOG,QAAO;QAAIjB,SAAS;OAC5CR,YAGJY,0BACC,qBAACQ;QAAIZ,WAAWrB,IAAAA,2CAAwC;OACrDe,OACAC,cAAcO,aAAaI,mBAASC,qBAAO,qBAACa;AAKvD"}

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

@@ -1,7 +1,45 @@
-/// <reference types="react" />
-import { UniversalSliderProps } from '../RangeSlider/UniversalSlider';
-export type SliderProps = UniversalSliderProps<number>;
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { type TouchEvent } from '../Touch/Touch';
+export interface SliderBaseProps extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /**
+     * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.
+     *
+     * > Перебивает `aria-label`.
+     */
+    getAriaLabel?(index: number): string;
+    /**
+     * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.
+     *
+     * Полезно при использовании компонента как неконтролируемого.
+     *
+     * > Перебивает `aria-valuetext`.
+     */
+    getAriaValueText?(value: number, index: number): string;
+}
+export interface SliderProps extends SliderBaseProps {
+    multiple?: false;
+    value?: number;
+    defaultValue?: number;
+    /**
+     * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.
+     */
+    onChange?(value: number, event: TouchEvent): void;
+}
+export interface SliderMultipleProps extends SliderBaseProps {
+    multiple: true;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    /**
+     * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.
+     */
+    onChange?(value: [number, number], event: TouchEvent): void;
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ onChange, min, max, defaultValue, value, ...props }: SliderProps) => JSX.Element;
+export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, ...restProps }: SliderProps | SliderMultipleProps) => React.JSX.Element;

package/dist/cjs/components/Slider/Slider.js

@@ -8,51 +8,196 @@ Object.defineProperty(exports, "Slider", {
         return Slider;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
-var _universalSlider = require("../RangeSlider/UniversalSlider");
+var _useAdaptivity = require("../../hooks/useAdaptivity");
+var _useExternRef = require("../../hooks/useExternRef");
+var _adaptivity = require("../../lib/adaptivity");
+var _Touch = require("../Touch/Touch");
+var _SliderThumb = require("./SliderThumb/SliderThumb");
+var _helpers = require("./helpers");
+var sizeYClassNames = _define_property._({
+    none: "vkuiSlider--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSlider--sizeY-compact");
 var Slider = function(_param) {
-    var onChange = _param.onChange, _param_min = _param.min, min = _param_min === void 0 ? 0 : _param_min, _param_max = _param.max, max = _param_max === void 0 ? 100 : _param_max, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? min : _param_defaultValue, value = _param.value, props = _objectWithoutProperties(_param, [
-        "onChange",
+    var // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type="range" />
+    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, [
+        "step",
         "min",
         "max",
+        "value",
+        "multiple",
         "defaultValue",
-        "value"
+        "disabled",
+        "className",
+        "getRootRef",
+        "getAriaLabel",
+        "getAriaValueText",
+        "onChange"
     ]);
-    var isControlled = value !== undefined;
-    var _React_useState = _slicedToArray(_react.useState(defaultValue), 2), localValue = _React_useState[0], setValue = _React_useState[1];
-    var _value = (0, _math.clamp)(isControlled ? value : localValue, min, max);
-    var handleChange = _react.useCallback(function(nextValue, event) {
-        if (props.disabled || _value === nextValue[1]) {
-            return;
-        }
-        !isControlled && setValue(nextValue[1]);
-        onChange && onChange(nextValue[1], event);
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var isControlled = valueProp !== undefined;
+    var _React_useState = _sliced_to_array._(_react.useState(defaultValue), 2), localValue = _React_useState[0], setValue = _React_useState[1];
+    var value = _react.useMemo(function() {
+        var resolvedValue = isControlled ? valueProp : localValue;
+        return Array.isArray(resolvedValue) ? [
+            (0, _math.clamp)(resolvedValue[0], min, max),
+            (0, _math.clamp)(resolvedValue[1], min, max)
+        ] : [
+            (0, _math.clamp)(resolvedValue, min, max),
+            null
+        ];
     }, [
-        props.disabled,
-        _value,
         isControlled,
-        onChange
+        valueProp,
+        localValue,
+        min,
+        max
     ]);
-    var rangeValue = _react.useMemo(function() {
-        return [
-            null,
-            _value
-        ];
-    }, [
-        _value
+    var _value = _sliced_to_array._(value, 2), startValue = _value[0], endValue = _value[1];
+    var multiple = multipleProp && endValue !== null;
+    var startValueInPercent = (0, _helpers.toPercent)(startValue, min, max);
+    var endReversedValueInPercent = multiple ? (0, _helpers.toPercent)(endValue, min, max) : 0;
+    var gesture = _react.useRef({
+        dragging: null,
+        startX: 0,
+        containerWidth: 0
+    }).current;
+    var thumbsContainerRef = (0, _useExternRef.useExternRef)(getRootRef);
+    var thumbStartInputRef = _react.useRef(null);
+    var thumbEndInputRef = _react.useRef(null);
+    var _extractSliderAriaAttributesFromRestProps = (0, _helpers.extractSliderAriaAttributesFromRestProps)(restProps), ariaLabel = _extractSliderAriaAttributesFromRestProps.ariaLabel, ariaValueText = _extractSliderAriaAttributesFromRestProps.ariaValueText, ariaLabelledBy = _extractSliderAriaAttributesFromRestProps.ariaLabelledBy, restPropsWithoutAriaAttributes = _object_without_properties._(_extractSliderAriaAttributesFromRestProps, [
+        "ariaLabel",
+        "ariaValueText",
+        "ariaLabelledBy"
     ]);
-    return /*#__PURE__*/ _react.createElement(_universalSlider.UniversalSlider, _objectSpreadProps(_objectSpread({}, props), {
-        value: rangeValue,
-        onChange: handleChange,
-        min: min,
-        max: max
-    }));
+    var changeValue = function(nextValue, event) {
+        if (disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
+            return;
+        }
+        if (multipleProp) {
+            if ((0, _helpers.isMultipleValues)(nextValue)) {
+                !isControlled && setValue(nextValue);
+                onChange && onChange(nextValue, event);
+            }
+        } else {
+            !isControlled && setValue(nextValue[0]);
+            onChange && onChange(nextValue[0], event);
+        }
+    };
+    var handlePointerStart = function(event) {
+        if (!thumbsContainerRef.current) {
+            return;
+        }
+        var _thumbsContainerRef_current_getBoundingClientRect = thumbsContainerRef.current.getBoundingClientRect(), nextContainerX = _thumbsContainerRef_current_getBoundingClientRect.left, nextContainerWidth = _thumbsContainerRef_current_getBoundingClientRect.width;
+        // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.
+        var foundDraggingType = (0, _helpers.getDraggingTypeByTargetDataset)(event.originalEvent.target);
+        var nextStartX = event.startX - nextContainerX;
+        var nextValue = (0, _helpers.offsetToValue)(nextStartX, nextContainerWidth, min, max, step);
+        var nextDragging = (0, _helpers.snapDirection)(value, nextValue, foundDraggingType);
+        gesture.dragging = nextDragging;
+        gesture.containerWidth = nextContainerWidth;
+        gesture.startX = nextStartX;
+        var updatedInternalStateValue = (0, _helpers.updateInternalStateValue)(value, nextValue, min, max, nextDragging);
+        var _updatedInternalStateValue = _sliced_to_array._(updatedInternalStateValue, 2), nextStartValue = _updatedInternalStateValue[0], nextEndValue = _updatedInternalStateValue[1];
+        if (thumbStartInputRef.current && (foundDraggingType === "start" || nextStartValue !== startValue && nextEndValue === endValue)) {
+            thumbStartInputRef.current.focus();
+            event.originalEvent.preventDefault();
+        } else if (thumbEndInputRef.current && (foundDraggingType === "end" || nextEndValue !== endValue && nextStartValue === startValue)) {
+            thumbEndInputRef.current.focus();
+            event.originalEvent.preventDefault();
+        }
+        changeValue(updatedInternalStateValue, event);
+        event.originalEvent.stopPropagation();
+    };
+    var handlePointerMove = function(event) {
+        var startX = gesture.startX, containerWidth = gesture.containerWidth, dragging = gesture.dragging;
+        var _event_shiftX = event.shiftX, shiftX = _event_shiftX === void 0 ? 0 : _event_shiftX;
+        var nextStartX = startX + shiftX;
+        var nextValue = (0, _helpers.offsetToValue)(nextStartX, containerWidth, min, max, step);
+        changeValue((0, _helpers.updateInternalStateValue)(value, nextValue, min, max, dragging), event);
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
+    };
+    var handlePointerEnd = function(event) {
+        gesture.dragging = null;
+        event.originalEvent.stopPropagation();
+    };
+    var handleChangeByNativeInput = function(event) {
+        changeValue((0, _helpers.updateInternalStateValueByNativeChange)(value, Number(event.target.value), (0, _helpers.getDraggingTypeByTargetDataset)(event.target)), // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)
+        event);
+    };
+    return /*#__PURE__*/ _react.createElement(_Touch.Touch, _object_spread_props._(_object_spread._({
+        "data-value": multiple ? "".concat(startValue, ",").concat(endValue) : startValue
+    }, restPropsWithoutAriaAttributes), {
+        className: (0, _vkjs.classNames)("vkuiSlider", disabled && "vkuiSlider--disabled", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        onStart: disabled ? undefined : handlePointerStart,
+        onMove: disabled ? undefined : handlePointerMove,
+        onEnd: disabled ? undefined : handlePointerEnd
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSlider__track"
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSlider__track-fill",
+        style: multiple ? {
+            left: "".concat(startValueInPercent, "%"),
+            right: "".concat(100 - endReversedValueInPercent, "%")
+        } : {
+            width: "".concat(startValueInPercent, "%")
+        }
+    }), /*#__PURE__*/ _react.createElement("div", {
+        ref: thumbsContainerRef,
+        className: "vkuiSlider__thumbs"
+    }, /*#__PURE__*/ _react.createElement(_SliderThumb.SliderThumb, {
+        "data-type": "start",
+        className: "vkuiSlider__thumb",
+        style: {
+            left: "".concat(startValueInPercent, "%"),
+            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
+            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
+        },
+        inputProps: {
+            "data-type": "start",
+            "ref": thumbStartInputRef,
+            "step": step,
+            "min": min,
+            "value": startValue,
+            "max": multiple ? endValue : max,
+            "disabled": disabled,
+            "aria-label": getAriaLabel ? getAriaLabel(0) : ariaLabel,
+            "aria-valuetext": getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,
+            "aria-labelledby": ariaLabelledBy,
+            "onChange": handleChangeByNativeInput
+        }
+    }), multiple && /*#__PURE__*/ _react.createElement(_SliderThumb.SliderThumb, {
+        "data-type": "end",
+        className: "vkuiSlider__thumb",
+        style: {
+            left: "".concat(endReversedValueInPercent, "%")
+        },
+        inputProps: {
+            "data-type": "end",
+            "ref": thumbEndInputRef,
+            "step": step,
+            "min": startValue,
+            "value": endValue,
+            "max": max,
+            "disabled": disabled,
+            "aria-label": getAriaLabel ? getAriaLabel(1) : ariaLabel,
+            "aria-valuetext": getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,
+            "aria-labelledby": ariaLabelledBy,
+            "onChange": handleChangeByNativeInput
+        }
+    })));
 };
 
 //# sourceMappingURL=Slider.js.map

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 { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  value,\n  ...props\n}: SliderProps) => {\n  const isControlled = value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(isControlled ? value : localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"names":["Slider","onChange","min","max","defaultValue","value","props","isControlled","undefined","React","useState","localValue","setValue","_value","clamp","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo","UniversalSlider"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;;2DAdU;oBACD;+BAKf;AAQA,IAAMA,SAAS,iBAOH;QANjBC,kBAAAA,8BACAC,KAAAA,8BAAM,oCACNC,KAAAA,8BAAM,+CACNC,cAAAA,gDAAeF,2BACfG,eAAAA,OACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,eAAeF,UAAUG;IAE/B,IAA+BC,iCAAAA,OAAMC,QAAQ,CAACN,mBAAvCO,aAAwBF,oBAAZG,WAAYH;IAC/B,IAAMI,SAASC,IAAAA,WAAK,EAACP,eAAeF,QAAQM,UAAU,EAAET,KAAKC;IAE7D,IAAMY,eAAiEN,OAAMO,WAAW,CACtF,SAACC,WAA2BC,OAAsB;QAChD,IAAIZ,MAAMa,QAAQ,IAAIN,WAAWI,SAAS,CAAC,EAAE,EAAE;YAC7C;QACF,CAAC;QACD,CAACV,gBAAgBK,SAASK,SAAS,CAAC,EAAE;QACtChB,YAAYA,SAASgB,SAAS,CAAC,EAAE,EAAEC;IACrC,GACA;QAACZ,MAAMa,QAAQ;QAAEN;QAAQN;QAAcN;KAAS;IAGlD,IAAMmB,aAA6BX,OAAMY,OAAO,CAAC;eAAM;YAAC,IAAI;YAAER;SAAO;OAAE;QAACA;KAAO;IAC/E,qBACE,qBAACS,gCAAe,uCAAKhB;QAAOD,OAAOe;QAAYnB,UAAUc;QAAcb,KAAKA;QAAKC,KAAKA;;AAE1F"}
+{"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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"}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { HasDataAttribute, HasRootRef } from '../../../types';
+interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {
+    className?: string;
+    style?: React.CSSProperties;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & HasDataAttribute;
+}
+export declare const SliderThumb: ({ className, getRootRef, inputProps, ...restProps }: SliderThumbProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SliderThumb", {
+    enumerable: true,
+    get: function() {
+        return SliderThumb;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
+var _useFocusVisible = require("../../../hooks/useFocusVisible");
+var _FocusVisible = require("../../FocusVisible/FocusVisible");
+var SliderThumb = function(_param) {
+    var className = _param.className, getRootRef = _param.getRootRef, inputProps = _param.inputProps, restProps = _object_without_properties._(_param, [
+        "className",
+        "getRootRef",
+        "inputProps"
+    ]);
+    var _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(false), focusVisible = _useFocusVisible1.focusVisible, onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.onFocus;
+    return /*#__PURE__*/ _react.createElement("span", _object_spread._({
+        ref: getRootRef,
+        className: (0, _vkjs.classNames)("vkuiSliderThumb", focusVisible && "vkuiSliderThumb--focused", className)
+    }, restProps), /*#__PURE__*/ _react.createElement("input", _object_spread_props._(_object_spread._({}, inputProps), {
+        type: "range",
+        className: "vkuiSliderThumb__nativeInput",
+        "aria-orientation": "horizontal",
+        onBlur: onBlur,
+        onFocus: onFocus
+    })), /*#__PURE__*/ _react.createElement(_FocusVisible.FocusVisible, {
+        visible: focusVisible,
+        mode: "outside"
+    }));
+};
+
+//# sourceMappingURL=SliderThumb.js.map

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

@@ -0,0 +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,kCAAgB,QAAlDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCC,KAAKR;QACLD,WAAWU,IAAAA,qCAETL,4CACAL;OAEEG,0BAEJ,qBAACQ,qDACKT;QACJU,MAAK;QACLZ,SAAS;QACTa,oBAAiB;QACjBP,QAAQA;QACRC,SAASA;uBAEX,qBAACO;QAAaC,SAASV;QAAcW,MAAK;;AAGhD"}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { InternalDraggingType, InternalValueState } from './types';
+export declare const toPercent: (v: number, min: number, max: number) => number;
+export declare const offsetToValue: (startX: number, width: number, min: number, max: number, step?: number) => number;
+export declare const updateInternalStateValue: (prevValue: InternalValueState, nextValue: number, min: number, max: number, dragging: InternalDraggingType | null) => InternalValueState;
+export declare const updateInternalStateValueByNativeChange: (prevValue: InternalValueState, nextValue: number, dragging: InternalDraggingType | null) => InternalValueState;
+export declare function isMultipleValues(value: InternalValueState): value is [number, number];
+export declare const snapDirection: (prevValue: InternalValueState, nextValue: number, type: InternalDraggingType | null) => "end" | "start";
+export declare const getDraggingTypeByTargetDataset: <T extends (EventTarget & HTMLElement) | null>(target: T) => "end" | "start" | null;
+export declare const extractSliderAriaAttributesFromRestProps: <T extends React.AriaAttributes>(restProps: T) => T & {
+    ariaLabel: string | undefined;
+    ariaValueText: string | undefined;
+    ariaLabelledBy: string | undefined;
+    'aria-label': undefined;
+    'aria-valuetext': undefined;
+    'aria-labelledby': undefined;
+};

package/dist/cjs/components/Slider/helpers.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toPercent: function() {
+        return toPercent;
+    },
+    offsetToValue: function() {
+        return offsetToValue;
+    },
+    updateInternalStateValue: function() {
+        return updateInternalStateValue;
+    },
+    updateInternalStateValueByNativeChange: function() {
+        return updateInternalStateValueByNativeChange;
+    },
+    isMultipleValues: function() {
+        return isMultipleValues;
+    },
+    snapDirection: function() {
+        return snapDirection;
+    },
+    getDraggingTypeByTargetDataset: function() {
+        return getDraggingTypeByTargetDataset;
+    },
+    extractSliderAriaAttributesFromRestProps: function() {
+        return extractSliderAriaAttributesFromRestProps;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _math = require("../../helpers/math");
+var toPercent = function(v, min, max) {
+    return (v - min) / (max - min) * 100;
+};
+var offsetToValue = function(startX, width, min, max, step) {
+    return (0, _math.rescale)(startX, [
+        0,
+        width
+    ], [
+        min,
+        max
+    ], {
+        step: step
+    });
+};
+var restrictValueByMinMax = function(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+};
+var updateInternalStateValue = function(prevValue, nextValue, min, max, dragging) {
+    var _prevValue = _sliced_to_array._(prevValue, 2), prevStartValue = _prevValue[0], prevEndValue = _prevValue[1];
+    if (prevEndValue === null) {
+        return [
+            restrictValueByMinMax(nextValue, min, max),
+            null
+        ];
+    }
+    switch(dragging){
+        case "start":
+            return nextValue > prevEndValue ? [
+                prevEndValue,
+                prevEndValue
+            ] : [
+                restrictValueByMinMax(nextValue, min, max),
+                prevEndValue
+            ];
+        case "end":
+            return nextValue < prevStartValue ? [
+                prevStartValue,
+                prevStartValue
+            ] : [
+                prevStartValue,
+                restrictValueByMinMax(nextValue, min, max)
+            ];
+        case null:
+        default:
+            return prevValue;
+    }
+};
+var updateInternalStateValueByNativeChange = function(prevValue, nextValue, dragging) {
+    var _prevValue = _sliced_to_array._(prevValue, 2), prevStartValue = _prevValue[0], prevEndValue = _prevValue[1];
+    switch(dragging){
+        case "start":
+            return [
+                nextValue,
+                prevEndValue
+            ];
+        case "end":
+            return [
+                prevStartValue,
+                nextValue
+            ];
+        case null:
+        default:
+            return prevValue;
+    }
+};
+function isMultipleValues(value) {
+    return value[1] !== null;
+}
+var snapDirection = function(prevValue, nextValue, type) {
+    if (type === "start") {
+        return "start";
+    }
+    if (type === "end") {
+        return "end";
+    }
+    var _prevValue = _sliced_to_array._(prevValue, 2), startRaw = _prevValue[0], endRaw = _prevValue[1];
+    /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */ var FORCE_DIFF_VALUE = 0.1;
+    var start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;
+    var end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;
+    return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? "start" : "end";
+};
+var getDraggingTypeByTargetDataset = function(target) {
+    if (target) {
+        if (target.dataset.type === "start") {
+            return "start";
+        }
+        if (target.dataset.type === "end") {
+            return "end";
+        }
+    }
+    return null;
+};
+var resetProps = {
+    "aria-label": undefined,
+    "aria-valuetext": undefined,
+    "aria-labelledby": undefined
+};
+var extractSliderAriaAttributesFromRestProps = function(restProps) {
+    var ariaLabel = restProps["aria-label"];
+    var ariaValueText = restProps["aria-valuetext"];
+    var ariaLabelledBy = restProps["aria-labelledby"];
+    return _object_spread_props._(_object_spread._({}, restProps, resetProps), {
+        ariaLabel: ariaLabel,
+        ariaValueText: ariaValueText,
+        ariaLabelledBy: ariaLabelledBy
+    });
+};
+
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["toPercent","offsetToValue","updateInternalStateValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","getDraggingTypeByTargetDataset","extractSliderAriaAttributesFromRestProps","v","min","max","startX","width","step","rescale","restrictValueByMinMax","value","prevValue","nextValue","dragging","prevStartValue","prevEndValue","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","target","dataset","resetProps","undefined","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"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"}