npm - @vkontakte/vkui - Versions diffs - 8.0.1 → 8.1.0 - Mend

@vkontakte/vkui 8.0.1 → 8.1.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 (1368) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n tabletMinus: styles.viewWidthTabletMinus,\n smallTabletPlus: styles.viewWidthSmallTabletPlus,\n tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n const { viewWidth } = useAdaptivity();\n const [animate, setAnimate] = React.useState(Boolean(animateProp));\n const mediaQueries = useMediaQueries();\n\n React.useEffect(() => {\n if (animateProp !== undefined) {\n setAnimate(animateProp);\n return;\n }\n\n if (viewWidth !== undefined) {\n setAnimate(viewWidth < ViewWidth.TABLET);\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n listener();\n\n mediaQueries.smallTabletPlus.addEventListener('change', listener);\n return () => {\n mediaQueries.smallTabletPlus.removeEventListener('change', listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Ширина колонки.\n /\n width?: number \| string;\n /\n Максимальная ширина колонки.\n /\n maxWidth?: number \| string;\n /\n Минимальная ширина колонки.\n /\n minWidth?: number \| string;\n /\n Если false, то переходы между Panel происходят без анимации.\n /\n animate?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`.\n /\n autoSpaced?: boolean;\n /\n Фиксированное положение колонки.\n /\n fixed?: boolean;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`.\n /\n stretchedOnMobile?: boolean;\n}\n\n/\n @see https://vkui.io/components/split-layout#split-col\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n const {\n children,\n width,\n maxWidth,\n minWidth,\n animate: animateProp,\n fixed,\n autoSpaced,\n stretchedOnMobile,\n getRootRef,\n ...restProps\n } = props;\n const baseRef = useExternRef(getRootRef);\n const { viewWidth } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = React.useMemo(\n () => ({\n colRef: baseRef,\n animate,\n }),\n [animate, baseRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseStyle={{\n width,\n maxWidth,\n minWidth,\n }}\n getRootRef={baseRef}\n baseClassName={classNames(\n styles.host,\n viewWidthToClassName(breakpointClassNames, viewWidth),\n autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n fixed && styles.fixed,\n stretchedOnMobile && styles.stretchedOnMobile,\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n </SplitColContext.Provider>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","addEventListener","removeEventListener","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AAEvE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMV,WAAWQ,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGlB;IACtB,MAAM,CAACmB,SAASC,WAAW,GAAGtB,MAAMuB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBJ,MAAM0B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYf,UAAUuB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAJ,aAAaV,eAAe,CAACgB,gBAAgB,CAAC,UAAUF;QACxD,OAAO;YACLJ,aAAaV,eAAe,CAACiB,mBAAmB,CAAC,UAAUH;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMY,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRjB,SAASF,WAAW,EACpBoB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEtB,SAAS,EAAE,GAAGlB;IACtB,MAAMmB,UAAUH,qBAAqBC;IAErC,MAAM0B,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRvB;QACF,CAAA,GACA;QAACA;QAASuB;KAAQ;IAGpB,qBACE,KAACrC;QACE,GAAGoC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbQ,OAAOyC,IAAI,EACX5C,qBAAqBI,sBAAsBU,YAC3CoB,cAAcvC,WAAWQ,OAAO0C,UAAU,EAAE,sCAC5CZ,SAAS9B,OAAO8B,KAAK,EACrBE,qBAAqBhC,OAAOgC,iBAAiB;kBAG/C,cAAA,KAACjC,gBAAgB4C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW9C,OAAO+C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n tabletMinus: styles.viewWidthTabletMinus,\n smallTabletPlus: styles.viewWidthSmallTabletPlus,\n tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n const { viewWidth } = useAdaptivity();\n const [animate, setAnimate] = React.useState(Boolean(animateProp));\n const mediaQueries = useMediaQueries();\n\n React.useEffect(() => {\n if (animateProp !== undefined) {\n setAnimate(animateProp);\n return;\n }\n\n if (viewWidth !== undefined) {\n setAnimate(viewWidth < ViewWidth.TABLET);\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n listener();\n\n mediaQueries.smallTabletPlus.addEventListener('change', listener);\n return () => {\n mediaQueries.smallTabletPlus.removeEventListener('change', listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Ширина колонки.\n /\n width?: number \| string \| undefined;\n /\n Максимальная ширина колонки.\n /\n maxWidth?: number \| string \| undefined;\n /\n Минимальная ширина колонки.\n /\n minWidth?: number \| string \| undefined;\n /\n Если false, то переходы между Panel происходят без анимации.\n /\n animate?: boolean \| undefined;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`.\n /\n autoSpaced?: boolean \| undefined;\n /\n Фиксированное положение колонки.\n /\n fixed?: boolean \| undefined;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`.\n /\n stretchedOnMobile?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/split-layout#split-col\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n const {\n children,\n width,\n maxWidth,\n minWidth,\n animate: animateProp,\n fixed,\n autoSpaced,\n stretchedOnMobile,\n getRootRef,\n ...restProps\n } = props;\n const baseRef = useExternRef(getRootRef);\n const { viewWidth } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = React.useMemo(\n () => ({\n colRef: baseRef,\n animate,\n }),\n [animate, baseRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseStyle={{\n width,\n maxWidth,\n minWidth,\n }}\n getRootRef={baseRef}\n baseClassName={classNames(\n styles.host,\n viewWidthToClassName(breakpointClassNames, viewWidth),\n autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n fixed && styles.fixed,\n stretchedOnMobile && styles.stretchedOnMobile,\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n </SplitColContext.Provider>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","addEventListener","removeEventListener","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AAEvE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMV,WAAWQ,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGlB;IACtB,MAAM,CAACmB,SAASC,WAAW,GAAGtB,MAAMuB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBJ,MAAM0B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYf,UAAUuB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAJ,aAAaV,eAAe,CAACgB,gBAAgB,CAAC,UAAUF;QACxD,OAAO;YACLJ,aAAaV,eAAe,CAACiB,mBAAmB,CAAC,UAAUH;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMY,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRjB,SAASF,WAAW,EACpBoB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEtB,SAAS,EAAE,GAAGlB;IACtB,MAAMmB,UAAUH,qBAAqBC;IAErC,MAAM0B,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRvB;QACF,CAAA,GACA;QAACA;QAASuB;KAAQ;IAGpB,qBACE,KAACrC;QACE,GAAGoC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbQ,OAAOyC,IAAI,EACX5C,qBAAqBI,sBAAsBU,YAC3CoB,cAAcvC,WAAWQ,OAAO0C,UAAU,EAAE,sCAC5CZ,SAAS9B,OAAO8B,KAAK,EACrBE,qBAAqBhC,OAAOgC,iBAAiB;kBAG/C,cAAA,KAACjC,gBAAgB4C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW9C,OAAO+C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n @deprecated Since 7.9.0. Будет удалeно в VKUI v9.\n * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLDivElement~~>;\~~n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `content`: свойства для прокидывания в контент;.\n /\n slotProps?: {\n root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n content?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n };\n /\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 компоненты можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n popout?: React.ReactNode;\n /\n Свойство для отрисовки `ModalRoot`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 `ModalRoot` можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n modal?: React.ReactNode;\n /\n Компонент для отрисовки заголовка.\n /\n header?: React.ReactNode;\n /\n Центрирует контент.\n /\n center?: boolean;\n}\n\n/\n @see https://vkui.io/components/split-layout\n /\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n center,\n getRef,\n children,\n\n slotProps,\n ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development') {\n if (getRef) {\n warn(\n 'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n );\n }\n if (popout) {\n warn(\n 'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n if (modal) {\n warn(\n 'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n }\n\n const rootRest = useMergeProps(restProps, slotProps?.root);\n const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n const platform = usePlatform();\n\n return (\n <RootComponent\n baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n {...rootRest}\n >\n {header}\n <RootComponent\n baseClassName={classNames(\n styles.inner,\n !!header && styles.innerHeader,\n center && styles.innerCenter,\n )}\n {...contentRest}\n >\n {children}\n {modal}\n {popout}\n </RootComponent>\n </RootComponent>\n );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;~~AA2CtB~~;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n @deprecated Since 7.9.0. Будет удалeно в VKUI v9.\n * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLDivElement> \| undefined;\n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `content`: свойства для прокидывания в контент;.\n /\n slotProps?:\n \| {\n root?:\n \| (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n \| undefined;\n content?:\n \| (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n \| undefined;\n }\n \| undefined;\n /\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 компоненты можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n popout?: React.ReactNode \| undefined;\n /\n Свойство для отрисовки `ModalRoot`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 `ModalRoot` можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n modal?: React.ReactNode \| undefined;\n /\n Компонент для отрисовки заголовка.\n /\n header?: React.ReactNode \| undefined;\n /\n Центрирует контент.\n /\n center?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/split-layout\n /\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n center,\n getRef,\n children,\n\n slotProps,\n ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development') {\n if (getRef) {\n warn(\n 'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n );\n }\n if (popout) {\n warn(\n 'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n if (modal) {\n warn(\n 'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n }\n\n const rootRest = useMergeProps(restProps, slotProps?.root);\n const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n const platform = usePlatform();\n\n return (\n <RootComponent\n baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n {...rootRest}\n >\n {header}\n <RootComponent\n baseClassName={classNames(\n styles.inner,\n !!header && styles.innerHeader,\n center && styles.innerCenter,\n )}\n {...contentRest}\n >\n {children}\n {modal}\n {popout}\n </RootComponent>\n </RootComponent>\n );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n HorizontalScroll,\n type HorizontalScrollProps,\n type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<\n HorizontalScrollProps,\n \| 'showArrows'\n \| 'arrowSize'\n \| 'getScrollToLeft'\n \| 'getScrollToRight'\n \| 'scrollAnimationDuration'\n > {\n /*\n Отключение возможности прокручивания компонента по горизонтали.\n /\n fixed?: boolean;\n /\n Отключает отступы. Рекомендуется использовать с `mode=\"outline\"` у [`SubnavigationButton`](https://vkui.io/components/subnavigation-button).\n /\n noPadding?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/\n @see https://vkui.io/components/subnavigation-bar\n */\nexport const SubnavigationBar = ({\n fixed = false,\n children,\n showArrows = true,\n noPadding = false,\n arrowSize = 's',\n getScrollToLeft = defaultScrollToLeft,\n getScrollToRight = defaultScrollToRight,\n scrollAnimationDuration,\n ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n let ScrollWrapper: React.ElementType;\n let scrollWrapperProps = {};\n\n if (fixed) {\n ScrollWrapper = 'div';\n } else {\n ScrollWrapper = HorizontalScroll;\n scrollWrapperProps = {\n showArrows,\n arrowSize,\n getScrollToLeft,\n getScrollToRight,\n scrollAnimationDuration,\n };\n }\n\n return (\n <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n <ul className={classNames(styles.scrollIn, noPadding && styles.noPadding)}>\n {React.Children.map(children, (child, idx) =>\n hasReactNode(child) ? (\n <li key={idx} className={styles.item}>\n {child}\n </li>\n ) : null,\n )}\n </ul>\n </ScrollWrapper>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","noPadding","arrowSize","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAsBnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,YAAY,KAAK,EACjBC,YAAY,GAAG,EACfC,kBAAkBT,mBAAmB,EACrCU,mBAAmBR,oBAAoB,EACvCS,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIV,OAAO;QACTS,gBAAgB;IAClB,OAAO;QACLA,gBAAgBhB;QAChBiB,qBAAqB;YACnBR;YACAE;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACb;QAAciB,eAAeX,SAASL,OAAOiB,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWlB,OAAOmB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWtB,WAAWI,OAAOqB,QAAQ,EAAEb,aAAaR,OAAOQ,SAAS;0BACrEb,MAAM2B,QAAQ,CAACC,GAAG,CAACjB,UAAU,CAACkB,OAAOC,MACpC5B,aAAa2B,uBACX,KAACE;wBAAaR,WAAWlB,OAAO2B,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n HorizontalScroll,\n type HorizontalScrollProps,\n type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<\n HorizontalScrollProps,\n \| 'showArrows'\n \| 'arrowSize'\n \| 'getScrollToLeft'\n \| 'getScrollToRight'\n \| 'scrollAnimationDuration'\n > {\n /*\n Отключение возможности прокручивания компонента по горизонтали.\n /\n fixed?: boolean \| undefined;\n /\n Отключает отступы. Рекомендуется использовать с `mode=\"outline\"` у [`SubnavigationButton`](https://vkui.io/components/subnavigation-button).\n /\n noPadding?: boolean \| undefined;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/\n @see https://vkui.io/components/subnavigation-bar\n */\nexport const SubnavigationBar = ({\n fixed = false,\n children,\n showArrows = true,\n noPadding = false,\n arrowSize = 's',\n getScrollToLeft = defaultScrollToLeft,\n getScrollToRight = defaultScrollToRight,\n scrollAnimationDuration,\n ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n let ScrollWrapper: React.ElementType;\n let scrollWrapperProps = {};\n\n if (fixed) {\n ScrollWrapper = 'div';\n } else {\n ScrollWrapper = HorizontalScroll;\n scrollWrapperProps = {\n showArrows,\n arrowSize,\n getScrollToLeft,\n getScrollToRight,\n scrollAnimationDuration,\n };\n }\n\n return (\n <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n <ul className={classNames(styles.scrollIn, noPadding && styles.noPadding)}>\n {React.Children.map(children, (child, idx) =>\n hasReactNode(child) ? (\n <li key={idx} className={styles.item}>\n {child}\n </li>\n ) : null,\n )}\n </ul>\n </ScrollWrapper>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","noPadding","arrowSize","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAsBnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,YAAY,KAAK,EACjBC,YAAY,GAAG,EACfC,kBAAkBT,mBAAmB,EACrCU,mBAAmBR,oBAAoB,EACvCS,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIV,OAAO;QACTS,gBAAgB;IAClB,OAAO;QACLA,gBAAgBhB;QAChBiB,qBAAqB;YACnBR;YACAE;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACb;QAAciB,eAAeX,SAASL,OAAOiB,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWlB,OAAOmB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWtB,WAAWI,OAAOqB,QAAQ,EAAEb,aAAaR,OAAOQ,SAAS;0BACrEb,MAAM2B,QAAQ,CAACC,GAAG,CAACjB,UAAU,CAACkB,OAAOC,MACpC5B,aAAa2B,uBACX,KAACE;wBAAaR,WAAWlB,OAAO2B,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n accent: styles.appearanceAccent,\n neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n primary: styles.modePrimary,\n outline: styles.modeOutline,\n tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n};\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {\n /*\n Стиль отображения кнопки.\n /\n mode?: 'primary' \| 'outline' \| 'tertiary';\n /\n Тип внешнего вида кнопки.\n /\n appearance?: 'accent' \| 'neutral';\n /\n Размер кнопки.\n /\n size?: 's' \| 'm' \| 'l';\n /\n Выбранное состояние.\n /\n selected?: boolean;\n /\n Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n /\n textLevel?: '1' \| '2' \| '3';\n /\n Рекомендуется использовать только иконки с размером 24.\n /\n before?: React.ReactNode;\n /\n Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n /\n after?: React.ReactNode;\n /\n Нужно ли отображать иконку `\"chevron\"`.\n /\n chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n SubnavigationButtonProps,\n 'textLevel' \| 'className'\n> &\n HasComponent &\n HasChildren;\n\nconst SubnavigationButtonTypography = ({\n textLevel,\n ...restProps\n}: SubnavigationButtonTypographyProps) => {\n if (textLevel === '1') {\n return <Subhead {...restProps} />;\n }\n\n return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/\n @see https://vkui.io/components/subnavigation-bar#subnavigation-button\n */\nexport const SubnavigationButton = ({\n mode = 'primary',\n appearance = 'accent',\n size = 'm',\n selected,\n textLevel = '1',\n before,\n after,\n chevron,\n children,\n ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n hasActive={false}\n focusVisibleMode=\"outside\"\n {...restProps}\n baseClassName={classNames(\n styles.host,\n sizeStyles[size],\n modeStyles[mode],\n appearanceStyles[appearance],\n selected && styles.selected,\n density !== 'regular' && densityClassNames[density],\n restProps.disabled && styles.disabled,\n )}\n >\n <span className={styles.in}>\n {before && <span className={styles.before}>{before}</span>}\n <SubnavigationButtonTypography\n textLevel={textLevel}\n className={styles.label}\n Component=\"span\"\n >\n {children}\n </SubnavigationButtonTypography>\n {after && <span className={styles.after}>{after}</span>}\n {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n </span>\n </Tappable>\n );\n};\n"],"names":["Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","densityClassNames","none","densityNone","compact","densityCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","density","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,MAAMrB,OAAOsB,WAAW;IACxBC,SAASvB,OAAOwB,cAAc;AAChC;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,UAAU,MAAM,EAAE,GAAG1C;IAE7B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,YAAY,aAAalB,iBAAiB,CAACkB,QAAQ,EACnDX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n accent: styles.appearanceAccent,\n neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n primary: styles.modePrimary,\n outline: styles.modeOutline,\n tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n s: styles.sizeS,\n m: styles.sizeM,\n l: styles.sizeL,\n};\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {\n /*\n Стиль отображения кнопки.\n /\n mode?: 'primary' \| 'outline' \| 'tertiary' \| undefined;\n /\n Тип внешнего вида кнопки.\n /\n appearance?: 'accent' \| 'neutral' \| undefined;\n /\n Размер кнопки.\n /\n size?: 's' \| 'm' \| 'l' \| undefined;\n /\n Выбранное состояние.\n /\n selected?: boolean \| undefined;\n /\n Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n /\n textLevel?: '1' \| '2' \| '3' \| undefined;\n /\n Рекомендуется использовать только иконки с размером 24.\n /\n before?: React.ReactNode \| undefined;\n /\n Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n /\n after?: React.ReactNode \| undefined;\n /\n Нужно ли отображать иконку `\"chevron\"`.\n /\n chevron?: boolean \| undefined;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n SubnavigationButtonProps,\n 'textLevel' \| 'className'\n> &\n HasComponent &\n HasChildren;\n\nconst SubnavigationButtonTypography = ({\n textLevel,\n ...restProps\n}: SubnavigationButtonTypographyProps) => {\n if (textLevel === '1') {\n return <Subhead {...restProps} />;\n }\n\n return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/\n @see https://vkui.io/components/subnavigation-bar#subnavigation-button\n */\nexport const SubnavigationButton = ({\n mode = 'primary',\n appearance = 'accent',\n size = 'm',\n selected,\n textLevel = '1',\n before,\n after,\n chevron,\n children,\n ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n\n return (\n <Tappable\n hasActive={false}\n focusVisibleMode=\"outside\"\n {...restProps}\n baseClassName={classNames(\n styles.host,\n sizeStyles[size],\n modeStyles[mode],\n appearanceStyles[appearance],\n selected && styles.selected,\n density !== 'regular' && densityClassNames[density],\n restProps.disabled && styles.disabled,\n )}\n >\n <span className={styles.in}>\n {before && <span className={styles.before}>{before}</span>}\n <SubnavigationButtonTypography\n textLevel={textLevel}\n className={styles.label}\n Component=\"span\"\n >\n {children}\n </SubnavigationButtonTypography>\n {after && <span className={styles.after}>{after}</span>}\n {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n </span>\n </Tappable>\n );\n};\n"],"names":["Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","densityClassNames","none","densityNone","compact","densityCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","density","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,MAAMrB,OAAOsB,WAAW;IACxBC,SAASvB,OAAOwB,cAAc;AAChC;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,UAAU,MAAM,EAAE,GAAG1C;IAE7B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,YAAY,aAAalB,iBAAiB,CAACkB,QAAQ,EACnDX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { withLabelClickWrapper } from '../../lib/withLabelClickWrapper';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst warn = warnOnce('Switch');\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface SwitchProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'checked'\n \| 'defaultChecked'\n \| 'disabled'\n \| 'readOnly'\n \| 'required'\n \| 'autoFocus'\n \| 'name'\n \| 'value'\n \| 'form'\n \| 'onChange'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'onChange' \| 'onFocus' \| 'onBlur'>,\n HasRootRef<HTMLLabelElement> {\n /*\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `input`: свойства для прокидывания в скрытый `input`.\n /\n slotProps?: {\n root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &\n HasRootRef<HTMLLabelElement> &\n HasDataAttribute;\n input?: React.InputHTMLAttributes<HTMLInputElement> &\n HasRootRef<HTMLInputElement> &\n HasDataAttribute;\n };\n /\n @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLInputElement~~>;\~~n}\n\n/\n @see https://vkui.io/components/switch\n /\nexport const Switch = ({\n getRef,\n\n // Input props\n checked,\n defaultChecked,\n disabled,\n readOnly,\n required,\n autoFocus,\n id,\n name,\n value,\n form,\n onChange,\n onFocus,\n onBlur,\n\n slotProps,\n ...restProps\n}: SwitchProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development' && getRef) {\n warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n }\n\n const { onClick: onRootClick, ...rootRest } = useMergeProps(restProps, slotProps?.root);\n\n const {\n checked: checkedProp,\n onBlur: onInputBlur,\n onFocus: onInputFocus,\n onClick,\n className: inputClassName,\n ...inputRest\n } = useMergeProps(\n {\n getRootRef: getRef,\n checked,\n defaultChecked,\n disabled,\n readOnly,\n required,\n autoFocus,\n id,\n name,\n value,\n form,\n onChange,\n onFocus,\n onBlur,\n },\n slotProps?.input,\n );\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n const platform = usePlatform();\n const { density = 'none' } = useAdaptivity();\n const {\n focusVisible,\n onBlur: onFocusVisibleBlur,\n onFocus: onFocusVisibleFocus,\n } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n const handleBlur = callMultiple(onFocusVisibleBlur, onInputBlur);\n const handleFocus = callMultiple(onFocusVisibleFocus, onInputFocus);\n\n const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n Boolean(inputRest.defaultChecked),\n );\n const isControlled = checkedProp !== undefined;\n\n const syncUncontrolledCheckedStateOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLInputElement>) => {\n if (isControlled) {\n return;\n }\n\n const switchTarget = e.target as HTMLInputElement;\n setLocalUncontrolledChecked(switchTarget.checked);\n },\n [isControlled],\n );\n\n const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n Component: 'input',\n type: 'checkbox',\n role: 'switch',\n onBlur: handleBlur,\n onFocus: handleFocus,\n onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n ...inputRest,\n };\n\n if (isControlled) {\n inputProps.checked = checkedProp;\n inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n } else {\n inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n }\n\n return (\n <RootComponent\n Component=\"label\"\n baseClassName={classNames(\n styles.host,\n density !== 'regular' && densityClassNames[density],\n platform === 'ios' ? styles.ios : styles.default,\n inputRest.disabled && styles.disabled,\n isRtl && styles.rtl,\n focusVisibleClassNames,\n )}\n onClick={withLabelClickWrapper(onRootClick)}\n {...rootRest}\n >\n <VisuallyHidden className={classNames(inputClassName, styles.inputNative)} {...inputProps} />\n <span aria-hidden className={styles.inputFake}>\n <span className={styles.track} />\n <span\n aria-hidden\n className={classNames(\n styles.handle,\n platform !== 'ios' && !inputRest.disabled && styles.handleWithRipple,\n )}\n />\n </span>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useFocusVisible","useFocusVisibleClassName","useMergeProps","usePlatform","callMultiple","warnOnce","withLabelClickWrapper","RootComponent","VisuallyHidden","styles","warn","densityClassNames","none","densityNone","compact","densityCompact","Switch","getRef","checked","defaultChecked","disabled","readOnly","required","autoFocus","id","name","value","form","onChange","onFocus","onBlur","slotProps","restProps","process","env","NODE_ENV","onClick","onRootClick","rootRest","root","checkedProp","onInputBlur","onInputFocus","className","inputClassName","inputRest","getRootRef","input","direction","isRtl","platform","density","focusVisible","onFocusVisibleBlur","onFocusVisibleFocus","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","baseClassName","host","ios","default","rtl","inputNative","span","aria-hidden","inputFake","track","handle","handleWithRipple"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,qBAAqB,QAAQ,qCAAkC;AAExE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAkC,sCAAmC;AAC5F,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,OAAOL,SAAS;AAEtB,MAAMM,oBAAoB;IACxBC,MAAMH,OAAOI,WAAW;IACxBC,SAASL,OAAOM,cAAc;AAChC;~~AAuCA~~;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,MAAM,EAEN,cAAc;AACdC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,EAAE,EACFC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,MAAM,EAENC,SAAS,EACT,GAAGC,WACS;IACZ,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBlB,QAAQ;QACpDP,KAAK;IACP;IAEA,MAAM,EAAE0B,SAASC,WAAW,EAAE,GAAGC,UAAU,GAAGpC,cAAc8B,WAAWD,WAAWQ;IAElF,MAAM,EACJrB,SAASsB,WAAW,EACpBV,QAAQW,WAAW,EACnBZ,SAASa,YAAY,EACrBN,OAAO,EACPO,WAAWC,cAAc,EACzB,GAAGC,WACJ,GAAG3C,cACF;QACE4C,YAAY7B;QACZC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,GACAC,WAAWgB;IAGb,MAAMC,YAAYjD;IAClB,MAAMkD,QAAQD,cAAc;IAC5B,MAAME,WAAW/C;IACjB,MAAM,EAAEgD,UAAU,MAAM,EAAE,GAAGrD;IAC7B,MAAM,EACJsD,YAAY,EACZtB,QAAQuB,kBAAkB,EAC1BxB,SAASyB,mBAAmB,EAC7B,GAAGtD;IACJ,MAAMuD,yBAAyBtD,yBAAyB;QAAEmD;QAAcI,MAAM;IAAU;IACxF,MAAMC,aAAarD,aAAaiD,oBAAoBZ;IACpD,MAAMiB,cAActD,aAAakD,qBAAqBZ;IAEtD,MAAM,CAACiB,0BAA0BC,4BAA4B,GAAGhE,MAAMiE,QAAQ,CAC5EC,QAAQjB,UAAU1B,cAAc;IAElC,MAAM4C,eAAevB,gBAAgBwB;IAErC,MAAMC,sCAAsCrE,MAAMsE,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BT,4BAA4BQ,aAAalD,OAAO;IAClD,GACA;QAAC6C;KAAa;IAGhB,MAAMO,aAAoD;QACxDC,WAAW;QACXC,MAAM;QACNC,MAAM;QACN3C,QAAQ2B;QACR5B,SAAS6B;QACTtB,SAAShC,aAAa6D,qCAAqC7B;QAC3D,GAAGS,SAAS;IACd;IAEA,IAAIkB,cAAc;QAChBO,WAAWpD,OAAO,GAAGsB;QACrB8B,UAAU,CAAC,eAAe,GAAG9B,cAAc,SAAS;IACtD,OAAO;QACL8B,UAAU,CAAC,eAAe,GAAGX,2BAA2B,SAAS;IACnE;IAEA,qBACE,MAACpD;QACCgE,WAAU;QACVG,eAAe7E,WACbY,OAAOkE,IAAI,EACXxB,YAAY,aAAaxC,iBAAiB,CAACwC,QAAQ,EACnDD,aAAa,QAAQzC,OAAOmE,GAAG,GAAGnE,OAAOoE,OAAO,EAChDhC,UAAUzB,QAAQ,IAAIX,OAAOW,QAAQ,EACrC6B,SAASxC,OAAOqE,GAAG,EACnBvB;QAEFnB,SAAS9B,sBAAsB+B;QAC9B,GAAGC,QAAQ;;0BAEZ,KAAC9B;gBAAemC,WAAW9C,WAAW+C,gBAAgBnC,OAAOsE,WAAW;gBAAI,GAAGT,UAAU;;0BACzF,MAACU;gBAAKC,aAAW;gBAACtC,WAAWlC,OAAOyE,SAAS;;kCAC3C,KAACF;wBAAKrC,WAAWlC,OAAO0E,KAAK;;kCAC7B,KAACH;wBACCC,aAAW;wBACXtC,WAAW9C,WACTY,OAAO2E,MAAM,EACblC,aAAa,SAAS,CAACL,UAAUzB,QAAQ,IAAIX,OAAO4E,gBAAgB;;;;;;AAMhF,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { withLabelClickWrapper } from '../../lib/withLabelClickWrapper';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst warn = warnOnce('Switch');\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface SwitchProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \| 'checked'\n \| 'defaultChecked'\n \| 'disabled'\n \| 'readOnly'\n \| 'required'\n \| 'autoFocus'\n \| 'name'\n \| 'value'\n \| 'form'\n \| 'onChange'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'onChange' \| 'onFocus' \| 'onBlur'>,\n HasRootRef<HTMLLabelElement> {\n /*\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `input`: свойства для прокидывания в скрытый `input`.\n /\n slotProps?:\n \| {\n root?:\n \| (Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &\n HasRootRef<HTMLLabelElement> &\n HasDataAttribute)\n \| undefined;\n input?:\n \| (React.InputHTMLAttributes<HTMLInputElement> &\n HasRootRef<HTMLInputElement> &\n HasDataAttribute)\n \| undefined;\n }\n \| undefined;\n /\n @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLInputElement> \| undefined;\n}\n\n/\n @see https://vkui.io/components/switch\n /\nexport const Switch = ({\n getRef,\n\n // Input props\n checked,\n defaultChecked,\n disabled,\n readOnly,\n required,\n autoFocus,\n id,\n name,\n value,\n form,\n onChange,\n onFocus,\n onBlur,\n\n slotProps,\n ...restProps\n}: SwitchProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development' && getRef) {\n warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n }\n\n const { onClick: onRootClick, ...rootRest } = useMergeProps(restProps, slotProps?.root);\n\n const {\n checked: checkedProp,\n onBlur: onInputBlur,\n onFocus: onInputFocus,\n onClick,\n className: inputClassName,\n ...inputRest\n } = useMergeProps(\n {\n getRootRef: getRef,\n checked,\n defaultChecked,\n disabled,\n readOnly,\n required,\n autoFocus,\n id,\n name,\n value,\n form,\n onChange,\n onFocus,\n onBlur,\n },\n slotProps?.input,\n );\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n const platform = usePlatform();\n const { density = 'none' } = useAdaptivity();\n const {\n focusVisible,\n onBlur: onFocusVisibleBlur,\n onFocus: onFocusVisibleFocus,\n } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n const handleBlur = callMultiple(onFocusVisibleBlur, onInputBlur);\n const handleFocus = callMultiple(onFocusVisibleFocus, onInputFocus);\n\n const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n Boolean(inputRest.defaultChecked),\n );\n const isControlled = checkedProp !== undefined;\n\n const syncUncontrolledCheckedStateOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLInputElement>) => {\n if (isControlled) {\n return;\n }\n\n const switchTarget = e.target as HTMLInputElement;\n setLocalUncontrolledChecked(switchTarget.checked);\n },\n [isControlled],\n );\n\n const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n Component: 'input',\n type: 'checkbox',\n role: 'switch',\n onBlur: handleBlur,\n onFocus: handleFocus,\n onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n ...inputRest,\n };\n\n if (isControlled) {\n inputProps.checked = checkedProp;\n inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n } else {\n inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n }\n\n return (\n <RootComponent\n Component=\"label\"\n baseClassName={classNames(\n styles.host,\n density !== 'regular' && densityClassNames[density],\n platform === 'ios' ? styles.ios : styles.default,\n inputRest.disabled && styles.disabled,\n isRtl && styles.rtl,\n focusVisibleClassNames,\n )}\n onClick={withLabelClickWrapper(onRootClick)}\n {...rootRest}\n >\n <VisuallyHidden className={classNames(inputClassName, styles.inputNative)} {...inputProps} />\n <span aria-hidden className={styles.inputFake}>\n <span className={styles.track} />\n <span\n aria-hidden\n className={classNames(\n styles.handle,\n platform !== 'ios' && !inputRest.disabled && styles.handleWithRipple,\n )}\n />\n </span>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useFocusVisible","useFocusVisibleClassName","useMergeProps","usePlatform","callMultiple","warnOnce","withLabelClickWrapper","RootComponent","VisuallyHidden","styles","warn","densityClassNames","none","densityNone","compact","densityCompact","Switch","getRef","checked","defaultChecked","disabled","readOnly","required","autoFocus","id","name","value","form","onChange","onFocus","onBlur","slotProps","restProps","process","env","NODE_ENV","onClick","onRootClick","rootRest","root","checkedProp","onInputBlur","onInputFocus","className","inputClassName","inputRest","getRootRef","input","direction","isRtl","platform","density","focusVisible","onFocusVisibleBlur","onFocusVisibleFocus","focusVisibleClassNames","mode","handleBlur","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","useState","Boolean","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","baseClassName","host","ios","default","rtl","inputNative","span","aria-hidden","inputFake","track","handle","handleWithRipple"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Флаг, который скрывает тень (Android) или границы (iOS).\n /\n plain?: boolean;\n /\n Задает расположение элементов (вертикальное/горизонтальное).\n /\n mode?: 'vertical' \| 'horizontal' \| 'auto';\n}\n\nconst getItemsLayoutClassName = (\n itemsLayout: TabbarProps['mode'],\n children: TabbarProps['children'],\n): string => {\n switch (itemsLayout) {\n case 'horizontal':\n return 'vkuiInternalTabbar--layout-horizontal';\n case 'vertical':\n return 'vkuiInternalTabbar--layout-vertical';\n default:\n return React.Children.count(children) > 2\n ? getItemsLayoutClassName('vertical', [])\n : getItemsLayoutClassName('horizontal', []);\n }\n};\n\n/\n @see https://vkui.io/components/epic#tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n const platform = usePlatform();\n\n return (\n <RootComponent\n baseClassName={classNames(\n 'vkuiInternalTabbar',\n styles.host,\n platform === 'ios' && styles.ios,\n getItemsLayoutClassName(mode, restProps.children),\n !plain && styles.shadow,\n )}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName","host","ios","shadow"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCZ,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,OAAOc,MAAM;QAExB,GAAGL,SAAS;;AAGnB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Флаг, который скрывает тень (Android) или границы (iOS).\n /\n plain?: boolean \| undefined;\n /\n Задает расположение элементов (вертикальное/горизонтальное).\n /\n mode?: 'vertical' \| 'horizontal' \| 'auto' \| undefined;\n}\n\nconst getItemsLayoutClassName = (\n itemsLayout: TabbarProps['mode'],\n children: TabbarProps['children'],\n): string => {\n switch (itemsLayout) {\n case 'horizontal':\n return 'vkuiInternalTabbar--layout-horizontal';\n case 'vertical':\n return 'vkuiInternalTabbar--layout-vertical';\n default:\n return React.Children.count(children) > 2\n ? getItemsLayoutClassName('vertical', [])\n : getItemsLayoutClassName('horizontal', []);\n }\n};\n\n/\n @see https://vkui.io/components/epic#tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n const platform = usePlatform();\n\n return (\n <RootComponent\n baseClassName={classNames(\n 'vkuiInternalTabbar',\n styles.host,\n platform === 'ios' && styles.ios,\n getItemsLayoutClassName(mode, restProps.children),\n !plain && styles.shadow,\n )}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName","host","ios","shadow"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCZ,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,OAAOc,MAAM;QAExB,GAAGL,SAAS;;AAGnB,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n HasRootRef<HTMLElement>,\n HasComponent {\n /*\n Выбранное состояние компонента.\n /\n selected?: boolean;\n /\n Текст рядом с иконкой.\n /\n label?: React.ReactNode;\n /\n Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`.\n /\n indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/\n @see https://vkui.io/components/epic#tabbar-item\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n label,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...restProps\n}: TabbarItemProps): React.ReactNode => {\n const platform = usePlatform();\n\n if (process.env.NODE_ENV === 'development') {\n const hasAccessibleName = label \|\| restProps['aria-label'] \|\| restProps['aria-labelledby'];\n\n if (!hasAccessibleName) {\n warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n }\n }\n\n const {\n focusVisible,\n onFocus: handleFocusVisibleOnFocus,\n onBlur: handleFocusVisibleOnBlur,\n } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n });\n\n return (\n <RootComponent\n Component={Component}\n disabled={disabled}\n onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n href={href}\n baseClassName={classNames(\n styles.host,\n platform === 'ios' && styles.ios,\n platform === 'android' && styles.android,\n selected && styles.selected,\n )}\n {...restProps}\n >\n <Tappable\n role=\"presentation\"\n disabled={disabled}\n activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n activeEffectDelay={platform === 'ios' ? 0 : 300}\n hasHover={false}\n className={classNames(styles.tappable, focusVisibleClassNames)}\n onClick={noop}\n tabIndex={-1}\n />\n <div className={styles.in}>\n <div className={styles.icon}>\n {children}\n <div className=\"vkuiInternalTabbarItem__label\">\n {hasReactNode(indicator) && indicator}\n </div>\n </div>\n {label && (\n <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n {label}\n </Footnote>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","host","ios","android","role","activeMode","tappableActive","activeEffectDelay","hasHover","className","tappable","onClick","tabIndex","div","in","icon","weight"],"mappings":"AAAA;;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAoB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACa;IAChB,MAAMC,WAAWtB;IAEjB,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKN,gBAAgByB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAGhC;IACJ,MAAMiC,yBAAyBhC,yBAAyB;QACtD6B;IACF;IAEA,qBACE,MAACxB;QACCW,WAAWA;QACXC,UAAUA;QACVC,SAAShB,aAAa4B,2BAA2BX;QACjDC,QAAQlB,aAAa6B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAerC,WACbY,OAAO0B,IAAI,EACXX,aAAa,SAASf,OAAO2B,GAAG,EAChCZ,aAAa,aAAaf,OAAO4B,OAAO,EACxCxB,YAAYJ,OAAOI,QAAQ;QAE5B,GAAGU,SAAS;;0BAEb,KAAChB;gBACC+B,MAAK;gBACLpB,UAAUA;gBACVqB,YAAYf,aAAa,QAAQf,OAAO+B,cAAc,GAAG;gBACzDC,mBAAmBjB,aAAa,QAAQ,IAAI;gBAC5CkB,UAAU;gBACVC,WAAW9C,WAAWY,OAAOmC,QAAQ,EAAEX;gBACvCY,SAAS9C;gBACT+C,UAAU,CAAC;;0BAEb,MAACC;gBAAIJ,WAAWlC,OAAOuC,EAAE;;kCACvB,MAACD;wBAAIJ,WAAWlC,OAAOwC,IAAI;;4BACxBrC;0CACD,KAACmC;gCAAIJ,WAAU;0CACZ7C,aAAagB,cAAcA;;;;oBAG/BC,uBACC,KAACP;wBAASS,WAAU;wBAAM0B,WAAWlC,OAAOM,KAAK;wBAAEmC,QAAO;kCACvDnC;;;;;;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n HasRootRef<HTMLElement>,\n HasComponent {\n /*\n Выбранное состояние компонента.\n /\n selected?: boolean \| undefined;\n /\n Текст рядом с иконкой.\n /\n label?: React.ReactNode \| undefined;\n /\n Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`.\n /\n indicator?: React.ReactNode \| undefined;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/\n @see https://vkui.io/components/epic#tabbar-item\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n label,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...restProps\n}: TabbarItemProps): React.ReactNode => {\n const platform = usePlatform();\n\n if (process.env.NODE_ENV === 'development') {\n const hasAccessibleName = label \|\| restProps['aria-label'] \|\| restProps['aria-labelledby'];\n\n if (!hasAccessibleName) {\n warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n }\n }\n\n const {\n focusVisible,\n onFocus: handleFocusVisibleOnFocus,\n onBlur: handleFocusVisibleOnBlur,\n } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n });\n\n return (\n <RootComponent\n Component={Component}\n disabled={disabled}\n onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n href={href}\n baseClassName={classNames(\n styles.host,\n platform === 'ios' && styles.ios,\n platform === 'android' && styles.android,\n selected && styles.selected,\n )}\n {...restProps}\n >\n <Tappable\n role=\"presentation\"\n disabled={disabled}\n activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n activeEffectDelay={platform === 'ios' ? 0 : 300}\n hasHover={false}\n className={classNames(styles.tappable, focusVisibleClassNames)}\n onClick={noop}\n tabIndex={-1}\n />\n <div className={styles.in}>\n <div className={styles.icon}>\n {children}\n <div className=\"vkuiInternalTabbarItem__label\">\n {hasReactNode(indicator) && indicator}\n </div>\n </div>\n {label && (\n <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n {label}\n </Footnote>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","host","ios","android","role","activeMode","tappableActive","activeEffectDelay","hasHover","className","tappable","onClick","tabIndex","div","in","icon","weight"],"mappings":"AAAA;;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAoB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACa;IAChB,MAAMC,WAAWtB;IAEjB,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKN,gBAAgByB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAGhC;IACJ,MAAMiC,yBAAyBhC,yBAAyB;QACtD6B;IACF;IAEA,qBACE,MAACxB;QACCW,WAAWA;QACXC,UAAUA;QACVC,SAAShB,aAAa4B,2BAA2BX;QACjDC,QAAQlB,aAAa6B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAerC,WACbY,OAAO0B,IAAI,EACXX,aAAa,SAASf,OAAO2B,GAAG,EAChCZ,aAAa,aAAaf,OAAO4B,OAAO,EACxCxB,YAAYJ,OAAOI,QAAQ;QAE5B,GAAGU,SAAS;;0BAEb,KAAChB;gBACC+B,MAAK;gBACLpB,UAAUA;gBACVqB,YAAYf,aAAa,QAAQf,OAAO+B,cAAc,GAAG;gBACzDC,mBAAmBjB,aAAa,QAAQ,IAAI;gBAC5CkB,UAAU;gBACVC,WAAW9C,WAAWY,OAAOmC,QAAQ,EAAEX;gBACvCY,SAAS9C;gBACT+C,UAAU,CAAC;;0BAEb,MAACC;gBAAIJ,WAAWlC,OAAOuC,EAAE;;kCACvB,MAACD;wBAAIJ,WAAWlC,OAAOwC,IAAI;;4BACxBrC;0CACD,KAACmC;gCAAIJ,WAAU;0CACZ7C,aAAagB,cAAcA;;;;oBAG/BC,uBACC,KAACP;wBAASS,WAAU;wBAAM0B,WAAWlC,OAAOM,KAAK;wBAAEmC,QAAO;kCACvDnC;;;;;;AAMb,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { useTabsController } from './TabsController';\nimport { TabsControllerContext } from './TabsControllerContext';\nimport { TabsModeContext } from './TabsModeContext';\nimport styles from './Tabs.module.css';\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Режим отображения компонента.\n /\n mode?: 'default' \| 'accent' \| 'secondary';\n /\n Включает прокрутку контейнера до активной (`selected`) вкладки.\n * @since 5.10.0\n /\n withScrollToSelectedTab?: boolean;\n /\n Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n * @since 5.10.0\n /\n scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n /\n При `auto` ширина вкладок определяется контекстом:\n * - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n * - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n * либо выравниваются по контенту соответственно.\n /\n layoutFillMode?: 'auto' \| 'stretched' \| 'shrinked';\n /\n Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n /\n selectedId?: string;\n /\n Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n /\n defaultSelectedId?: string;\n /\n Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n /\n onSelectedIdChange?: (id: string) => void;\n}\n\n/\n @see https://vkui.io/components/tabs\n */\nexport const Tabs = ({\n children,\n mode = 'default',\n role = 'tablist',\n withScrollToSelectedTab,\n scrollBehaviorToSelectedTab = 'nearest',\n layoutFillMode = 'auto',\n selectedId,\n defaultSelectedId,\n onSelectedIdChange,\n ...restProps\n}: TabsProps): React.ReactNode => {\n const controller = useTabsController({\n selectedId,\n defaultSelectedId,\n onSelectedIdChange,\n });\n const platform = usePlatform();\n const direction = useConfigDirection();\n const isTabFlow = role === 'tablist';\n const withGaps = mode === 'accent' \|\| mode === 'secondary';\n\n const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n const tabsModeContext = React.useMemo(\n () => ({\n mode,\n withGaps,\n layoutFillMode,\n withScrollToSelectedTab,\n scrollBehaviorToSelectedTab,\n }),\n [mode, withGaps, layoutFillMode, withScrollToSelectedTab, scrollBehaviorToSelectedTab],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalTabs',\n platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n mode === 'default' && styles.modeDefault,\n )}\n role={role}\n >\n <div className={styles.in} ref={tabsRef}>\n <TabsModeContext.Provider value={tabsModeContext}>\n <TabsControllerContext.Provider value={controller}>\n {children}\n </TabsControllerContext.Provider>\n </TabsModeContext.Provider>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","useTabsController","TabsControllerContext","TabsModeContext","styles","Tabs","children","mode","role","withScrollToSelectedTab","scrollBehaviorToSelectedTab","layoutFillMode","selectedId","defaultSelectedId","onSelectedIdChange","restProps","controller","platform","direction","isTabFlow","withGaps","tabsRef","tabsModeContext","useMemo","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,iBAAiB,QAAQ,sBAAmB;AACrD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,oBAAoB;AAuCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBC,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCC,iBAAiB,MAAM,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,WACO;IACV,MAAMC,aAAaf,kBAAkB;QACnCW;QACAC;QACAC;IACF;IACA,MAAMG,WAAWnB;IACjB,MAAMoB,YAAYrB;IAClB,MAAMsB,YAAYX,SAAS;IAC3B,MAAMY,WAAWb,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEc,OAAO,EAAE,GAAGtB,kBAAkBoB,WAAWD,cAAc;IAE/D,MAAMI,kBAAkB3B,MAAM4B,OAAO,CACnC,IAAO,CAAA;YACLhB;YACAa;YACAT;YACAF;YACAC;QACF,CAAA,GACA;QAACH;QAAMa;QAAUT;QAAgBF;QAAyBC;KAA4B;IAGxF,qBACE,KAACV;QACE,GAAGe,SAAS;QACbS,eAAe5B,WACbQ,OAAOqB,IAAI,EACX,oBACAR,aAAa,WAAW,2BACxBG,YAAYxB,WAAWQ,OAAOgB,QAAQ,EAAE,+BACxCb,SAAS,aAAaH,OAAOsB,WAAW;QAE1ClB,MAAMA;kBAEN,cAAA,KAACmB;YAAIC,WAAWxB,OAAOyB,EAAE;YAAEC,KAAKT;sBAC9B,cAAA,KAAClB,gBAAgB4B,QAAQ;gBAACC,OAAOV;0BAC/B,cAAA,KAACpB,sBAAsB6B,QAAQ;oBAACC,OAAOhB;8BACpCV;;;;;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { useTabsController } from './TabsController';\nimport { TabsControllerContext } from './TabsControllerContext';\nimport { TabsModeContext } from './TabsModeContext';\nimport styles from './Tabs.module.css';\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Режим отображения компонента.\n /\n mode?: 'default' \| 'accent' \| 'secondary' \| undefined;\n /\n Включает прокрутку контейнера до активной (`selected`) вкладки.\n * @since 5.10.0\n /\n withScrollToSelectedTab?: boolean \| undefined;\n /\n Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n * @since 5.10.0\n /\n scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'] \| undefined;\n /\n При `auto` ширина вкладок определяется контекстом:\n * - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n * - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n * либо выравниваются по контенту соответственно.\n /\n layoutFillMode?: 'auto' \| 'stretched' \| 'shrinked' \| undefined;\n /\n Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n /\n selectedId?: string \| undefined;\n /\n Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n /\n defaultSelectedId?: string \| undefined;\n /\n Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n /\n onSelectedIdChange?: ((id: string) => void) \| undefined;\n}\n\n/\n @see https://vkui.io/components/tabs\n */\nexport const Tabs = ({\n children,\n mode = 'default',\n role = 'tablist',\n withScrollToSelectedTab,\n scrollBehaviorToSelectedTab = 'nearest',\n layoutFillMode = 'auto',\n selectedId,\n defaultSelectedId,\n onSelectedIdChange,\n ...restProps\n}: TabsProps): React.ReactNode => {\n const controller = useTabsController({\n selectedId,\n defaultSelectedId,\n onSelectedIdChange,\n });\n const platform = usePlatform();\n const direction = useConfigDirection();\n const isTabFlow = role === 'tablist';\n const withGaps = mode === 'accent' \|\| mode === 'secondary';\n\n const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n const tabsModeContext = React.useMemo(\n () => ({\n mode,\n withGaps,\n layoutFillMode,\n withScrollToSelectedTab,\n scrollBehaviorToSelectedTab,\n }),\n [mode, withGaps, layoutFillMode, withScrollToSelectedTab, scrollBehaviorToSelectedTab],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalTabs',\n platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n mode === 'default' && styles.modeDefault,\n )}\n role={role}\n >\n <div className={styles.in} ref={tabsRef}>\n <TabsModeContext.Provider value={tabsModeContext}>\n <TabsControllerContext.Provider value={controller}>\n {children}\n </TabsControllerContext.Provider>\n </TabsModeContext.Provider>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","useTabsController","TabsControllerContext","TabsModeContext","styles","Tabs","children","mode","role","withScrollToSelectedTab","scrollBehaviorToSelectedTab","layoutFillMode","selectedId","defaultSelectedId","onSelectedIdChange","restProps","controller","platform","direction","isTabFlow","withGaps","tabsRef","tabsModeContext","useMemo","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,iBAAiB,QAAQ,sBAAmB;AACrD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,oBAAoB;AAuCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBC,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCC,iBAAiB,MAAM,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,WACO;IACV,MAAMC,aAAaf,kBAAkB;QACnCW;QACAC;QACAC;IACF;IACA,MAAMG,WAAWnB;IACjB,MAAMoB,YAAYrB;IAClB,MAAMsB,YAAYX,SAAS;IAC3B,MAAMY,WAAWb,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEc,OAAO,EAAE,GAAGtB,kBAAkBoB,WAAWD,cAAc;IAE/D,MAAMI,kBAAkB3B,MAAM4B,OAAO,CACnC,IAAO,CAAA;YACLhB;YACAa;YACAT;YACAF;YACAC;QACF,CAAA,GACA;QAACH;QAAMa;QAAUT;QAAgBF;QAAyBC;KAA4B;IAGxF,qBACE,KAACV;QACE,GAAGe,SAAS;QACbS,eAAe5B,WACbQ,OAAOqB,IAAI,EACX,oBACAR,aAAa,WAAW,2BACxBG,YAAYxB,WAAWQ,OAAOgB,QAAQ,EAAE,+BACxCb,SAAS,aAAaH,OAAOsB,WAAW;QAE1ClB,MAAMA;kBAEN,cAAA,KAACmB;YAAIC,WAAWxB,OAAOyB,EAAE;YAAEC,KAAKT;sBAC9B,cAAA,KAAClB,gBAAgB4B,QAAQ;gBAACC,OAAOV;0BAC/B,cAAA,KAACpB,sBAAsB6B,QAAQ;oBAACC,OAAOhB;8BACpCV;;;;;AAMb,EAAE"}

package/dist/cssm/components/Tabs/TabsModeContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Tabs/TabsModeContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabsProps } from './Tabs';\n\n/* eslint-disable jsdoc/require-jsdoc /\nexport interface TabsContextProps {\n mode: TabsProps['mode'];\n withGaps: boolean;\n layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n scrollBehaviorToSelectedTab: ~~Required~~<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n/ eslint-enable jsdoc/require-jsdoc */\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n React.createContext<TabsContextProps>({\n mode: 'default',\n withGaps: false,\n layoutFillMode: 'auto',\n withScrollToSelectedTab: false,\n scrollBehaviorToSelectedTab: 'nearest',\n });\n"],"names":["React","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,qCAAqC,GAErC,OAAO,MAAMC,kBACXD,MAAME,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/Tabs/TabsModeContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabsProps } from './Tabs';\n\n/* eslint-disable jsdoc/require-jsdoc /\nexport interface TabsContextProps {\n mode: TabsProps['mode'];\n withGaps: boolean;\n layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n scrollBehaviorToSelectedTab: NonNullable<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n/ eslint-enable jsdoc/require-jsdoc */\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n React.createContext<TabsContextProps>({\n mode: 'default',\n withGaps: false,\n layoutFillMode: 'auto',\n withScrollToSelectedTab: false,\n scrollBehaviorToSelectedTab: 'nearest',\n });\n"],"names":["React","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,qCAAqC,GAErC,OAAO,MAAMC,kBACXD,MAAME,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n default: styles.modeDefault,\n accent: styles.modeAccent,\n secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n stretched: styles.stretched,\n shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n extends HTMLAttributesWithRootRef<HTMLElement>,\n AnchorHTMLAttributesOnly,\n Pick<\n TappableOmitProps,\n \| 'Component'\n \| 'activeMode'\n \| 'hoverMode'\n \| 'hovered'\n \| 'activated'\n \| 'hasActive'\n \| 'hasHover'\n \| 'focusVisibleMode'\n > {\n /*\n Добавляет иконку слева.\n \n - Для `mode=\"default\"` используйте иконки размером 24.\n * - Для всех остальных `mode` используйте иконки размером 20.\n /\n before?: React.ReactNode;\n /\n Добавляет элемент слева от `after`.\n \n - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n * Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n * - `number` – для показа текстового блока с переданным числом.\n /\n status?: React.ReactElement \| number;\n /\n Добавляет иконку справа.\n \n Например, `<Icon16Dropdown />`.\n /\n after?: React.ReactNode;\n /\n Флаг для отображения выбранного состояния.\n /\n selected?: boolean;\n /\n Блокировка взаимодействия с компонентом.\n /\n disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/\n @see https://vkui.io/components/tabs#tabs-item\n /\nexport const TabsItem = ({\n before,\n children,\n status,\n after,\n selected: selectedProp = false,\n role = 'tab',\n tabIndex: tabIndexProp,\n getRootRef,\n hoverMode = styles.hover,\n activeMode = '',\n hasActive = false,\n focusVisibleMode = 'inside',\n id,\n onClick,\n ...restProps\n}: TabsItemProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n React.useContext(TabsModeContext);\n const controller = React.useContext(TabsControllerContext);\n let statusComponent = null;\n\n const isTabFlow = role === 'tab';\n\n const selected = selectedProp \|\| (!!id && controller?.selectedTab === id);\n\n if (hasReactNode(status)) {\n statusComponent =\n typeof status === 'number' ? (\n <Subhead\n Component=\"span\"\n className={classNames(styles.status, styles.statusCount)}\n weight=\"2\"\n >\n <VisuallyHidden> </VisuallyHidden>\n {status}\n </Subhead>\n ) : (\n <span className={styles.status}>\n <VisuallyHidden> </VisuallyHidden>\n {status}\n </span>\n );\n }\n\n if (process.env.NODE_ENV === 'development' && isTabFlow) {\n if (!restProps['aria-controls']) {\n warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n } else if (!id) {\n warn(\n `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n 'warn',\n );\n }\n }\n\n let tabIndex = tabIndexProp;\n if (isTabFlow && tabIndex === undefined) {\n tabIndex = selected ? 0 : -1;\n }\n\n const rootRef = useExternRef(getRootRef);\n\n const prevSelectedRef = React.useRef<boolean \| undefined>(undefined);\n\n const { document } = useDOM();\n React.useEffect(\n function scrollToSelectedItem() {\n const isInitialRender = prevSelectedRef.current === undefined;\n const shouldScrollToSelected =\n withScrollToSelectedTab &&\n !isInitialRender &&\n prevSelectedRef.current !== selected &&\n selected;\n\n prevSelectedRef.current = selected;\n\n if (!shouldScrollToSelected \|\| !rootRef.current \|\| !document) {\n return;\n }\n\n const tabDOMRect = rootRef.current.getBoundingClientRect();\n const isTabVerticallyOutsideOfViewport =\n tabDOMRect.top < 0 \|\| tabDOMRect.bottom > document.documentElement.clientHeight;\n\n / проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n * элемент вертикально вне зоны видимости /\n if (isTabVerticallyOutsideOfViewport) {\n return;\n }\n\n / Не все браузеры поддерживают используемые нами опции. /\n try {\n rootRef.current.scrollIntoView({\n inline: scrollBehaviorToSelectedTab,\n block: 'nearest',\n behavior: 'smooth',\n });\n } catch {\n / Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n * вертикальный скролл.\n **/\n }\n },\n [rootRef, document, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n );\n\n const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n (e) => {\n onClick?.(e);\n if (id) {\n controller?.onChange(id);\n }\n },\n [id, onClick, controller],\n );\n\n return (\n <Tappable\n getRootRef={rootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n role={role}\n aria-selected={selected}\n tabIndex={tabIndex}\n baseClassName={classNames(\n styles.host,\n mode && stylesMode[mode],\n selected && styles.selected,\n density !== 'regular' && densityClassNames[density],\n withGaps && styles.withGaps,\n layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n )}\n onClick={controller ? _onClick : onClick}\n id={id}\n {...restProps}\n >\n {before && <div className={styles.before}>{before}</div>}\n <Headline\n Component=\"span\"\n className={styles.label}\n level={mode === 'default' ? '1' : '2'}\n weight=\"2\"\n >\n {children}\n </Headline>\n {statusComponent}\n {after && <div className={styles.after}>{after}</div>}\n {mode === 'default' && (\n <div className={styles.underline} aria-hidden data-selected={selected} />\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useDOM","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","densityClassNames","none","densityNone","compact","densityCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","document","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n default: styles.modeDefault,\n accent: styles.modeAccent,\n secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n stretched: styles.stretched,\n shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n extends HTMLAttributesWithRootRef<HTMLElement>,\n AnchorHTMLAttributesOnly,\n Pick<\n TappableOmitProps,\n \| 'Component'\n \| 'activeMode'\n \| 'hoverMode'\n \| 'hovered'\n \| 'activated'\n \| 'hasActive'\n \| 'hasHover'\n \| 'focusVisibleMode'\n > {\n /*\n Добавляет иконку слева.\n \n - Для `mode=\"default\"` используйте иконки размером 24.\n * - Для всех остальных `mode` используйте иконки размером 20.\n /\n before?: React.ReactNode \| undefined;\n /\n Добавляет элемент слева от `after`.\n \n - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n * Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n * - `number` – для показа текстового блока с переданным числом.\n /\n status?: React.ReactElement \| number \| undefined;\n /\n Добавляет иконку справа.\n \n Например, `<Icon16Dropdown />`.\n /\n after?: React.ReactNode \| undefined;\n /\n Флаг для отображения выбранного состояния.\n /\n selected?: boolean \| undefined;\n /\n Блокировка взаимодействия с компонентом.\n /\n disabled?: boolean \| undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/\n @see https://vkui.io/components/tabs#tabs-item\n /\nexport const TabsItem = ({\n before,\n children,\n status,\n after,\n selected: selectedProp = false,\n role = 'tab',\n tabIndex: tabIndexProp,\n getRootRef,\n hoverMode = styles.hover,\n activeMode = '',\n hasActive = false,\n focusVisibleMode = 'inside',\n id,\n onClick,\n ...restProps\n}: TabsItemProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n React.useContext(TabsModeContext);\n const controller = React.useContext(TabsControllerContext);\n let statusComponent = null;\n\n const isTabFlow = role === 'tab';\n\n const selected = selectedProp \|\| (!!id && controller?.selectedTab === id);\n\n if (hasReactNode(status)) {\n statusComponent =\n typeof status === 'number' ? (\n <Subhead\n Component=\"span\"\n className={classNames(styles.status, styles.statusCount)}\n weight=\"2\"\n >\n <VisuallyHidden> </VisuallyHidden>\n {status}\n </Subhead>\n ) : (\n <span className={styles.status}>\n <VisuallyHidden> </VisuallyHidden>\n {status}\n </span>\n );\n }\n\n if (process.env.NODE_ENV === 'development' && isTabFlow) {\n if (!restProps['aria-controls']) {\n warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n } else if (!id) {\n warn(\n `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n 'warn',\n );\n }\n }\n\n let tabIndex = tabIndexProp;\n if (isTabFlow && tabIndex === undefined) {\n tabIndex = selected ? 0 : -1;\n }\n\n const rootRef = useExternRef(getRootRef);\n\n const prevSelectedRef = React.useRef<boolean \| undefined>(undefined);\n\n const { document } = useDOM();\n React.useEffect(\n function scrollToSelectedItem() {\n const isInitialRender = prevSelectedRef.current === undefined;\n const shouldScrollToSelected =\n withScrollToSelectedTab &&\n !isInitialRender &&\n prevSelectedRef.current !== selected &&\n selected;\n\n prevSelectedRef.current = selected;\n\n if (!shouldScrollToSelected \|\| !rootRef.current \|\| !document) {\n return;\n }\n\n const tabDOMRect = rootRef.current.getBoundingClientRect();\n const isTabVerticallyOutsideOfViewport =\n tabDOMRect.top < 0 \|\| tabDOMRect.bottom > document.documentElement.clientHeight;\n\n / проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n * элемент вертикально вне зоны видимости /\n if (isTabVerticallyOutsideOfViewport) {\n return;\n }\n\n / Не все браузеры поддерживают используемые нами опции. /\n try {\n rootRef.current.scrollIntoView({\n inline: scrollBehaviorToSelectedTab,\n block: 'nearest',\n behavior: 'smooth',\n });\n } catch {\n / Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n * вертикальный скролл.\n **/\n }\n },\n [rootRef, document, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n );\n\n const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n (e) => {\n onClick?.(e);\n if (id) {\n controller?.onChange(id);\n }\n },\n [id, onClick, controller],\n );\n\n return (\n <Tappable\n getRootRef={rootRef}\n hoverMode={hoverMode}\n activeMode={activeMode}\n hasActive={hasActive}\n focusVisibleMode={focusVisibleMode}\n role={role}\n aria-selected={selected}\n tabIndex={tabIndex}\n baseClassName={classNames(\n styles.host,\n mode && stylesMode[mode],\n selected && styles.selected,\n density !== 'regular' && densityClassNames[density],\n withGaps && styles.withGaps,\n layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n )}\n onClick={controller ? _onClick : onClick}\n id={id}\n {...restProps}\n >\n {before && <div className={styles.before}>{before}</div>}\n <Headline\n Component=\"span\"\n className={styles.label}\n level={mode === 'default' ? '1' : '2'}\n weight=\"2\"\n >\n {children}\n </Headline>\n {statusComponent}\n {after && <div className={styles.after}>{after}</div>}\n {mode === 'default' && (\n <div className={styles.underline} aria-hidden data-selected={selected} />\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useDOM","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","densityClassNames","none","densityNone","compact","densityCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","document","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n viewWidth: ViewWidthType \| 'none',\n legacySizeX: SizeTypeValues \| undefined,\n) {\n // TODO [>=10]: #9015 Удалить это условие\n if (legacySizeX !== undefined && legacySizeX === 'compact') {\n return styles.withBorder;\n }\n if (viewWidth === 'none') {\n return styles.withBorderOnSmallTabletMinus;\n }\n if (viewWidth < ViewWidth.SMALL_TABLET) {\n return styles.withBorder;\n }\n return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean \| undefined) {\n switch (hasPointer) {\n case undefined:\n return styles.hasPointerNone;\n case false:\n return styles.hasPointerFalse;\n }\n\n return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n /*\n Задает border-radius элементу\n * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n /\n borderRadiusMode?: 'auto' \| 'inherit';\n /\n @deprecated Since 7.3.0. Будет удалeно в VKUI v9.\n \n Используйте свойство `activeMode`.\n /\n activeClassName?: string; // TODO [>=9]: удалить неиспользуемое свойство.\n /\n @deprecated Since 7.3.0. Будет удалeно в VKUI v9.\n \n Используйте свойство `hoverMode`.\n /\n hoverClassName?: string; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/\n @deprecated Не наследуйтесь от этого типа и от TappableProps.\n \n Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n TappableProps,\n 'DefaultComponent' \| 'baseClassName' \| 'baseStyle'\n>;\n\nexport const Tappable = ({\n baseClassName,\n borderRadiusMode = 'auto',\n children,\n hoverMode = DEFAULT_STATE_MODE,\n activeMode = DEFAULT_STATE_MODE,\n onPointerDown,\n onPointerCancel,\n ...restProps\n}: TappableProps): React.ReactNode => {\n const isClickable = checkClickable(restProps);\n\n const { sizeX: legacySizeX, viewWidth = 'none', hasPointer } = useAdaptivity();\n\n const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n const handlers = mergeCalls(rippleEvents, {\n onPointerDown,\n onPointerCancel,\n });\n\n const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n return (\n <Clickable\n baseClassName={classNames(\n 'vkuiInternalTappable',\n baseClassName,\n styles.host,\n getViewWidthClassName(viewWidth, legacySizeX),\n borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n hasPointerClassName(hasPointer),\n )}\n hoverClassName={hoverClass(hoverMode)}\n activeClassName={activeClass(activeMode)}\n {...typeProps}\n {...handlers}\n {...restProps}\n >\n {children}\n {isClickable && (hoverMode === 'background' \|\| activeMode === 'background') && (\n <Ripple needRipple={needRipple} clicks={clicks} />\n )}\n </Clickable>\n );\n};\n"],"names":["classNames","useAdaptivity","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","getViewWidthClassName","viewWidth","legacySizeX","undefined","withBorder","withBorderOnSmallTabletMinus","SMALL_TABLET","hasPointerClassName","hasPointer","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D,OAAOH,OAAOK,UAAU;IAC1B;IACA,IAAIH,cAAc,QAAQ;QACxB,OAAOF,OAAOM,4BAA4B;IAC5C;IACA,IAAIJ,YAAYZ,UAAUiB,YAAY,EAAE;QACtC,OAAOP,OAAOK,UAAU;IAC1B;IACA;AACF;AAEA,SAASG,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKL;YACH,OAAOJ,OAAOU,cAAc;QAC9B,KAAK;YACH,OAAOV,OAAOW,eAAe;IACjC;IAEA,OAAOP;AACT;AAgCA,OAAO,MAAMQ,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYlB,kBAAkB,EAC9BmB,aAAanB,kBAAkB,EAC/BoB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc7B,eAAe4B;IAEnC,MAAM,EAAEE,OAAOnB,WAAW,EAAED,YAAY,MAAM,EAAEO,UAAU,EAAE,GAAGpB;IAE/D,MAAMkC,aAAa5B,mBAAmBsB,YAAYR;IAClD,MAAM,EAAEe,MAAM,EAAE,GAAGC,cAAc,GAAG7B,UAAU2B,YAAYd;IAE1D,MAAMiB,WAAWnC,WAAWkC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACpC;QACCoB,eAAezB,WACb,wBACAyB,eACAb,OAAO8B,IAAI,EACX7B,sBAAsBC,WAAWC,cACjCW,qBAAqB,aAAad,OAAO+B,mBAAmB,EAC5DvB,oBAAoBC;QAEtBuB,gBAAgBjC,WAAWiB;QAC3BiB,iBAAiBpC,YAAYoB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACvB;gBAAO6B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n viewWidth: ViewWidthType \| 'none',\n legacySizeX: SizeTypeValues \| undefined,\n) {\n // TODO [>=10]: #9015 Удалить это условие\n if (legacySizeX !== undefined && legacySizeX === 'compact') {\n return styles.withBorder;\n }\n if (viewWidth === 'none') {\n return styles.withBorderOnSmallTabletMinus;\n }\n if (viewWidth < ViewWidth.SMALL_TABLET) {\n return styles.withBorder;\n }\n return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean \| undefined) {\n switch (hasPointer) {\n case undefined:\n return styles.hasPointerNone;\n case false:\n return styles.hasPointerFalse;\n }\n\n return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n /*\n Задает border-radius элементу\n * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n /\n borderRadiusMode?: 'auto' \| 'inherit' \| undefined;\n /\n @deprecated Since 7.3.0. Будет удалeно в VKUI v9.\n \n Используйте свойство `activeMode`.\n /\n activeClassName?: string \| undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n /\n @deprecated Since 7.3.0. Будет удалeно в VKUI v9.\n \n Используйте свойство `hoverMode`.\n /\n hoverClassName?: string \| undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/\n @deprecated Не наследуйтесь от этого типа и от TappableProps.\n \n Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n TappableProps,\n 'DefaultComponent' \| 'baseClassName' \| 'baseStyle'\n>;\n\nexport const Tappable = ({\n baseClassName,\n borderRadiusMode = 'auto',\n children,\n hoverMode = DEFAULT_STATE_MODE,\n activeMode = DEFAULT_STATE_MODE,\n onPointerDown,\n onPointerCancel,\n ...restProps\n}: TappableProps): React.ReactNode => {\n const isClickable = checkClickable(restProps);\n\n const { sizeX: legacySizeX, viewWidth = 'none', hasPointer } = useAdaptivity();\n\n const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n const handlers = mergeCalls(rippleEvents, {\n onPointerDown,\n onPointerCancel,\n });\n\n const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n return (\n <Clickable\n baseClassName={classNames(\n 'vkuiInternalTappable',\n baseClassName,\n styles.host,\n getViewWidthClassName(viewWidth, legacySizeX),\n borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n hasPointerClassName(hasPointer),\n )}\n hoverClassName={hoverClass(hoverMode)}\n activeClassName={activeClass(activeMode)}\n {...typeProps}\n {...handlers}\n {...restProps}\n >\n {children}\n {isClickable && (hoverMode === 'background' \|\| activeMode === 'background') && (\n <Ripple needRipple={needRipple} clicks={clicks} />\n )}\n </Clickable>\n );\n};\n"],"names":["classNames","useAdaptivity","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","getViewWidthClassName","viewWidth","legacySizeX","undefined","withBorder","withBorderOnSmallTabletMinus","SMALL_TABLET","hasPointerClassName","hasPointer","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D,OAAOH,OAAOK,UAAU;IAC1B;IACA,IAAIH,cAAc,QAAQ;QACxB,OAAOF,OAAOM,4BAA4B;IAC5C;IACA,IAAIJ,YAAYZ,UAAUiB,YAAY,EAAE;QACtC,OAAOP,OAAOK,UAAU;IAC1B;IACA;AACF;AAEA,SAASG,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKL;YACH,OAAOJ,OAAOU,cAAc;QAC9B,KAAK;YACH,OAAOV,OAAOW,eAAe;IACjC;IAEA,OAAOP;AACT;AAgCA,OAAO,MAAMQ,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYlB,kBAAkB,EAC9BmB,aAAanB,kBAAkB,EAC/BoB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc7B,eAAe4B;IAEnC,MAAM,EAAEE,OAAOnB,WAAW,EAAED,YAAY,MAAM,EAAEO,UAAU,EAAE,GAAGpB;IAE/D,MAAMkC,aAAa5B,mBAAmBsB,YAAYR;IAClD,MAAM,EAAEe,MAAM,EAAE,GAAGC,cAAc,GAAG7B,UAAU2B,YAAYd;IAE1D,MAAMiB,WAAWnC,WAAWkC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACpC;QACCoB,eAAezB,WACb,wBACAyB,eACAb,OAAO8B,IAAI,EACX7B,sBAAsBC,WAAWC,cACjCW,qBAAqB,aAAad,OAAO+B,mBAAmB,EAC5DvB,oBAAoBC;QAEtBuB,gBAAgBjC,WAAWiB;QAC3BiB,iBAAiBpC,YAAYoB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACvB;gBAAO6B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

package/dist/cssm/components/Tappable/state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import type { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' \| 'background' \| 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n /*\n Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active.\n /\n activeMode?: StateModeLiteral;\n\n /\n Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover.\n /\n hoverMode?: StateModeLiteral;\n}\n\n/\n Состояние по умолчанию.\n /\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n background: styles.hoveredBackground,\n opacity: styles.hoveredOpacity,\n none: '',\n};\n\n/\n Определяем класс наведения.\n /\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE): string {\n const presetClass = stylesHovered[hoverMode] as string \| undefined;\n\n return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n background: styles.activatedBackground,\n opacity: styles.activatedOpacity,\n none: '',\n};\n\n/\n Определяем класс наведения.\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE): string {\n const presetClass = stylesActivated[activeMode] as string \| undefined;\n\n return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["styles","DEFAULT_STATE_MODE","stylesHovered","background","hoveredBackground","opacity","hoveredOpacity","none","hoverClass","hoverMode","presetClass","undefined","stylesActivated","activatedBackground","activatedOpacity","activeClass","activeMode"],"mappings":"AACA,OAAOA,YAAY,wBAAwB;AAiB3C;;CAEC,GACD,OAAO,MAAMC,qBAAgC,aAAa;AAE1D,MAAMC,gBAAwC;IAC5CC,YAAYH,OAAOI,iBAAiB;IACpCC,SAASL,OAAOM,cAAc;IAC9BC,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASC,WAAWC,YAA8BR,kBAAkB;IACzE,MAAMS,cAAcR,aAAa,CAACO,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CT,YAAYH,OAAOa,mBAAmB;IACtCR,SAASL,OAAOc,gBAAgB;IAChCP,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASQ,YAAYC,aAA+Bf,kBAAkB;IAC3E,MAAMS,cAAcE,eAAe,CAACI,WAAW;IAE/C,OAAON,gBAAgBC,YAAYD,cAAcM;AACnD"}
1	+ {"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import type { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' \| 'background' \| 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n /*\n Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active.\n /\n activeMode?: StateModeLiteral \| undefined;\n\n /\n Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover.\n /\n hoverMode?: StateModeLiteral \| undefined;\n}\n\n/\n Состояние по умолчанию.\n /\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n background: styles.hoveredBackground,\n opacity: styles.hoveredOpacity,\n none: '',\n};\n\n/\n Определяем класс наведения.\n /\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE): string {\n const presetClass = stylesHovered[hoverMode] as string \| undefined;\n\n return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n background: styles.activatedBackground,\n opacity: styles.activatedOpacity,\n none: '',\n};\n\n/\n Определяем класс наведения.\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE): string {\n const presetClass = stylesActivated[activeMode] as string \| undefined;\n\n return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["styles","DEFAULT_STATE_MODE","stylesHovered","background","hoveredBackground","opacity","hoveredOpacity","none","hoverClass","hoverMode","presetClass","undefined","stylesActivated","activatedBackground","activatedOpacity","activeClass","activeMode"],"mappings":"AACA,OAAOA,YAAY,wBAAwB;AAiB3C;;CAEC,GACD,OAAO,MAAMC,qBAAgC,aAAa;AAE1D,MAAMC,gBAAwC;IAC5CC,YAAYH,OAAOI,iBAAiB;IACpCC,SAASL,OAAOM,cAAc;IAC9BC,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASC,WAAWC,YAA8BR,kBAAkB;IACzE,MAAMS,cAAcR,aAAa,CAACO,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CT,YAAYH,OAAOa,mBAAmB;IACtCR,SAASL,OAAOc,gBAAgB;IAChCP,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASQ,YAAYC,aAA+Bf,kBAAkB;IAC3E,MAAMS,cAAcE,eAAe,CAACI,WAAW;IAE/C,OAAON,gBAAgBC,YAAYD,cAAcM;AACnD"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst warn = warnOnce('Textarea');\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface TextareaProps\n extends Pick<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \| 'autoComplete'\n \| 'autoCapitalize'\n \| 'autoCorrect'\n \| 'cols'\n \| 'dirName'\n \| 'disabled'\n \| 'maxLength'\n \| 'minLength'\n \| 'name'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'rows'\n \| 'value'\n \| 'wrap'\n \| 'form'\n \| 'onChange'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange' \| 'onFocus' \| 'onBlur'>,\n HasRootRef<HTMLElement>,\n HasAlign,\n FormFieldProps {\n /*\n @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ textArea: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLTextAreaElement~~>;\~~n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `textArea`: свойства для прокидывания в поле ввода.\n /\n slotProps?: {\n root?: React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute;\n textArea?: React.TextareaHTMLAttributes<HTMLTextAreaElement> &\n HasRootRef<HTMLTextAreaElement> &\n HasDataAttribute;\n };\n /\n Свойство управляющее автоматическим изменением высоты компонента.\n /\n grow?: boolean;\n /\n Обработчик, срабатывающий при изменении размера компонента.\n /\n onResize?: (el: HTMLTextAreaElement) => void;\n /\n Значение по умолчанию.\n /\n defaultValue?: string;\n}\n\n/\n @see https://vkui.io/components/textarea\n /\nexport const Textarea = ({\n // FormFieldProps\n status,\n mode,\n after,\n before,\n afterAlign,\n beforeAlign,\n maxHeight,\n\n // TextareaProps\n grow = true,\n onResize,\n align,\n getRef,\n\n // textarea props\n autoComplete,\n autoCapitalize,\n autoCorrect,\n cols,\n dirName,\n disabled,\n maxLength,\n minLength,\n name,\n placeholder,\n readOnly,\n required,\n value: valueProp,\n wrap,\n rows = 2,\n form,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n\n slotProps,\n ...restProps\n}: TextareaProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development' && getRef) {\n warn('Свойство `getRef` устаревшее, используйте `slotProps={ textArea: { getRootRef: ... } }`');\n }\n\n const { density = 'none' } = useAdaptivity();\n const platform = usePlatform();\n const { window } = useDOM();\n\n const { className, ...rootProps } = useMergeProps(restProps, slotProps?.root);\n\n const {\n onChange,\n getRootRef: getTextAreaRef,\n value,\n ...textAreaRest\n } = useMergeProps(\n {\n className: styles.el,\n getRootRef: getRef,\n autoComplete,\n autoCapitalize,\n autoCorrect,\n cols,\n dirName,\n disabled,\n maxLength,\n minLength,\n name,\n placeholder,\n readOnly,\n required,\n value: valueProp,\n wrap,\n rows,\n form,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n },\n slotProps?.textArea,\n );\n\n const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n const elementRef = useExternRef(getTextAreaRef, refResizeTextarea);\n\n React.useEffect(resize, [resize, density, platform, value]);\n useResizeObserver(window, resize);\n\n return (\n <FormField\n className={classNames(\n styles.host,\n density !== 'regular' && densityClassNames[density],\n align === 'right' && styles.alignRight,\n align === 'center' && styles.alignCenter,\n className,\n )}\n disabled={textAreaRest.disabled}\n status={status}\n mode={mode}\n after={after}\n before={before}\n afterAlign={afterAlign}\n beforeAlign={beforeAlign}\n maxHeight={maxHeight}\n {...rootProps}\n >\n <UnstyledTextField\n value={value}\n as=\"textarea\"\n rows={rows}\n getRootRef={elementRef}\n onChange={callMultiple(onChange, resize)}\n {...textAreaRest}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMergeProps","usePlatform","useResizeObserver","callMultiple","useDOM","warnOnce","FormField","UnstyledTextField","useResizeTextarea","styles","warn","densityClassNames","none","densityNone","compact","densityCompact","Textarea","status","mode","after","before","afterAlign","beforeAlign","maxHeight","grow","onResize","align","getRef","autoComplete","autoCapitalize","autoCorrect","cols","dirName","disabled","maxLength","minLength","name","placeholder","readOnly","required","value","valueProp","wrap","rows","form","onChange","onChangeProp","onFocus","onBlur","id","inputMode","defaultValue","autoFocus","tabIndex","spellCheck","slotProps","restProps","process","env","NODE_ENV","density","platform","window","className","rootProps","root","getRootRef","getTextAreaRef","textAreaRest","el","textArea","refResizeTextarea","resize","elementRef","useEffect","host","alignRight","alignCenter","as"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAC3E,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,OAAOL,SAAS;AAEtB,MAAMM,oBAAoB;IACxBC,MAAMH,OAAOI,WAAW;IACxBC,SAASL,OAAOM,cAAc;AAChC;~~AA0DA~~;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvB,iBAAiB;AACjBC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,SAAS,EAET,gBAAgB;AAChBC,OAAO,IAAI,EACXC,QAAQ,EACRC,KAAK,EACLC,MAAM,EAEN,iBAAiB;AACjBC,YAAY,EACZC,cAAc,EACdC,WAAW,EACXC,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,IAAI,EACJC,OAAO,CAAC,EACRC,IAAI,EACJC,UAAUC,YAAY,EACtBC,OAAO,EACPC,MAAM,EACNC,EAAE,EACFC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,UAAU,EAEVC,SAAS,EACT,GAAGC,WACW;IACd,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBhC,QAAQ;QACpDjB,KAAK;IACP;IAEA,MAAM,EAAEkD,UAAU,MAAM,EAAE,GAAG9D;IAC7B,MAAM+D,WAAW5D;IACjB,MAAM,EAAE6D,MAAM,EAAE,GAAG1D;IAEnB,MAAM,EAAE2D,SAAS,EAAE,GAAGC,WAAW,GAAGhE,cAAcwD,WAAWD,WAAWU;IAExE,MAAM,EACJpB,QAAQ,EACRqB,YAAYC,cAAc,EAC1B3B,KAAK,EACL,GAAG4B,cACJ,GAAGpE,cACF;QACE+D,WAAWtD,OAAO4D,EAAE;QACpBH,YAAYvC;QACZC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,OAAOC;QACPC;QACAC;QACAC;QACAC,UAAUC;QACVC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,GACAC,WAAWe;IAGb,MAAM,CAACC,mBAAmBC,OAAO,GAAGhE,kBAAkBiB,UAAUD;IAChE,MAAMiD,aAAa1E,aAAaoE,gBAAgBI;IAEhD3E,MAAM8E,SAAS,CAACF,QAAQ;QAACA;QAAQZ;QAASC;QAAUrB;KAAM;IAC1DtC,kBAAkB4D,QAAQU;IAE1B,qBACE,KAAClE;QACCyD,WAAWlE,WACTY,OAAOkE,IAAI,EACXf,YAAY,aAAajD,iBAAiB,CAACiD,QAAQ,EACnDlC,UAAU,WAAWjB,OAAOmE,UAAU,EACtClD,UAAU,YAAYjB,OAAOoE,WAAW,EACxCd;QAEF9B,UAAUmC,aAAanC,QAAQ;QAC/BhB,QAAQA;QACRC,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;QACbC,WAAWA;QACV,GAAGyC,SAAS;kBAEb,cAAA,KAACzD;YACCiC,OAAOA;YACPsC,IAAG;YACHnC,MAAMA;YACNuB,YAAYO;YACZ5B,UAAU1C,aAAa0C,UAAU2B;YAChC,GAAGJ,YAAY;;;AAIxB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst warn = warnOnce('Textarea');\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nexport interface TextareaProps\n extends Pick<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n \| 'autoComplete'\n \| 'autoCapitalize'\n \| 'autoCorrect'\n \| 'cols'\n \| 'dirName'\n \| 'disabled'\n \| 'maxLength'\n \| 'minLength'\n \| 'name'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'rows'\n \| 'value'\n \| 'wrap'\n \| 'form'\n \| 'onChange'\n \| 'onFocus'\n \| 'onBlur'\n >,\n Omit<React.HTMLAttributes<HTMLElement>, 'onChange' \| 'onFocus' \| 'onBlur'>,\n HasRootRef<HTMLElement>,\n HasAlign,\n FormFieldProps {\n /*\n @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ textArea: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLTextAreaElement> \| undefined;\n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `textArea`: свойства для прокидывания в поле ввода.\n /\n slotProps?:\n \| {\n root?:\n \| (React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute)\n \| undefined;\n textArea?: React.TextareaHTMLAttributes<HTMLTextAreaElement> &\n HasRootRef<HTMLTextAreaElement> &\n HasDataAttribute;\n }\n \| undefined;\n /\n Свойство управляющее автоматическим изменением высоты компонента.\n /\n grow?: boolean \| undefined;\n /\n Обработчик, срабатывающий при изменении размера компонента.\n /\n onResize?: ((el: HTMLTextAreaElement) => void) \| undefined;\n /\n Значение по умолчанию.\n /\n defaultValue?: string \| undefined;\n}\n\n/\n @see https://vkui.io/components/textarea\n /\nexport const Textarea = ({\n // FormFieldProps\n status,\n mode,\n after,\n before,\n afterAlign,\n beforeAlign,\n maxHeight,\n\n // TextareaProps\n grow = true,\n onResize,\n align,\n getRef,\n\n // textarea props\n autoComplete,\n autoCapitalize,\n autoCorrect,\n cols,\n dirName,\n disabled,\n maxLength,\n minLength,\n name,\n placeholder,\n readOnly,\n required,\n value: valueProp,\n wrap,\n rows = 2,\n form,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n\n slotProps,\n ...restProps\n}: TextareaProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development' && getRef) {\n warn('Свойство `getRef` устаревшее, используйте `slotProps={ textArea: { getRootRef: ... } }`');\n }\n\n const { density = 'none' } = useAdaptivity();\n const platform = usePlatform();\n const { window } = useDOM();\n\n const { className, ...rootProps } = useMergeProps(restProps, slotProps?.root);\n\n const {\n onChange,\n getRootRef: getTextAreaRef,\n value,\n ...textAreaRest\n } = useMergeProps(\n {\n className: styles.el,\n getRootRef: getRef,\n autoComplete,\n autoCapitalize,\n autoCorrect,\n cols,\n dirName,\n disabled,\n maxLength,\n minLength,\n name,\n placeholder,\n readOnly,\n required,\n value: valueProp,\n wrap,\n rows,\n form,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n id,\n inputMode,\n defaultValue,\n autoFocus,\n tabIndex,\n spellCheck,\n },\n slotProps?.textArea,\n );\n\n const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n const elementRef = useExternRef(getTextAreaRef, refResizeTextarea);\n\n React.useEffect(resize, [resize, density, platform, value]);\n useResizeObserver(window, resize);\n\n return (\n <FormField\n className={classNames(\n styles.host,\n density !== 'regular' && densityClassNames[density],\n align === 'right' && styles.alignRight,\n align === 'center' && styles.alignCenter,\n className,\n )}\n disabled={textAreaRest.disabled}\n status={status}\n mode={mode}\n after={after}\n before={before}\n afterAlign={afterAlign}\n beforeAlign={beforeAlign}\n maxHeight={maxHeight}\n {...rootProps}\n >\n <UnstyledTextField\n value={value}\n as=\"textarea\"\n rows={rows}\n getRootRef={elementRef}\n onChange={callMultiple(onChange, resize)}\n {...textAreaRest}\n />\n </FormField>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMergeProps","usePlatform","useResizeObserver","callMultiple","useDOM","warnOnce","FormField","UnstyledTextField","useResizeTextarea","styles","warn","densityClassNames","none","densityNone","compact","densityCompact","Textarea","status","mode","after","before","afterAlign","beforeAlign","maxHeight","grow","onResize","align","getRef","autoComplete","autoCapitalize","autoCorrect","cols","dirName","disabled","maxLength","minLength","name","placeholder","readOnly","required","value","valueProp","wrap","rows","form","onChange","onChangeProp","onFocus","onBlur","id","inputMode","defaultValue","autoFocus","tabIndex","spellCheck","slotProps","restProps","process","env","NODE_ENV","density","platform","window","className","rootProps","root","getRootRef","getTextAreaRef","textAreaRest","el","textArea","refResizeTextarea","resize","elementRef","useEffect","host","alignRight","alignCenter","as"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n AdaptiveIconRenderer,\n type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n primary: styles.modePrimary,\n secondary: styles.modeSecondary,\n tertiary: styles.modeTertiary,\n outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n accent: styles.appearanceAccent,\n neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n row: styles.directionRow,\n column: styles.directionColumn,\n};\n\nconst densityClassNames = {\n none: styles.densityNone,\n regular: styles.densityRegular,\n};\n\nexport interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {\n /*\n Режим отображения компонента.\n /\n mode?: 'primary' \| 'secondary' \| 'tertiary' \| 'outline';\n /\n Внешний вид компонента.\n /\n appearance?: 'accent' \| 'neutral';\n /\n Направление контента.\n /\n direction?: 'row' \| 'column';\n /\n Задаёт `50%` закругления для контейнера.\n \n > Note: игнорируется при `direction=\"column\"` если передан `children`.\n /\n rounded?: boolean;\n}\n\n/\n Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n \n @see https://vkui.io/components/tool-button\n */\nexport const ToolButton = ({\n mode = 'primary',\n appearance = 'accent',\n direction = 'row',\n children,\n IconCompact,\n IconRegular,\n rounded,\n ...restProps\n}: ToolButtonProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n const hasChildren = hasReactNode(children);\n\n return (\n <Tappable\n hoverMode={styles.hover}\n activeMode={styles.active}\n Component={restProps.href ? 'a' : 'button'}\n focusVisibleMode=\"outside\"\n baseClassName={classNames(\n styles.host,\n rounded && getRoundedClassName(direction, hasChildren),\n hasChildren && direction === 'row' && styles.withFakeEndIcon,\n stylesMode[mode],\n stylesAppearance[appearance],\n stylesDirection[direction],\n density !== 'compact' && densityClassNames[density],\n )}\n {...restProps}\n >\n <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n {hasChildren && <span className={styles.text}>{children}</span>}\n </Tappable>\n );\n};\n\nexport function getRoundedClassName(\n direction: 'row' \| 'column',\n hasChildren: boolean,\n): string \| undefined {\n switch (direction) {\n case 'row':\n return styles.rounded;\n case 'column':\n return hasChildren ? undefined : styles.rounded;\n }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","densityClassNames","none","densityNone","regular","densityRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","density","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,oBAAoB;IACxBC,MAAMrB,OAAOsB,WAAW;IACxBC,SAASvB,OAAOwB,cAAc;AAChC;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGrC;IAC7B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,YAAY,aAAad,iBAAiB,CAACc,QAAQ;QAEpD,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}
1	+ {"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n AdaptiveIconRenderer,\n type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n primary: styles.modePrimary,\n secondary: styles.modeSecondary,\n tertiary: styles.modeTertiary,\n outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n accent: styles.appearanceAccent,\n neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n row: styles.directionRow,\n column: styles.directionColumn,\n};\n\nconst densityClassNames = {\n none: styles.densityNone,\n regular: styles.densityRegular,\n};\n\nexport interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {\n /*\n Режим отображения компонента.\n /\n mode?: 'primary' \| 'secondary' \| 'tertiary' \| 'outline' \| undefined;\n /\n Внешний вид компонента.\n /\n appearance?: 'accent' \| 'neutral' \| undefined;\n /\n Направление контента.\n /\n direction?: 'row' \| 'column' \| undefined;\n /\n Задаёт `50%` закругления для контейнера.\n \n > Note: игнорируется при `direction=\"column\"` если передан `children`.\n /\n rounded?: boolean \| undefined;\n}\n\n/\n Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n \n @see https://vkui.io/components/tool-button\n */\nexport const ToolButton = ({\n mode = 'primary',\n appearance = 'accent',\n direction = 'row',\n children,\n IconCompact,\n IconRegular,\n rounded,\n ...restProps\n}: ToolButtonProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n const hasChildren = hasReactNode(children);\n\n return (\n <Tappable\n hoverMode={styles.hover}\n activeMode={styles.active}\n Component={restProps.href ? 'a' : 'button'}\n focusVisibleMode=\"outside\"\n baseClassName={classNames(\n styles.host,\n rounded && getRoundedClassName(direction, hasChildren),\n hasChildren && direction === 'row' && styles.withFakeEndIcon,\n stylesMode[mode],\n stylesAppearance[appearance],\n stylesDirection[direction],\n density !== 'compact' && densityClassNames[density],\n )}\n {...restProps}\n >\n <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n {hasChildren && <span className={styles.text}>{children}</span>}\n </Tappable>\n );\n};\n\nexport function getRoundedClassName(\n direction: 'row' \| 'column',\n hasChildren: boolean,\n): string \| undefined {\n switch (direction) {\n case 'row':\n return styles.rounded;\n case 'column':\n return hasChildren ? undefined : styles.rounded;\n }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","densityClassNames","none","densityNone","regular","densityRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","density","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,oBAAoB;IACxBC,MAAMrB,OAAOsB,WAAW;IACxBC,SAASvB,OAAOwB,cAAc;AAChC;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGrC;IAC7B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,YAAY,aAAad,iBAAiB,CAACc,QAAQ;QAEpD,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport type { FloatingComponentProps, OnShownChange } from '../../lib/floating';\nimport type { FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport type { TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { useTooltip } from './useTooltip';\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n \| 'arrowHeight'\n \| 'arrowPadding'\n \| 'hoverDelay'\n \| 'placement'\n \| 'offsetByMainAxis'\n \| 'offsetByCrossAxis'\n \| 'defaultShown'\n \| 'onShownChange'\n \| 'hideWhenReferenceHidden'\n \| 'onReferenceHiddenChange'\n \| 'children'\n \| 'zIndex'\n \| 'usePortal'\n \| 'onPlacementChange'\n \| 'disableFlipMiddleware'\n \| 'disableShiftMiddleware'\n \| 'strategy'\n \| 'overflowPadding'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' \| 'onCloseIconClick'>;\n\n/*\n @alias\n * @public\n /\nexport type TooltipArrowProps = Omit<\n FloatingArrowPropsPrivate,\n 'getRootRef' \| 'coords' \| 'placement' \| 'Icon'\n>;\n\n/\n @alias\n * @public\n /\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n /\n Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n * совместно с `onShownChange`.\n \n > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n /\n shown?: boolean;\n /\n Добавляет возможность наводить на тултип.\n /\n enableInteractive?: boolean;\n /\n Добавляет возможность закрыть тултип через иконку-крестик.\n \n > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n /\n closable?: boolean;\n /\n Скрывает стрелку, указывающую на якорный элемент.\n /\n disableArrow?: boolean;\n /\n Отключает закрытие по нажатию.\n /\n disableCloseAfterClick?: boolean;\n /\n Отключает появление при фокусе.\n /\n disableTriggerOnFocus?: boolean;\n}\n\n/\n @see https://vkui.io/components/tooltip\n */\nexport const Tooltip = ({ children, ...restProps }: TooltipProps): React.ReactNode => {\n const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);\n\n const anchor = useReferenceElement(children, anchorProps, anchorRef);\n\n return (\n <React.Fragment>\n {anchor}\n {tooltip}\n </React.Fragment>\n );\n};\n"],"names":["React","useReferenceElement","useTooltip","Tooltip","children","restProps","anchorRef","anchorProps","tooltip","anchor","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAItE,SAASC,UAAU,QAAQ,kBAAe;AAyE1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAAWG;IAEvD,MAAMI,SAASR,oBAAoBG,UAAUG,aAAaD;IAE1D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport type { FloatingComponentProps, OnShownChange } from '../../lib/floating';\nimport type { FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport type { TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { useTooltip } from './useTooltip';\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n \| 'arrowHeight'\n \| 'arrowPadding'\n \| 'hoverDelay'\n \| 'placement'\n \| 'offsetByMainAxis'\n \| 'offsetByCrossAxis'\n \| 'defaultShown'\n \| 'onShownChange'\n \| 'hideWhenReferenceHidden'\n \| 'onReferenceHiddenChange'\n \| 'children'\n \| 'zIndex'\n \| 'usePortal'\n \| 'onPlacementChange'\n \| 'disableFlipMiddleware'\n \| 'disableShiftMiddleware'\n \| 'strategy'\n \| 'overflowPadding'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' \| 'onCloseIconClick'>;\n\n/*\n @alias\n * @public\n /\nexport type TooltipArrowProps = Omit<\n FloatingArrowPropsPrivate,\n 'getRootRef' \| 'coords' \| 'placement' \| 'Icon'\n>;\n\n/\n @alias\n * @public\n /\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n /\n Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n * совместно с `onShownChange`.\n \n > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n /\n shown?: boolean \| undefined;\n /\n Добавляет возможность наводить на тултип.\n /\n enableInteractive?: boolean \| undefined;\n /\n Добавляет возможность закрыть тултип через иконку-крестик.\n \n > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n /\n closable?: boolean \| undefined;\n /\n Скрывает стрелку, указывающую на якорный элемент.\n /\n disableArrow?: boolean \| undefined;\n /\n Отключает закрытие по нажатию.\n /\n disableCloseAfterClick?: boolean \| undefined;\n /\n Отключает появление при фокусе.\n /\n disableTriggerOnFocus?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/tooltip\n */\nexport const Tooltip = ({ children, ...restProps }: TooltipProps): React.ReactNode => {\n const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);\n\n const anchor = useReferenceElement(children, anchorProps, anchorRef);\n\n return (\n <React.Fragment>\n {anchor}\n {tooltip}\n </React.Fragment>\n );\n};\n"],"names":["React","useReferenceElement","useTooltip","Tooltip","children","restProps","anchorRef","anchorProps","tooltip","anchor","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAItE,SAASC,UAAU,QAAQ,kBAAe;AAyE1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAAWG;IAEvD,MAAMI,SAASR,oBAAoBG,UAAUG,aAAaD;IAE1D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n accent: styles.appearanceAccent,\n white: styles.appearanceWhite,\n black: styles.appearanceBlack,\n inversion: styles.appearanceInversion,\n};\n\nexport interface TooltipBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' \| 'title'> {\n /*\n Стиль отображения подсказки.\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion';\n /\n Текст тултипа.\n /\n description?: React.ReactNode;\n /\n Заголовок тултипа.\n /\n title?: React.ReactNode;\n /\n [a11y] Id для заголовка тултипа.\n * Можно использовать для связи элемента с `role=\"dialog\"` и заголовка через `aria-labelledby`.\n /\n titleId?: string;\n /\n Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n /\n arrowProps?: Omit<FloatingArrowProps, 'Icon'~~>;\~~n /\n Пользовательская SVG иконка.\n \n Требования:\n \n 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (смотри https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n /\n ArrowIcon?: FloatingArrowProps['Icon'];\n /\n Пользовательские css-классы, будут добавлены на root-элемент.\n /\n className?: string;\n /\n Перебивает максимальную ширину заданную по умолчанию.\n \n Передача `null` полностью сбрасывает установку `max-width` на элемент.\n /\n maxWidth?: number \| string \| null;\n /\n Скрытый текст для кнопки закрытия.\n /\n closeIconLabel?: string;\n /\n Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n /\n onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/\n Низкоуровневый компонент для отрисовки тултипа.\n * @private\n */\nexport const TooltipBase = ({\n appearance = 'accent',\n arrowProps,\n ArrowIcon = DefaultIcon,\n description,\n title,\n titleId,\n maxWidth = TOOLTIP_MAX_WIDTH,\n closeIconLabel = 'Закрыть',\n onCloseIconClick,\n className,\n ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n appearance !== 'neutral' && stylesAppearance[appearance],\n className,\n )}\n role=\"tooltip\"\n >\n {arrowProps && (\n <FloatingArrow\n {...arrowProps}\n iconClassName={classNames(styles.arrow, arrowProps.iconClassName)}\n Icon={ArrowIcon}\n />\n )}\n <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>\n <div>\n {hasReactNode(title) && (\n <Subhead id={titleId} className={styles.title} weight=\"2\">\n {title}\n </Subhead>\n )}\n {hasReactNode(description) && (\n <Subhead className={styles.description}>{description}</Subhead>\n )}\n </div>\n {typeof onCloseIconClick === 'function' && (\n <Tappable\n Component=\"button\"\n className={styles.closeButton}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n onClick={onCloseIconClick}\n >\n <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n <Icon16Cancel display=\"block\" />\n </Tappable>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","appearanceAccent","white","appearanceWhite","black","appearanceBlack","inversion","appearanceInversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","titleId","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","host","role","iconClassName","arrow","Icon","div","content","style","undefined","id","weight","Component","closeButton","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,kCAA+B;AAC3D,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,OAAOI,gBAAgB;IAC/BC,OAAOL,OAAOM,eAAe;IAC7BC,OAAOP,OAAOQ,eAAe;IAC7BC,WAAWT,OAAOU,mBAAmB;AACvC;AA2DA;;;CAGC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYpB,WAAW,EACvBqB,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,WAAWjB,iBAAiB,EAC5BkB,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,MAAC1B;QACE,GAAG0B,SAAS;QACbC,eAAe/B,WACbQ,OAAOwB,IAAI,EACXZ,eAAe,aAAaV,gBAAgB,CAACU,WAAW,EACxDS;QAEFI,MAAK;;YAEJZ,4BACC,KAAClB;gBACE,GAAGkB,UAAU;gBACda,eAAelC,WAAWQ,OAAO2B,KAAK,EAAEd,WAAWa,aAAa;gBAChEE,MAAMd;;0BAGV,MAACe;gBAAIR,WAAWrB,OAAO8B,OAAO;gBAAEC,OAAOb,aAAa,OAAO;oBAAEA;gBAAS,IAAIc;;kCACxE,MAACH;;4BACEpC,aAAauB,wBACZ,KAAClB;gCAAQmC,IAAIhB;gCAASI,WAAWrB,OAAOgB,KAAK;gCAAEkB,QAAO;0CACnDlB;;4BAGJvB,aAAasB,8BACZ,KAACjB;gCAAQuB,WAAWrB,OAAOe,WAAW;0CAAGA;;;;oBAG5C,OAAOK,qBAAqB,4BAC3B,MAACvB;wBACCsC,WAAU;wBACVd,WAAWrB,OAAOoC,WAAW;wBAC7BC,WAAU;wBACVC,YAAW;wBACXC,SAASnB;;0CAET,KAACrB;0CAAgBoB;;0CACjB,KAAC5B;gCAAaiD,SAAQ;;;;;;;;AAMlC,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n accent: styles.appearanceAccent,\n white: styles.appearanceWhite,\n black: styles.appearanceBlack,\n inversion: styles.appearanceInversion,\n};\n\nexport interface TooltipBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' \| 'title'> {\n /*\n Стиль отображения подсказки.\n /\n appearance?: 'accent' \| 'neutral' \| 'white' \| 'black' \| 'inversion' \| undefined;\n /\n Текст тултипа.\n /\n description?: React.ReactNode \| undefined;\n /\n Заголовок тултипа.\n /\n title?: React.ReactNode \| undefined;\n /\n [a11y] Id для заголовка тултипа.\n * Можно использовать для связи элемента с `role=\"dialog\"` и заголовка через `aria-labelledby`.\n /\n titleId?: string \| undefined;\n /\n Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n /\n arrowProps?: Omit<FloatingArrowProps, 'Icon'> \| undefined;\n /\n Пользовательская SVG иконка.\n \n Требования:\n \n 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (смотри https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n /\n ArrowIcon?: FloatingArrowProps['Icon'] \| undefined;\n /\n Пользовательские css-классы, будут добавлены на root-элемент.\n /\n className?: string \| undefined;\n /\n Перебивает максимальную ширину заданную по умолчанию.\n \n Передача `null` полностью сбрасывает установку `max-width` на элемент.\n /\n maxWidth?: number \| string \| null \| undefined;\n /\n Скрытый текст для кнопки закрытия.\n /\n closeIconLabel?: string \| undefined;\n /\n Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n /\n onCloseIconClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) \| undefined;\n}\n\n/\n Низкоуровневый компонент для отрисовки тултипа.\n * @private\n */\nexport const TooltipBase = ({\n appearance = 'accent',\n arrowProps,\n ArrowIcon = DefaultIcon,\n description,\n title,\n titleId,\n maxWidth = TOOLTIP_MAX_WIDTH,\n closeIconLabel = 'Закрыть',\n onCloseIconClick,\n className,\n ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n appearance !== 'neutral' && stylesAppearance[appearance],\n className,\n )}\n role=\"tooltip\"\n >\n {arrowProps && (\n <FloatingArrow\n {...arrowProps}\n iconClassName={classNames(styles.arrow, arrowProps.iconClassName)}\n Icon={ArrowIcon}\n />\n )}\n <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>\n <div>\n {hasReactNode(title) && (\n <Subhead id={titleId} className={styles.title} weight=\"2\">\n {title}\n </Subhead>\n )}\n {hasReactNode(description) && (\n <Subhead className={styles.description}>{description}</Subhead>\n )}\n </div>\n {typeof onCloseIconClick === 'function' && (\n <Tappable\n Component=\"button\"\n className={styles.closeButton}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n onClick={onCloseIconClick}\n >\n <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n <Icon16Cancel display=\"block\" />\n </Tappable>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","appearanceAccent","white","appearanceWhite","black","appearanceBlack","inversion","appearanceInversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","titleId","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","host","role","iconClassName","arrow","Icon","div","content","style","undefined","id","weight","Component","closeButton","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,kCAA+B;AAC3D,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,OAAOI,gBAAgB;IAC/BC,OAAOL,OAAOM,eAAe;IAC7BC,OAAOP,OAAOQ,eAAe;IAC7BC,WAAWT,OAAOU,mBAAmB;AACvC;AA2DA;;;CAGC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYpB,WAAW,EACvBqB,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,WAAWjB,iBAAiB,EAC5BkB,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,MAAC1B;QACE,GAAG0B,SAAS;QACbC,eAAe/B,WACbQ,OAAOwB,IAAI,EACXZ,eAAe,aAAaV,gBAAgB,CAACU,WAAW,EACxDS;QAEFI,MAAK;;YAEJZ,4BACC,KAAClB;gBACE,GAAGkB,UAAU;gBACda,eAAelC,WAAWQ,OAAO2B,KAAK,EAAEd,WAAWa,aAAa;gBAChEE,MAAMd;;0BAGV,MAACe;gBAAIR,WAAWrB,OAAO8B,OAAO;gBAAEC,OAAOb,aAAa,OAAO;oBAAEA;gBAAS,IAAIc;;kCACxE,MAACH;;4BACEpC,aAAauB,wBACZ,KAAClB;gCAAQmC,IAAIhB;gCAASI,WAAWrB,OAAOgB,KAAK;gCAAEkB,QAAO;0CACnDlB;;4BAGJvB,aAAasB,8BACZ,KAACjB;gCAAQuB,WAAWrB,OAAOe,WAAW;0CAAGA;;;;oBAG5C,OAAOK,qBAAqB,4BAC3B,MAACvB;wBACCsC,WAAU;wBACVd,WAAWrB,OAAOoC,WAAW;wBAC7BC,WAAU;wBACVC,YAAW;wBACXC,SAASnB;;0CAET,KAACrB;0CAAgBoB;;0CACjB,KAAC5B;gCAAaiD,SAAQ;;;;;;;;AAMlC,EAAE"}