npm - @vkontakte/vkui - Versions diffs - 5.5.4 → 5.6.0 - Mend

@vkontakte/vkui 5.5.4 → 5.6.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 (1179) hide show

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

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

package/dist/cssm/components/RadioGroup/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n mode?: 'vertical' \| 'horizontal';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n mode = 'vertical',\n children,\n className,\n ...restProps\n}: RadioGroupProps) => (\n <div\n className={classNames(\n styles['RadioGroup'],\n 'vkuiInternalRadioGroup',\n mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n className,\n )}\n {...restProps}\n >\n {children}\n </div>\n);\n"],"names":["React","classNames","styles","RadioGroup","mode","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,~~MAAO~~,~~WAAU~~,EACjBC,~~SAAQ~~,EACRC,~~UAAS~~,EACT,GAAGC,WACa,iBAChB,oBAACC;QACCF,WAAWL,WACTC,MAAM,CAAC,aAAa,EACpB,0BACAE,SAAS,gBAAgBF,MAAM,CAAC,8BAA8B,EAC9DI;QAED,GAAGC,SAAS;OAEZF,UAEH"}
1	+ {"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n mode?: 'vertical' \| 'horizontal';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n mode = 'vertical',\n children,\n className,\n ...restProps\n}: RadioGroupProps) => (\n <div\n className={classNames(\n styles['RadioGroup'],\n 'vkuiInternalRadioGroup',\n mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n className,\n )}\n {...restProps}\n >\n {children}\n </div>\n);\n"],"names":["React","classNames","styles","RadioGroup","mode","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,UAAU,EACjBC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACa,iBAChB,oBAACC;QACCF,WAAWL,WACTC,MAAM,CAAC,aAAa,EACpB,0BACAE,SAAS,gBAAgBF,MAAM,CAAC,8BAA8B,EAC9DI;QAED,GAAGC,SAAS;OAEZF,UAEH"}

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

@@ -6,10 +6,10 @@ import { Slider } from '../Slider/Slider';
  * @deprecated 5.5.0
  *
  * Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).
- */ export const RangeSlider = ({ step =0 , min =0 , max =100 , defaultValue =[
+ */ export const RangeSlider = ({ step = 0, min = 0, max = 100, defaultValue = [
     min,
     max
-] , ...restProps })=>{
+], ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Slider, {
         step: step,
         min: min,

package/dist/cssm/components/RangeSlider/RangeSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slider, type SliderMultipleProps } from '../Slider/Slider';\n\nexport type RangeSliderProps = Omit<SliderMultipleProps, 'multiple'>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/RangeSlider\n \n @deprecated 5.5.0\n \n Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).\n */\nexport const RangeSlider = ({\n step = 0,\n min = 0,\n max = 100,\n defaultValue = [min, max],\n ...restProps\n}: RangeSliderProps) => {\n return (\n <Slider step={step} min={min} max={max} defaultValue={defaultValue} {...restProps} multiple />\n );\n};\n"],"names":["React","Slider","RangeSlider","step","min","max","defaultValue","restProps","multiple"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAkC,mBAAmB;AAIpE;;;;;;CAMC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,~~MAAO~~,~~EAAC~~,EACRC,~~KAAM~~,~~EAAC~~,EACPC,~~KAAM~~,~~IAAG~~,EACTC,~~cAAe~~;IAACF;IAAKC;CAAI,~~CAAA,~~EACzB,GAAGE,WACc;IACjB,qBACE,oBAACN;QAAOE,MAAMA;QAAMC,KAAKA;QAAKC,KAAKA;QAAKC,cAAcA;QAAe,GAAGC,SAAS;QAAEC,UAAAA;;AAEvF,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slider, type SliderMultipleProps } from '../Slider/Slider';\n\nexport type RangeSliderProps = Omit<SliderMultipleProps, 'multiple'>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/RangeSlider\n \n @deprecated 5.5.0\n \n Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).\n */\nexport const RangeSlider = ({\n step = 0,\n min = 0,\n max = 100,\n defaultValue = [min, max],\n ...restProps\n}: RangeSliderProps) => {\n return (\n <Slider step={step} min={min} max={max} defaultValue={defaultValue} {...restProps} multiple />\n );\n};\n"],"names":["React","Slider","RangeSlider","step","min","max","defaultValue","restProps","multiple"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAkC,mBAAmB;AAIpE;;;;;;CAMC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,CAAC,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,eAAe;IAACF;IAAKC;CAAI,EACzB,GAAGE,WACc;IACjB,qBACE,oBAACN;QAAOE,MAAMA;QAAMC,KAAKA;QAAKC,KAAKA;QAAKC,cAAcA;QAAe,GAAGC,SAAS;QAAEC,UAAAA;;AAEvF,EAAE"}

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

@@ -12,8 +12,8 @@ import { Tappable } from '../Tappable/Tappable';
 import styles from './Removable.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
- */ const RemovableIos = ({ onRemove , removePlaceholder , removePlaceholderString , children  })=>{
-    const { window  } = useDOM();
+ */ const RemovableIos = ({ onRemove, removePlaceholder, removePlaceholderString, children })=>{
+    const { window } = useDOM();
     const removeButtonRef = React.useRef(null);
     const disabledRef = React.useRef(true);
     const [removeOffset, updateRemoveOffset] = React.useState(0);
@@ -36,7 +36,7 @@ import styles from './Removable.module.css';
         if (!removeButtonRef.current) {
             return;
         }
-        const { offsetWidth  } = removeButtonRef.current;
+        const { offsetWidth } = removeButtonRef.current;
         disabledRef.current = false;
         updateRemoveOffset(offsetWidth);
     };
@@ -73,7 +73,7 @@ import styles from './Removable.module.css';
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
- */ export const Removable = ({ getRootRef , children , onRemove =noop , removePlaceholder ='Удалить' , align ='center' , className , indent =false , ...restProps })=>{
+ */ export const Removable = ({ getRootRef, children, onRemove = noop, removePlaceholder = 'Удалить', align = 'center', className, indent = false, ...restProps })=>{
     const platform = usePlatform();
     const ref = useExternRef(getRootRef);
     const onRemoveClick = (e)=>{

package/dist/cssm/components/Removable/Removable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n iOS only. Текст в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n removePlaceholderString?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n aria-label={removePlaceholderString}\n className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n >\n <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n </IconButton>\n {children}\n\n <span className={styles['Removable__offset']} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles['Removable__remove']}\n onClick={onRemove}\n >\n <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableOwnProps\n extends React.HTMLAttributes<HTMLDivElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n /\n Скрывает кнопку, но оставляет отступ.\n * @since 5.4.0\n /\n indent?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n getRootRef,\n children,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n align = 'center',\n className,\n indent = false,\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n\n const ref = useExternRef(getRootRef);\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n return (\n <div\n {...restProps}\n ref={ref}\n className={classNames(\n platform === Platform.IOS && styles['Removable--ios'],\n align === 'start' && styles['Removable--align-start'],\n indent && styles['Removable--indent'],\n className,\n )}\n >\n {platform !== Platform.IOS && (\n <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n {children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={styles['Removable__action']}\n onClick={onRemoveClick}\n aria-label={removePlaceholderString}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles['Removable__offset']} aria-hidden />\n </div>\n )}\n\n {platform === Platform.IOS && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n >\n {children}\n </RemovableIos>\n )}\n </div>\n );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,yBAAyB;AAiB5C;;CAEC,GACD,MAAMC,eAAe,CAAC,EACpBC,~~SAAQ~~,EACRC,~~kBAAiB~~,EACjBC,~~wBAAuB~~,EACvBC,~~SAAQ~~,EACa;IACrB,MAAM,EAAEC,~~OAAM~~,EAAE,GAAGX;IAEnB,MAAMY,kBAAkBnB,MAAMoB,~~OAAoB~~;IAClD,MAAMC,cAAcrB,MAAMoB,~~OAAO~~;IACjC,MAAM,CAACE,cAAcC,mBAAmB,GAAGvB,MAAMwB,~~SAAS~~;IAE1DnB,uBACEa,QACA,SACA;QACE,IAAII,eAAe,GAAG;YACpBC,mBAAmB;QACrB;IACF,GACA;QAAEE,SAAS;IAAK;IAGlB,MAAMC,wBAAwB;QAC5B,IAAIJ,eAAe,GAAG;YACpBH,iBAAiBQ,SAASC;QAC5B,OAAO;YACLP,YAAYM,~~UAAU~~;QACxB;IACF;IAEA,MAAME,wBAAwB,CAACC;QAC7BA,EAAEC;~~QACF~~,IAAI,CAACZ,gBAAgBQ,~~SAAS~~;YAC5B;QACF;QACA,MAAM,EAAEK,~~YAAW~~,EAAE,GAAGb,gBAAgBQ;~~QACxCN~~,YAAYM,~~UAAU~~;QACtBJ,mBAAmBS;IACrB;IAEA,qBACE,oBAACC;QACCC,WAAWhC,WAAWU,MAAM,CAAC,qBAAqB,EAAE;QACpDuB,OAAO;YAAEC,WAAW,CAAC,YAAY,EAAEd,gBAAgB,EAAE,GAAG,CAAC;QAAC;QAC1De,iBAAiBX;qBAEjB,oBAAChB;QACC4B,WAAW;QACXC,UAAU;QACVC,cAAYxB;QACZkB,WAAWhC,WAAWU,MAAM,CAAC,oBAAoB,EAAEA,MAAM,CAAC,oBAAoB;QAC9E6B,SAASZ;QACTa,UAAUpB,eAAe;qBAEzB,oBAACqB;QAAET,WAAWtB,MAAM,CAAC,uBAAuB;QAAEgC,MAAK;SAEpD3B,wBAED,oBAAC4B;QAAKX,WAAWtB,MAAM,CAAC,oBAAoB;QAAEkC,eAAAA;sBAE9C,oBAACnC;QACCoC,WAAU;QACVT,WAAW;QACXC,UAAU;QACVG,UAAUrB,YAAYM;~~QACtBqB~~,YAAY7B;QACZe,WAAWtB,MAAM,CAAC,oBAAoB;QACtC6B,SAAS3B;qBAET,oBAAC+B;QAAKX,WAAWtB,MAAM,CAAC,uBAAuB;OAAGG;AAI1D;AAiBA;;CAEC,GACD,OAAO,MAAMkC,YAAY,CAAC,EACxBD,~~WAAU~~,EACV/B,~~SAAQ~~,EACRH,~~UAAWX~~,~~KAAI~~,EACfY,~~mBAAoB~~,~~UAAS~~,EAC7BmC,~~OAAQ~~,~~SAAQ~~,EAChBhB,~~UAAS~~,EACTiB,~~QAAS~~,~~MAAK~~,EACd,GAAGC,WACe;IAClB,MAAMC,WAAW/C;IAEjB,MAAMgD,MAAMlD,aAAa4C;IAEzB,MAAMO,gBAAgB,CAACzB;QACrBA,EAAE0B;~~QACF1C~~,SAASgB;IACX;IAEA,MAAMd,0BAAkCP,qBAAqBM;IAE7D,qBACE,oBAACkB;QACE,GAAGmB,SAAS;QACbE,KAAKA;QACLpB,WAAWhC,WACTmD,aAAa7C,SAASiD,~~OAAO7C~~,MAAM,CAAC,iBAAiB,EACrDsC,UAAU,WAAWtC,MAAM,CAAC,yBAAyB,EACrDuC,UAAUvC,MAAM,CAAC,oBAAoB,EACrCsB;OAGDmB,aAAa7C,SAASiD,~~qBACrB~~,oBAACxB;QAAIC,WAAWhC,WAAWU,MAAM,CAAC,qBAAqB,EAAE;OACtDK,wBAED,oBAACP;QACCgD,YAAW;QACXC,WAAU;QACVzB,WAAWtB,MAAM,CAAC,oBAAoB;QACtC6B,SAASc;QACTf,cAAYxB;qBAEZ,oBAACf;QAAa2C,MAAK;uBAGrB,oBAACC;QAAKX,WAAWtB,MAAM,CAAC,oBAAoB;QAAEkC,eAAAA;SAIjDO,aAAa7C,SAASiD,~~qBACrB~~,oBAAC5C;QACCC,UAAUyC;QACVxC,mBAAmBA;QACnBC,yBAAyBA;OAExBC;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n iOS only. Текст в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n removePlaceholderString?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n aria-label={removePlaceholderString}\n className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0}\n >\n <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n </IconButton>\n {children}\n\n <span className={styles['Removable__offset']} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles['Removable__remove']}\n onClick={onRemove}\n >\n <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableOwnProps\n extends React.HTMLAttributes<HTMLDivElement>,\n RemovableProps,\n HasRootRef<HTMLDivElement> {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n /\n Скрывает кнопку, но оставляет отступ.\n * @since 5.4.0\n /\n indent?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n getRootRef,\n children,\n onRemove = noop,\n removePlaceholder = 'Удалить',\n align = 'center',\n className,\n indent = false,\n ...restProps\n}: RemovableOwnProps) => {\n const platform = usePlatform();\n\n const ref = useExternRef(getRootRef);\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove(e);\n };\n\n const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n return (\n <div\n {...restProps}\n ref={ref}\n className={classNames(\n platform === Platform.IOS && styles['Removable--ios'],\n align === 'start' && styles['Removable--align-start'],\n indent && styles['Removable--indent'],\n className,\n )}\n >\n {platform !== Platform.IOS && (\n <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n {children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={styles['Removable__action']}\n onClick={onRemoveClick}\n aria-label={removePlaceholderString}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles['Removable__offset']} aria-hidden />\n </div>\n )}\n\n {platform === Platform.IOS && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n >\n {children}\n </RemovableIos>\n )}\n </div>\n );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"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"}

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

@@ -12,8 +12,8 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
- */ export const RichCell = ({ subhead , children , text , caption , before , after , afterCaption , bottom , actions , multiline , className , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
+ */ export const RichCell = ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement(Tappable, {
         ...restProps,
         className: classNames(styles['RichCell'], !multiline && styles['RichCell--text-ellipsis'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)

package/dist/cssm/components/RichCell/RichCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['RichCell--sizeY-none'],\n [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n /*\n Контейнер для текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Контейнер для текста под `children`.\n /\n text?: React.ReactNode;\n /\n Контейнер для текста под `text`.\n /\n caption?: React.ReactNode;\n /\n Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n /\n bottom?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `mode=\"primary\" size=\"s\"`\n * - `mode=\"secondary\" size=\"s\"`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `mode=\"horizontal\" gap=\"s\" stretched`\n /\n actions?: React.ReactNode;\n /\n `<Avatar size={40\|48\|72} />`.\n /\n before?: React.ReactNode;\n /\n Иконка 28 или текст.\n /\n after?: React.ReactNode;\n /\n Текст под `after`.\n /\n afterCaption?: React.ReactNode;\n /\n Убирает анимацию нажатия.\n /\n disabled?: boolean;\n /\n Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n /\n multiline?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n subhead,\n children,\n text,\n caption,\n before,\n after,\n afterCaption,\n bottom,\n actions,\n multiline,\n className,\n ...restProps\n}: RichCellProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['RichCell'],\n !multiline && styles['RichCell--text-ellipsis'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n >\n {before && <div className={styles['RichCell__before']}>{before}</div>}\n <div className={styles['RichCell__in']}>\n <div className={styles['RichCell__content']}>\n <div className={styles['RichCell__content-before']}>\n {subhead && (\n <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n {subhead}\n </Subhead>\n )}\n <div className={styles['RichCell__children']}>{children}</div>\n {text && <div className={styles['RichCell__text']}>{text}</div>}\n {caption && (\n <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n {caption}\n </Subhead>\n )}\n </div>\n {(after \|\| afterCaption) && (\n <div className={styles['RichCell__content-after']}>\n {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n {afterCaption && (\n <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n )}\n </div>\n )}\n </div>\n {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n </div>\n </Tappable>\n );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","div","Component","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACJ,SAASO,~~QAAQ~~,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAoDA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,~~QAAO~~,EACPC,~~SAAQ~~,EACRC,~~KAAI~~,EACJC,~~QAAO~~,EACPC,~~OAAM~~,EACNC,~~MAAK~~,EACLC,~~aAAY~~,EACZC,~~OAAM~~,EACNC,~~QAAO~~,EACPC,~~UAAS~~,EACTC,~~UAAS~~,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,~~OAAQ~~,~~OAAM~~,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGmB,SAAS;QACbD,WAAWrB,WACTM,MAAM,CAAC,WAAW,EAClB,CAACc,aAAad,MAAM,CAAC,0BAA0B,EAC/CiB,UAAUrB,SAASsB,~~WAAWjB~~,eAAe,CAACgB,MAAM,EACpDF;OAGDN,wBAAU,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGS,uBACxD,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,eAAe;qBACpC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;qBACzC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAC/CK,yBACC,oBAACP;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DK,wBAGL,oBAACc;QAAIJ,WAAWf,MAAM,CAAC,qBAAqB;OAAGM,WAC9CC,sBAAQ,oBAACY;QAAIJ,WAAWf,MAAM,CAAC,iBAAiB;OAAGO,OACnDC,yBACC,oBAACV;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DQ,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAC9CU,uBAAS,oBAACS;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAAGU,QAC9DC,8BACC,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAAGW,iBAK3DC,wBAAU,oBAACO;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGY,SACvDC,yBAAW,oBAACM;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;OAAGa;AAIlE,EAAE;AAEFT,SAASiB,~~OAAOtB~~"}
1	+ {"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n none: styles['RichCell--sizeY-none'],\n [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n /*\n Контейнер для текста над `children`.\n /\n subhead?: React.ReactNode;\n /\n Контейнер для текста под `children`.\n /\n text?: React.ReactNode;\n /\n Контейнер для текста под `text`.\n /\n caption?: React.ReactNode;\n /\n Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n /\n bottom?: React.ReactNode;\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `mode=\"primary\" size=\"s\"`\n * - `mode=\"secondary\" size=\"s\"`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `mode=\"horizontal\" gap=\"s\" stretched`\n /\n actions?: React.ReactNode;\n /\n `<Avatar size={40\|48\|72} />`.\n /\n before?: React.ReactNode;\n /\n Иконка 28 или текст.\n /\n after?: React.ReactNode;\n /\n Текст под `after`.\n /\n afterCaption?: React.ReactNode;\n /\n Убирает анимацию нажатия.\n /\n disabled?: boolean;\n /\n Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n /\n multiline?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n subhead,\n children,\n text,\n caption,\n before,\n after,\n afterCaption,\n bottom,\n actions,\n multiline,\n className,\n ...restProps\n}: RichCellProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n {...restProps}\n className={classNames(\n styles['RichCell'],\n !multiline && styles['RichCell--text-ellipsis'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n >\n {before && <div className={styles['RichCell__before']}>{before}</div>}\n <div className={styles['RichCell__in']}>\n <div className={styles['RichCell__content']}>\n <div className={styles['RichCell__content-before']}>\n {subhead && (\n <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n {subhead}\n </Subhead>\n )}\n <div className={styles['RichCell__children']}>{children}</div>\n {text && <div className={styles['RichCell__text']}>{text}</div>}\n {caption && (\n <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n {caption}\n </Subhead>\n )}\n </div>\n {(after \|\| afterCaption) && (\n <div className={styles['RichCell__content-after']}>\n {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n {afterCaption && (\n <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n )}\n </div>\n )}\n </div>\n {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n </div>\n </Tappable>\n );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","div","Component","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAoDA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGmB,SAAS;QACbD,WAAWrB,WACTM,MAAM,CAAC,WAAW,EAClB,CAACc,aAAad,MAAM,CAAC,0BAA0B,EAC/CiB,UAAUrB,SAASsB,OAAO,IAAIjB,eAAe,CAACgB,MAAM,EACpDF;OAGDN,wBAAU,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGS,uBACxD,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,eAAe;qBACpC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;qBACzC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAC/CK,yBACC,oBAACP;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DK,wBAGL,oBAACc;QAAIJ,WAAWf,MAAM,CAAC,qBAAqB;OAAGM,WAC9CC,sBAAQ,oBAACY;QAAIJ,WAAWf,MAAM,CAAC,iBAAiB;OAAGO,OACnDC,yBACC,oBAACV;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DQ,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAC9CU,uBAAS,oBAACS;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAAGU,QAC9DC,8BACC,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAAGW,iBAK3DC,wBAAU,oBAACO;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGY,SACvDC,yBAAW,oBAACM;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;OAAGa;AAIlE,EAAE;AAEFT,SAASiB,IAAI,GAAGtB"}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import styles from './RichCellIcon.module.css';
-export const RichCellIcon = ({ children , className , ...restProps })=>{
+export const RichCellIcon = ({ children, className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
         className: classNames(styles['RichCellIcon'], className)

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n children,\n className,\n ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","styles","RichCellIcon","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,~~SAAQ~~,EACRC,~~UAAS~~,EACT,GAAGC,WACkC;IACrC,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAED,WAAWJ,WAAWC,MAAM,CAAC,eAAe,EAAEG;OAC/DD;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n children,\n className,\n ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","styles","RichCellIcon","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACkC;IACrC,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAED,WAAWJ,WAAWC,MAAM,CAAC,eAAe,EAAEG;OAC/DD;AAGP,EAAE"}

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

@@ -4,7 +4,7 @@ import { HoverPopper } from '../HoverPopper/HoverPopper';
 import styles from './RichTooltip.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
- */ export const RichTooltip = ({ children , arrow =true , appearance ='neutral' , className , ...popperProps })=>{
+ */ export const RichTooltip = ({ children, arrow = true, appearance = 'neutral', className, ...popperProps })=>{
     return /*#__PURE__*/ React.createElement(HoverPopper, {
         className: classNames(styles['RichTooltip'], appearance !== 'neutral' && ({
             accent: styles['RichTooltip--appearance-accent'],

package/dist/cssm/components/RichTooltip/RichTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n /*\n Стиль отображения подсказки\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n children,\n arrow = true,\n appearance = 'neutral',\n className,\n ...popperProps\n}: RichTooltipProps) => {\n return (\n <HoverPopper\n className={classNames(\n styles['RichTooltip'],\n appearance !== 'neutral' &&\n {\n accent: styles['RichTooltip--appearance-accent'],\n white: styles['RichTooltip--appearance-white'],\n black: styles['RichTooltip--appearance-black'],\n inversion: styles['RichTooltip--appearance-inversion'],\n }[appearance],\n className,\n )}\n arrow={arrow}\n arrowClassName={styles['RichTooltip__arrow']}\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"names":["React","classNames","HoverPopper","styles","RichTooltip","children","arrow","appearance","className","popperProps","accent","white","black","inversion","arrowClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,OAAOC,YAAY,2BAA2B;AAS9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,~~SAAQ~~,EACRC,~~OAAQ~~,~~KAAI~~,EACZC,~~YAAa~~,~~UAAS~~,EACtBC,~~UAAS~~,EACT,GAAGC,aACc;IACjB,qBACE,oBAACP;QACCM,WAAWP,WACTE,MAAM,CAAC,cAAc,EACrBI,eAAe,aACb,CAAA;YACEG,QAAQP,MAAM,CAAC,iCAAiC;YAChDQ,OAAOR,MAAM,CAAC,gCAAgC;YAC9CS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,WAAWV,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACI,WAAW,EACfC;QAEFF,OAAOA;QACPQ,gBAAgBX,MAAM,CAAC,qBAAqB;QAC3C,GAAGM,WAAW;OAEdJ;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n /*\n Стиль отображения подсказки\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n children,\n arrow = true,\n appearance = 'neutral',\n className,\n ...popperProps\n}: RichTooltipProps) => {\n return (\n <HoverPopper\n className={classNames(\n styles['RichTooltip'],\n appearance !== 'neutral' &&\n {\n accent: styles['RichTooltip--appearance-accent'],\n white: styles['RichTooltip--appearance-white'],\n black: styles['RichTooltip--appearance-black'],\n inversion: styles['RichTooltip--appearance-inversion'],\n }[appearance],\n className,\n )}\n arrow={arrow}\n arrowClassName={styles['RichTooltip__arrow']}\n {...popperProps}\n >\n {children}\n </HoverPopper>\n );\n};\n"],"names":["React","classNames","HoverPopper","styles","RichTooltip","children","arrow","appearance","className","popperProps","accent","white","black","inversion","arrowClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,OAAOC,YAAY,2BAA2B;AAS9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,QAAQ,IAAI,EACZC,aAAa,SAAS,EACtBC,SAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACP;QACCM,WAAWP,WACTE,MAAM,CAAC,cAAc,EACrBI,eAAe,aACb,CAAA;YACEG,QAAQP,MAAM,CAAC,iCAAiC;YAChDQ,OAAOR,MAAM,CAAC,gCAAgC;YAC9CS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,WAAWV,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACI,WAAW,EACfC;QAEFF,OAAOA;QACPQ,gBAAgBX,MAAM,CAAC,qBAAqB;QAC3C,GAAGM,WAAW;OAEdJ;AAGP,EAAE"}

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

@@ -7,6 +7,7 @@ export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdPr
         from: string;
         to: string;
     }): void;
+    children: React.ReactElement | Iterable<React.ReactElement>;
 }
 export interface RootState {
     activeView: string;

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

@@ -15,17 +15,17 @@ import styles from './Root.module.css';
 const warn = warnOnce('Root');
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
- */ export const Root = ({ children , activeView: _activeView , onTransition , nav , className , ...restProps })=>{
+ */ export const Root = ({ children, activeView: _activeView, onTransition, nav, className, ...restProps })=>{
     const scroll = React.useContext(ScrollContext);
     const platform = usePlatform();
-    const { document  } = useDOM();
+    const { document } = useDOM();
     const scrolls = React.useRef({}).current;
     const viewNodes = React.useRef({}).current;
-    const { transitionMotionEnabled =true  } = useConfigProvider();
-    const { animate  } = React.useContext(SplitColContext);
+    const { transitionMotionEnabled = true } = useConfigProvider();
+    const { animate } = React.useContext(SplitColContext);
     const disableAnimation = !transitionMotionEnabled || !animate;
     const views = React.Children.toArray(children);
-    const [{ prevView , activeView , transition , isBack  }, _setState] = React.useState({
+    const [{ prevView, activeView, transition, isBack }, _setState] = React.useState({
         activeView: _activeView,
         transition: false
     });

package/dist/cssm/components/Root/Root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n activeView: string;\n onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n className,\n ...restProps\n}: RootProps) => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement \| null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled \|\| !animate;\n\n const views = React.Children.toArray(children) as React.ReactElement[];\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n React.useEffect(() => {\n if (!transition) {\n fallbackTransition.clear();\n return;\n }\n fallbackTransition.set();\n }, [fallbackTransition, transition]);\n\n const onAnimationEnd = (e: React.AnimationEvent) => {\n if (\n [\n styles['vkui-root-android-animation-hide-back'],\n styles['vkui-root-android-animation-show-forward'],\n styles['vkui-root-ios-animation-hide-back'],\n styles['vkui-root-ios-animation-show-forward'],\n ].includes(e.animationName)\n ) {\n finishTransition();\n }\n };\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['Root'],\n platform === Platform.IOS && styles['Root--ios'],\n transition && styles['Root--transition'],\n className,\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView \|\| (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => viewId && (viewNodes[viewId] = e)}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles['Root__view'],\n transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n )}\n >\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles['Root__scrollCompensation']}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n activeView: string;\n onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n className,\n ...restProps\n}: RootProps) => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement \| null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled \|\| !animate;\n\n const views = React.Children.toArray(children) as React.ReactElement[];\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n React.useEffect(() => {\n if (!transition) {\n fallbackTransition.clear();\n return;\n }\n fallbackTransition.set();\n }, [fallbackTransition, transition]);\n\n const onAnimationEnd = (e: React.AnimationEvent) => {\n if (\n [\n styles['vkui-root-android-animation-hide-back'],\n styles['vkui-root-android-animation-show-forward'],\n styles['vkui-root-ios-animation-hide-back'],\n styles['vkui-root-ios-animation-show-forward'],\n ].includes(e.animationName)\n ) {\n finishTransition();\n }\n };\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['Root'],\n platform === Platform.IOS && styles['Root--ios'],\n transition && styles['Root--transition'],\n className,\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView \|\| (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => viewId && (viewNodes[viewId] = e)}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles['Root__view'],\n transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n )}\n >\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles['Root__scrollCompensation']}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,qBAAqB,QAAQ,+CAA+C;AACrF,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,YAAY,oBAAoB;AAevC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,OAAO,CAAC,EACnBC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,YAAY,EACZC,GAAG,EACHC,SAAS,EACT,GAAGC,WACO;IACV,MAAMC,SAASvB,MAAMwB,UAAU,CAACf;IAChC,MAAMgB,WAAWvB;IACjB,MAAM,EAAEwB,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAU3B,MAAM4B,MAAM,CAAyB,CAAC,GAAGC,OAAO;IAChE,MAAMC,YAAY9B,MAAM4B,MAAM,CAAqC,CAAC,GAAGC,OAAO;IAE9E,MAAM,EAAEE,0BAA0B,IAAI,EAAE,GAAGrB;IAC3C,MAAM,EAAEsB,OAAO,EAAE,GAAGhC,MAAMwB,UAAU,CAACZ;IACrC,MAAMqB,mBAAmB,CAACF,2BAA2B,CAACC;IAEtD,MAAME,QAAQlC,MAAMmC,QAAQ,CAACC,OAAO,CAACpB;IAErC,MAAM,CAAC,EAAEqB,QAAQ,EAAEpB,UAAU,EAAEqB,UAAU,EAAEC,MAAM,EAAE,EAAEC,UAAU,GAAGxC,MAAMyC,QAAQ,CAAY;QAC1FxB,YAAYC;QACZoB,YAAY;IACd;IACA,MAAMI,eAAe,CAACC;QACpB,IAAIA,UAAU1B,YAAY;YACxB,MAAM2B,UAAUV,MAAMW,GAAG,CAAC,CAACC,OAASzC,SAASyC,KAAKC,KAAK,EAAEjC;YACzD,MAAMyB,SAASK,QAAQI,OAAO,CAACL,SAASC,QAAQI,OAAO,CAAC/B;YACxDU,OAAO,CAACV,WAAW,GAAGM,OAAO0B,SAAS,GAAGC,CAAC;YAC1CV,UAAU;gBACRvB,YAAY0B;gBACZN,UAAUpB;gBACVqB,YAAY,CAACL;gBACbM;YACF;QACF;IACF;IACA,MAAMY,mBAAmBnD,MAAMoD,WAAW,CACxC,IAAMZ,UAAU;YAAEvB;YAAYoB;YAAUE;YAAQD,YAAY;QAAM,IAClE;QAACrB;QAAYsB;QAAQF;KAAS;IAGhC9B,0BAA0B;QACvBmB,SAAU2B,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAACrC;KAAW;IAEf,gBAAgB;IAChBV,0BAA0B,IAAMmC,aAAaxB,cAAc;QAACA;KAAY;IACxEX,0BAA0B;QACxB,IAAI,CAAC+B,cAAcD,UAAU;YAC3B,qBAAqB;YACrBd,OAAOgC,QAAQ,CAAC,GAAGhB,SAASZ,OAAO,CAACV,WAAW,GAAG;YAClDE,gBACEA,aAAa;gBACXoB,QAAQiB,QAAQjB;gBAChBkB,MAAMpB;gBACNqB,IAAIzC;YACN;QACJ;IACF,GAAG;QAACqB;QAAYD;KAAS;IAEzB,MAAMsB,qBAAqBxD,WAAWgD,kBAAkB1B,aAAanB,SAASsD,GAAG,GAAG,MAAM;IAC1F5D,MAAM6D,SAAS,CAAC;QACd,IAAI,CAACvB,YAAY;YACfqB,mBAAmBG,KAAK;YACxB;QACF;QACAH,mBAAmBI,GAAG;IACxB,GAAG;QAACJ;QAAoBrB;KAAW;IAEnC,MAAM0B,iBAAiB,CAACC;QACtB,IACE;YACEpD,MAAM,CAAC,wCAAwC;YAC/CA,MAAM,CAAC,2CAA2C;YAClDA,MAAM,CAAC,oCAAoC;YAC3CA,MAAM,CAAC,uCAAuC;SAC/C,CAACqD,QAAQ,CAACD,EAAEE,aAAa,GAC1B;YACAhB;QACF;IACF;IAEA,qBACE,oBAACiB;QACE,GAAG9C,SAAS;QACbD,WAAWpB,WACTY,MAAM,CAAC,OAAO,EACdY,aAAanB,SAASsD,GAAG,IAAI/C,MAAM,CAAC,YAAY,EAChDyB,cAAczB,MAAM,CAAC,mBAAmB,EACxCQ;OAGDa,MAAMW,GAAG,CAAC,CAACC;QACV,MAAMuB,SAAShE,SAASyC,KAAKC,KAAK,EAAEjC;QACpC,IAAIuD,WAAWpD,cAAc,CAAEqB,CAAAA,cAAc+B,WAAWhC,QAAO,GAAI;YACjE,OAAO;QACT;QACA,MAAMiC,qBAAqBhC,cAAc+B,WAAY9B,CAAAA,SAASF,WAAWpB,UAAS;QAClF,MAAMsD,mBACJjC,cAAe+B,CAAAA,WAAWhC,YAAaE,UAAU8B,WAAWpD,UAAU;QACxE,qBACE,oBAACmD;YACCI,KAAKH;YACLI,KAAK,CAACR,IAAMI,UAAWvC,CAAAA,SAAS,CAACuC,OAAO,GAAGJ,CAAAA;YAC3CD,gBAAgBM,qBAAqBN,iBAAiBU;YACtDrD,WAAWpB,WACTY,MAAM,CAAC,aAAa,EACpByB,cAAc+B,WAAWhC,YAAYE,UAAU1B,MAAM,CAAC,wBAAwB,EAC9EyB,cAAc+B,WAAWhC,YAAY,CAACE,UAAU1B,MAAM,CAAC,2BAA2B,EAClFyB,cAAc+B,WAAWpD,cAAcsB,UAAU1B,MAAM,CAAC,wBAAwB,EAChFyB,cAAc+B,WAAWpD,cAAc,CAACsB,UAAU1B,MAAM,CAAC,2BAA2B;yBAGtF,oBAACF;YAAsBgE,UAAUrC,cAAc+B,WAAWpD;yBACxD,oBAACmD;YACC/C,WAAWR,MAAM,CAAC,2BAA2B;YAC7C+D,OAAO;gBACLC,WAAWN,mBAAmBF,UAAU,CAAE1C,CAAAA,OAAO,CAAC0C,OAAO,IAAI,CAAA,IAAKK;YACpE;WAEC5B;IAKX;AAGN,EAAE"}

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

@@ -9,7 +9,7 @@ import { Icon48DoneOutline } from './Icon48DoneOutline';
 import styles from './ScreenSpinner.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
- */ export const ScreenSpinner = ({ style , className , state ='loading' , size ='large' , 'aria-label': ariaLabel = 'Пожалуйста, подождите...' , onClick , ...restProps })=>{
+ */ export const ScreenSpinner = ({ style, className, state = 'loading', size = 'large', 'aria-label': ariaLabel = 'Пожалуйста, подождите...', onClick, ...restProps })=>{
     const hideSpinner = state === 'done' || state === 'error';
     const Icon = {
         loading: ()=>null,

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n state?: 'loading' \| 'cancelable' \| 'done' \| 'error';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n style,\n className,\n state = 'loading',\n size = 'large',\n 'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n onClick,\n ...restProps\n}: ScreenSpinnerProps) => {\n const hideSpinner = state === 'done' \|\| state === 'error';\n\n const Icon = {\n loading: () => null,\n cancelable: Icon24Cancel,\n done: Icon48DoneOutline,\n error: Icon48CancelCircle,\n }[state];\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n hasMask={false}\n className={classNames(\n styles['ScreenSpinner'],\n state === 'cancelable' && styles['ScreenSpinner--clickable'],\n className,\n )}\n style={style}\n >\n <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n <Spinner\n className={classNames(\n styles['ScreenSpinner__spinner'],\n hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n )}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n />\n <div\n className={classNames(\n styles['ScreenSpinner__icon'],\n state === 'done' && styles['ScreenSpinner__icon--state-done'],\n )}\n >\n <Icon />\n </div>\n </div>\n </PopoutWrapper>\n );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","hasMask","div","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,~~MAAK~~,EACLC,~~UAAS~~,EACTC,~~OAAQ~~,~~UAAS~~,EACjBC,~~MAAO~~,~~QAAO~~,EACd,cAAcC,YAAY,0BAA0B,~~CAAA,~~EACpDC,~~QAAO~~,EACP,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,oBAACC;QACCmB,SAAS;QACTZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBI,UAAU,gBAAgBJ,MAAM,CAAC,2BAA2B,EAC5DG;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,WAAWH,MAAM,CAAC,2BAA2B;QAAEO,SAASA;qBAC3D,oBAACV;QACCM,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCS,eAAeT,MAAM,CAAC,iCAAiC;QAEzDK,MAAMA;QACNY,cAAYX;QACX,GAAGE,SAAS;sBAEf,oBAACQ;QACCb,WAAWT,WACTM,MAAM,CAAC,sBAAsB,EAC7BI,UAAU,UAAUJ,MAAM,CAAC,kCAAkC;qBAG/D,oBAACU;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n state?: 'loading' \| 'cancelable' \| 'done' \| 'error';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n style,\n className,\n state = 'loading',\n size = 'large',\n 'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n onClick,\n ...restProps\n}: ScreenSpinnerProps) => {\n const hideSpinner = state === 'done' \|\| state === 'error';\n\n const Icon = {\n loading: () => null,\n cancelable: Icon24Cancel,\n done: Icon48DoneOutline,\n error: Icon48CancelCircle,\n }[state];\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n hasMask={false}\n className={classNames(\n styles['ScreenSpinner'],\n state === 'cancelable' && styles['ScreenSpinner--clickable'],\n className,\n )}\n style={style}\n >\n <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n <Spinner\n className={classNames(\n styles['ScreenSpinner__spinner'],\n hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n )}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n />\n <div\n className={classNames(\n styles['ScreenSpinner__icon'],\n state === 'done' && styles['ScreenSpinner__icon--state-done'],\n )}\n >\n <Icon />\n </div>\n </div>\n </PopoutWrapper>\n );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","hasMask","div","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACd,cAAcC,YAAY,0BAA0B,EACpDC,OAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,oBAACC;QACCmB,SAAS;QACTZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBI,UAAU,gBAAgBJ,MAAM,CAAC,2BAA2B,EAC5DG;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,WAAWH,MAAM,CAAC,2BAA2B;QAAEO,SAASA;qBAC3D,oBAACV;QACCM,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCS,eAAeT,MAAM,CAAC,iCAAiC;QAEzDK,MAAMA;QACNY,cAAYX;QACX,GAAGE,SAAS;sBAEf,oBAACQ;QACCb,WAAWT,WACTM,MAAM,CAAC,sBAAsB,EAC7BI,UAAU,UAAUJ,MAAM,CAAC,kCAAkC;qBAG/D,oBAACU;AAKX,EAAE"}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import styles from './ScrollArrow.module.css';
-const ArrowIcon = ({ size , direction  })=>{
+const ArrowIcon = ({ size, direction })=>{
     if (size === 'm') {
         return direction === 'left' ? /*#__PURE__*/ React.createElement(Icon16ChevronLeft, null) : /*#__PURE__*/ React.createElement(Icon16Chevron, null);
     }
@@ -13,10 +13,10 @@ const ArrowIcon = ({ size , direction  })=>{
  *
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/ScrollArrow
- */ export const ScrollArrow = ({ size ='l' , offsetY , direction , className , getRootRef , children =/*#__PURE__*/ React.createElement(ArrowIcon, {
+ */ export const ScrollArrow = ({ size = 'l', offsetY, direction, className, getRootRef, children = /*#__PURE__*/ React.createElement(ArrowIcon, {
     direction: direction,
     size: size
-}) , ...restProps })=>{
+}), ...restProps })=>{
     return /*#__PURE__*/ React.createElement("button", {
         className: classNames(styles['ScrollArrow'], {
             m: styles['ScrollArrow--size-m'],

package/dist/cssm/components/ScrollArrow/ScrollArrow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon16Chevron,\n Icon16ChevronLeft,\n Icon24Chevron,\n Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './ScrollArrow.module.css';\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' \| 'direction'>) => {\n if (size === 'm') {\n return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n }\n\n return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement> {\n /*\n Направление стрелки\n /\n direction: 'left' \| 'right';\n /\n Размер стрелки\n /\n size?: 'm' \| 'l';\n /\n Смещает иконку кнопки навигации по вертикали.\n /\n offsetY?: number \| string;\n}\n\n/\n Компонент стрелки из HorizontalScroll\n \n @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n size = 'l',\n offsetY,\n direction,\n className,\n getRootRef,\n children = <ArrowIcon direction={direction} size={size} />,\n ...restProps\n}: ScrollArrowProps) => {\n return (\n <button\n className={classNames(\n styles['ScrollArrow'],\n {\n m: styles['ScrollArrow--size-m'],\n l: styles['ScrollArrow--size-l'],\n }[size],\n {\n left: styles['ScrollArrow--direction-left'],\n right: styles['ScrollArrow--direction-right'],\n }[direction],\n className,\n )}\n ref={getRootRef}\n {...restProps}\n >\n <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n {children}\n </span>\n </button>\n );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","styles","ArrowIcon","size","direction","ScrollArrow","offsetY","className","getRootRef","children","restProps","button","m","l","left","right","ref","span","style","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,YAAY,CAAC,EAAEC,~~KAAI~~,EAAEC,~~UAAS~~,EAAgD;IAClF,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,oBAACP,yCAAuB,oBAACD;IACzD;IAEA,OAAOQ,cAAc,uBAAS,oBAACL,gDAA8B,oBAACD;AAChE;AAmBA;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BF,~~MAAO~~,~~IAAG~~,EACVG,~~QAAO~~,EACPF,~~UAAS~~,EACTG,~~UAAS~~,EACTC,~~WAAU~~,EACVC,~~wBAAW~~,oBAACP;IAAUE,WAAWA;IAAWD,MAAMA;~~GAAQ~~,EAC1D,GAAGO,WACc;IACjB,qBACE,oBAACC;QACCJ,WAAWP,WACTC,MAAM,CAAC,cAAc,EACrB;YACEW,GAAGX,MAAM,CAAC,sBAAsB;YAChCY,GAAGZ,MAAM,CAAC,sBAAsB;QAClC,CAAC,CAACE,KAAK,EACP;YACEW,MAAMb,MAAM,CAAC,8BAA8B;YAC3Cc,OAAOd,MAAM,CAAC,+BAA+B;QAC/C,CAAC,CAACG,UAAU,EACZG;QAEFS,KAAKR;QACJ,GAAGE,SAAS;qBAEb,oBAACO;QAAKV,WAAWN,MAAM,CAAC,oBAAoB;QAAEiB,OAAOZ,UAAU;YAAEa,KAAKb;QAAQ,IAAIc;OAC/EX;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon16Chevron,\n Icon16ChevronLeft,\n Icon24Chevron,\n Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './ScrollArrow.module.css';\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' \| 'direction'>) => {\n if (size === 'm') {\n return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n }\n\n return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement> {\n /*\n Направление стрелки\n /\n direction: 'left' \| 'right';\n /\n Размер стрелки\n /\n size?: 'm' \| 'l';\n /\n Смещает иконку кнопки навигации по вертикали.\n /\n offsetY?: number \| string;\n}\n\n/\n Компонент стрелки из HorizontalScroll\n \n @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n size = 'l',\n offsetY,\n direction,\n className,\n getRootRef,\n children = <ArrowIcon direction={direction} size={size} />,\n ...restProps\n}: ScrollArrowProps) => {\n return (\n <button\n className={classNames(\n styles['ScrollArrow'],\n {\n m: styles['ScrollArrow--size-m'],\n l: styles['ScrollArrow--size-l'],\n }[size],\n {\n left: styles['ScrollArrow--direction-left'],\n right: styles['ScrollArrow--direction-right'],\n }[direction],\n className,\n )}\n ref={getRootRef}\n {...restProps}\n >\n <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n {children}\n </span>\n </button>\n );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","styles","ArrowIcon","size","direction","ScrollArrow","offsetY","className","getRootRef","children","restProps","button","m","l","left","right","ref","span","style","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAgD;IAClF,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,oBAACP,yCAAuB,oBAACD;IACzD;IAEA,OAAOQ,cAAc,uBAAS,oBAACL,gDAA8B,oBAACD;AAChE;AAmBA;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BF,OAAO,GAAG,EACVG,OAAO,EACPF,SAAS,EACTG,SAAS,EACTC,UAAU,EACVC,yBAAW,oBAACP;IAAUE,WAAWA;IAAWD,MAAMA;EAAQ,EAC1D,GAAGO,WACc;IACjB,qBACE,oBAACC;QACCJ,WAAWP,WACTC,MAAM,CAAC,cAAc,EACrB;YACEW,GAAGX,MAAM,CAAC,sBAAsB;YAChCY,GAAGZ,MAAM,CAAC,sBAAsB;QAClC,CAAC,CAACE,KAAK,EACP;YACEW,MAAMb,MAAM,CAAC,8BAA8B;YAC3Cc,OAAOd,MAAM,CAAC,+BAA+B;QAC/C,CAAC,CAACG,UAAU,EACZG;QAEFS,KAAKR;QACJ,GAAGE,SAAS;qBAEb,oBAACO;QAAKV,WAAWN,MAAM,CAAC,oBAAoB;QAAEiB,OAAOZ,UAAU;YAAEa,KAAKb;QAAQ,IAAIc;OAC/EX;AAIT,EAAE"}

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

@@ -14,15 +14,15 @@ import { Headline } from '../Typography/Headline/Headline';
 import styles from './Search.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */ export const Search = ({ before =/*#__PURE__*/ React.createElement(Icon16SearchOutline, null) , className , defaultValue ='' , placeholder ='Поиск' , after ='Отмена' , getRef , icon , onIconClick =noop , style , autoComplete ='off' , onChange: onChangeProp , value: valueProp , iconAriaLabel , clearAriaLabel ='Очистить' , ...inputProps })=>{
+ */ export const Search = ({ before = /*#__PURE__*/ React.createElement(Icon16SearchOutline, null), className, defaultValue = '', placeholder = 'Поиск', after = 'Отмена', getRef, icon, onIconClick = noop, style, autoComplete = 'off', onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel = 'Очистить', ...inputProps })=>{
     const inputRef = useExternRef(getRef);
-    const { value: isFocused , setTrue: setFocusedTrue , setFalse: setFocusedFalse  } = useBooleanState(false);
+    const { value: isFocused, setTrue: setFocusedTrue, setFalse: setFocusedFalse } = useBooleanState(false);
     const [value, onChange] = useEnsuredControl({
         defaultValue,
         onChange: onChangeProp,
         value: valueProp
     });
-    const { sizeY ='none'  } = useAdaptivity();
+    const { sizeY = 'none' } = useAdaptivity();
     const platform = usePlatform();
     const onFocus = (e)=>{
         setFocusedTrue();

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 { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement> {\n /*\n iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n /\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode;\n onIconClick?: (e: VKUITouchEvent) => void;\n defaultValue?: string;\n iconAriaLabel?: string;\n clearAriaLabel?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n before = <Icon16SearchOutline />,\n className,\n defaultValue = '',\n placeholder = 'Поиск',\n after = 'Отмена',\n getRef,\n icon,\n onIconClick = noop,\n style,\n autoComplete = 'off',\n onChange: onChangeProp,\n value: valueProp,\n iconAriaLabel,\n clearAriaLabel = 'Очистить',\n ...inputProps\n}: SearchProps) => {\n const inputRef = useExternRef(getRef);\n const {\n value: isFocused,\n setTrue: setFocusedTrue,\n setFalse: setFocusedFalse,\n } = useBooleanState(false);\n\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n onChange: onChangeProp,\n value: valueProp,\n });\n const { sizeY = 'none' } = useAdaptivity();\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.useCallback(\n (e: TouchEvent) => onIconClick(e.originalEvent),\n [onIconClick],\n );\n\n const onIconCancelClickStart = React.useCallback(\n (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n inputRef.current?.focus();\n onCancel();\n },\n [inputRef, onCancel],\n );\n\n return (\n <div\n className={classNames(\n 'vkuiInternalSearch',\n styles['Search'],\n sizeY === 'none' && styles['Search--sizeY-none'],\n sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n isFocused && styles['Search--focused'],\n value && styles['Search--has-value'],\n after && styles['Search--has-after'],\n icon && styles['Search--has-icon'],\n className,\n )}\n style={style}\n >\n <div className={styles['Search__field']}>\n <label className={styles['Search__control']}>\n {before}\n <Headline\n Component=\"input\"\n type=\"search\"\n level=\"1\"\n weight=\"3\"\n {...inputProps}\n placeholder={placeholder}\n autoComplete={autoComplete}\n getRootRef={inputRef}\n className={styles['Search__input']}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={onChange}\n value={value}\n />\n </label>\n <div className={styles['Search__icons']}>\n {icon && (\n <IconButton\n hoverMode=\"opacity\"\n onStart={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n aria-label={iconAriaLabel}\n >\n {icon}\n </IconButton>\n )}\n {!!value && (\n <IconButton\n hoverMode=\"opacity\"\n onStart={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n aria-label={clearAriaLabel}\n >\n {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n </IconButton>\n )}\n </div>\n </div>\n {platform === 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","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,mBAAmB;AAClF,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAG9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAiBzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,~~sBAAS~~,oBAAChB,~~2BAAsB~~,EAChCiB,~~UAAS~~,EACTC,~~cAAe~~,~~GAAE~~,EACjBC,~~aAAc~~,~~QAAO~~,EACrBC,~~OAAQ~~,~~SAAQ~~,EAChBC,~~OAAM~~,EACNC,~~KAAI~~,EACJC,~~aAAcpB~~,~~KAAI~~,EAClBqB,~~MAAK~~,EACLC,~~cAAe~~,~~MAAK~~,EACpBC,UAAUC,~~aAAY~~,EACtBC,OAAOC,~~UAAS~~,EAChBC,~~cAAa~~,EACbC,~~gBAAiB~~,~~WAAU~~,EAC3B,GAAGC,YACS;IACZ,MAAMC,WAAW1B,aAAac;IAC9B,MAAM,EACJO,OAAOM,~~UAAS~~,EAChBC,SAASC,~~eAAc~~,EACvBC,UAAUC,~~gBAAe~~,EAC1B,GAAGjC,gBAAgB;IAEpB,MAAM,CAACuB,OAAOF,SAAS,GAAGpB,kBAAkB;QAC1CY;QACAQ,UAAUC;QACVC,OAAOC;IACT;IACA,MAAM,EAAEU,~~OAAQ~~,~~OAAM~~,EAAE,GAAGnC;IAC3B,MAAMoC,WAAWhC;IAEjB,MAAMiC,UAAU,CAACC;QACfN;QACAJ,WAAWS,~~WAAWT~~,WAAWS,~~QAAQC~~;IAC3C;IAEA,MAAMC,SAAS,CAACD;QACdJ;QACAN,WAAWW,~~UAAUX~~,WAAWW,~~OAAOD~~;IACzC;IAEA,MAAME,WAAW9C,MAAM+C,~~YAAY~~;QACjC,6DAA6D;QAC7D,MAAMC,yBAAyBC,OAAOC,~~yBACpCC~~,iBAAiBC,~~WACjB~~,UACCC;QACHL,wBAAwBM,KAAKnB,SAASoB,~~SAAS~~;QAE/C,MAAMC,MAAM,IAAIC,MAAM,SAAS;YAAEC,SAAS;QAAK;QAC/CvB,SAASoB,~~SAASI~~,cAAcH;IAClC,GAAG;QAACrB;KAAS;IAEb,MAAMyB,mBAAmB5D,MAAM+C,~~YAC7B~~,CAACH,IAAkBnB,YAAYmB,EAAEiB,~~gBACjC~~;QAACpC;KAAY;IAGf,MAAMqC,yBAAyB9D,MAAM+C,~~YACnC~~,CAACH;QACCA,EAAEiB,~~cAAcE~~;~~QAChB5B~~,SAASoB,~~SAASS~~;QAClBlB;IACF,GACA;QAACX;QAAUW;KAAS;IAGtB,qBACE,oBAACmB;QACC9C,WAAWf,WACT,sBACAY,MAAM,CAAC,SAAS,EAChByB,UAAU,UAAUzB,MAAM,CAAC,qBAAqB,EAChDyB,UAAU9B,SAASuD,~~WAAWlD~~,MAAM,CAAC,wBAAwB,EAC7DoB,aAAapB,MAAM,CAAC,kBAAkB,EACtCc,SAASd,MAAM,CAAC,oBAAoB,EACpCM,SAASN,MAAM,CAAC,oBAAoB,EACpCQ,QAAQR,MAAM,CAAC,mBAAmB,EAClCG;QAEFO,OAAOA;qBAEP,oBAACuC;QAAI9C,WAAWH,MAAM,CAAC,gBAAgB;qBACrC,oBAACmD;QAAMhD,WAAWH,MAAM,CAAC,kBAAkB;OACxCE,sBACD,oBAACH;QACCqD,WAAU;QACVC,MAAK;QACLC,OAAM;QACNC,QAAO;QACN,GAAGrC,UAAU;QACdb,aAAaA;QACbM,cAAcA;QACd6C,YAAYrC;QACZhB,WAAWH,MAAM,CAAC,gBAAgB;QAClC2B,SAASA;QACTE,QAAQA;QACRjB,UAAUA;QACVE,OAAOA;uBAGX,oBAACmC;QAAI9C,WAAWH,MAAM,CAAC,gBAAgB;OACpCQ,sBACC,oBAACV;QACC2D,WAAU;QACVC,SAASd;QACTzC,WAAWH,MAAM,CAAC,eAAe;QACjC2B,SAASL;QACTO,QAAQL;QACRmC,cAAY3C;OAEXR,OAGJ,CAAC,CAACM,uBACD,oBAAChB;QACC2D,WAAU;QACVC,SAASZ;QACTc,SAAS9B;QACT3B,WAAWH,MAAM,CAAC,eAAe;QACjC2D,cAAY1C;OAEXS,aAAa9B,SAASiE,~~oBAAM~~,oBAAC5E,mCAAiB,oBAACE,wBAKvDuC,aAAa9B,SAASiE,~~OAAOvD~~,uBAC5B,oBAACT;QACCiE,MAAK;QACLC,MAAK;QACL5D,WAAWH,MAAM,CAAC,gBAAgB;QAClCgE,kBAAiB;QACjBJ,SAAS9B;QACTH,SAASL;QACTO,QAAQL;qBAER,oBAACyC;QAAK9D,WAAWH,MAAM,CAAC,oBAAoB;OAAGM;AAKzD,EAAE"}
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 { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement> {\n /*\n iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n /\n after?: React.ReactNode;\n before?: React.ReactNode;\n icon?: React.ReactNode;\n onIconClick?: (e: VKUITouchEvent) => void;\n defaultValue?: string;\n iconAriaLabel?: string;\n clearAriaLabel?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n before = <Icon16SearchOutline />,\n className,\n defaultValue = '',\n placeholder = 'Поиск',\n after = 'Отмена',\n getRef,\n icon,\n onIconClick = noop,\n style,\n autoComplete = 'off',\n onChange: onChangeProp,\n value: valueProp,\n iconAriaLabel,\n clearAriaLabel = 'Очистить',\n ...inputProps\n}: SearchProps) => {\n const inputRef = useExternRef(getRef);\n const {\n value: isFocused,\n setTrue: setFocusedTrue,\n setFalse: setFocusedFalse,\n } = useBooleanState(false);\n\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n onChange: onChangeProp,\n value: valueProp,\n });\n const { sizeY = 'none' } = useAdaptivity();\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.useCallback(\n (e: TouchEvent) => onIconClick(e.originalEvent),\n [onIconClick],\n );\n\n const onIconCancelClickStart = React.useCallback(\n (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n inputRef.current?.focus();\n onCancel();\n },\n [inputRef, onCancel],\n );\n\n return (\n <div\n className={classNames(\n 'vkuiInternalSearch',\n styles['Search'],\n sizeY === 'none' && styles['Search--sizeY-none'],\n sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n isFocused && styles['Search--focused'],\n value && styles['Search--has-value'],\n after && styles['Search--has-after'],\n icon && styles['Search--has-icon'],\n className,\n )}\n style={style}\n >\n <div className={styles['Search__field']}>\n <label className={styles['Search__control']}>\n {before}\n <Headline\n Component=\"input\"\n type=\"search\"\n level=\"1\"\n weight=\"3\"\n {...inputProps}\n placeholder={placeholder}\n autoComplete={autoComplete}\n getRootRef={inputRef}\n className={styles['Search__input']}\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={onChange}\n value={value}\n />\n </label>\n <div className={styles['Search__icons']}>\n {icon && (\n <IconButton\n hoverMode=\"opacity\"\n onStart={onIconClickStart}\n className={styles['Search__icon']}\n onFocus={setFocusedTrue}\n onBlur={setFocusedFalse}\n aria-label={iconAriaLabel}\n >\n {icon}\n </IconButton>\n )}\n {!!value && (\n <IconButton\n hoverMode=\"opacity\"\n onStart={onIconCancelClickStart}\n onClick={onCancel}\n className={styles['Search__icon']}\n aria-label={clearAriaLabel}\n >\n {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n </IconButton>\n )}\n </div>\n </div>\n {platform === 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","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -15,14 +15,14 @@ const sizeYClassNames = {
 const warn = warnOnce('SegmentedControl');
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */ export const SegmentedControl = ({ size ='l' , name , options , getRootRef , defaultValue =options[0]?.value , children , className , onChange: onChangeProp , value: valueProp , ...restProps })=>{
+ */ export const SegmentedControl = ({ size = 'l', name, options, getRootRef, defaultValue = options[0]?.value, children, className, onChange: onChangeProp, value: valueProp, ...restProps })=>{
     const id = useId();
     const [value, onChange] = useCustomEnsuredControl({
         onChange: onChangeProp,
         value: valueProp,
         defaultValue
     });
-    const { sizeY ='none'  } = useAdaptivity();
+    const { sizeY = 'none' } = useAdaptivity();
     const actualIndex = options.findIndex((option)=>option.value === value);
     useIsomorphicLayoutEffect(()=>{
         if (actualIndex === -1 && process.env.NODE_ENV === 'development') {
@@ -47,7 +47,7 @@ const warn = warnOnce('SegmentedControl');
             transform: translateX,
             WebkitTransform: translateX
         }
-    }), options.map(({ label , className: optionClassName , ...optionProps })=>/*#__PURE__*/ React.createElement(SegmentedControlOption, {
+    }), options.map(({ label, className: optionClassName, ...optionProps })=>/*#__PURE__*/ React.createElement(SegmentedControlOption, {
             key: `${optionProps.value}`,
             ...optionProps,
             className: classNames(styles['SegmentedControl__option'], optionClassName),

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 { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControl--sizeY-none'],\n [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string \| number \| undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n HasRootRef<HTMLDivElement> {\n options: SegmentedControlOptionInterface[];\n size?: 'm' \| 'l';\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n /\nexport const SegmentedControl = ({\n size = 'l',\n name,\n options,\n getRootRef,\n defaultValue = options[0]?.value,\n children,\n className,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: SegmentedControlProps) => {\n const id = useId();\n\n const [value, onChange] = useCustomEnsuredControl({\n onChange: onChangeProp,\n value: valueProp,\n defaultValue,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const actualIndex = options.findIndex((option) => option.value === value);\n\n useIsomorphicLayoutEffect(() => {\n if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n }, [actualIndex]);\n\n const translateX = `translateX(${100 actualIndex}%)`;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['SegmentedControl'],\n sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n size === 'l' && styles['SegmentedControl--size-l'],\n className,\n )}\n ref={getRootRef}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {actualIndex > -1 && (\n <div\n aria-hidden\n className={styles['SegmentedControl__slider']}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, className: optionClassName, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n className={classNames(styles['SegmentedControl__option'], optionClassName)}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => onChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","styles","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","div","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5C,CAACJ,SAASO,~~QAAQ~~,EAAEH,MAAM,CAAC,kCAAkC;AAC/D;AAqBA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,~~MAAO~~,~~IAAG~~,EACVC,~~KAAI~~,EACJC,~~QAAO~~,EACPC,~~WAAU~~,EACVC,~~cAAeF~~,OAAO,CAAC,EAAE,EAAEG,~~MAAK~~,EAChCC,~~SAAQ~~,EACRC,~~UAAS~~,EACTC,UAAUC,~~aAAY~~,EACtBJ,OAAOK,~~UAAS~~,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKvB;IAEX,MAAM,CAACgB,OAAOG,SAAS,GAAGpB,wBAAwB;QAChDoB,UAAUC;QACVJ,OAAOK;QACPN;IACF;IAEA,MAAM,EAAES,~~OAAQ~~,~~OAAM~~,EAAE,GAAG1B;IAE3B,MAAM2B,cAAcZ,QAAQa,~~UAAU~~,CAACC,SAAWA,OAAOX,~~UAAUA~~;IAEnEd,0BAA0B;QACxB,IAAIuB,gBAAgB,CAAC,KAAKG,QAAQC,~~IAAIC~~,~~aAAa~~,eAAe;YAChErB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACgB;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,oBAACO;QACE,GAAGV,SAAS;QACbJ,WAAWrB,WACTQ,MAAM,CAAC,mBAAmB,EAC1BmB,UAAUvB,SAASgC,~~WAAW3B~~,eAAe,CAACkB,MAAM,EACpDb,SAAS,OAAON,MAAM,CAAC,2BAA2B,EAClDa;QAEFgB,KAAKpB;qBAEL,oBAACkB;QAAIG,MAAK;QAAajB,WAAWb,MAAM,CAAC,uBAAuB;OAC7DoB,cAAc,CAAC,mBACd,oBAACO;QACCI,eAAAA;QACAlB,WAAWb,MAAM,CAAC,2BAA2B;QAC7CgC,OAAO;YACLC,OAAO,CAAC,EAAE,MAAMzB,QAAQ0B,~~OAAO~~,CAAC,CAAC;YACjCC,WAAWT;YACXU,iBAAiBV;QACnB;QAGHlB,QAAQ6B,~~IAAI~~,CAAC,EAAEC,~~MAAK~~,EAAEzB,WAAW0B,~~gBAAe~~,EAAE,GAAGC,aAAa,iBACjE,oBAACzC;YACC0C,KAAK,CAAC,EAAED,YAAY7B,~~MAAM~~,CAAC;YAC1B,GAAG6B,WAAW;YACf3B,WAAWrB,WAAWQ,MAAM,CAAC,2BAA2B,EAAEuC;YAC1DhC,MAAMA,QAAQW;YACdwB,SAAS/B,UAAU6B,YAAY7B;~~YAC/BG~~,UAAU,IAAMA,SAAS0B,YAAY7B;~~WAEpC2B~~;AAMb,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 { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControl--sizeY-none'],\n [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string \| number \| undefined;\n\nexport interface SegmentedControlOptionInterface\n extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n label: React.ReactChild;\n value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n HasRootRef<HTMLDivElement> {\n options: SegmentedControlOptionInterface[];\n size?: 'm' \| 'l';\n name?: string;\n onChange?: (value: SegmentedControlValue) => void;\n value?: SegmentedControlValue;\n defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n /\nexport const SegmentedControl = ({\n size = 'l',\n name,\n options,\n getRootRef,\n defaultValue = options[0]?.value,\n children,\n className,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: SegmentedControlProps) => {\n const id = useId();\n\n const [value, onChange] = useCustomEnsuredControl({\n onChange: onChangeProp,\n value: valueProp,\n defaultValue,\n });\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const actualIndex = options.findIndex((option) => option.value === value);\n\n useIsomorphicLayoutEffect(() => {\n if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n }, [actualIndex]);\n\n const translateX = `translateX(${100 actualIndex}%)`;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['SegmentedControl'],\n sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n size === 'l' && styles['SegmentedControl--size-l'],\n className,\n )}\n ref={getRootRef}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {actualIndex > -1 && (\n <div\n aria-hidden\n className={styles['SegmentedControl__slider']}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(({ label, className: optionClassName, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n className={classNames(styles['SegmentedControl__option'], optionClassName)}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => onChange(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","styles","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","div","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,kCAAkC;AAC/D;AAqBA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,eAAeF,OAAO,CAAC,EAAE,EAAEG,KAAK,EAChCC,QAAQ,EACRC,SAAS,EACTC,UAAUC,YAAY,EACtBJ,OAAOK,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKvB;IAEX,MAAM,CAACgB,OAAOG,SAAS,GAAGpB,wBAAwB;QAChDoB,UAAUC;QACVJ,OAAOK;QACPN;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAG1B;IAE3B,MAAM2B,cAAcZ,QAAQa,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEd,0BAA0B;QACxB,IAAIuB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChErB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACgB;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,oBAACO;QACE,GAAGV,SAAS;QACbJ,WAAWrB,WACTQ,MAAM,CAAC,mBAAmB,EAC1BmB,UAAUvB,SAASgC,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpDb,SAAS,OAAON,MAAM,CAAC,2BAA2B,EAClDa;QAEFgB,KAAKpB;qBAEL,oBAACkB;QAAIG,MAAK;QAAajB,WAAWb,MAAM,CAAC,uBAAuB;OAC7DoB,cAAc,CAAC,mBACd,oBAACO;QACCI,eAAAA;QACAlB,WAAWb,MAAM,CAAC,2BAA2B;QAC7CgC,OAAO;YACLC,OAAO,CAAC,EAAE,MAAMzB,QAAQ0B,MAAM,CAAC,CAAC,CAAC;YACjCC,WAAWT;YACXU,iBAAiBV;QACnB;QAGHlB,QAAQ6B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEzB,WAAW0B,eAAe,EAAE,GAAGC,aAAa,iBACjE,oBAACzC;YACC0C,KAAK,CAAC,EAAED,YAAY7B,KAAK,CAAC,CAAC;YAC1B,GAAG6B,WAAW;YACf3B,WAAWrB,WAAWQ,MAAM,CAAC,2BAA2B,EAAEuC;YAC1DhC,MAAMA,QAAQW;YACdwB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCG,UAAU,IAAMA,SAAS0B,YAAY7B,KAAK;WAEzC2B;AAMb,EAAE"}

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

@@ -13,9 +13,9 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */ export const SegmentedControlOption = ({ getRef , className , style , children , ...restProps })=>{
-    const { focusVisible , onBlur , onFocus  } = useFocusVisible();
-    const { sizeY ='none'  } = useAdaptivity();
+ */ export const SegmentedControlOption = ({ getRef, className, style, children, ...restProps })=>{
+    const { focusVisible, onBlur, onFocus } = useFocusVisible();
+    const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames(styles['SegmentedControlOption'], restProps.checked && styles['SegmentedControlOption--checked'], className),
         style: style

package/dist/cssm/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 { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControlOption__content--sizeY-none'],\n [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n getRef,\n className,\n style,\n children,\n ...restProps\n}: SegmentedControlOptionProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <label\n className={classNames(\n styles['SegmentedControlOption'],\n restProps.checked && styles['SegmentedControlOption--checked'],\n className,\n )}\n style={style}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n getRootRef={getRef}\n type=\"radio\"\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span\n className={classNames(\n styles['SegmentedControlOption__content'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n )}\n >\n {children}\n </span>\n <FocusVisible visible={focusVisible} mode=\"inside\" />\n </label>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","label","checked","Component","getRootRef","type","span","REGULAR","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,8CAA8C;IAC3D,CAACJ,SAASO,~~QAAQ~~,EAAEH,MAAM,CAAC,iDAAiD;AAC9E;AAMA;;CAEC,GACD,OAAO,MAAMI,yBAAyB,CAAC,EACrCC,~~OAAM~~,EACNC,~~UAAS~~,EACTC,~~MAAK~~,EACLC,~~SAAQ~~,EACR,GAAGC,WACyB;IAC5B,MAAM,EAAEC,~~aAAY~~,EAAEC,~~OAAM~~,EAAEC,~~QAAO~~,EAAE,GAAGjB;IAC1C,MAAM,EAAEkB,~~OAAQ~~,~~OAAM~~,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACCR,WAAWb,WACTO,MAAM,CAAC,yBAAyB,EAChCS,UAAUM,~~WAAWf~~,MAAM,CAAC,kCAAkC,EAC9DM;QAEFC,OAAOA;qBAEP,oBAACR;QACE,GAAGU,SAAS;QACbO,WAAU;QACVC,YAAYZ;QACZa,MAAK;QACLP,QAAQd,aAAac,QAAQF,UAAUE;~~QACvCC~~,SAASf,aAAae,SAASH,UAAUG;~~sBAE3C~~,oBAACO;QACCb,WAAWb,WACTO,MAAM,CAAC,kCAAkC,EACzCa,UAAUjB,SAASwB,~~WAAWnB~~,eAAe,CAACY,MAAM;OAGrDL,yBAEH,oBAACV;QAAauB,SAASX;QAAcY,MAAK;;AAGhD,EAAE"}
1	+ {"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n none: styles['SegmentedControlOption__content--sizeY-none'],\n [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n getRef,\n className,\n style,\n children,\n ...restProps\n}: SegmentedControlOptionProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <label\n className={classNames(\n styles['SegmentedControlOption'],\n restProps.checked && styles['SegmentedControlOption--checked'],\n className,\n )}\n style={style}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n getRootRef={getRef}\n type=\"radio\"\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span\n className={classNames(\n styles['SegmentedControlOption__content'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n )}\n >\n {children}\n </span>\n <FocusVisible visible={focusVisible} mode=\"inside\" />\n </label>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","label","checked","Component","getRootRef","type","span","REGULAR","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,8CAA8C;IAC3D,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,iDAAiD;AAC9E;AAMA;;CAEC,GACD,OAAO,MAAMI,yBAAyB,CAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACR,GAAGC,WACyB;IAC5B,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGjB;IAC1C,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACCR,WAAWb,WACTO,MAAM,CAAC,yBAAyB,EAChCS,UAAUM,OAAO,IAAIf,MAAM,CAAC,kCAAkC,EAC9DM;QAEFC,OAAOA;qBAEP,oBAACR;QACE,GAAGU,SAAS;QACbO,WAAU;QACVC,YAAYZ;QACZa,MAAK;QACLP,QAAQd,aAAac,QAAQF,UAAUE,MAAM;QAC7CC,SAASf,aAAae,SAASH,UAAUG,OAAO;sBAElD,oBAACO;QACCb,WAAWb,WACTO,MAAM,CAAC,kCAAkC,EACzCa,UAAUjB,SAASwB,OAAO,IAAInB,eAAe,CAACY,MAAM;OAGrDL,yBAEH,oBAACV;QAAauB,SAASX;QAAcY,MAAK;;AAGhD,EAAE"}