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

@vkontakte/vkui 6.1.2 → 6.2.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 (1986) hide show

package/dist/cjs/components/ScreenSpinner/Icon48CancelCircle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon48CancelCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,kBAAkB,UAAW,~~MAAM~~,QAAQ,CAAC,aAAa,CAAC,4CAiBtE,CAAC"}
1	+ {"version":3,"file":"Icon48CancelCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,kBAAkB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAiBtE,CAAC"}

package/dist/cjs/components/ScreenSpinner/Icon48CancelCircle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"names":["Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,qBAAqB,CAACC,sBACjC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"names":["Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,qBAAqB,CAACC,sBACjC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK"}

package/dist/cjs/components/ScreenSpinner/Icon48DoneOutline.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon48DoneOutline.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,UAAW,~~MAAM~~,QAAQ,CAAC,aAAa,CAAC,4CAkBrE,CAAC"}
1	+ {"version":3,"file":"Icon48DoneOutline.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAkBrE,CAAC"}

package/dist/cjs/components/ScreenSpinner/Icon48DoneOutline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M9 24L19 34L39 14\"\n stroke=\"currentColor\"\n strokeWidth=\"3.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n"],"names":["Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,oBAAoB,CAACC,sBAChC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,GAAE;YACFC,QAAO;YACPC,aAAY;YACZC,eAAc;YACdC,gBAAe"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n className=\"vkuiIcon\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M9 24L19 34L39 14\"\n stroke=\"currentColor\"\n strokeWidth=\"3.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n"],"names":["Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;;;iEAFU;AAEhB,MAAMA,oBAAoB,CAACC,sBAChC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP;kBAEJ,cAAA,qBAACQ;YACCC,GAAE;YACFC,QAAO;YACPC,aAAY;YACZC,eAAc;YACdC,gBAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { 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 onClick,\n children = 'Пожалуйста, подождите...',\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 noBackground\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 {...restProps}\n >\n {children}\n </Spinner>\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":["ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","noBackground","classNames","div","Spinner"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;uBAhBgB;sBACF;+BACG;+BACA;yBACQ;oCACH;mCACD;AAU3B,MAAMA,gBAAgB;QAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EAElB,WADhBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,YAAY;QACZjB,WAAWkB,IAAAA,gBAAU,uBAEnBjB,UAAU,gDACVD;QAEFD,OAAOA;kBAEP,cAAA,sBAACoB;YAAInB,SAAS;YAAsCG,SAASA;;8BAC3D,qBAACiB,gBAAO;oBACNpB,WAAWkB,IAAAA,gBAAU,gCAEnBZ;oBAEFJ,MAAMA;mBACFG;8BAEHD;;8BAEH,qBAACe;oBACCnB,WAAWkB,IAAAA,gBAAU,6BAEnBjB,UAAU;8BAGZ,cAAA,qBAACM;;;;;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { 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 onClick,\n children = 'Пожалуйста, подождите...',\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 noBackground\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 {...restProps}\n >\n {children}\n </Spinner>\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":["ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","noBackground","classNames","div","Spinner"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;uBAhBgB;sBACF;+BACG;+BACA;yBACQ;oCACH;mCACD;AAU3B,MAAMA,gBAAgB;QAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EAElB,WADhBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,YAAY;QACZjB,WAAWkB,IAAAA,gBAAU,uBAEnBjB,UAAU,gDACVD;QAEFD,OAAOA;kBAEP,cAAA,sBAACoB;YAAInB,SAAS;YAAsCG,SAASA;;8BAC3D,qBAACiB,gBAAO;oBACNpB,WAAWkB,IAAAA,gBAAU,gCAEnBZ;oBAEFJ,MAAMA;mBACFG;8BAEHD;;8BAEH,qBAACe;oBACCnB,WAAWkB,IAAAA,gBAAU,6BAEnBjB,UAAU;8BAGZ,cAAA,qBAACM;;;;;AAKX"}

package/dist/cjs/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 { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n m: styles['ScrollArrow--size-m'],\n l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n up: styles['ScrollArrow--direction-up'],\n right: styles['ScrollArrow--direction-right'],\n down: styles['ScrollArrow--direction-down'],\n left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n up: 'Назад',\n right: 'Вперед',\n down: 'Вперед',\n left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n let Icon = Icon24Chevron;\n if (size === 'm') {\n Icon = Icon16Chevron;\n }\n\n return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement> {\n /*\n Направление стрелки\n /\n direction: 'up' \| 'right' \| 'down' \| 'left';\n /\n Размер стрелки\n /\n size?: 'm' \| 'l';\n /\n Смещает иконку кнопки навигации по вертикали.\n /\n offsetY?: number \| string;\n label?: string;\n}\n\n/\n Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\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 label: labelProp,\n children = <ArrowIcon size={size} />,\n ...restProps\n}: ScrollArrowProps) => {\n const label = labelProp ?? labelDirection[direction];\n\n return (\n <RootComponent\n Component=\"button\"\n type=\"button\"\n baseClassName={classNames(\n styles['ScrollArrow'],\n stylesSize[size],\n stylesDirection[direction],\n )}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n {children}\n </span>\n </RootComponent>\n );\n};\n"],"names":["ScrollArrow","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","Icon24Chevron","Icon16Chevron","className","offsetY","direction","label","labelProp","children","restProps","RootComponent","Component","type","baseClassName","classNames","VisuallyHidden","span","style","top","undefined"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA4DaA;;;eAAAA;;;;;;;;iEA5DU;uBACsB;sBAClB;+BAEG;gCACC;AAG/B,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,EAAE;IACFC,KAAK;IACLC,IAAI;IACJC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOC,oBAAa;IACxB,IAAIF,SAAS,KAAK;QAChBC,OAAOE,oBAAa;IACtB;IAEA,qBAAO,qBAACF;QAAKG,SAAS;;AACxB;AA0BO,MAAMf,cAAc;QAAC,EAC1BW,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,qBAACV;QAAUC,MAAMA;MAAQ,EAEnB,WADdU;QALHV;QACAK;QACAC;QACAC;QACAE;;IAGA,MAAMF,QAAQC,sBAAAA,uBAAAA,YAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,sBAACK,4BAAa;QACZC,WAAU;QACVC,MAAK;QACLC,eAAeC,IAAAA,gBAAU,qBAEvBzB,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACa,UAAU;OAExBI;;YAEHH,uBAAS,qBAACS,8BAAc;0BAAET;;0BAC3B,qBAACU;gBAAKb,SAAS;gBAA+Bc,OAAOb,UAAU;oBAAEc,KAAKd;gBAAQ,IAAIe;0BAC/EX;;;;AAIT"}
1	+ {"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n m: styles['ScrollArrow--size-m'],\n l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n up: styles['ScrollArrow--direction-up'],\n right: styles['ScrollArrow--direction-right'],\n down: styles['ScrollArrow--direction-down'],\n left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n up: 'Назад',\n right: 'Вперед',\n down: 'Вперед',\n left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n let Icon = Icon24Chevron;\n if (size === 'm') {\n Icon = Icon16Chevron;\n }\n\n return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement> {\n /*\n Направление стрелки\n /\n direction: 'up' \| 'right' \| 'down' \| 'left';\n /\n Размер стрелки\n /\n size?: 'm' \| 'l';\n /\n Смещает иконку кнопки навигации по вертикали.\n /\n offsetY?: number \| string;\n label?: string;\n}\n\n/\n Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\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 label: labelProp,\n children = <ArrowIcon size={size} />,\n ...restProps\n}: ScrollArrowProps) => {\n const label = labelProp ?? labelDirection[direction];\n\n return (\n <RootComponent\n Component=\"button\"\n type=\"button\"\n baseClassName={classNames(\n styles['ScrollArrow'],\n stylesSize[size],\n stylesDirection[direction],\n )}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n {children}\n </span>\n </RootComponent>\n );\n};\n"],"names":["ScrollArrow","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","Icon24Chevron","Icon16Chevron","className","offsetY","direction","label","labelProp","children","restProps","RootComponent","Component","type","baseClassName","classNames","VisuallyHidden","span","style","top","undefined"],"mappings":";;;;+BA4DaA;;;eAAAA;;;;;;;;iEA5DU;uBACsB;sBAClB;+BAEG;gCACC;AAG/B,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,EAAE;IACFC,KAAK;IACLC,IAAI;IACJC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOC,oBAAa;IACxB,IAAIF,SAAS,KAAK;QAChBC,OAAOE,oBAAa;IACtB;IAEA,qBAAO,qBAACF;QAAKG,SAAS;;AACxB;AA0BO,MAAMf,cAAc;QAAC,EAC1BW,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,qBAACV;QAAUC,MAAMA;MAAQ,EAEnB,WADdU;QALHV;QACAK;QACAC;QACAC;QACAE;;IAGA,MAAMF,QAAQC,sBAAAA,uBAAAA,YAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,sBAACK,4BAAa;QACZC,WAAU;QACVC,MAAK;QACLC,eAAeC,IAAAA,gBAAU,qBAEvBzB,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACa,UAAU;OAExBI;;YAEHH,uBAAS,qBAACS,8BAAc;0BAAET;;0BAC3B,qBAACU;gBAAKb,SAAS;gBAA+Bc,OAAOb,UAAU;oBAAEc,KAAKd;gBAAQ,IAAIe;0BAC/EX;;;;AAIT"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n s: Icon16Chevron,\n m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' \| 'height'> {\n size?: 's' \| 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n const Icon = iconSize[size];\n\n return <Icon {...restProps} />;\n};\n"],"names":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAYaA;;;eAAAA;;;;;;;iEAZU;uBACkC;AAEzD,MAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,MAAML,UAAU;QAAC,EAAEM,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,2BAASD;AACnB"}
1	+ {"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n s: Icon16Chevron,\n m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' \| 'height'> {\n size?: 's' \| 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n const Icon = iconSize[size];\n\n return <Icon {...restProps} />;\n};\n"],"names":["Chevron","iconSize","s","Icon16Chevron","m","Icon24ChevronCompactRight","size","restProps","Icon"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;iEAZU;uBACkC;AAEzD,MAAMC,WAAW;IACfC,GAAGC,oBAAa;IAChBC,GAAGC,gCAAyB;AAC9B;AAMO,MAAML,UAAU;QAAC,EAAEM,OAAO,GAAG,EAA8B,WAAzBC;QAAfD;;IACxB,MAAME,OAAOP,QAAQ,CAACK,KAAK;IAE3B,qBAAO,qBAACE,2BAASD;AACnB"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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