npm - @vkontakte/vkui - Versions diffs - 6.1.2 → 6.2.1 - Mend

@vkontakte/vkui 6.1.2 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2068) hide show

package/dist/cjs/components/Search/Search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLInputElement> {\n /*\n iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n /\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode;\n onIconClick?: React.PointerEventHandler<HTMLElement>;\n defaultValue?: string;\n iconLabel?: string;\n clearLabel?: string;\n /\n Удаляет отступы у компонента\n /\n noPadding?: boolean;\n /\n Текст для кнопки Найти\n /\n findButtonText?: string;\n /\n Коллбэк для кнопки Найти\n /\n onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n id: idProp,\n before = <Icon16SearchOutline />,\n className,\n placeholder = 'Поиск',\n after = 'Отмена',\n getRef,\n icon,\n onIconClick = noop,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps) => {\n const inputRef = useExternRef(getRef);\n const {\n value: isFocused,\n setTrue: setFocusedTrue,\n setFalse: setFocusedFalse,\n } = useBooleanState(false);\n const generatedId = React.useId();\n const inputId = idProp ? idProp : `search-${generatedId}`;\n\n const [hasValue, setHasValue] = React.useState<boolean>(() =>\n Boolean(inputProps.value \|\| inputProps.defaultValue),\n );\n const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n setHasValue(Boolean(e.currentTarget.value));\n\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n const platform = usePlatform();\n\n const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedTrue();\n inputProps.onFocus && inputProps.onFocus(e);\n };\n\n const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedFalse();\n inputProps.onBlur && inputProps.onBlur(e);\n };\n\n const onCancel = React.useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, '');\n\n const ev2 = new Event('input', { bubbles: true });\n inputRef.current?.dispatchEvent(ev2);\n }, [inputRef]);\n\n const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => onIconClick(e),\n [onIconClick],\n );\n\n const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n inputRef.current?.focus();\n if (touchEnabled()) {\n onCancel();\n }\n },\n [inputRef, onCancel],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (inputProps.value !== undefined) {\n setHasValue(Boolean(inputProps.value));\n }\n }, [inputProps.value]);\n\n useNativeFormResetListener(inputRef, () => {\n setHasValue(Boolean(inputProps.defaultValue));\n });\n\n return (\n <div\n className={classNames(\n 'vkuiInternalSearch',\n styles['Search'],\n sizeY === 'none' && styles['Search--sizeY-none'],\n sizeY === 'compact' && styles['Search--sizeY-compact'],\n isFocused && styles['Search--focused'],\n hasValue && styles['Search--has-value'],\n after && styles['Search--has-after'],\n icon && styles['Search--has-icon'],\n inputProps.disabled && styles['Search--disabled'],\n !noPadding && styles['Search--withPadding'],\n className,\n )}\n ref={getRootRef}\n style={style}\n >\n <div className={styles['Search__field']}>\n <label htmlFor={inputId} className={styles['Search__label']}>\n {placeholder}\n </label>\n <div className={styles['Search__input']}>\n {before}\n <Headline\n Component=\"input\"\n type=\"search\"\n level=\"1\"\n weight=\"3\"\n {...inputProps}\n id={inputId}\n placeholder={placeholder}\n autoComplete={autoComplete}\n getRootRef={inputRef}\n className={styles['Search__nativeInput']}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={callMultiple(onChange, checkHasValue)}\n />\n </div>\n <div className={styles['Search__controls']}>\n {icon && (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\n )}\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n tabIndex={hasValue ? undefined : -1}\n >\n <VisuallyHidden>{clearLabel}</VisuallyHidden>\n {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n </IconButton>\n {adaptiveSizeY.compact && onFindButtonClick && (\n <Button\n mode=\"primary\"\n size=\"m\"\n className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n focusVisibleMode=\"inside\"\n onClick={onFindButtonClick}\n tabIndex={hasValue ? undefined : -1}\n >\n {findButtonText}\n </Button>\n )}\n </div>\n </div>\n {platform === 'ios' && after && (\n <Button\n mode=\"tertiary\"\n size=\"m\"\n className={styles['Search__after']}\n focusVisibleMode=\"inside\"\n onClick={onCancel}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n >\n <span className={styles['Search__afterText']}>{after}</span>\n </Button>\n )}\n </div>\n );\n};\n"],"names":["Search","id","idProp","before","Icon16SearchOutline","className","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","useExternRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useBooleanState","generatedId","React","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","useAdaptivity","adaptiveSizeY","useAdaptivityConditionalRender","platform","usePlatform","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","touchEnabled","useIsomorphicLayoutEffect","undefined","useNativeFormResetListener","div","classNames","disabled","ref","label","htmlFor","Headline","Component","type","level","weight","callMultiple","IconButton","hoverMode","onPointerDown","onClick","VisuallyHidden","tabIndex","Icon16Clear","Icon24Cancel","compact","Button","mode","size","focusVisibleMode","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLInputElement> {\n /*\n iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n /\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode;\n onIconClick?: React.PointerEventHandler<HTMLElement>;\n defaultValue?: string;\n iconLabel?: string;\n clearLabel?: string;\n /\n Удаляет отступы у компонента\n /\n noPadding?: boolean;\n /\n Текст для кнопки Найти\n /\n findButtonText?: string;\n /\n Коллбэк для кнопки Найти\n /\n onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n id: idProp,\n before = <Icon16SearchOutline />,\n className,\n placeholder = 'Поиск',\n after = 'Отмена',\n getRef,\n icon,\n onIconClick = noop,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps) => {\n const inputRef = useExternRef(getRef);\n const {\n value: isFocused,\n setTrue: setFocusedTrue,\n setFalse: setFocusedFalse,\n } = useBooleanState(false);\n const generatedId = React.useId();\n const inputId = idProp ? idProp : `search-${generatedId}`;\n\n const [hasValue, setHasValue] = React.useState<boolean>(() =>\n Boolean(inputProps.value \|\| inputProps.defaultValue),\n );\n const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n setHasValue(Boolean(e.currentTarget.value));\n\n const { sizeY = 'none' } = useAdaptivity();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n const platform = usePlatform();\n\n const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedTrue();\n inputProps.onFocus && inputProps.onFocus(e);\n };\n\n const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedFalse();\n inputProps.onBlur && inputProps.onBlur(e);\n };\n\n const onCancel = React.useCallback(() => {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, '');\n\n const ev2 = new Event('input', { bubbles: true });\n inputRef.current?.dispatchEvent(ev2);\n }, [inputRef]);\n\n const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => onIconClick(e),\n [onIconClick],\n );\n\n const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n (e) => {\n e.preventDefault();\n inputRef.current?.focus();\n if (touchEnabled()) {\n onCancel();\n }\n },\n [inputRef, onCancel],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (inputProps.value !== undefined) {\n setHasValue(Boolean(inputProps.value));\n }\n }, [inputProps.value]);\n\n useNativeFormResetListener(inputRef, () => {\n setHasValue(Boolean(inputProps.defaultValue));\n });\n\n return (\n <div\n className={classNames(\n 'vkuiInternalSearch',\n styles['Search'],\n sizeY === 'none' && styles['Search--sizeY-none'],\n sizeY === 'compact' && styles['Search--sizeY-compact'],\n isFocused && styles['Search--focused'],\n hasValue && styles['Search--has-value'],\n after && styles['Search--has-after'],\n icon && styles['Search--has-icon'],\n inputProps.disabled && styles['Search--disabled'],\n !noPadding && styles['Search--withPadding'],\n className,\n )}\n ref={getRootRef}\n style={style}\n >\n <div className={styles['Search__field']}>\n <label htmlFor={inputId} className={styles['Search__label']}>\n {placeholder}\n </label>\n <div className={styles['Search__input']}>\n {before}\n <Headline\n Component=\"input\"\n type=\"search\"\n level=\"1\"\n weight=\"3\"\n {...inputProps}\n id={inputId}\n placeholder={placeholder}\n autoComplete={autoComplete}\n getRootRef={inputRef}\n className={styles['Search__nativeInput']}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={callMultiple(onChange, checkHasValue)}\n />\n </div>\n <div className={styles['Search__controls']}>\n {icon && (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\n )}\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n tabIndex={hasValue ? undefined : -1}\n >\n <VisuallyHidden>{clearLabel}</VisuallyHidden>\n {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n </IconButton>\n {adaptiveSizeY.compact && onFindButtonClick && (\n <Button\n mode=\"primary\"\n size=\"m\"\n className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n focusVisibleMode=\"inside\"\n onClick={onFindButtonClick}\n tabIndex={hasValue ? undefined : -1}\n >\n {findButtonText}\n </Button>\n )}\n </div>\n </div>\n {platform === 'ios' && after && (\n <Button\n mode=\"tertiary\"\n size=\"m\"\n className={styles['Search__after']}\n focusVisibleMode=\"inside\"\n onClick={onCancel}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n >\n <span className={styles['Search__afterText']}>{after}</span>\n </Button>\n )}\n </div>\n );\n};\n"],"names":["Search","id","idProp","before","Icon16SearchOutline","className","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","useExternRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useBooleanState","generatedId","React","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","useAdaptivity","adaptiveSizeY","useAdaptivityConditionalRender","platform","usePlatform","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","touchEnabled","useIsomorphicLayoutEffect","undefined","useNativeFormResetListener","div","classNames","disabled","ref","label","htmlFor","Headline","Component","type","level","weight","callMultiple","IconButton","hoverMode","onPointerDown","onClick","VisuallyHidden","tabIndex","Icon16Clear","Icon24Cancel","compact","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControl--sizeY-none'],\n ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string \| number \| undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n /*\n Вставляет элемент перед основным контентом.\n * Рекомендуется использовать только иконки с размером 20\n /\n before?: React.ReactNode;\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n options: SegmentedControlOptionInterface[];\n size?: 'm' \| 'l';\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n /\nexport const SegmentedControl = ({\n size = 'l',\n name,\n options,\n defaultValue = options[0]?.value,\n children,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: SegmentedControlProps) => {\n const id = React.useId();\n\n const [value, onChange] = useCustomEnsuredControl({\n onChange: onChangeProp,\n value: valueProp,\n defaultValue,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const actualIndex = options.findIndex((option) => option.value === value);\n\n useIsomorphicLayoutEffect(() => {\n if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n }, [actualIndex]);\n\n const translateX = `translateX(${100 actualIndex}%)`;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['SegmentedControl'],\n sizeY !== 'compact' && sizeYClassNames[sizeY],\n size === 'l' && styles['SegmentedControl--size-l'],\n )}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {actualIndex > -1 && (\n <div\n aria-hidden\n className={styles['SegmentedControl__slider']}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => onChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </RootComponent>\n );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","warn","warnOnce","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","React","useId","useCustomEnsuredControl","sizeY","useAdaptivity","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","RootComponent","baseClassName","classNames","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionProps","SegmentedControlOption","checked"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBACI;+BACG;mCACU;2CACE;0BACjB;+BAEK;wCACS;IAwCtBC;AArCjB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAML,mBAAmB;QAAC,EAC/BM,OAAO,GAAG,EACVC,IAAI,EACJN,OAAO,EACPO,gBAAeP,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYQ,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAN;QACAO;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKC,OAAMC,KAAK;IAEtB,MAAM,CAACR,OAAOE,SAAS,GAAGO,IAAAA,0CAAuB,EAAC;QAChDP,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,cAAcpB,QAAQqB,SAAS,CAAC,CAACC,SAAWA,OAAOd,KAAK,KAAKA;IAEnEe,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEvB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACiB;KAAY;IAEhB,MAAMO,aAAa,CAAC,WAAW,EAAE,MAAMP,YAAY,EAAE,CAAC;IAEtD,qBACE,qBAACQ,4BAAa,8CACRf;QACJgB,eAAeC,IAAAA,gBAAU,0BAEvBZ,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7Cb,SAAS;kBAGX,cAAA,sBAAC0B;YAAIC,MAAK;YAAaC,SAAS;;gBAC7Bb,cAAc,CAAC,mBACd,qBAACW;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMpC,QAAQqC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWX;wBACXY,iBAAiBZ;oBACnB;;gBAGH3B,QAAQwC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,qBAACE,8CAAsB,8CAEjBD;wBACJpC,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACd8B,SAASpC,UAAUkC,YAAYlC,KAAK;wBACpCE,UAAU,IAAMA,SAASgC,YAAYlC,KAAK;kCAEzCiC;wBANI,CAAC,EAAEC,YAAYlC,KAAK,CAAC,CAAC;;;;;AAYvC"}
1	+ {"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControl--sizeY-none'],\n ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string \| number \| undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n /*\n Вставляет элемент перед основным контентом.\n * Рекомендуется использовать только иконки с размером 20\n /\n before?: React.ReactNode;\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n options: SegmentedControlOptionInterface[];\n size?: 'm' \| 'l';\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n /\nexport const SegmentedControl = ({\n size = 'l',\n name,\n options,\n defaultValue = options[0]?.value,\n children,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: SegmentedControlProps) => {\n const id = React.useId();\n\n const [value, onChange] = useCustomEnsuredControl({\n onChange: onChangeProp,\n value: valueProp,\n defaultValue,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const actualIndex = options.findIndex((option) => option.value === value);\n\n useIsomorphicLayoutEffect(() => {\n if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n }, [actualIndex]);\n\n const translateX = `translateX(${100 actualIndex}%)`;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['SegmentedControl'],\n sizeY !== 'compact' && sizeYClassNames[sizeY],\n size === 'l' && styles['SegmentedControl--size-l'],\n )}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {actualIndex > -1 && (\n <div\n aria-hidden\n className={styles['SegmentedControl__slider']}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => onChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </RootComponent>\n );\n};\n"],"names":["SegmentedControl","options","sizeYClassNames","none","warn","warnOnce","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","React","useId","useCustomEnsuredControl","sizeY","useAdaptivity","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","RootComponent","baseClassName","classNames","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionProps","SegmentedControlOption","checked"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBACI;+BACG;mCACU;2CACE;0BACjB;+BAEK;wCACS;IAwCtBC;AArCjB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAML,mBAAmB;QAAC,EAC/BM,OAAO,GAAG,EACVC,IAAI,EACJN,OAAO,EACPO,gBAAeP,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYQ,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAN;QACAO;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKC,OAAMC,KAAK;IAEtB,MAAM,CAACR,OAAOE,SAAS,GAAGO,IAAAA,0CAAuB,EAAC;QAChDP,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,cAAcpB,QAAQqB,SAAS,CAAC,CAACC,SAAWA,OAAOd,KAAK,KAAKA;IAEnEe,IAAAA,oDAAyB,EAAC;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEvB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACiB;KAAY;IAEhB,MAAMO,aAAa,CAAC,WAAW,EAAE,MAAMP,YAAY,EAAE,CAAC;IAEtD,qBACE,qBAACQ,4BAAa,8CACRf;QACJgB,eAAeC,IAAAA,gBAAU,0BAEvBZ,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7Cb,SAAS;kBAGX,cAAA,sBAAC0B;YAAIC,MAAK;YAAaC,SAAS;;gBAC7Bb,cAAc,CAAC,mBACd,qBAACW;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMpC,QAAQqC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWX;wBACXY,iBAAiBZ;oBACnB;;gBAGH3B,QAAQwC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,qBAACE,8CAAsB,8CAEjBD;wBACJpC,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACd8B,SAASpC,UAAUkC,YAAYlC,KAAK;wBACpCE,UAAU,IAAMA,SAASgC,YAAYlC,KAAK;kCAEzCiC;wBANI,CAAC,EAAEC,YAAYlC,KAAK,CAAC,CAAC;;;;;AAYvC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement> {\n before?: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n getRef,\n className,\n style,\n children,\n getRootRef,\n before,\n ...restProps\n}: SegmentedControlOptionProps) => (\n <Clickable\n Component=\"label\"\n baseClassName={styles['SegmentedControlOption']}\n hoverClassName={styles['SegmentedControlOption--hover']}\n activeClassName={styles['SegmentedControlOption--hover']}\n className={className}\n getRootRef={getRootRef}\n style={style}\n >\n <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n {hasReactNode(before) && (\n <div className={styles['SegmentedControlOption__before']}>{before}</div>\n )}\n <Headline level=\"2\" weight=\"2\">\n {children}\n </Headline>\n </Clickable>\n);\n"],"names":["SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Clickable","Component","baseClassName","hoverClassName","activeClassName","VisuallyHidden","type","hasReactNode","div","Headline","level","weight"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;iEAlBU;sBACM;2BAEH;0BACD;gCACM;AAaxB,MAAMA,yBAAyB;QAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EAEsB,WADzBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,sBAACE,oBAAS;QACRC,WAAU;QACVC,aAAa;QACbC,cAAc;QACdC,eAAe;QACfV,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,qBAACU,8BAAc,8CAAKN;gBAAWE,WAAU;gBAAQJ,YAAYJ;gBAAQa,MAAK;;YACzEC,IAAAA,kBAAY,EAACT,yBACZ,qBAACU;gBAAId,SAAS;0BAA6CI;;0BAE7D,qBAACW,kBAAQ;gBAACC,OAAM;gBAAIC,QAAO;0BACxBf"}
1	+ {"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRootRef<HTMLLabelElement>,\n HasRef<HTMLInputElement> {\n before?: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n getRef,\n className,\n style,\n children,\n getRootRef,\n before,\n ...restProps\n}: SegmentedControlOptionProps) => (\n <Clickable\n Component=\"label\"\n baseClassName={styles['SegmentedControlOption']}\n hoverClassName={styles['SegmentedControlOption--hover']}\n activeClassName={styles['SegmentedControlOption--hover']}\n className={className}\n getRootRef={getRootRef}\n style={style}\n >\n <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n {hasReactNode(before) && (\n <div className={styles['SegmentedControlOption__before']}>{before}</div>\n )}\n <Headline level=\"2\" weight=\"2\">\n {children}\n </Headline>\n </Clickable>\n);\n"],"names":["SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Clickable","Component","baseClassName","hoverClassName","activeClassName","VisuallyHidden","type","hasReactNode","div","Headline","level","weight"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;iEAlBU;sBACM;2BAEH;0BACD;gCACM;AAaxB,MAAMA,yBAAyB;QAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EAEsB,WADzBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,sBAACE,oBAAS;QACRC,WAAU;QACVC,aAAa;QACbC,cAAc;QACdC,eAAe;QACfV,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,qBAACU,8BAAc,8CAAKN;gBAAWE,WAAU;gBAAQJ,YAAYJ;gBAAQa,MAAK;;YACzEC,IAAAA,kBAAY,EAACT,yBACZ,qBAACU;gBAAId,SAAS;0BAA6CI;;0BAE7D,qBAACW,kBAAQ;gBAACC,OAAM;gBAAIC,QAAO;0BACxBf"}

package/dist/cjs/components/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,~~mFAIhB~~,~~YAAY~~,OAAO,CAAC,4CAqDtB,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,4CAqDtB,CAAC"}

package/dist/cjs/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n CustomSelect,\n type CustomSelectOptionInterface,\n type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' \| 'plain' \| 'accent';\n\n/*\n @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n children,\n className,\n ...props\n}: SelectProps<OptionT>) => {\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 clearButtonTestId,\n dropdownOffsetDistance,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n labelTextTestId,\n nativeSelectTestId,\n after,\n mode,\n ...restProps\n } = props;\n\n const { deviceType } = useAdaptivityConditionalRender();\n\n const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n return (\n <React.Fragment>\n {deviceType.desktop && (\n <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n )}\n {deviceType.mobile && (\n <NativeSelect\n className={classNames(className, deviceType.mobile.className)}\n {...nativeProps}\n >\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":["Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","deviceType","useAdaptivityConditionalRender","nativeProps","React","Fragment","desktop","CustomSelect","classNames","mobile","NativeSelect","map","label","value","option"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACI;gDACoB;8BAMxC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,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,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGC,IAAAA,8DAA8B;IAErD,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACZJ,WAAWK,OAAO,kBACjB,qBAACC,0BAAY;gBAAClC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWK,OAAO,CAACjC,SAAS;eAAOC;YAEnF2B,WAAWQ,MAAM,kBAChB,qBAACC,0BAAY;gBACXrC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWQ,MAAM,CAACpC,SAAS;eACxD8B;0BAEH5B,QAAQoC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}
1	+ {"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n CustomSelect,\n type CustomSelectOptionInterface,\n type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' \| 'plain' \| 'accent';\n\n/*\n @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n children,\n className,\n ...props\n}: SelectProps<OptionT>) => {\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 clearButtonTestId,\n dropdownOffsetDistance,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n labelTextTestId,\n nativeSelectTestId,\n after,\n mode,\n ...restProps\n } = props;\n\n const { deviceType } = useAdaptivityConditionalRender();\n\n const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n return (\n <React.Fragment>\n {deviceType.desktop && (\n <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n )}\n {deviceType.mobile && (\n <NativeSelect\n className={classNames(className, deviceType.mobile.className)}\n {...nativeProps}\n >\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":["Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","deviceType","useAdaptivityConditionalRender","nativeProps","React","Fragment","desktop","CustomSelect","classNames","mobile","NativeSelect","map","label","value","option"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;;iEAfU;sBACI;gDACoB;8BAMxC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,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,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGC,IAAAA,8DAA8B;IAErD,MAAMC,cAAyEH;IAE/E,qBACE,sBAACI,OAAMC,QAAQ;;YACZJ,WAAWK,OAAO,kBACjB,qBAACC,0BAAY;gBAAClC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWK,OAAO,CAACjC,SAAS;eAAOC;YAEnF2B,WAAWQ,MAAM,kBAChB,qBAACC,0BAAY;gBACXrC,WAAWmC,IAAAA,gBAAU,EAACnC,WAAW4B,WAAWQ,MAAM,CAACpC,SAAS;eACxD8B;0BAEH5B,QAAQoC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD"}

package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { 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 ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasAlign,\n Pick<FormFieldProps, 'before' \| 'after' \| 'status'> {\n multiline?: boolean;\n disabled?: boolean;\n selectType?: SelectType;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n tabIndex = 0,\n placeholder,\n children,\n align,\n getRootRef,\n multiline,\n disabled,\n onClick,\n before,\n after = <DropdownIcon />,\n selectType = 'default',\n status,\n className,\n autoFocus,\n ...restProps\n}: SelectMimicryProps) => {\n const rootRef = useExternRef(getRootRef);\n\n const { sizeY = 'none' } = useAdaptivity();\n const title = children \|\| placeholder;\n\n useAutoFocus(rootRef, autoFocus);\n\n return (\n <FormField\n {...restProps}\n tabIndex={disabled ? undefined : tabIndex}\n className={classNames(\n styles['Select'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !children && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align === 'center' && styles['Select--align-center'],\n align === 'right' && styles['Select--align-right'],\n before && styles['Select--hasBefore'],\n className,\n )}\n getRootRef={rootRef}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n before={before}\n after={after}\n mode={getFormFieldModeFromSelectType(selectType)}\n status={status}\n >\n <div className={styles['Select__container']}>\n <SelectTypography selectType={selectType} className={styles['Select__title']}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n"],"names":["SelectMimicry","sizeYClassNames","none","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","autoFocus","restProps","rootRef","useExternRef","sizeY","useAdaptivity","title","useAutoFocus","FormField","undefined","classNames","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;iEA/BU;sBACI;+BACG;8BACD;8BACA;wBACkB;8BAElB;2BACa;kCAET;AAGjC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAeO,MAAMF,gBAAgB;QAAC,EAC5BG,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,qBAACC,0BAAY,KAAG,EACxBC,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAME,UAAUC,IAAAA,0BAAY,EAACb;IAE7B,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,QAAQlB,YAAYD;IAE1BoB,IAAAA,0BAAY,EAACL,SAASF;IAEtB,qBACE,qBAACQ,oBAAS,8CACJP;QACJf,UAAUM,WAAWiB,YAAYvB;QACjCa,WAAWW,IAAAA,gBAAU,gBAEnBN,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAAChB,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYY;QACZT,SAASD,WAAWiB,YAAYhB;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPgB,MAAMC,IAAAA,sCAA8B,EAACf;QACrCC,QAAQA;kBAER,cAAA,qBAACe;YAAId,SAAS;sBACZ,cAAA,qBAACe,kCAAgB;gBAACjB,YAAYA;gBAAYE,SAAS;0BAChDO;;;;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { 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 ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasAlign,\n Pick<FormFieldProps, 'before' \| 'after' \| 'status'> {\n multiline?: boolean;\n disabled?: boolean;\n selectType?: SelectType;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n tabIndex = 0,\n placeholder,\n children,\n align,\n getRootRef,\n multiline,\n disabled,\n onClick,\n before,\n after = <DropdownIcon />,\n selectType = 'default',\n status,\n className,\n autoFocus,\n ...restProps\n}: SelectMimicryProps) => {\n const rootRef = useExternRef(getRootRef);\n\n const { sizeY = 'none' } = useAdaptivity();\n const title = children \|\| placeholder;\n\n useAutoFocus(rootRef, autoFocus);\n\n return (\n <FormField\n {...restProps}\n tabIndex={disabled ? undefined : tabIndex}\n className={classNames(\n styles['Select'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n !children && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align === 'center' && styles['Select--align-center'],\n align === 'right' && styles['Select--align-right'],\n before && styles['Select--hasBefore'],\n className,\n )}\n getRootRef={rootRef}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n before={before}\n after={after}\n mode={getFormFieldModeFromSelectType(selectType)}\n status={status}\n >\n <div className={styles['Select__container']}>\n <SelectTypography selectType={selectType} className={styles['Select__title']}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n"],"names":["SelectMimicry","sizeYClassNames","none","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","DropdownIcon","selectType","status","className","autoFocus","restProps","rootRef","useExternRef","sizeY","useAdaptivity","title","useAutoFocus","FormField","undefined","classNames","mode","getFormFieldModeFromSelectType","div","SelectTypography"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;;;iEA/BU;sBACI;+BACG;8BACD;8BACA;wBACkB;8BAElB;2BACa;kCAET;AAGjC,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAeO,MAAMF,gBAAgB;QAAC,EAC5BG,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,qBAACC,0BAAY,KAAG,EACxBC,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAME,UAAUC,IAAAA,0BAAY,EAACb;IAE7B,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,QAAQlB,YAAYD;IAE1BoB,IAAAA,0BAAY,EAACL,SAASF;IAEtB,qBACE,qBAACQ,oBAAS,8CACJP;QACJf,UAAUM,WAAWiB,YAAYvB;QACjCa,WAAWW,IAAAA,gBAAU,gBAEnBN,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAAChB,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAK;QAEFT,YAAYY;QACZT,SAASD,WAAWiB,YAAYhB;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPgB,MAAMC,IAAAA,sCAA8B,EAACf;QACrCC,QAAQA;kBAER,cAAA,qBAACe;YAAId,SAAS;sBACZ,cAAA,qBAACe,kCAAgB;gBAACjB,YAAYA;gBAAYE,SAAS;0BAChDO;;;;AAKX"}

package/dist/cjs/components/SelectTypography/SelectTypography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps\n extends HTMLAttributesWithRootRef<HTMLSpanElement>,\n HasChildren {\n selectType?: SelectType;\n}\n\n/*\n @private\n */\nexport const SelectTypography = ({\n selectType = 'default',\n children,\n ...restProps\n}: SelectTypographyProps) => {\n return (\n <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n {children}\n </Text>\n );\n};\n"],"names":["SelectTypography","selectType","children","restProps","Text","weight"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAaaA;;;eAAAA;;;;;;;sBAXQ;AAWd,MAAMA,mBAAmB;QAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EAEc,WADnBC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,UAAI;QAACC,QAAQJ,eAAe,WAAW,MAAM;OAASE;kBACpDD;;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps\n extends HTMLAttributesWithRootRef<HTMLSpanElement>,\n HasChildren {\n selectType?: SelectType;\n}\n\n/*\n @private\n */\nexport const SelectTypography = ({\n selectType = 'default',\n children,\n ...restProps\n}: SelectTypographyProps) => {\n return (\n <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n {children}\n </Text>\n );\n};\n"],"names":["SelectTypography","selectType","children","restProps","Text","weight"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;sBAXQ;AAWd,MAAMA,mBAAmB;QAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EAEc,WADnBC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,UAAI;QAACC,QAAQJ,eAAe,WAAW,MAAM;OAASE;kBACpDD;;AAGP"}

package/dist/cjs/components/Separator/Separator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n С этим свойством компонент не будет иметь отступы слева и справа\n /\n wide?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}\n >\n <hr className={styles['Separator__in']} />\n </RootComponent>\n);\n"],"names":["Separator","wide","restProps","RootComponent","baseClassName","classNames","hr","className"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAeaA;;;eAAAA;;;;;;;sBAfc;+BAEG;AAavB,MAAMA,YAAY;QAAC,EAAEC,IAAI,EAAgC,WAA3BC;QAATD;;yBAC1B,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,mBAAsB,CAACJ;kBAEhD,cAAA,qBAACK;YAAGC,SAAS"}
1	+ {"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n С этим свойством компонент не будет иметь отступы слева и справа\n /\n wide?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}\n >\n <hr className={styles['Separator__in']} />\n </RootComponent>\n);\n"],"names":["Separator","wide","restProps","RootComponent","baseClassName","classNames","hr","className"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;sBAfc;+BAEG;AAavB,MAAMA,YAAY;QAAC,EAAEC,IAAI,EAAgC,WAA3BC;QAATD;;yBAC1B,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,mBAAsB,CAACJ;kBAEhD,cAAA,qBAACK;YAAGC,SAAS"}

package/dist/cjs/components/SimpleCell/Chevron/Chevron.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAYaA;;;eAAAA;;;;;;;iEAZU;uBACkC;AAEzD,MAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,MAAML,UAAU;QAAC,EAAEM,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,2BAASD;AACnB"}
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":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;iEAZU;uBACkC;AAEzD,MAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,MAAML,UAAU;QAAC,EAAEM,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,2BAASD;AACnB"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { 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 sizeYClassNames = {\n none: styles['SimpleCell--sizeY-none'],\n ['compact']: styles['SimpleCell--sizeY-compact'],\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 В режиме `auto` в iOS добавляет chevron справа.\n * Передавать `always`, если предполагается переход при клике по ячейке.\n /\n expandable?: '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 const hasChevron = expandable === 'always' \|\| (expandable === 'auto' && 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 sizeY !== 'regular' && sizeYClassNames[sizeY],\n multiline && styles['SimpleCell--mult'],\n className,\n )}\n >\n <div\n className={classNames(\n styles['SimpleCell__before'],\n platform === 'ios' && styles['SimpleCell__before--ios'],\n )}\n >\n {before}\n </div>\n <div className={styles['SimpleCell__middle']}>\n {subhead && (\n <Subhead\n Component=\"span\"\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n >\n {subhead}\n </Subhead>\n )}\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeTitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n )}\n <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n {children}\n </Headline>\n {hasReactNode(badgeAfterTitle) && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n )}\n </div>\n {subtitle && (\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n )}\n <Footnote\n normalize={false}\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n >\n {subtitle}\n </Footnote>\n {badgeAfterSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n )}\n </div>\n )}\n {extraSubtitle && (\n <Footnote\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n >\n {extraSubtitle}\n </Footnote>\n )}\n </div>\n {hasReactNode(indicator) && (\n <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n {indicator}\n </Headline>\n )}\n {hasAfter && (\n <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n {after}\n {hasChevron && (\n <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n )}\n </div>\n )}\n </Tappable>\n );\n};\n"],"names":["SimpleCell","sizeYClassNames","none","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","hasChevron","hasAfter","hasReactNode","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;iEAlFU;sBACkB;+BACX;6BACF;0BAEY;0BACf;0BACA;yBACD;yBACA;AAGxB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAmEO,MAAMF,aAAa;QAAC,EACzBG,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EAED,WADbC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,aAAaV,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAMG,WAAWC,IAAAA,kBAAY,EAACb,UAAUW;IACxC,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHR;QACJF,WAAWW,IAAAA,gBAAU,oBAEnBH,UAAU,aAAavB,eAAe,CAACuB,MAAM,EAC7CZ,qCACAI;;0BAGF,qBAACY;gBACCZ,WAAWW,IAAAA,gBAAU,4BAEnBR,aAAa;0BAGdZ;;0BAEH,sBAACqB;gBAAIZ,SAAS;;oBACXH,yBACC,qBAACgB,gBAAO;wBACNC,WAAU;wBACVd,WAAWW,IAAAA,gBAAU;kCAEpBd;;kCAGL,sBAACe;wBAAIZ,SAAS;;4BACXb,kCACC,qBAAC4B;gCAAKf,SAAS;0CAAgCb;;0CAEjD,qBAAC6B,kBAAQ;gCAACF,WAAU;gCAAOd,SAAS;gCAAkCiB,QAAO;0CAC1ExB;;4BAEFc,IAAAA,kBAAY,EAACnB,kCACZ,qBAAC2B;gCAAKf,SAAS;0CAAgCZ;;;;oBAGlDU,0BACC,sBAACc;wBAAIZ,SAAS;;4BACXX,qCACC,qBAAC0B;gCAAKf,SAAS;0CAAgCX;;0CAEjD,qBAAC6B,kBAAQ;gCACPC,WAAW;gCACXnB,WAAWW,IAAAA,gBAAU;0CAEpBb;;4BAEFR,oCACC,qBAACyB;gCAAKf,SAAS;0CAAgCV;;;;oBAIpDS,+BACC,qBAACmB,kBAAQ;wBACPlB,WAAWW,IAAAA,gBAAU;kCAEpBZ;;;;YAINQ,IAAAA,kBAAY,EAACf,4BACZ,qBAACwB,kBAAQ;gBAACF,WAAU;gBAAOG,QAAO;gBAAIjB,SAAS;0BAC5CR;;YAGJc,0BACC,sBAACM;gBAAIZ,WAAWW,IAAAA,gBAAU,2BAA8B;;oBACrDjB;oBACAW,4BACC,qBAACe,gBAAO;wBAACC,MAAMpB;wBAAaD,SAAS;;;;;;AAMjD"}
1	+ {"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { 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 sizeYClassNames = {\n none: styles['SimpleCell--sizeY-none'],\n ['compact']: styles['SimpleCell--sizeY-compact'],\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 В режиме `auto` в iOS добавляет chevron справа.\n * Передавать `always`, если предполагается переход при клике по ячейке.\n /\n expandable?: '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 const hasChevron = expandable === 'always' \|\| (expandable === 'auto' && 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 sizeY !== 'regular' && sizeYClassNames[sizeY],\n multiline && styles['SimpleCell--mult'],\n className,\n )}\n >\n <div\n className={classNames(\n styles['SimpleCell__before'],\n platform === 'ios' && styles['SimpleCell__before--ios'],\n )}\n >\n {before}\n </div>\n <div className={styles['SimpleCell__middle']}>\n {subhead && (\n <Subhead\n Component=\"span\"\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n >\n {subhead}\n </Subhead>\n )}\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeTitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n )}\n <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n {children}\n </Headline>\n {hasReactNode(badgeAfterTitle) && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n )}\n </div>\n {subtitle && (\n <div className={styles['SimpleCell__content']}>\n {badgeBeforeSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n )}\n <Footnote\n normalize={false}\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n >\n {subtitle}\n </Footnote>\n {badgeAfterSubtitle && (\n <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n )}\n </div>\n )}\n {extraSubtitle && (\n <Footnote\n className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n >\n {extraSubtitle}\n </Footnote>\n )}\n </div>\n {hasReactNode(indicator) && (\n <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n {indicator}\n </Headline>\n )}\n {hasAfter && (\n <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n {after}\n {hasChevron && (\n <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n )}\n </div>\n )}\n </Tappable>\n );\n};\n"],"names":["SimpleCell","sizeYClassNames","none","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","usePlatform","hasChevron","hasAfter","hasReactNode","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","span","Headline","weight","Footnote","normalize","Chevron","size"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;iEAlFU;sBACkB;+BACX;6BACF;0BAEY;0BACf;0BACA;yBACD;yBACA;AAGxB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAmEO,MAAMF,aAAa;QAAC,EACzBG,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EAED,WADbC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,aAAaV,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAMG,WAAWC,IAAAA,kBAAY,EAACb,UAAUW;IACxC,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHR;QACJF,WAAWW,IAAAA,gBAAU,oBAEnBH,UAAU,aAAavB,eAAe,CAACuB,MAAM,EAC7CZ,qCACAI;;0BAGF,qBAACY;gBACCZ,WAAWW,IAAAA,gBAAU,4BAEnBR,aAAa;0BAGdZ;;0BAEH,sBAACqB;gBAAIZ,SAAS;;oBACXH,yBACC,qBAACgB,gBAAO;wBACNC,WAAU;wBACVd,WAAWW,IAAAA,gBAAU;kCAEpBd;;kCAGL,sBAACe;wBAAIZ,SAAS;;4BACXb,kCACC,qBAAC4B;gCAAKf,SAAS;0CAAgCb;;0CAEjD,qBAAC6B,kBAAQ;gCAACF,WAAU;gCAAOd,SAAS;gCAAkCiB,QAAO;0CAC1ExB;;4BAEFc,IAAAA,kBAAY,EAACnB,kCACZ,qBAAC2B;gCAAKf,SAAS;0CAAgCZ;;;;oBAGlDU,0BACC,sBAACc;wBAAIZ,SAAS;;4BACXX,qCACC,qBAAC0B;gCAAKf,SAAS;0CAAgCX;;0CAEjD,qBAAC6B,kBAAQ;gCACPC,WAAW;gCACXnB,WAAWW,IAAAA,gBAAU;0CAEpBb;;4BAEFR,oCACC,qBAACyB;gCAAKf,SAAS;0CAAgCV;;;;oBAIpDS,+BACC,qBAACmB,kBAAQ;wBACPlB,WAAWW,IAAAA,gBAAU;kCAEpBZ;;;;YAINQ,IAAAA,kBAAY,EAACf,4BACZ,qBAACwB,kBAAQ;gBAACF,WAAU;gBAAOG,QAAO;gBAAIjB,SAAS;0BAC5CR;;YAGJc,0BACC,sBAACM;gBAAIZ,WAAWW,IAAAA,gBAAU,2BAA8B;;oBACrDjB;oBACAW,4BACC,qBAACe,gBAAO;wBAACC,MAAMpB;wBAAaD,SAAS;;;;;;AAMjD"}

package/dist/cjs/components/Skeleton/Skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps\n extends HTMLAttributesWithRootRef<HTMLDivElement \| HTMLSpanElement>,\n Pick<\n React.CSSProperties,\n \| 'width'\n \| 'height'\n \| 'inlineSize'\n \| 'blockSize'\n \| 'maxWidth'\n \| 'maxInlineSize'\n \| 'borderRadius'\n \| 'margin'\n > {\n /*\n Начальный цвет анимации\n /\n colorFrom?: string;\n\n /\n Финальный цвет анимации\n /\n colorTo?: string;\n\n /\n Выключает анимацию, в результате чего показывается только один цвет\n /\n noAnimation?: boolean;\n\n /\n Длительность анимации в секундах\n /\n duration?: number;\n}\n\n/\n > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n \n @since 6.1.0\n */\nexport const Skeleton = ({\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n style,\n children,\n colorFrom,\n colorTo,\n noAnimation,\n duration,\n margin,\n ...restProps\n}: SkeletonProps) => {\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n };\n\n if (colorFrom) {\n skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n }\n\n if (colorTo) {\n skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n }\n\n if (Number.isFinite(duration)) {\n skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n }\n\n return (\n <RootComponent\n Component=\"span\"\n baseClassName={classNames(\n styles['Skeleton'],\n noAnimation && styles['Skeleton--disableAnimation'],\n )}\n style={{ ...skeletonStyle, ...style }}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","duration","margin","restProps","skeletonStyle","Number","isFinite","RootComponent","Component","baseClassName","classNames"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;;iEAnDU;sBACI;+BAEG;AAgDvB,MAAMA,WAAW;QAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,MAAM,EAEQ,WADXC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO;IACF;IAEA,IAAIJ,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACL,WAAW;QAC7BG,aAAa,CAAC,+CAA+C,GAAG,CAAC,EAAEH,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,qBAACM,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,kBAEvBV;QAEFJ,OAAO,qBAAKQ,eAAkBR;OAC1BO;kBAEHN,0BAAY;sBAAE;;;AAGrB"}
1	+ {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps\n extends HTMLAttributesWithRootRef<HTMLDivElement \| HTMLSpanElement>,\n Pick<\n React.CSSProperties,\n \| 'width'\n \| 'height'\n \| 'inlineSize'\n \| 'blockSize'\n \| 'maxWidth'\n \| 'maxInlineSize'\n \| 'borderRadius'\n \| 'margin'\n > {\n /*\n Начальный цвет анимации\n /\n colorFrom?: string;\n\n /\n Финальный цвет анимации\n /\n colorTo?: string;\n\n /\n Выключает анимацию, в результате чего показывается только один цвет\n /\n noAnimation?: boolean;\n\n /\n Длительность анимации в секундах\n /\n duration?: number;\n}\n\n/\n > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n \n @since 6.1.0\n */\nexport const Skeleton = ({\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n style,\n children,\n colorFrom,\n colorTo,\n noAnimation,\n duration,\n margin,\n ...restProps\n}: SkeletonProps) => {\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n };\n\n if (colorFrom) {\n skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n }\n\n if (colorTo) {\n skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n }\n\n if (Number.isFinite(duration)) {\n skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n }\n\n return (\n <RootComponent\n Component=\"span\"\n baseClassName={classNames(\n styles['Skeleton'],\n noAnimation && styles['Skeleton--disableAnimation'],\n )}\n style={{ ...skeletonStyle, ...style }}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","duration","margin","restProps","skeletonStyle","Number","isFinite","RootComponent","Component","baseClassName","classNames"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;;iEAnDU;sBACI;+BAEG;AAgDvB,MAAMA,WAAW;QAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,MAAM,EAEQ,WADXC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO;IACF;IAEA,IAAIJ,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACL,WAAW;QAC7BG,aAAa,CAAC,+CAA+C,GAAG,CAAC,EAAEH,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,qBAACM,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,kBAEvBV;QAEFJ,OAAO,qBAAKQ,eAAkBR;OAC1BO;kBAEHN,0BAAY;sBAAE;;;AAGrB"}

package/dist/cjs/components/Slider/Slider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AA0BhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACrF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,2LAgBhB,WAAW,GAAG,mBAAmB,~~4CAmMnC~~,CAAC"}
1	+ {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AA0BhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACrF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,2LAgBhB,WAAW,GAAG,mBAAmB,4CAwMnC,CAAC"}

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

@@ -73,6 +73,7 @@ const Slider = (_param)=>{
     const multiple = multipleProp && endValue !== null;
     const startValueInPercent = (0, _helpers.toPercent)(startValue, min, max);
     const endReversedValueInPercent = multiple ? (0, _helpers.toPercent)(endValue, min, max) : 0;
+    const [activeThumb, setActiveThumb] = _react.useState(null);
     const gesture = _react.useRef({
         dragging: null,
         startX: 0,
@@ -124,6 +125,7 @@ const Slider = (_param)=>{
         }
         changeValue(updatedInternalStateValue, event);
         event.originalEvent.stopPropagation();
+        setActiveThumb(gesture.dragging);
     };
     const handlePointerMove = (event)=>{
         const { startX, containerWidth, dragging } = gesture;
@@ -137,6 +139,7 @@ const Slider = (_param)=>{
     const handlePointerEnd = (event)=>{
         gesture.dragging = null;
         event.originalEvent.stopPropagation();
+        setActiveThumb(null);
     };
     const handleChangeByNativeInput = (event)=>{
         changeValue((0, _helpers.updateInternalStateValueByNativeChange)(value, Number(event.target.value), (0, _helpers.getDraggingTypeByTargetDataset)(event.target)), event);
@@ -186,7 +189,8 @@ const Slider = (_param)=>{
                             'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,
                             'aria-labelledby': ariaLabelledBy,
                             'onChange': handleChangeByNativeInput
-                        }
+                        },
+                        isActive: activeThumb === 'start'
                     }),
                     multiple && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SliderThumb.SliderThumb, {
                         "data-type": "end",
@@ -207,7 +211,8 @@ const Slider = (_param)=>{
                             'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,
                             'aria-labelledby': ariaLabelledBy,
                             'onChange': handleChangeByNativeInput
-                        }
+                        },
+                        isActive: activeThumb === 'end'
                     })
                 ]
             })

package/dist/cjs/components/Slider/Slider.js.map CHANGED Viewed

	@@ -1 +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 { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n extractSliderAriaAttributesFromRestProps,\n getDraggingTypeByTargetDataset,\n isMultipleValues,\n offsetToValue,\n snapDirection,\n toPercent,\n updateInternalStateValue,\n updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n none: styles['Slider--sizeY-none'],\n ['compact']: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n l: styles['Slider--size-l'],\n m: styles['Slider--size-m'],\n s: styles['Slider--size-s'],\n};\n\nexport interface SliderBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n /*\n Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n \n > Перебивает `aria-label`.\n /\n getAriaLabel?: (index: number) => string;\n /\n В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n \n Полезно при использовании компонента как неконтролируемого.\n \n > Перебивает `aria-valuetext`.\n /\n getAriaValueText?: (value: number, index: number) => string;\n withTooltip?: boolean;\n /\n Размер ползунка.\n /\n size?: 's' \| 'm' \| 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n multiple?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number, event: TouchEvent \| React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n multiple: true;\n value?: [number, number];\n defaultValue?: [number, number];\n onChange?: (value: [number, number], event: TouchEvent \| React.ChangeEvent) => void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n step = 1,\n min = 0,\n max = 100,\n value: valueProp,\n multiple: multipleProp,\n defaultValue = multipleProp ? [min, max] : min,\n disabled,\n className,\n getRootRef,\n getAriaLabel,\n getAriaValueText,\n onChange,\n withTooltip,\n size = 'l',\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 \| React.ChangeEvent) => {\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 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 !== 'regular' && sizeYClassNames[sizeY],\n sizeClassNames[size],\n className,\n )}\n onStart={disabled ? undefined : handlePointerStart}\n onMove={disabled ? undefined : handlePointerMove}\n onEnd={disabled ? undefined : handlePointerEnd}\n >\n <div className={styles['Slider__track']} />\n <div\n className={styles['Slider__track-fill']}\n style={\n multiple\n ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n : { width: `${startValueInPercent}%` }\n }\n />\n <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n <SliderThumb\n data-type=\"start\"\n className={styles['Slider__thumb']}\n style={{\n left: `${startValueInPercent}%`,\n // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'start',\n 'ref': thumbStartInputRef,\n 'step': step,\n 'min': min,\n 'value': startValue,\n 'max': multiple ? endValue : max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n />\n {multiple && (\n <SliderThumb\n data-type=\"end\"\n className={styles['Slider__thumb']}\n style={{ left: `${endReversedValueInPercent}%` }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'end',\n 'ref': thumbEndInputRef,\n 'step': step,\n 'min': startValue,\n 'value': endValue,\n 'max': max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n />\n )}\n </div>\n </Touch>\n );\n};\n"],"names":["Slider","sizeYClassNames","none","sizeClassNames","l","m","s","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","useAdaptivity","isControlled","undefined","localValue","setValue","React","useState","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","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","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","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 { HTMLAttributesWithRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n extractSliderAriaAttributesFromRestProps,\n getDraggingTypeByTargetDataset,\n isMultipleValues,\n offsetToValue,\n snapDirection,\n toPercent,\n updateInternalStateValue,\n updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n none: styles['Slider--sizeY-none'],\n ['compact']: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n l: styles['Slider--size-l'],\n m: styles['Slider--size-m'],\n s: styles['Slider--size-s'],\n};\n\nexport interface SliderBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n /*\n Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n \n > Перебивает `aria-label`.\n /\n getAriaLabel?: (index: number) => string;\n /\n В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n \n Полезно при использовании компонента как неконтролируемого.\n \n > Перебивает `aria-valuetext`.\n /\n getAriaValueText?: (value: number, index: number) => string;\n withTooltip?: boolean;\n /\n Размер ползунка.\n /\n size?: 's' \| 'm' \| 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n multiple?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number, event: TouchEvent \| React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n multiple: true;\n value?: [number, number];\n defaultValue?: [number, number];\n onChange?: (value: [number, number], event: TouchEvent \| React.ChangeEvent) => void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n step = 1,\n min = 0,\n max = 100,\n value: valueProp,\n multiple: multipleProp,\n defaultValue = multipleProp ? [min, max] : min,\n disabled,\n className,\n getRootRef,\n getAriaLabel,\n getAriaValueText,\n onChange,\n withTooltip,\n size = 'l',\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 const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType \| null>(null);\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 \| React.ChangeEvent) => {\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 setActiveThumb(gesture.dragging);\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 setActiveThumb(null);\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 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 !== 'regular' && sizeYClassNames[sizeY],\n sizeClassNames[size],\n className,\n )}\n onStart={disabled ? undefined : handlePointerStart}\n onMove={disabled ? undefined : handlePointerMove}\n onEnd={disabled ? undefined : handlePointerEnd}\n >\n <div className={styles['Slider__track']} />\n <div\n className={styles['Slider__track-fill']}\n style={\n multiple\n ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n : { width: `${startValueInPercent}%` }\n }\n />\n <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n <SliderThumb\n data-type=\"start\"\n className={styles['Slider__thumb']}\n style={{\n left: `${startValueInPercent}%`,\n // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'start',\n 'ref': thumbStartInputRef,\n 'step': step,\n 'min': min,\n 'value': startValue,\n 'max': multiple ? endValue : max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'start'}\n />\n {multiple && (\n <SliderThumb\n data-type=\"end\"\n className={styles['Slider__thumb']}\n style={{ left: `${endReversedValueInPercent}%` }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'end',\n 'ref': thumbEndInputRef,\n 'step': step,\n 'min': startValue,\n 'value': endValue,\n 'max': max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'end'}\n />\n )}\n </div>\n </Touch>\n );\n};\n"],"names":["Slider","sizeYClassNames","none","sizeClassNames","l","m","s","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","useAdaptivity","isControlled","undefined","localValue","setValue","React","useState","useMemo","resolvedValue","Array","isArray","clamp","startValue","endValue","startValueInPercent","toPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","useExternRef","thumbStartInputRef","thumbEndInputRef","extractSliderAriaAttributesFromRestProps","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","isMultipleValues","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","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","onStart","onMove","onEnd","div","style","right","ref","SliderThumb","data-type","zIndex","inputProps","isActive"],"mappings":"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"}

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

@@ -5,7 +5,8 @@ interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute
     style?: React.CSSProperties;
     inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & HasDataAttribute;
     withTooltip?: boolean;
+    isActive?: boolean;
 }
-export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, ...restProps }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SliderThumb: ({ className, getRootRef, inputProps, withTooltip, isActive, ...restProps }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SliderThumb.d.ts.map

package/dist/cjs/components/Slider/SliderThumb/SliderThumb.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;~~CACvB~~;AAED,eAAO,MAAM,WAAW,~~qEAMrB,~~gBAAgB,~~4CA4FlB~~,CAAC"}
1	+ {"version":3,"file":"SliderThumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAInE,UAAU,gBAAiB,SAAQ,UAAU,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACtD,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GACrC,gBAAgB,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,+EAOrB,gBAAgB,4CAkGlB,CAAC"}

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

@@ -22,13 +22,14 @@ const _useFocusVisibleClassName = require("../../../hooks/useFocusVisibleClassNa
 const _floating = require("../../../lib/floating");
 const _TooltipBase = require("../../TooltipBase/TooltipBase");
 const SliderThumb = (_param)=>{
-    var { className, getRootRef, inputProps, withTooltip } = _param, restProps = _object_without_properties._(_param, [
+    var { className, getRootRef, inputProps, withTooltip, isActive } = _param, restProps = _object_without_properties._(_param, [
         "className",
         "getRootRef",
         "inputProps",
-        "withTooltip"
+        "withTooltip",
+        "isActive"
     ]);
-    const { focusVisible, onBlur, onFocus } = (0, _useFocusVisible.useFocusVisible)(false);
+    const { focusVisible, onBlur, onFocus } = (0, _useFocusVisible.useFocusVisible)();
     const focusVisibleClassNames = (0, _useFocusVisibleClassName.useFocusVisibleClassName)({
         focusVisible,
         mode: "vkuiSliderThumb--focus-visible"
@@ -57,7 +58,7 @@ const SliderThumb = (_param)=>{
     });
     const { value: isHovered, setTrue: setHoveredTrue, setFalse: setHoveredFalse } = (0, _useBooleanState.useBooleanState)(false);
     const handleRootRef = (0, _useExternRef.useExternRef)(getRootRef, refs.setReference);
-    const shouldShowTooltip = withTooltip && (focusVisible || isHovered);
+    const shouldShowTooltip = withTooltip && (focusVisible || isHovered || isActive);
     const inputValue = inputProps && inputProps.value;
     _react.useEffect(function udpateTooltipPositionOnValueChange() {
         if (shouldShowTooltip && inputValue !== 'undefined') {
@@ -74,7 +75,7 @@ const SliderThumb = (_param)=>{
                 ref: handleRootRef,
                 onMouseEnter: setHoveredTrue,
                 onMouseLeave: setHoveredFalse,
-                className: (0, _vkjs.classNames)("vkuiSliderThumb", focusVisibleClassNames, className),
+                className: (0, _vkjs.classNames)("vkuiSliderThumb", focusVisibleClassNames, isActive && "vkuiSliderThumb--active", isHovered && "vkuiSliderThumb--hover", className),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("input", _object_spread_props._(_object_spread._({}, inputProps), {
                     type: "range",
                     className: "vkuiSliderThumb__nativeInput",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n arrowMiddleware,\n convertFloatingDataToReactCSSProperties,\n flipMiddleware,\n offsetMiddleware,\n shiftMiddleware,\n useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n className?: string;\n style?: React.CSSProperties;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n React.RefAttributes<HTMLInputElement> &\n HasDataAttribute;\n withTooltip?: boolean;\n}\n\nexport const SliderThumb = ({\n className,\n getRootRef,\n inputProps,\n withTooltip,\n ...restProps\n}: SliderThumbProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible(~~false~~);\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n mode: styles['SliderThumb--focus-visible'],\n });\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n\n const memoizedMiddlewares = React.useMemo(() => {\n return [\n offsetMiddleware({\n crossAxis: 0,\n mainAxis: 15,\n }),\n flipMiddleware(),\n shiftMiddleware({ padding: 8 }),\n arrowMiddleware({\n element: arrowRef,\n }),\n ];\n }, [arrowRef]);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n placement: resolvedPlacement,\n refs,\n strategy: floatingPositionStrategy,\n middlewareData: { arrow: arrowCoords },\n update: updateTooltipPosition,\n } = useFloating({\n placement: 'top',\n middleware: memoizedMiddlewares,\n });\n\n const {\n value: isHovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n const shouldShowTooltip = withTooltip && (focusVisible \|\| isHovered);\n\n const inputValue = inputProps && inputProps.value;\n React.useEffect(\n function udpateTooltipPositionOnValueChange() {\n if (shouldShowTooltip && inputValue !== 'undefined') {\n updateTooltipPosition();\n }\n },\n [inputValue, updateTooltipPosition, shouldShowTooltip],\n );\n\n return (\n <React.Fragment>\n <span\n {...restProps}\n ref={handleRootRef}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n className={classNames(styles['SliderThumb'], focusVisibleClassNames, className)}\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 </span>\n {shouldShowTooltip && (\n <TooltipBase\n appearance=\"neutral\"\n getRootRef={refs.setFloating}\n style={convertFloatingDataToReactCSSProperties(\n floatingPositionStrategy,\n floatingDataX,\n floatingDataY,\n )}\n arrowProps={{\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }}\n text={inputValue}\n />\n )}\n </React.Fragment>\n );\n};\n"],"names":["SliderThumb","className","getRootRef","inputProps","withTooltip","restProps","focusVisible","onBlur","onFocus","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","arrowRef","setArrowRef","React","useState","memoizedMiddlewares","useMemo","offsetMiddleware","crossAxis","mainAxis","flipMiddleware","shiftMiddleware","padding","arrowMiddleware","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","useFloating","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","useBooleanState","handleRootRef","useExternRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","classNames","input","type","aria-orientation","TooltipBase","appearance","setFloating","style","convertFloatingDataToReactCSSProperties","arrowProps","coords","text"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BA2BaA~~;;;eAAAA;;;;;;;;~~iEA3BU~~;sBACI;iCACK;8BACH;iCACG;0CACS;0BAQlC;6BAEqB;~~AAYrB~~,MAAMA,cAAc;QAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,~~EAEM~~,WADdC;~~QAJHJ~~;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,IAAAA,gCAAe~~,EAAC~~;~~IAC1D~~,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDL;QACAM,IAAI;IACN;IACA,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsBF,OAAMG,OAAO,CAAC;QACxC,OAAO;YACLC,IAAAA,0BAAgB,EAAC;gBACfC,WAAW;gBACXC,UAAU;YACZ;YACAC,IAAAA,wBAAc;YACdC,IAAAA,yBAAe,EAAC;gBAAEC,SAAS;YAAE;YAC7BC,IAAAA,yBAAe,EAAC;gBACdC,SAASb;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJc,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGC,IAAAA,qBAAW,EAAC;QACdV,WAAW;QACXW,YAAYzB;IACd;IAEA,MAAM,EACJ0B,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGC,IAAAA,gCAAe,EAAC;IAEpB,MAAMC,gBAAgBC,IAAAA,0BAAY,~~EAAkBjD~~,~~YAAY+B~~,KAAKmB,YAAY;IAEjF,MAAMC,~~oBAAoBjD~~,~~eAAgBE~~,CAAAA,gBAAgBsC,~~SAAQ~~;~~IAElE~~,~~MAAMU~~,~~aAAanD~~,cAAcA,~~WAAWwC~~,KAAK;IACjD5B,OAAMwC,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDd;QACF;IACF,GACA;QAACc;QAAYd;QAAuBa;KAAkB;IAGxD,qBACE,sBAACtC,OAAM0C,QAAQ;;0BACb,qBAACC,oDACKrD;gBACJsD,KAAKT;gBACLU,cAAcd;gBACde,cAAcb;~~gBACd/C~~,~~WAAW6D~~,IAAAA,gBAAU,~~qBAAwBpD~~,~~wBAAwBT~~;~~0BAErE~~,cAAA,~~qBAAC8D~~,~~qDACK5D~~;~~oBACJ6D~~,MAAK;~~oBACL/D~~,SAAS;~~oBACTgE~~,oBAAiB;oBACjB1D,QAAQA;oBACRC,SAASA;;;YAGZ6C,mCACC,qBAACa,wBAAW;gBACVC,YAAW;~~gBACXjE~~,~~YAAY+B~~,KAAKmC,WAAW;gBAC5BC,OAAOC,IAAAA,iDAAuC,EAC5CnC,0BACAP,eACAE;gBAEFyC,YAAY;oBACVC,QAAQlC;oBACRP,WAAWC;~~oBACX9B~~,~~YAAYY~~;gBACd;gBACA2D,MAAMnB;;;;AAKhB"}
1	+ {"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n arrowMiddleware,\n convertFloatingDataToReactCSSProperties,\n flipMiddleware,\n offsetMiddleware,\n shiftMiddleware,\n useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n className?: string;\n style?: React.CSSProperties;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n React.RefAttributes<HTMLInputElement> &\n HasDataAttribute;\n withTooltip?: boolean;\n isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n className,\n getRootRef,\n inputProps,\n withTooltip,\n isActive,\n ...restProps\n}: SliderThumbProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n mode: styles['SliderThumb--focus-visible'],\n });\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n\n const memoizedMiddlewares = React.useMemo(() => {\n return [\n offsetMiddleware({\n crossAxis: 0,\n mainAxis: 15,\n }),\n flipMiddleware(),\n shiftMiddleware({ padding: 8 }),\n arrowMiddleware({\n element: arrowRef,\n }),\n ];\n }, [arrowRef]);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n placement: resolvedPlacement,\n refs,\n strategy: floatingPositionStrategy,\n middlewareData: { arrow: arrowCoords },\n update: updateTooltipPosition,\n } = useFloating({\n placement: 'top',\n middleware: memoizedMiddlewares,\n });\n\n const {\n value: isHovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n const shouldShowTooltip = withTooltip && (focusVisible \|\| isHovered \|\| isActive);\n\n const inputValue = inputProps && inputProps.value;\n React.useEffect(\n function udpateTooltipPositionOnValueChange() {\n if (shouldShowTooltip && inputValue !== 'undefined') {\n updateTooltipPosition();\n }\n },\n [inputValue, updateTooltipPosition, shouldShowTooltip],\n );\n\n return (\n <React.Fragment>\n <span\n {...restProps}\n ref={handleRootRef}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n className={classNames(\n styles['SliderThumb'],\n focusVisibleClassNames,\n isActive && styles['SliderThumb--active'],\n isHovered && styles['SliderThumb--hover'],\n className,\n )}\n >\n <input\n {...inputProps}\n type=\"range\"\n className={styles['SliderThumb__nativeInput']}\n aria-orientation=\"horizontal\"\n onBlur={onBlur}\n onFocus={onFocus}\n />\n </span>\n {shouldShowTooltip && (\n <TooltipBase\n appearance=\"neutral\"\n getRootRef={refs.setFloating}\n style={convertFloatingDataToReactCSSProperties(\n floatingPositionStrategy,\n floatingDataX,\n floatingDataY,\n )}\n arrowProps={{\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }}\n text={inputValue}\n />\n )}\n </React.Fragment>\n );\n};\n"],"names":["SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","arrowRef","setArrowRef","React","useState","memoizedMiddlewares","useMemo","offsetMiddleware","crossAxis","mainAxis","flipMiddleware","shiftMiddleware","padding","arrowMiddleware","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","useFloating","middleware","value","isHovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","useBooleanState","handleRootRef","useExternRef","setReference","shouldShowTooltip","inputValue","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","classNames","input","type","aria-orientation","TooltipBase","appearance","setFloating","style","convertFloatingDataToReactCSSProperties","arrowProps","coords","text"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;iCACK;8BACH;iCACG;0CACS;0BAQlC;6BAEqB;AAarB,MAAMA,cAAc;QAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EAES,WADdC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QACtDL;QACAM,IAAI;IACN;IACA,MAAM,CAACC,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsBF,OAAMG,OAAO,CAAC;QACxC,OAAO;YACLC,IAAAA,0BAAgB,EAAC;gBACfC,WAAW;gBACXC,UAAU;YACZ;YACAC,IAAAA,wBAAc;YACdC,IAAAA,yBAAe,EAAC;gBAAEC,SAAS;YAAE;YAC7BC,IAAAA,yBAAe,EAAC;gBACdC,SAASb;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJc,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGC,IAAAA,qBAAW,EAAC;QACdV,WAAW;QACXW,YAAYzB;IACd;IAEA,MAAM,EACJ0B,OAAOC,SAAS,EAChBC,SAASC,cAAc,EACvBC,UAAUC,eAAe,EAC1B,GAAGC,IAAAA,gCAAe,EAAC;IAEpB,MAAMC,gBAAgBC,IAAAA,0BAAY,EAAkBlD,YAAYgC,KAAKmB,YAAY;IAEjF,MAAMC,oBAAoBlD,eAAgBG,CAAAA,gBAAgBsC,aAAaxC,QAAO;IAE9E,MAAMkD,aAAapD,cAAcA,WAAWyC,KAAK;IACjD5B,OAAMwC,SAAS,CACb,SAASC;QACP,IAAIH,qBAAqBC,eAAe,aAAa;YACnDd;QACF;IACF,GACA;QAACc;QAAYd;QAAuBa;KAAkB;IAGxD,qBACE,sBAACtC,OAAM0C,QAAQ;;0BACb,qBAACC,oDACKrD;gBACJsD,KAAKT;gBACLU,cAAcd;gBACde,cAAcb;gBACdhD,WAAW8D,IAAAA,gBAAU,qBAEnBpD,wBACAN,uCACAwC,uCACA5C;0BAGF,cAAA,qBAAC+D,qDACK7D;oBACJ8D,MAAK;oBACLhE,SAAS;oBACTiE,oBAAiB;oBACjB1D,QAAQA;oBACRC,SAASA;;;YAGZ6C,mCACC,qBAACa,wBAAW;gBACVC,YAAW;gBACXlE,YAAYgC,KAAKmC,WAAW;gBAC5BC,OAAOC,IAAAA,iDAAuC,EAC5CnC,0BACAP,eACAE;gBAEFyC,YAAY;oBACVC,QAAQlC;oBACRP,WAAWC;oBACX/B,YAAYa;gBACd;gBACA2D,MAAMnB;;;;AAKhB"}

package/dist/cjs/components/Slider/helpers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,SAAS,MAAO,MAAM,OAAO,MAAM,OAAO,MAAM,WAAoC,CAAC;AAElG,eAAO,MAAM,aAAa,WAChB,MAAM,SACP,MAAM,OACR,MAAM,OACN,MAAM,SACJ,MAAM,WAGd,CAAC;AAYF,eAAO,MAAM,wBAAwB,~~6CAExB~~,MAAM,OACZ,MAAM,OACN,MAAM,YACD,oBAAoB,GAAG,IAAI,~~uBAqBtC~~,CAAC;AAEF,eAAO,MAAM,sCAAsC,~~6CAEtC~~,MAAM,YACP,oBAAoB,GAAG,IAAI,~~uBAYtC~~,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF;AAED,eAAO,MAAM,aAAa,~~6CAEb~~,MAAM,QACX,oBAAoB,GAAG,IAAI,oBAelC,CAAC;AAEF,eAAO,MAAM,8BAA8B,~~yDACjC~~,CAAC,2BAWV,CAAC;AAQF,eAAO,MAAM,wCAAwC,~~8CACxC~~,CAAC;;;;;;;CAMb,CAAC"}
1	+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,SAAS,MAAO,MAAM,OAAO,MAAM,OAAO,MAAM,WAAoC,CAAC;AAElG,eAAO,MAAM,aAAa,WAChB,MAAM,SACP,MAAM,OACR,MAAM,OACN,MAAM,SACJ,MAAM,WAGd,CAAC;AAYF,eAAO,MAAM,wBAAwB,cACxB,kBAAkB,aAClB,MAAM,OACZ,MAAM,OACN,MAAM,YACD,oBAAoB,GAAG,IAAI,KACpC,kBAoBF,CAAC;AAEF,eAAO,MAAM,sCAAsC,cACtC,kBAAkB,aAClB,MAAM,YACP,oBAAoB,GAAG,IAAI,KACpC,kBAWF,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAErF;AAED,eAAO,MAAM,aAAa,cACb,kBAAkB,aAClB,MAAM,QACX,oBAAoB,GAAG,IAAI,oBAelC,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,IAAI,UACjF,CAAC,2BAWV,CAAC;AAQF,eAAO,MAAM,wCAAwC,GAAI,CAAC,SAAS,KAAK,CAAC,cAAc,aAC1E,CAAC;;;;;;;CAMb,CAAC"}

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

	@@ -1 +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":["extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","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"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;IAmHaA,wCAAwC;eAAxCA;;IApBAC,8BAA8B;eAA9BA;;IAxBGC,gBAAgB;eAAhBA;;IAjEHC,aAAa;eAAbA;;IAqEAC,aAAa;eAAbA;;IAvEAC,SAAS;eAATA;;IAsBAC,wBAAwB;eAAxBA;;IA4BAC,sCAAsC;eAAtCA;;;;;;iEAtDU;sBACC;AAGjB,MAAMF,YAAY,CAACG,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAEvF,MAAMN,gBAAgB,CAC3BQ,QACAC,OACAH,KACAC,KACAG;IAEA,OAAOC,IAAAA,aAAO,EAACH,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACH;QAAKC;KAAI,EAAE;QAAEG;IAAK;AACxD;AAEA,MAAME,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEO,MAAMV,2BAA2B,CACtCW,WACAC,WACAT,KACAC,KACAS;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACN,sBAAsBG,WAAWT,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQS;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACN,sBAAsBG,WAAWT,KAAKC;gBAAMW;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBL,sBAAsBG,WAAWT,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOO;IACX;AACF;AAEO,MAAMV,yCAAyC,CACpDU,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;AAEO,SAASf,iBAAiBc,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEO,MAAMZ,gBAAgB,CAC3Ba,WACAC,WACAI;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGP;IAC3B,2EAA2E,GAC3E,MAAMQ,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQR,cAAcU,KAAKC,GAAG,CAACF,MAAMT,aAAa,UAAU;AAC9E;AAEO,MAAMjB,iCAAiC,CAC5C6B;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACT,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIQ,OAAOC,OAAO,CAACT,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT;AAEA,MAAMU,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEO,MAAMjC,2CAA2C,CACtDkC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,4CAAKA,WAAcF;QAAYG;QAAWC;QAAeC;;AAClE"}
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":["extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","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":";;;;;;;;;;;IAmHaA,wCAAwC;eAAxCA;;IApBAC,8BAA8B;eAA9BA;;IAxBGC,gBAAgB;eAAhBA;;IAjEHC,aAAa;eAAbA;;IAqEAC,aAAa;eAAbA;;IAvEAC,SAAS;eAATA;;IAsBAC,wBAAwB;eAAxBA;;IA4BAC,sCAAsC;eAAtCA;;;;;;iEAtDU;sBACC;AAGjB,MAAMF,YAAY,CAACG,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;AAEvF,MAAMN,gBAAgB,CAC3BQ,QACAC,OACAH,KACAC,KACAG;IAEA,OAAOC,IAAAA,aAAO,EAACH,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACH;QAAKC;KAAI,EAAE;QAAEG;IAAK;AACxD;AAEA,MAAME,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEO,MAAMV,2BAA2B,CACtCW,WACAC,WACAT,KACAC,KACAS;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACN,sBAAsBG,WAAWT,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQS;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACN,sBAAsBG,WAAWT,KAAKC;gBAAMW;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBL,sBAAsBG,WAAWT,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOO;IACX;AACF;AAEO,MAAMV,yCAAyC,CACpDU,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;AAEO,SAASf,iBAAiBc,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEO,MAAMZ,gBAAgB,CAC3Ba,WACAC,WACAI;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGP;IAC3B,2EAA2E,GAC3E,MAAMQ,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQR,cAAcU,KAAKC,GAAG,CAACF,MAAMT,aAAa,UAAU;AAC9E;AAEO,MAAMjB,iCAAiC,CAC5C6B;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACT,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIQ,OAAOC,OAAO,CAACT,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT;AAEA,MAAMU,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEO,MAAMjC,2CAA2C,CACtDkC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,4CAAKA,WAAcF;QAAYG;QAAWC;QAAeC;;AAClE"}

package/dist/cjs/components/Slider/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Slider/types.ts"],"names":[],"~~rangeMappings":"","~~mappings":""}
1	+ {"version":3,"sources":["../../../../src/components/Slider/types.ts"],"names":[],"mappings":""}

package/dist/cjs/components/Snackbar/Snackbar.d.ts CHANGED Viewed

@@ -33,7 +33,7 @@ export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
 export declare const Snackbar: {
-    ({ placement, children, layout, action, before, after, duration, onActionClick, onClose, mode, subtitle, offsetY, style, getRootRef, ...restProps }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
+    ({ placement, children, layout, action, before, after, duration, onActionClick, onClose, mode, subtitle, offsetY, style, getRootRef, ...restProps }: SnackbarProps): import("react/jsx-runtime").JSX.Element | null;
     Basic: typeof Basic;
 };
 //# sourceMappingURL=Snackbar.d.ts.map