npm - @vkontakte/vkui - Versions diffs - 6.6.0 → 6.7.0 - Mend

@vkontakte/vkui 6.6.0 → 6.7.0

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 (551) hide show

package/dist/cssm/components/Search/Search.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { useBooleanState } from '../../hooks/useBooleanState';
@@ -28,6 +28,7 @@ import styles from './Search.module.css';
     const { sizeY = 'none' } = useAdaptivity();
     const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
     const platform = usePlatform();
+    const hasAfter = platform === 'ios' && hasReactNode(after);
     const onFocus = (e)=>{
         setFocusedTrue();
         inputProps.onFocus && inputProps.onFocus(e);
@@ -86,7 +87,7 @@ import styles from './Search.module.css';
             ]
         });
     return /*#__PURE__*/ _jsxs("div", {
-        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === 'compact' && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], hasValue && styles['Search--has-value'], after && styles['Search--has-after'], iconProp && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], className),
+        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === 'compact' && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], hasValue && styles['Search--has-value'], hasAfter && styles['Search--has-after'], iconProp && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], className),
         ref: getRootRef,
         style: style,
         children: [
@@ -150,17 +151,21 @@ import styles from './Search.module.css';
                     })
                 ]
             }),
-            platform === 'ios' && after && /*#__PURE__*/ _jsx(Button, {
-                mode: "tertiary",
-                size: "m",
+            hasAfter && /*#__PURE__*/ _jsx("div", {
                 className: styles['Search__after'],
-                focusVisibleMode: "inside",
-                onClick: onCancel,
-                onFocus: setFocusedTrue,
-                onBlur: setFocusedFalse,
-                children: /*#__PURE__*/ _jsx("span", {
-                    className: styles['Search__afterText'],
-                    children: after
+                children: /*#__PURE__*/ _jsx(Button, {
+                    mode: "tertiary",
+                    size: "m",
+                    focusVisibleMode: "inside",
+                    hoverMode: "opacity",
+                    activeMode: "opacity",
+                    onClick: onCancel,
+                    onFocus: setFocusedTrue,
+                    onBlur: setFocusedFalse,
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: styles['Search__afterTextClip'],
+                        children: after
+                    })
                 })
             })
         ]

package/dist/cssm/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 type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n icon: React.ReactNode,\n props?: Partial<IconButtonProps>,\n) => React.ReactNode;\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 \| ((renderFn: RenderIconButtonFn) => 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: iconProp,\n onIconClick,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps): React.ReactNode => {\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 const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n {...props}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\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 iconProp && 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 {iconProp &&\n (typeof iconProp === 'function'\n ? iconProp(renderIconButton)\n : renderIconButton(iconProp))}\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n tabIndex={hasValue ? undefined : -1}\n disabled={inputProps.disabled}\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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","styles","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","onFocus","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","compact","mode","size","focusVisibleMode","span"],"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, hasReactNode, 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 type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n icon: React.ReactNode,\n props?: Partial<IconButtonProps>,\n) => React.ReactNode;\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 \| ((renderFn: RenderIconButtonFn) => 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: iconProp,\n onIconClick,\n style,\n autoComplete = 'off',\n onChange,\n iconLabel,\n clearLabel = 'Очистить',\n noPadding,\n getRootRef,\n findButtonText = 'Найти',\n onFindButtonClick,\n ...inputProps\n}: SearchProps): React.ReactNode => {\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 hasAfter = platform === 'ios' && hasReactNode(after);\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 const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n onClick={noop}\n {...props}\n >\n <VisuallyHidden>{iconLabel}</VisuallyHidden>\n {icon}\n </IconButton>\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 hasAfter && styles['Search--has-after'],\n iconProp && 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 {iconProp &&\n (typeof iconProp === 'function'\n ? iconProp(renderIconButton)\n : renderIconButton(iconProp))}\n <IconButton\n hoverMode=\"opacity\"\n onPointerDown={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n tabIndex={hasValue ? undefined : -1}\n disabled={inputProps.disabled}\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 {hasAfter && (\n <div className={styles['Search__after']}>\n <Button\n mode=\"tertiary\"\n size=\"m\"\n focusVisibleMode=\"inside\"\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n onClick={onCancel}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n >\n <span className={styles['Search__afterTextClip']}>{after}</span>\n </Button>\n </div>\n )}\n </div>\n );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","styles","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","compact","mode","size","focusVisibleMode","activeMode","span"],"mappings":"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"}

package/dist/cssm/components/Search/Search.module.css CHANGED Viewed

@@ -26,9 +26,10 @@
 }
 .Search__field {
-  flex: 2;
   position: relative;
   display: flex;
+  flex-grow: 2;
+  flex-basis: 0%;
   block-size: var(--vkui_internal--search_height);
   background-color: var(--vkui--color_search_field_background);
   border-radius: var(--vkui--size_border_radius--regular);
@@ -175,31 +176,42 @@
 }
 .Search__after {
-  flex: 0;
-  transform-origin: left;
-  min-inline-size: initial;
+  position: relative;
+  display: flex;
+  flex-grow: 0;
+  flex-basis: 0%;
+  min-inline-size: 0;
   max-inline-size: -webkit-min-content;
   max-inline-size: -moz-min-content;
   max-inline-size: min-content;
+  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
   pointer-events: none;
-  transition-timing-function: var(--vkui--animation_easing_platform);
-  transition-duration: 0.3s;
-  transition-property: flex, margin-inline;
-  overflow: hidden;
-  margin-inline: 0;
 }
 .Search--focused .Search__after,
 .Search--has-value .Search__after {
-  flex: 1;
+  flex-grow: 1;
   pointer-events: initial;
-  margin-inline: 4px calc(4px - var(--vkui--size_base_padding_horizontal--regular));
 }
-.Search__afterText {
+.Search__after::before,
+.Search__after::after {
+  content: '';
+  flex-shrink: 0;
+  display: block;
+  inline-size: 4px;
+  block-size: 100%;
+}
+.Search--withPadding .Search__after::after {
+  -webkit-margin-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+          margin-inline-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+.Search__afterTextClip {
   display: block;
-  white-space: nowrap;
   text-overflow: clip;
+  white-space: nowrap;
   overflow: hidden;
 }

package/dist/cssm/components/SegmentedControl/SegmentedControl.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { SegmentedControlOption } from './SegmentedControlOption/SegmentedContro
 import styles from './SegmentedControl.module.css';
 const sizeYClassNames = {
     none: styles['SegmentedControl--sizeY-none'],
-    ['regular']: styles['SegmentedControl--sizeY-regular']
+    regular: styles['SegmentedControl--sizeY-regular']
 };
 const warn = warnOnce('SegmentedControl');
 /**

package/dist/cssm/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 type { 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): React.ReactNode => {\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 }}\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":["React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;~~IAC5C~~,~~CAAC~~,~~UAAU,EAAEA,~~MAAM,CAAC,kCAAkC;~~AACxD~~;AAyBA,~~MAAMG~~,~~OAAON~~,SAAS;AAEtB;;CAEC,GACD,OAAO,~~MAAMO~~,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,eAAeD,OAAO,CAAC,EAAE,EAAEE,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,~~KAAKvB~~,~~MAAMwB~~,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,~~GAAGhB~~,wBAAwB;~~QAChDgB~~,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,~~GAAGvB~~;IAE3B,~~MAAMwB~~,cAAcX,QAAQY,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;~~IAEnEb~~,0BAA0B;QACxB,~~IAAIsB~~,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEpB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACe;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,~~KAACpB~~;QACE,~~GAAGgB~~,SAAS;QACbW,~~eAAehC~~,WACbO,MAAM,CAAC,mBAAmB,~~EAC1BiB~~,UAAU,~~aAAahB~~,eAAe,~~CAACgB~~,MAAM,EAC7CZ,SAAS,~~OAAOL~~,MAAM,CAAC,2BAA2B;kBAGpD,cAAA,~~MAAC0B~~;YAAIC,MAAK;YAAaC,~~WAAW5B~~,MAAM,CAAC,uBAAuB;;~~gBAC7DkB~~,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,~~WAAW5B~~,MAAM,CAAC,2BAA2B;~~oBAC7C8B~~,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMxB,QAAQyB,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGHjB,QAAQ2B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,GAAGC,aAAa,iBACrC,~~KAACrC~~;wBAEE,~~GAAGqC~~,WAAW;wBACf9B,MAAMA,QAAQS;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;uBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;AAYvC,EAAE"}
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 type { 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): React.ReactNode => {\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 }}\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":["React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","regular","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAyBA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,eAAeD,OAAO,CAAC,EAAE,EAAEE,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKxB,MAAMyB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGjB,wBAAwB;QAChDiB,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGxB;IAE3B,MAAMyB,cAAcX,QAAQY,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEd,0BAA0B;QACxB,IAAIuB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEpB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACe;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,KAACrB;QACE,GAAGiB,SAAS;QACbW,eAAejC,WACbO,MAAM,CAAC,mBAAmB,EAC1BkB,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CZ,SAAS,OAAON,MAAM,CAAC,2BAA2B;kBAGpD,cAAA,MAAC2B;YAAIC,MAAK;YAAaC,WAAW7B,MAAM,CAAC,uBAAuB;;gBAC7DmB,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,WAAW7B,MAAM,CAAC,2BAA2B;oBAC7C+B,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMxB,QAAQyB,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGHjB,QAAQ2B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,GAAGC,aAAa,iBACrC,KAACtC;wBAEE,GAAGsC,WAAW;wBACf9B,MAAMA,QAAQS;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;uBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;AAYvC,EAAE"}

package/dist/cssm/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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,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,KAAG,KAAK,CAAC,~~SAyD~~/B,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,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,KAAG,KAAK,CAAC,SA6D/B,CAAC"}

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

@@ -7,7 +7,7 @@ import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */ export const Select = ({ children, className, ...props })=>{
-    const { 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, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, ...restProps } = props;
+    const { 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, pattern, minLength, maxLength, readOnly, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, ...restProps } = props;
     const { deviceType } = useAdaptivityConditionalRender();
     const nativeProps = restProps;
     return /*#__PURE__*/ _jsxs(React.Fragment, {

package/dist/cssm/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 type { 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>): React.ReactNode => {\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 getSelectInputRef,\n overscrollBehavior,\n beforeAlign,\n afterAlign,\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":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","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","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACV,GAAGC,WACJ,~~GAAG9B~~;IAEJ,MAAM,~~EAAE+B~~,UAAU,EAAE,~~GAAGrC~~;IAEvB,~~MAAMsC~~,cAAyEF;IAE/E,qBACE,~~MAACtC~~,~~MAAMyC~~,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,~~KAACvC~~;gBAAaI,WAAWN,WAAWM,~~WAAWgC~~,WAAWG,OAAO,~~CAACnC~~,SAAS;gBAAI,GAAGC,KAAK;;~~YAExF+B~~,WAAWI,MAAM,kBAChB,~~KAACvC~~;gBACCG,WAAWN,WAAWM,~~WAAWgC~~,WAAWI,MAAM,~~CAACpC~~,SAAS;gBAC3D,~~GAAGiC~~,WAAW;~~0BAEd/B~~,~~QAAQmC~~,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}
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 type { 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>): React.ReactNode => {\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 pattern,\n minLength,\n maxLength,\n readOnly,\n getSelectInputRef,\n overscrollBehavior,\n beforeAlign,\n afterAlign,\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":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","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","pattern","minLength","maxLength","readOnly","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACV,GAAGC,WACJ,GAAGlC;IAEJ,MAAM,EAAEmC,UAAU,EAAE,GAAGzC;IAEvB,MAAM0C,cAAyEF;IAE/E,qBACE,MAAC1C,MAAM6C,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAAC3C;gBAAaI,WAAWN,WAAWM,WAAWoC,WAAWG,OAAO,CAACvC,SAAS;gBAAI,GAAGC,KAAK;;YAExFmC,WAAWI,MAAM,kBAChB,KAAC3C;gBACCG,WAAWN,WAAWM,WAAWoC,WAAWI,MAAM,CAACxC,SAAS;gBAC3D,GAAGqC,WAAW;0BAEdnC,QAAQuC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}

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

@@ -11,7 +11,7 @@ import { SelectTypography } from '../SelectTypography/SelectTypography';
 import styles from '../Select/Select.module.css';
 const sizeYClassNames = {
     none: styles['Select--sizeY-none'],
-    ['compact']: styles['Select--sizeY-compact']
+    compact: styles['Select--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry

package/dist/cssm/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 type { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type 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): React.ReactNode => {\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":["React","classNames","useAdaptivity","useAutoFocus","useExternRef","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","mode","div"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;~~IAClC~~,~~CAAC~~,~~UAAU,EAAEA,~~MAAM,CAAC,wBAAwB;~~AAC9C~~;AAYA;;CAEC,GACD,OAAO,~~MAAMG~~,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,~~KAAChB~~,iBAAe,~~EACxBiB~~,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,~~UAAUxB~~,~~aAAaa~~;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,~~GAAG3B~~;IAC3B,~~MAAM4B~~,QAAQf,YAAYD;~~IAE1BX~~,~~aAAayB~~,SAASF;IAEtB,qBACE,~~KAACnB~~;QACE,~~GAAGoB~~,SAAS;QACbd,UAAUM,WAAWY,YAAYlB;QACjCY,~~WAAWxB~~,WACTQ,MAAM,CAAC,SAAS,~~EAChBoB~~,UAAU,~~aAAanB~~,eAAe,~~CAACmB~~,MAAM,EAC7C,CAACd,~~YAAYN~~,MAAM,CAAC,gBAAgB,~~EACpCS~~,~~aAAaT~~,MAAM,CAAC,oBAAoB,~~EACxCO~~,UAAU,~~YAAYP~~,MAAM,CAAC,uBAAuB,~~EACpDO~~,UAAU,~~WAAWP~~,MAAM,CAAC,sBAAsB,~~EAClDY~~,~~UAAUZ~~,MAAM,CAAC,oBAAoB,~~EACrCgB~~;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,~~MAAM3B~~,+BAA+~~BkB~~;QACrCC,QAAQA;kBAER,cAAA,KAACS;YAAIR,~~WAAWhB~~,MAAM,CAAC,oBAAoB;sBACzC,cAAA,KAACD;~~gBAAiBe~~,YAAYA;gBAAYE,~~WAAWhB~~,MAAM,CAAC,gBAAgB;~~0BACzEqB~~;;;;AAKX,EAAE"}
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 type { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type 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): React.ReactNode => {\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":["React","classNames","useAdaptivity","useAutoFocus","useExternRef","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","compact","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","mode","div"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClCG,SAASH,MAAM,CAAC,wBAAwB;AAC1C;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,KAACjB,iBAAe,EACxBkB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,UAAUzB,aAAac;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG5B;IAC3B,MAAM6B,QAAQf,YAAYD;IAE1BZ,aAAa0B,SAASF;IAEtB,qBACE,KAACpB;QACE,GAAGqB,SAAS;QACbd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWzB,WACTQ,MAAM,CAAC,SAAS,EAChBqB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAACd,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCiB;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,MAAM5B,+BAA+BmB;QACrCC,QAAQA;kBAER,cAAA,KAACS;YAAIR,WAAWjB,MAAM,CAAC,oBAAoB;sBACzC,cAAA,KAACD;gBAAiBgB,YAAYA;gBAAYE,WAAWjB,MAAM,CAAC,gBAAgB;0BACzEsB;;;;AAKX,EAAE"}

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

@@ -11,7 +11,7 @@ import { Chevron } from './Chevron/Chevron';
 import styles from './SimpleCell.module.css';
 const sizeYClassNames = {
     none: styles['SimpleCell--sizeY-none'],
-    ['compact']: styles['SimpleCell--sizeY-compact']
+    compact: styles['SimpleCell--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell

package/dist/cssm/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 type { HasComponent } from '../../types';\nimport { Tappable, type 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): React.ReactNode => {\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 restProps.disabled && styles['SimpleCell--disabled'],\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":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","disabled","div","Component","span","weight","normalize","size"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;~~IACtC~~,~~CAAC~~,~~UAAU,EAAEA,~~MAAM,CAAC,4BAA4B;~~AAClD~~;AAgEA;;CAEC,GACD,OAAO,~~MAAMG~~,aAAa,CAAC,EACzBC,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,EACjB,GAAGC,WACa;IAChB,MAAMC,~~WAAW1B~~;IAEjB,~~MAAM2B~~,aAAaT,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAME,~~WAAW9B~~,~~aAAamB~~,UAAUU;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,~~GAAG9B~~;IAE3B,qBACE,MAACE;QACE,~~GAAGwB~~,SAAS;QACbF,~~WAAW1B~~,WACTS,MAAM,CAAC,aAAa,~~EACpBmB~~,UAAUK,QAAQ,~~IAAIxB~~,MAAM,CAAC,uBAAuB,~~EACpDuB~~,UAAU,~~aAAatB~~,eAAe,~~CAACsB~~,MAAM,EAC7CV,~~aAAab~~,MAAM,CAAC,mBAAmB,~~EACvCiB~~;;0BAGF,KAACQ;gBACCR,~~WAAW1B~~,WACTS,MAAM,CAAC,qBAAqB,~~EAC5BoB~~,aAAa,~~SAASpB~~,MAAM,CAAC,0BAA0B;~~0BAGxDQ~~;;0BAEH,MAACiB;gBAAIR,~~WAAWjB~~,MAAM,CAAC,qBAAqB;;~~oBACzCc~~,yBACC,~~KAAChB~~;~~wBACC4B~~,WAAU;wBACVT,~~WAAW1B~~,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,sBAAsB;~~kCAE9Ec~~;;kCAGL,MAACW;wBAAIR,~~WAAWjB~~,MAAM,CAAC,sBAAsB;;~~4BAC1CI~~,kCACC,KAACuB;gCAAKV,~~WAAWjB~~,MAAM,CAAC,oBAAoB;~~0CAAGI~~;;0CAEjD,~~KAACP~~;~~gCAAS6B~~,WAAU;gCAAOT,~~WAAWjB~~,MAAM,CAAC,uBAAuB;~~gCAAE4B~~,QAAO;0CAC1ElB;;~~4BAEFlB~~,~~aAAaa~~,kCACZ,KAACsB;gCAAKV,~~WAAWjB~~,MAAM,CAAC,oBAAoB;~~0CAAGK~~;;;;oBAGlDU,0BACC,MAACU;wBAAIR,~~WAAWjB~~,MAAM,CAAC,sBAAsB;;~~4BAC1CM~~,qCACC,KAACqB;gCAAKV,~~WAAWjB~~,MAAM,CAAC,oBAAoB;~~0CAAGM~~;;0CAEjD,~~KAACV~~;~~gCACCiC~~,WAAW;gCACXZ,~~WAAW1B~~,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,uBAAuB;0CAE/Ee;;4BAEFR,oCACC,KAACoB;gCAAKV,~~WAAWjB~~,MAAM,CAAC,oBAAoB;~~0CAAGO~~;;;;oBAIpDS,+BACC,~~KAACpB~~;~~wBACCqB~~,~~WAAW1B~~,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,4BAA4B;~~kCAEpFgB~~;;;;~~YAINxB~~,~~aAAaiB~~,4BACZ,~~KAACZ~~;~~gBAAS6B~~,WAAU;gBAAOE,QAAO;gBAAIX,~~WAAWjB~~,MAAM,CAAC,wBAAwB;~~0BAC7ES~~;;YAGJa,0BACC,MAACG;gBAAIR,~~WAAW1B~~,WAAWS,MAAM,CAAC,oBAAoB,EAAE;;~~oBACrDW~~;oBACAU,4BACC,~~KAACtB~~;~~wBAAQ+B~~,MAAMZ;wBAAaD,~~WAAWjB~~,MAAM,CAAC,0BAA0B;;;;;;AAMpF,EAAE"}
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 type { HasComponent } from '../../types';\nimport { Tappable, type 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): React.ReactNode => {\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 restProps.disabled && styles['SimpleCell--disabled'],\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":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","compact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","disabled","div","Component","span","weight","normalize","size"],"mappings":"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"}

package/dist/cssm/components/Skeleton/Skeleton.d.ts CHANGED Viewed

@@ -29,5 +29,5 @@ export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement
  *
  * @since 6.1.0
  */
-export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps }: SkeletonProps) => React.ReactNode;
+export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, getRootRef, ...restProps }: SkeletonProps) => React.ReactNode;
 //# sourceMappingURL=Skeleton.d.ts.map

package/dist/cssm/components/Skeleton/Skeleton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAE~~/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;~~AAIlF~~,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,~~sKAgBlB~~,aAAa,KAAG,KAAK,CAAC,~~SAqCxB~~,CAAC"}
1	+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AA+ElF,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,kLAiBlB,aAAa,KAAG,KAAK,CAAC,SA4CxB,CAAC"}

package/dist/cssm/components/Skeleton/Skeleton.js CHANGED Viewed

@@ -1,8 +1,83 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { millisecondsInSecond } from 'date-fns/constants';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useDOM } from '../../lib/dom';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Skeleton.module.css';
+const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
+/**
+ * Синхронизирует анимацию скелетонов с помощью временных отрезков
+ *
+ * ## visibilitychange
+ *
+ * В синхронизацию не заложен механизм перехода на оптимизации браузеров при
+ * переходе на другую вкладку, поскольку нет уверенности в реальности таких
+ * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать
+ * событие `visibilitychange` используя функцию `syncAnimation`
+ *
+ * https://developer.chrome.com/blog/page-lifecycle-api/
+ *
+ * @param duration длительность анимации в секундах
+ */ function useSkeletonSyncAnimation(disableAnimation, duration = 1.5) {
+    const [isAnimationStarted, setIsAnimationStarted] = React.useState(false);
+    const timer = React.useRef(undefined);
+    const syncAnimation = React.useCallback(()=>{
+        clearTimeout(timer.current);
+        setIsAnimationStarted(false);
+        const durationInMilliseconds = duration * millisecondsInSecond;
+        const delay = durationInMilliseconds - performance.now() % durationInMilliseconds;
+        timer.current = setTimeout(()=>setIsAnimationStarted(true), delay);
+        return ()=>clearTimeout(timer.current);
+    }, [
+        duration
+    ]);
+    React.useEffect(()=>{
+        if (disableAnimation) {
+            setIsAnimationStarted(false);
+            return;
+        }
+        if (isAnimationStarted) {
+            return;
+        }
+        return syncAnimation();
+    }, [
+        disableAnimation,
+        isAnimationStarted,
+        syncAnimation
+    ]);
+    return isAnimationStarted;
+}
+/**
+ * Вычисляет позицию скелетона
+ */ function useSkeletonPosition(rootRef) {
+    const { document, window } = useDOM();
+    const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');
+    const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);
+    const updatePosition = React.useCallback(()=>{
+        const el = rootRef.current;
+        if (!el || !document) {
+            return;
+        }
+        const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);
+        const gradientValue = value === 0 ? '0' : `${value}px`;
+        if (prevSkeletonGradientLeft !== gradientValue) {
+            setSkeletonGradientLeft(gradientValue);
+        }
+    }, [
+        document,
+        prevSkeletonGradientLeft,
+        rootRef
+    ]);
+    React.useEffect(updatePosition, [
+        updatePosition
+    ]);
+    useGlobalEventListener(window, 'resize', updatePosition);
+    return skeletonGradientLeft;
+}
 /**
  * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент
  * > на экране должен заменяться заглушкой.
@@ -13,7 +88,10 @@ import styles from './Skeleton.module.css';
  * > вписывается в слоты компонентов, которые обычно ожидают текст.
  *
  * @since 6.1.0
- */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps })=>{
+ */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, ...restProps })=>{
+    const rootRef = useExternRef(getRootRef);
+    const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);
+    const skeletonGradientLeft = useSkeletonPosition(rootRef);
     const skeletonStyle = {
         width,
         height,
@@ -22,7 +100,8 @@ import styles from './Skeleton.module.css';
         maxWidth,
         maxInlineSize,
         borderRadius,
-        margin
+        margin,
+        [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft
     };
     if (colorFrom) {
         skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;
@@ -34,8 +113,9 @@ import styles from './Skeleton.module.css';
         skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;
     }
     return /*#__PURE__*/ _jsx(RootComponent, {
+        getRootRef: rootRef,
         Component: "span",
-        baseClassName: classNames(styles['Skeleton'], noAnimation && styles['Skeleton--disableAnimation']),
+        baseClassName: classNames(styles['Skeleton'], disableAnimation && styles['Skeleton--disableAnimation']),
         style: {
             ...skeletonStyle,
             ...style

package/dist/cssm/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 type { 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): React.ReactNode => {\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":["React","classNames","RootComponent","styles","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","~~duration~~","~~margin~~","restProps","skeletonStyle","Number","isFinite","Component","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;~~AAE7C~~,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;~~AAoC3C~~;;;;;;;;;;CAUC,GACD,OAAO,~~MAAMC~~,WAAW,CAAC,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,~~EACN~~,GAAGC,WACW;IACd,~~MAAMC~~,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,~~KAACf~~;~~QACCqB~~,WAAU;QACVC,~~eAAevB~~,~~WACbE~~,MAAM,CAAC,WAAW,~~EAClBa~~,~~eAAeb~~,MAAM,CAAC,6BAA6B;~~QAErDS~~,OAAO;YAAE,GAAGQ,aAAa;YAAE,GAAGR,KAAK;QAAC;QACnC,GAAGO,SAAS;kBAEZN,0BAAY;sBAAE;;;AAGrB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/*\n Синхронизирует анимацию скелетонов с помощью временных отрезков\n \n ## visibilitychange\n \n В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`\n \n https://developer.chrome.com/blog/page-lifecycle-api/\n \n @param duration длительность анимации в секундах\n /\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n const timer = React.useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n\n const syncAnimation = React.useCallback(() => {\n clearTimeout(timer.current);\n setIsAnimationStarted(false);\n\n const durationInMilliseconds = duration millisecondsInSecond;\n const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n return () => clearTimeout(timer.current);\n }, [duration]);\n\n React.useEffect(() => {\n if (disableAnimation) {\n setIsAnimationStarted(false);\n return;\n }\n\n if (isAnimationStarted) {\n return;\n }\n\n return syncAnimation();\n }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n return isAnimationStarted;\n}\n\n/*\n Вычисляет позицию скелетона\n /\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement \| null>) {\n const { document, window } = useDOM();\n const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');\n const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);\n\n const updatePosition = React.useCallback(() => {\n const el = rootRef.current;\n if (!el \|\| !document) {\n return;\n }\n\n const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n const gradientValue = value === 0 ? '0' : `${value}px`;\n if (prevSkeletonGradientLeft !== gradientValue) {\n setSkeletonGradientLeft(gradientValue);\n }\n }, [document, prevSkeletonGradientLeft, rootRef]);\n\n React.useEffect(updatePosition, [updatePosition]);\n useGlobalEventListener(window, 'resize', updatePosition);\n\n return skeletonGradientLeft;\n}\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 = false,\n duration,\n margin,\n getRootRef,\n ...restProps\n}: SkeletonProps): React.ReactNode => {\n const rootRef = useExternRef(getRootRef);\n\n const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\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 getRootRef={rootRef}\n Component=\"span\"\n baseClassName={classNames(\n styles['Skeleton'],\n disableAnimation && styles['Skeleton--disableAnimation'],\n )}\n style={{ ...skeletonStyle, ...style }}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","usePrevious","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","setSkeletonGradientLeft","prevSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName"],"mappings":"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"}