@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/cssm/components/Select/Select.js

@@ -4,11 +4,11 @@ import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
- */ export const Select = ({ children , ...props })=>{
-    const { options =[] , searchable , emptyText , onInputChange , filterFn , popupDirection , renderOption , renderDropdown , fetching , onClose , onOpen , icon , ClearButton , allowClearButton , dropdownOffsetDistance , fixDropdownWidth , forceDropdownPortal , selectType , autoHideScrollbar , autoHideScrollbarDelay , ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936
+ */ export const Select = ({ children, ...props })=>{
+    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, dropdownOffsetDistance, fixDropdownWidth, forceDropdownPortal, selectType, autoHideScrollbar, autoHideScrollbarDelay, ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936
      } = props;
     const hasPointer = useAdaptivityHasPointer();
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, props), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, nativeProps, options.map(({ label , value  })=>/*#__PURE__*/ React.createElement("option", {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, props), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, nativeProps, options.map(({ label, value })=>/*#__PURE__*/ React.createElement("option", {
             value: value,
             key: `${value}`
         }, label))));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    dropdownOffsetDistance,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    selectType,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","nativeProps","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,SAAQ,EAAE,GAAGC,OAAoB;IACxD,MAAM,EACJC,SAAU,EAAE,CAAA,EACZC,WAAU,EACVC,UAAS,EACTC,cAAa,EACbC,SAAQ,EACRC,eAAc,EACdC,aAAY,EACZC,eAAc,EACdC,SAAQ,EACRC,QAAO,EACPC,OAAM,EACNC,KAAI,EACJC,YAAW,EACXC,iBAAgB,EAChBC,uBAAsB,EACtBC,iBAAgB,EAChBC,oBAAmB,EACnBC,WAAU,EACVC,kBAAiB,EACjBC,uBAAsB,EACtB,GAAGC,YAAY,6DAA6D;MAC7E,GAAGrB;IAEJ,MAAMsB,aAAa3B;IAEnB,qBACE,oBAACD,MAAM6B,gBACJ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBAAM,oBAAC1B,cAAiBI,QAC9D,AAACsB,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACzB,cAAiBwB,aACfpB,QAAQwB,IAAI,CAAC,EAAEC,MAAK,EAAEC,MAAK,EAAE,iBAC5B,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf,EAAE"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    dropdownOffsetDistance,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    selectType,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","nativeProps","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAAoB;IACxD,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,EAChBC,mBAAmB,EACnBC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtB,GAAGC,YAAY,6DAA6D;MAC7E,GAAGrB;IAEJ,MAAMsB,aAAa3B;IAEnB,qBACE,oBAACD,MAAM6B,QAAQ,QACZ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBAAM,oBAAC1B,cAAiBI,QAC9D,AAACsB,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACzB,cAAiBwB,aACfpB,QAAQwB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf,EAAE"}

package/dist/cssm/components/SelectMimicry/SelectMimicry.js

@@ -13,8 +13,8 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
- */ export const SelectMimicry = ({ tabIndex =0 , placeholder , children , align , getRootRef , multiline , disabled , onClick , before , after =/*#__PURE__*/ React.createElement(DropdownIcon, null) , selectType ='default' , status , className , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
+ */ export const SelectMimicry = ({ tabIndex = 0, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after = /*#__PURE__*/ React.createElement(DropdownIcon, null), selectType = 'default', status, className, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
     const title = children || placeholder;
     return /*#__PURE__*/ React.createElement(FormField, {
         ...restProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,QAAQ,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,UAAW,EAAC,EACZC,YAAW,EACXC,SAAQ,EACRC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,SAAQ,EACRC,QAAO,EACPC,OAAM,EACNC,qBAAQ,oBAACjB,oBAAe,EACxBkB,YAAa,UAAS,EACtBC,OAAM,EACNC,UAAS,EACT,GAAGC,WACgB;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGzB;IAC3B,MAAM0B,QAAQb,YAAYD;IAE1B,qBACE,oBAACR;QACE,GAAGoB,SAAS;QACbb,UAAUM,WAAWU,YAAYhB;QACjCY,WAAWxB,WACTO,MAAM,CAAC,SAAS,EAChBmB,UAAUxB,SAAS2B,WAAWrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCiB;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM3B,+BAA+BmB;QACrCC,QAAQA;qBAER,oBAACQ;QAAIP,WAAWjB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBgB,YAAYA;QAAYE,WAAWjB,MAAM,CAAC,gBAAgB;OACzEoB;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,oBAACjB,mBAAe,EACxBkB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAM0B,QAAQb,YAAYD;IAE1B,qBACE,oBAACR;QACE,GAAGoB,SAAS;QACbb,UAAUM,WAAWU,YAAYhB;QACjCY,WAAWxB,WACTO,MAAM,CAAC,SAAS,EAChBmB,UAAUxB,SAAS2B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCiB;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM3B,+BAA+BmB;QACrCC,QAAQA;qBAER,oBAACQ;QAAIP,WAAWjB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBgB,YAAYA;QAAYE,WAAWjB,MAAM,CAAC,gBAAgB;OACzEoB;AAKX,EAAE"}

package/dist/cssm/components/SelectTypography/SelectTypography.js

@@ -14,9 +14,9 @@ const platformClassNames = {
 };
 /**
  * @private
- */ export const SelectTypography = ({ selectType ='default' , children , className , ...restProps })=>{
+ */ export const SelectTypography = ({ selectType = 'default', children, className, ...restProps })=>{
     const platform = usePlatform();
-    const { sizeY ='none'  } = useAdaptivity();
+    const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement("span", {
         className: classNames(styles['SelectTypography'], platformClassNames.hasOwnProperty(platform) && platformClassNames[platform], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], selectType === 'accent' && styles['SelectTypography--selectType-accent'], className),
         ...restProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\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  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","styles","sizeYClassNames","none","compact","platformClassNames","vkcom","android","SelectTypography","selectType","children","className","restProps","platform","sizeY","span","hasOwnProperty","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAEA,MAAMI,qBAAqB;IACzBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,SAASN,MAAM,CAAC,4BAA4B;AAC9C;AAMA;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,YAAa,UAAS,EACtBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACmB;IACtB,MAAMC,WAAWd;IACjB,MAAM,EAAEe,OAAQ,OAAM,EAAE,GAAGhB;IAE3B,qBACE,oBAACiB;QACCJ,WAAWd,WACTI,MAAM,CAAC,mBAAmB,EAC1BI,mBAAmBW,eAAeH,aAAaR,kBAAkB,CAACQ,SAAS,EAC3EC,UAAUd,SAASiB,WAAWf,eAAe,CAACY,MAAM,EACpDL,eAAe,YAAYR,MAAM,CAAC,sCAAsC,EACxEU;QAED,GAAGC,SAAS;OAEZF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\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  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","styles","sizeYClassNames","none","compact","platformClassNames","vkcom","android","SelectTypography","selectType","children","className","restProps","platform","sizeY","span","hasOwnProperty","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAEA,MAAMI,qBAAqB;IACzBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,SAASN,MAAM,CAAC,4BAA4B;AAC9C;AAMA;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACmB;IACtB,MAAMC,WAAWd;IACjB,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGhB;IAE3B,qBACE,oBAACiB;QACCJ,WAAWd,WACTI,MAAM,CAAC,mBAAmB,EAC1BI,mBAAmBW,cAAc,CAACH,aAAaR,kBAAkB,CAACQ,SAAS,EAC3EC,UAAUd,SAASiB,OAAO,IAAIf,eAAe,CAACY,MAAM,EACpDL,eAAe,YAAYR,MAAM,CAAC,sCAAsC,EACxEU;QAED,GAAGC,SAAS;OAEZF;AAGP,EAAE"}

package/dist/cssm/components/Separator/Separator.js

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './Separator.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
- */ export const Separator = ({ wide , className , ...restProps })=>/*#__PURE__*/ React.createElement("div", {
+ */ export const Separator = ({ wide, className, ...restProps })=>/*#__PURE__*/ React.createElement("div", {
         ...restProps,
         className: classNames(styles['Separator'], !wide && styles['Separator--padded'], className)
     }, /*#__PURE__*/ React.createElement("hr", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","hr"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbD,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;qBAEjF,oBAACG;QAAGH,WAAWH,MAAM,CAAC,gBAAgB;QAExC"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","hr"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbD,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;qBAEjF,oBAACG;QAAGH,WAAWH,MAAM,CAAC,gBAAgB;QAExC"}

package/dist/cssm/components/SimpleCell/Chevron/Chevron.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+    size?: 's' | 'm';
+}
+export declare const Chevron: ({ size, ...restProps }: ChevronProps) => React.JSX.Element;

package/dist/cssm/components/SimpleCell/Chevron/Chevron.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';
+const iconSize = {
+    s: Icon16Chevron,
+    m: Icon24ChevronCompactRight
+};
+export const Chevron = ({ size = 'm', ...restProps })=>{
+    const Icon = iconSize[size];
+    return /*#__PURE__*/ React.createElement(Icon, restProps);
+};
+
+//# sourceMappingURL=Chevron.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n  s: Icon16Chevron,\n  m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {\n  size?: 's' | 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n  const Icon = iconSize[size];\n\n  return <Icon {...restProps} />;\n};\n"],"names":["React","Icon16Chevron","Icon24ChevronCompactRight","iconSize","s","m","Chevron","size","restProps","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,mBAAmB;AAE5E,MAAMC,WAAW;IACfC,GAAGH;IACHI,GAAGH;AACL;AAMA,OAAO,MAAMI,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAMC,OAAON,QAAQ,CAACI,KAAK;IAE3B,qBAAO,oBAACE,MAASD;AACnB,EAAE"}

package/dist/cssm/components/SimpleCell/SimpleCell.d.ts

@@ -49,7 +49,11 @@ export interface SimpleCellOwnProps extends HasComponent {
     /**
      * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.
      */
-    expandable?: boolean;
+    expandable?: boolean | 'auto' | 'always';
+    /**
+     * Размер chevron
+     */
+    chevronSize?: 's' | 'm';
     /**
      * Включает многострочный режим для отображения текста
      */
@@ -60,4 +64,4 @@ export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
-export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, ...restProps }: SimpleCellProps) => React.JSX.Element;
+export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize, ...restProps }: SimpleCellProps) => React.JSX.Element;

package/dist/cssm/components/SimpleCell/SimpleCell.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { Icon24Chevron } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
+import { warnOnce } from '../../lib/warnOnce';
 import { Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { Chevron } from './Chevron/Chevron';
 import styles from './SimpleCell.module.css';
+const warn = warnOnce('SimpleCell');
 const platformClassNames = {
     ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),
     android: styles['SimpleCell--android'],
@@ -22,10 +24,15 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
- */ export const SimpleCell = ({ badgeBeforeTitle , badgeAfterTitle , badgeBeforeSubtitle , badgeAfterSubtitle , before , indicator , children , after , expandable , multiline , subhead , subtitle , extraSubtitle , className , ...restProps })=>{
+ */ export const SimpleCell = ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize = 'm', ...restProps })=>{
     const platform = usePlatform();
-    const hasAfter = hasReactNode(after) || expandable && platform === Platform.IOS;
-    const { sizeY ='none'  } = useAdaptivity();
+    if (process.env.NODE_ENV === 'development' && expandable === true) {
+        // TODO [>=6]: Обновить типизацию для expandable свойства
+        warn('Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable="auto"');
+    }
+    const hasChevron = expandable === 'always' || (expandable === true || expandable === 'auto') && platform === Platform.IOS;
+    const hasAfter = hasReactNode(after) || hasChevron;
+    const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement(Tappable, {
         ...restProps,
         className: classNames(styles['SimpleCell'], 'vkuiInternalSimpleCell', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && styles['SimpleCell--mult'], className)
@@ -62,7 +69,10 @@ const sizeYClassNames = {
         className: styles['SimpleCell__indicator']
     }, indicator), hasAfter && /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')
-    }, after, expandable && platform === Platform.IOS && /*#__PURE__*/ React.createElement(Icon24Chevron, null)));
+    }, after, hasChevron && /*#__PURE__*/ React.createElement(Chevron, {
+        size: chevronSize,
+        className: styles['SimpleCell__chevronIcon']
+    })));
 };
 
 //# sourceMappingURL=SimpleCell.js.map

package/dist/cssm/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":["React","Icon24Chevron","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Tappable","Footnote","Headline","Subhead","styles","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","hasAfter","IOS","sizeY","hasOwnProperty","div","Component","span","weight","normalize"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","Tappable","Footnote","Headline","Subhead","Chevron","styles","warn","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","process","env","NODE_ENV","hasChevron","IOS","hasAfter","sizeY","hasOwnProperty","div","Component","span","weight","normalize","size"],"mappings":"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"}

package/dist/cssm/components/SimpleCell/SimpleCell.module.css

@@ -109,6 +109,11 @@
   padding-right: 2px;
 }
 
+.SimpleCell__after .SimpleCell__chevronIcon {
+  color: var(--vkui--color_icon_tertiary);
+  padding-left: 12px;
+}
+
 /**
  * iOS
  */
@@ -123,12 +128,6 @@
   padding-left: 4px;
 }
 
-.SimpleCell--ios .SimpleCell__after :global(.vkuiIcon--chevron_24) {
-  color: var(--vkui--color_icon_tertiary);
-  padding-right: 4px;
-  padding-left: 12px;
-}
-
 .SimpleCell--sizeY-regular.SimpleCell--ios
   > .Avatar:not(.Avatar--size-32)
   ~ .SimpleCell__main

package/dist/cssm/components/Slider/Slider.js

@@ -15,11 +15,11 @@ const sizeYClassNames = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */ export const Slider = ({ // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type="range" />
-step , min =0 , max =100 , value: valueProp , multiple: multipleProp , defaultValue =multipleProp ? [
+step, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue = multipleProp ? [
     min,
     max
-] : min , disabled , className , getRootRef , getAriaLabel , getAriaValueText , onChange , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
+] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
     const isControlled = valueProp !== undefined;
     const [localValue, setValue] = React.useState(defaultValue);
     const value = React.useMemo(()=>{
@@ -50,7 +50,7 @@ step , min =0 , max =100 , value: valueProp , multiple: multipleProp , defaultVa
     const thumbsContainerRef = useExternRef(getRootRef);
     const thumbStartInputRef = React.useRef(null);
     const thumbEndInputRef = React.useRef(null);
-    const { ariaLabel , ariaValueText , ariaLabelledBy , ...restPropsWithoutAriaAttributes } = extractSliderAriaAttributesFromRestProps(restProps);
+    const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } = extractSliderAriaAttributesFromRestProps(restProps);
     const changeValue = (nextValue, event)=>{
         if (disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
             return;
@@ -69,7 +69,7 @@ step , min =0 , max =100 , value: valueProp , multiple: multipleProp , defaultVa
         if (!thumbsContainerRef.current) {
             return;
         }
-        const { left: nextContainerX , width: nextContainerWidth  } = thumbsContainerRef.current.getBoundingClientRect();
+        const { left: nextContainerX, width: nextContainerWidth } = thumbsContainerRef.current.getBoundingClientRect();
         // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.
         const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);
         const nextStartX = event.startX - nextContainerX;
@@ -91,8 +91,8 @@ step , min =0 , max =100 , value: valueProp , multiple: multipleProp , defaultVa
         event.originalEvent.stopPropagation();
     };
     const handlePointerMove = (event)=>{
-        const { startX , containerWidth , dragging  } = gesture;
-        const { shiftX =0  } = event;
+        const { startX, containerWidth, dragging } = gesture;
+        const { shiftX = 0 } = event;
         const nextStartX = startX + shiftX;
         const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);
         changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);

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

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

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

@@ -3,8 +3,8 @@ import { classNames } from '@vkontakte/vkjs';
 import { useFocusVisible } from '../../../hooks/useFocusVisible';
 import { FocusVisible } from '../../FocusVisible/FocusVisible';
 import styles from './SliderThumb.module.css';
-export const SliderThumb = ({ className , getRootRef , inputProps , ...restProps })=>{
-    const { focusVisible , onBlur , onFocus  } = useFocusVisible(false);
+export const SliderThumb = ({ className, getRootRef, inputProps, ...restProps })=>{
+    const { focusVisible, onBlur, onFocus } = useFocusVisible(false);
     return /*#__PURE__*/ React.createElement("span", {
         ref: getRootRef,
         className: classNames(styles['SliderThumb'], focusVisible && styles['SliderThumb--focused'], className),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\n    >\n      <input\n        {...inputProps}\n        type=\"range\"\n        className={styles['SliderThumb__nativeInput']}\n        aria-orientation=\"horizontal\"\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","FocusVisible","styles","SliderThumb","className","getRootRef","inputProps","restProps","focusVisible","onBlur","onFocus","span","ref","input","type","aria-orientation","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,OAAOC,YAAY,2BAA2B;AAU9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,UAAS,EACTC,WAAU,EACVC,WAAU,EACV,GAAGC,WACc;IACjB,MAAM,EAAEC,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGV,gBAAgB;IAE1D,qBACE,oBAACW;QACCC,KAAKP;QACLD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBM,gBAAgBN,MAAM,CAAC,uBAAuB,EAC9CE;QAED,GAAGG,SAAS;qBAEb,oBAACM;QACE,GAAGP,UAAU;QACdQ,MAAK;QACLV,WAAWF,MAAM,CAAC,2BAA2B;QAC7Ca,oBAAiB;QACjBN,QAAQA;QACRC,SAASA;sBAEX,oBAACT;QAAae,SAASR;QAAcS,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\n    >\n      <input\n        {...inputProps}\n        type=\"range\"\n        className={styles['SliderThumb__nativeInput']}\n        aria-orientation=\"horizontal\"\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","FocusVisible","styles","SliderThumb","className","getRootRef","inputProps","restProps","focusVisible","onBlur","onFocus","span","ref","input","type","aria-orientation","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,OAAOC,YAAY,2BAA2B;AAU9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACV,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGV,gBAAgB;IAE1D,qBACE,oBAACW;QACCC,KAAKP;QACLD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBM,gBAAgBN,MAAM,CAAC,uBAAuB,EAC9CE;QAED,GAAGG,SAAS;qBAEb,oBAACM;QACE,GAAGP,UAAU;QACdQ,MAAK;QACLV,WAAWF,MAAM,CAAC,2BAA2B;QAC7Ca,oBAAiB;QACjBN,QAAQA;QACRC,SAASA;sBAEX,oBAACT;QAAae,SAASR;QAAcS,MAAK;;AAGhD,EAAE"}

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

@@ -1 +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":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,MAAMC,YAAY,CAACC,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM,IAAI;AAElG,OAAO,MAAME,gBAAgB,CAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI;IAAK;AACxD,EAAE;AAEF,MAAMC,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,MAAMC,2BAA2B,CACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,MAAMK,yCAAyC,CACpDL,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,MAAMS,gBAAgB,CAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGV;IAC3B,2EAA2E,GAC3E,MAAMW,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,IAAIH,QAAQX,cAAca,KAAKC,IAAIF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,MAAMe,iCAAiC,CAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,QAAQV,SAAS,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,QAAQV,SAAS,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,MAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,MAAMC,2CAA2C,CACtDC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO;QAAE,GAAGA,SAAS;QAAE,GAAGH,UAAU;QAAEI;QAAWC;QAAeC;IAAe;AACjF,EAAE"}
+{"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":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,MAAMC,YAAY,CAACC,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM,IAAI;AAElG,OAAO,MAAME,gBAAgB,CAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI;IAAK;AACxD,EAAE;AAEF,MAAMC,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,MAAMC,2BAA2B,CACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,MAAMK,yCAAyC,CACpDL,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,MAAMS,gBAAgB,CAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGV;IAC3B,2EAA2E,GAC3E,MAAMW,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQX,cAAca,KAAKC,GAAG,CAACF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,MAAMe,iCAAiC,CAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACV,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,OAAO,CAACV,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,MAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,MAAMC,2CAA2C,CACtDC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO;QAAE,GAAGA,SAAS;QAAE,GAAGH,UAAU;QAAEI;QAAWC;QAAeC;IAAe;AACjF,EAAE"}

package/dist/cssm/components/Snackbar/Snackbar.js

@@ -15,11 +15,11 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './Snackbar.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
- */ export const Snackbar = ({ children , layout: layoutProps = 'horizontal' , action , before , after , duration =4000 , onActionClick , onClose , mode ='default' , className , subtitle , ...restProps })=>{
+ */ export const Snackbar = ({ children, layout: layoutProps = 'horizontal', action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', className, subtitle, ...restProps })=>{
     const platform = usePlatform();
-    const { viewWidth  } = useAdaptivityWithJSMediaQueries();
+    const { viewWidth } = useAdaptivityWithJSMediaQueries();
     const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-    const { waitTransitionFinish  } = useWaitTransitionFinish();
+    const { waitTransitionFinish } = useWaitTransitionFinish();
     const [closing, setClosing] = React.useState(false);
     const [touched, setTouched] = React.useState(false);
     const shiftXPercentRef = React.useRef(0);
@@ -53,7 +53,7 @@ import styles from './Snackbar.module.css';
     };
     const onTouchStart = closeTimeout.clear;
     const onTouchMoveX = (event)=>{
-        const { shiftX , originalEvent  } = event;
+        const { shiftX, originalEvent } = event;
         originalEvent.preventDefault();
         if (!touched) {
             setTouched(true);