npm - @vkontakte/vkui - Versions diffs - 7.1.2 → 7.1.3 - Mend

@vkontakte/vkui 7.1.2 → 7.1.3

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

package/dist/components/Pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport {\n type CustomPaginationNavigationButton,\n PaginationNavigationButton,\n type PaginationNavigationButtonProps,\n} from './PaginationNavigationButton/PaginationNavigationButton';\nimport {\n type CustomPaginationPageButtonProps,\n PaginationPageButton,\n} from './PaginationPage/PaginationPageButton';\nimport { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';\nimport { getPageLabelDefault } from './utils';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {\n /*\n Текущая страница.\n /\n currentPage?: number;\n /\n Кол-во всегда видимых страниц по краям текущей страницы.\n /\n siblingCount?: number;\n /\n Кол-во всегда видимых страниц в начале и в конце.\n /\n boundaryCount?: number;\n /\n Общее кол-во страниц.\n /\n totalPages?: number;\n /\n Блокировка всех кнопок.\n /\n disabled?: boolean;\n /\n Декоративный текст для кнопки навигации назад.\n \n > Note: Экранные дикторы будут использовать `prevButtonLabel`.\n /\n prevButtonCaption?: string;\n /\n Декоративный текст для кнопки навигации вперёд.\n \n > Note: Экранные дикторы будут использовать `nextButtonLabel`.\n /\n nextButtonCaption?: string;\n /\n Задаёт стиль отображения кнопок навигации.\n \n - `icon` – показывать только иконку;\n * - `caption` – показывать только подпись;\n * - `both` – показывать и иконку, и подпись.\n /\n navigationButtonsStyle?: PaginationNavigationButtonProps['style'];\n /\n [a11y] Метка для обозначения блока навигации.\n /\n navigationLabel?: string;\n navigationLabelComponent?: HasComponent['Component'];\n /\n [a11y] Метка для кнопки навигации назад.\n /\n prevButtonLabel?: string;\n /\n [a11y] Метка для кнопки навигации вперёд.\n /\n nextButtonLabel?: string;\n /\n [a11y] Функция для переопределения и/или локализации метки кнопки страницы.\n /\n getPageLabel?: (isCurrent: boolean) => string;\n onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;\n /\n Функция для кастомного рендера кнопок страниц.\n \n > Note: `CustomPaginationPageButtonProps` наследует API [Tappable](https://vkcom.github.io/VKUI/#/Tappable).\n /\n renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;\n /\n Функция для кастомного рендера кнопок навигации `prev` и `next`.\n \n * > Note: `CustomPaginationNavigationButton` наследует API [Button](https://vkcom.github.io/VKUI/#/Button).\n /\n renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;\n /\n Передает атрибут `data-testid` для кнопок страниц\n /\n pageButtonTestId?: (day: PaginationPageType, active: boolean) => string;\n /\n Передает атрибут `data-testid` для кнопки `prev`\n /\n prevButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки `next`\n /\n nextButtonTestId?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n currentPage = 1,\n siblingCount = 1,\n boundaryCount = 1,\n totalPages = 1,\n disabled,\n prevButtonCaption = 'Назад',\n nextButtonCaption = 'Вперёд',\n navigationButtonsStyle = 'icon',\n getPageLabel = getPageLabelDefault,\n navigationLabel = 'Навигация по страницам',\n navigationLabelComponent = 'h2',\n prevButtonLabel = 'Перейти на предыдущую страницу',\n nextButtonLabel = 'Перейти на следующую страницу',\n onChange,\n renderPageButton,\n pageButtonTestId,\n prevButtonTestId,\n nextButtonTestId,\n renderNavigationButton,\n ...resetProps\n}: PaginationProps): React.ReactNode => {\n const pages = usePagination({\n currentPage,\n totalPages,\n siblingCount,\n boundaryCount,\n });\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === totalPages;\n const prevPage = isFirstPage ? undefined : currentPage - 1;\n const nextPage = isLastPage ? undefined : currentPage + 1;\n\n const handlePrevClick = React.useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (onChange && prevPage !== undefined) {\n onChange(prevPage, event);\n }\n },\n [prevPage, onChange],\n );\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n const page: string = event.currentTarget.dataset.page \|\| '1';\n onChange?.(Number(page), event);\n },\n [onChange],\n );\n\n const handleNextClick = React.useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (onChange && nextPage !== undefined) {\n onChange(nextPage, event);\n }\n },\n [nextPage, onChange],\n );\n\n const { sizeY } = useAdaptivity();\n\n const renderPages = React.useCallback(\n (page: PaginationPageType) => {\n const isCurrent = page === currentPage;\n const dataTestId = pageButtonTestId?.(page, isCurrent);\n\n switch (page) {\n case 'start-ellipsis':\n case 'end-ellipsis':\n return (\n <li key={page}>\n <PaginationPageEllipsis disabled={disabled} data-testid={dataTestId} />\n </li>\n );\n default: {\n return (\n <li key={page}>\n <PaginationPageButton\n getPageLabel={getPageLabel}\n isCurrent={isCurrent}\n onClick={handleClick}\n disabled={disabled}\n sizeY={sizeY}\n renderPageButton={renderPageButton}\n data-testid={dataTestId}\n >\n {page}\n </PaginationPageButton>\n </li>\n );\n }\n }\n },\n [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY, pageButtonTestId],\n );\n\n return (\n <RootComponent Component=\"nav\" role=\"navigation\" {...resetProps}>\n <VisuallyHidden Component={navigationLabelComponent}>{navigationLabel}</VisuallyHidden>\n <ul className={styles.list}>\n <li className={styles.prevButtonContainer}>\n <PaginationNavigationButton\n type=\"prev\"\n style={navigationButtonsStyle}\n caption={prevButtonCaption}\n Icon={Icon24ChevronCompactLeft}\n a11yLabel={prevButtonLabel}\n disabled={isFirstPage \|\| disabled}\n onClick={handlePrevClick}\n data-page={prevPage}\n data-testid={prevButtonTestId}\n renderNavigationButton={renderNavigationButton}\n />\n </li>\n {pages.map(renderPages)}\n <li className={styles.nextButtonContainer}>\n <PaginationNavigationButton\n type=\"next\"\n style={navigationButtonsStyle}\n caption={nextButtonCaption}\n Icon={Icon24ChevronCompactRight}\n a11yLabel={nextButtonLabel}\n disabled={isLastPage \|\| disabled}\n onClick={handleNextClick}\n data-page={nextPage}\n data-testid={nextButtonTestId}\n renderNavigationButton={renderNavigationButton}\n />\n </li>\n </ul>\n </RootComponent>\n );\n};\n"],"names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","useAdaptivity","usePagination","RootComponent","VisuallyHidden","PaginationNavigationButton","PaginationPageButton","PaginationPageEllipsis","getPageLabelDefault","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","prevButtonCaption","nextButtonCaption","navigationButtonsStyle","getPageLabel","navigationLabel","navigationLabelComponent","prevButtonLabel","nextButtonLabel","onChange","renderPageButton","pageButtonTestId","prevButtonTestId","nextButtonTestId","renderNavigationButton","resetProps","pages","isFirstPage","isLastPage","prevPage","undefined","nextPage","handlePrevClick","useCallback","event","handleClick","page","currentTarget","dataset","Number","handleNextClick","sizeY","renderPages","isCurrent","dataTestId","li","data-testid","onClick","Component","role","ul","className","type","style","caption","Icon","a11yLabel","data-page","map"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport {\n type CustomPaginationNavigationButton,\n PaginationNavigationButton,\n type PaginationNavigationButtonProps,\n} from './PaginationNavigationButton/PaginationNavigationButton';\nimport {\n type CustomPaginationPageButtonProps,\n PaginationPageButton,\n} from './PaginationPage/PaginationPageButton';\nimport { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {\n /*\n Текущая страница.\n /\n currentPage?: number;\n /\n Кол-во всегда видимых страниц по краям текущей страницы.\n /\n siblingCount?: number;\n /\n Кол-во всегда видимых страниц в начале и в конце.\n /\n boundaryCount?: number;\n /\n Общее кол-во страниц.\n /\n totalPages?: number;\n /\n Блокировка всех кнопок.\n /\n disabled?: boolean;\n /\n Декоративный текст для кнопки навигации назад.\n \n > Note: Экранные дикторы будут использовать `prevButtonLabel`.\n /\n prevButtonCaption?: string;\n /\n Декоративный текст для кнопки навигации вперёд.\n \n > Note: Экранные дикторы будут использовать `nextButtonLabel`.\n /\n nextButtonCaption?: string;\n /\n Задаёт стиль отображения кнопок навигации.\n \n - `icon` – показывать только иконку;\n * - `caption` – показывать только подпись;\n * - `both` – показывать и иконку, и подпись.\n /\n navigationButtonsStyle?: PaginationNavigationButtonProps['style'];\n /\n [a11y] Метка для обозначения блока навигации.\n /\n navigationLabel?: string;\n navigationLabelComponent?: HasComponent['Component'];\n /\n [a11y] Метка для кнопки навигации назад.\n /\n prevButtonLabel?: string;\n /\n [a11y] Метка для кнопки навигации вперёд.\n /\n nextButtonLabel?: string;\n /\n [a11y] Функция для переопределения и/или локализации метки кнопки страницы.\n \n > Note: По возможности лучше не использовать,\n * так как компонент и так проставляет номер страницы в разметку,\n * что достаточно для пользователей скринридеров.\n * Дополнительная информация скорее будет избыточна,\n * так как будет зачитываться для каждой кнопки при перемещении по списку.\n /\n getPageLabel?: (isCurrent: boolean) => string;\n onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;\n /\n Функция для кастомного рендера кнопок страниц.\n \n > Note: `CustomPaginationPageButtonProps` наследует API [Tappable](https://vkcom.github.io/VKUI/#/Tappable).\n /\n renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;\n /\n Функция для кастомного рендера кнопок навигации `prev` и `next`.\n \n * > Note: `CustomPaginationNavigationButton` наследует API [Button](https://vkcom.github.io/VKUI/#/Button).\n /\n renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;\n /\n Передает атрибут `data-testid` для кнопок страниц\n /\n pageButtonTestId?: (day: PaginationPageType, active: boolean) => string;\n /\n Передает атрибут `data-testid` для кнопки `prev`\n /\n prevButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки `next`\n /\n nextButtonTestId?: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n currentPage = 1,\n siblingCount = 1,\n boundaryCount = 1,\n totalPages = 1,\n disabled,\n prevButtonCaption = 'Назад',\n nextButtonCaption = 'Вперёд',\n navigationButtonsStyle = 'icon',\n getPageLabel,\n navigationLabel = 'Страницы',\n navigationLabelComponent = 'h2',\n prevButtonLabel = 'Перейти на предыдущую страницу',\n nextButtonLabel = 'Перейти на следующую страницу',\n onChange,\n renderPageButton,\n pageButtonTestId,\n prevButtonTestId,\n nextButtonTestId,\n renderNavigationButton,\n ...resetProps\n}: PaginationProps): React.ReactNode => {\n const pages = usePagination({\n currentPage,\n totalPages,\n siblingCount,\n boundaryCount,\n });\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === totalPages;\n const prevPage = isFirstPage ? undefined : currentPage - 1;\n const nextPage = isLastPage ? undefined : currentPage + 1;\n\n const handlePrevClick = React.useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (onChange && prevPage !== undefined) {\n onChange(prevPage, event);\n }\n },\n [prevPage, onChange],\n );\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n const page: string = event.currentTarget.dataset.page \|\| '1';\n onChange?.(Number(page), event);\n },\n [onChange],\n );\n\n const handleNextClick = React.useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (onChange && nextPage !== undefined) {\n onChange(nextPage, event);\n }\n },\n [nextPage, onChange],\n );\n\n const { sizeY } = useAdaptivity();\n\n const renderPages = React.useCallback(\n (page: PaginationPageType) => {\n const isCurrent = page === currentPage;\n const dataTestId = pageButtonTestId?.(page, isCurrent);\n\n switch (page) {\n case 'start-ellipsis':\n case 'end-ellipsis':\n return (\n <li key={page}>\n <PaginationPageEllipsis disabled={disabled} data-testid={dataTestId} />\n </li>\n );\n default: {\n return (\n <li key={page}>\n <PaginationPageButton\n getPageLabel={getPageLabel}\n isCurrent={isCurrent}\n onClick={handleClick}\n disabled={disabled}\n sizeY={sizeY}\n renderPageButton={renderPageButton}\n data-testid={dataTestId}\n >\n {page}\n </PaginationPageButton>\n </li>\n );\n }\n }\n },\n [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY, pageButtonTestId],\n );\n\n const navigationLabelId = React.useId();\n\n return (\n <RootComponent\n Component=\"nav\"\n role=\"navigation\"\n aria-labelledby={navigationLabelId}\n {...resetProps}\n >\n <VisuallyHidden id={navigationLabelId} Component={navigationLabelComponent}>\n {navigationLabel}\n </VisuallyHidden>\n <ul className={styles.list}>\n <li className={styles.prevButtonContainer}>\n <PaginationNavigationButton\n type=\"prev\"\n style={navigationButtonsStyle}\n caption={prevButtonCaption}\n Icon={Icon24ChevronCompactLeft}\n a11yLabel={prevButtonLabel}\n disabled={isFirstPage \|\| disabled}\n onClick={handlePrevClick}\n data-page={prevPage}\n data-testid={prevButtonTestId}\n renderNavigationButton={renderNavigationButton}\n />\n </li>\n {pages.map(renderPages)}\n <li className={styles.nextButtonContainer}>\n <PaginationNavigationButton\n type=\"next\"\n style={navigationButtonsStyle}\n caption={nextButtonCaption}\n Icon={Icon24ChevronCompactRight}\n a11yLabel={nextButtonLabel}\n disabled={isLastPage \|\| disabled}\n onClick={handleNextClick}\n data-page={nextPage}\n data-testid={nextButtonTestId}\n renderNavigationButton={renderNavigationButton}\n />\n </li>\n </ul>\n </RootComponent>\n );\n};\n"],"names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","useAdaptivity","usePagination","RootComponent","VisuallyHidden","PaginationNavigationButton","PaginationPageButton","PaginationPageEllipsis","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","prevButtonCaption","nextButtonCaption","navigationButtonsStyle","getPageLabel","navigationLabel","navigationLabelComponent","prevButtonLabel","nextButtonLabel","onChange","renderPageButton","pageButtonTestId","prevButtonTestId","nextButtonTestId","renderNavigationButton","resetProps","pages","isFirstPage","isLastPage","prevPage","undefined","nextPage","handlePrevClick","useCallback","event","handleClick","page","currentTarget","dataset","Number","handleNextClick","sizeY","renderPages","isCurrent","dataTestId","li","data-testid","onClick","navigationLabelId","useId","Component","role","aria-labelledby","id","ul","className","type","style","caption","Icon","a11yLabel","data-page","map"],"mappings":"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"}

package/dist/components/Pagination/PaginationPage/PaginationPageButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaginationPageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;~~AAKrD~~,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,EAC/F,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;CAChF;AAED,QAAA,MAAM,kCAAkC,SAChC,wBAAwB,KAC7B,aAAa,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;~~CAiCvC~~,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,UAAU,CAAC,OAAO,kCAAkC,CAAC,CAAC;AAEpG,eAAO,MAAM,oBAAoB,uCAG9B,yBAAyB,KAAG,KAAK,CAAC,SAQpC,CAAC"}
1	+ {"version":3,"file":"PaginationPageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,EAC/F,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;CAChF;AAED,QAAA,MAAM,kCAAkC,SAChC,wBAAwB,KAC7B,aAAa,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAkCvC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,UAAU,CAAC,OAAO,kCAAkC,CAAC,CAAC;AAEpG,eAAO,MAAM,oBAAoB,uCAG9B,yBAAyB,KAAG,KAAK,CAAC,SAQpC,CAAC"}

package/dist/components/Pagination/PaginationPage/PaginationPageButton.js CHANGED Viewed

@@ -6,10 +6,9 @@ import { classNames } from "@vkontakte/vkjs";
 import { Tappable } from "../../Tappable/Tappable.js";
 import { Text } from "../../Typography/Text/Text.js";
 import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.js";
-import { getPageLabelDefault } from "../utils.js";
 import { getPaginationPageClassNames } from "./usePaginationPageClasses.js";
 const getTappablePropsFromPaginationPage = (opts)=>{
-    const { isCurrent = false, getPageLabel = getPageLabelDefault, children, className, disabled, sizeY } = opts, restProps = _object_without_properties(opts, [
+    const { isCurrent = false, getPageLabel, children, className, disabled, sizeY } = opts, restProps = _object_without_properties(opts, [
         "isCurrent",
         "getPageLabel",
         "children",
@@ -22,6 +21,7 @@ const getTappablePropsFromPaginationPage = (opts)=>{
         disabled,
         sizeY
     });
+    const pageLabel = getPageLabel === null || getPageLabel === void 0 ? void 0 : getPageLabel(isCurrent);
     return _object_spread({
         'className': classNames(pageClassNames, className),
         'activeMode': "vkuiPaginationPage__stateActive",
@@ -32,9 +32,9 @@ const getTappablePropsFromPaginationPage = (opts)=>{
         'children': /*#__PURE__*/ _jsxs(Text, {
             normalize: false,
             children: [
-                /*#__PURE__*/ _jsxs(VisuallyHidden, {
+                pageLabel && /*#__PURE__*/ _jsxs(VisuallyHidden, {
                     children: [
-                        getPageLabel(isCurrent),
+                        pageLabel,
                         " "
                     ]
                 }),

package/dist/components/Pagination/PaginationPage/PaginationPageButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type SizeTypeValues } from '../../../lib/adaptivity';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { PaginationProps } from '../Pagination';\nimport { ~~getPageLabelDefault } from '../utils';\nimport {~~ getPaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonOpts\n extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'disabled' \| 'className'>,\n Pick<PaginationProps, 'getPageLabel'> {\n isCurrent?: boolean;\n sizeY?: SizeTypeValues;\n children: number;\n}\n\nexport interface PaginationPageButtonProps extends PaginationPageButtonOpts {\n renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;\n}\n\nconst getTappablePropsFromPaginationPage = (\n opts: PaginationPageButtonOpts,\n): TappableProps & { 'data-page': number } => {\n const {\n isCurrent = false,\n getPageLabel ~~= getPageLabelDefault~~,\n children,\n className,\n disabled,\n sizeY,\n ...restProps\n } = opts;\n\n const pageClassNames = getPaginationPageClassNames({\n isCurrent,\n disabled,\n sizeY,\n });\n\n return {\n 'className': classNames(pageClassNames, className),\n 'activeMode': styles.stateActive,\n 'hoverMode': styles.stateHover,\n 'focusVisibleMode': 'outside',\n 'aria-current': isCurrent ? true : undefined,\n 'disabled': disabled,\n 'children': (\n <Text normalize={false}>\n <VisuallyHidden>{~~getPageLabel(isCurrent)~~} </VisuallyHidden>\n {children}\n </Text>\n ),\n 'data-page': children,\n ...restProps,\n };\n};\n\nexport type CustomPaginationPageButtonProps = ReturnType<typeof getTappablePropsFromPaginationPage>;\n\nexport const PaginationPageButton = ({\n renderPageButton,\n ...restProps\n}: PaginationPageButtonProps): React.ReactNode => {\n const tappableProps = getTappablePropsFromPaginationPage(restProps);\n\n if (typeof renderPageButton === 'function') {\n return renderPageButton(tappableProps);\n }\n\n return <Tappable {...tappableProps} />;\n};\n"],"names":["React","classNames","Tappable","Text","VisuallyHidden","~~getPageLabelDefault","~~getPaginationPageClassNames","getTappablePropsFromPaginationPage","opts","isCurrent","getPageLabel","children","className","disabled","sizeY","restProps","pageClassNames","undefined","normalize","PaginationPageButton","renderPageButton","tappableProps"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAA4B,6BAA0B;AACvE,SAASC,IAAI,QAAQ,gCAA6B;AAClD,SAASC,cAAc,QAAQ,yCAAsC;AAErE,SAASC,~~mBAAmB,QAAQ,cAAW;AAC/C,SAASC,~~2BAA2B,QAAQ,gCAA6B;AAezE,MAAMC,qCAAqC,CACzCC;IAEA,MAAM,EACJC,YAAY,KAAK,EACjBC,~~eAAeL~~,~~mBAAmB~~,~~EAClCM,~~QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,KAAK,EAEN,GAAGN,MADCO,uCACDP;QAPFC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAME,iBAAiBV,4BAA4B;QACjDG;QACAI;QACAC;IACF;IAEA,OAAO;QACL,~~aAAab~~,~~WAAWe~~,gBAAgBJ;QACxC,YAAY;QACZ,WAAW;QACX,oBAAoB;QACpB,gBAAgBH,YAAY,~~OAAOQ~~;QACnC,~~YAAYJ~~;QACZ,0BACE,~~MAACV~~;YAAKe,WAAW;;~~8BACf~~,~~MAACd~~;;~~wBAAgBM,aAAaD~~;~~wBAAW~~;;;~~gBACxCE~~;;;QAGL,aAAaA;OACVI;AAEP;AAIA,OAAO,~~MAAMI~~,uBAAuB;QAAC,EACnCC,gBAAgB,EAEU,~~WADvBL~~;~~QADHK~~;;IAGA,MAAMC,~~gBAAgBd~~,mCAAmCQ;IAEzD,IAAI,~~OAAOK~~,qBAAqB,YAAY;QAC1C,OAAOA,iBAAiBC;IAC1B;IAEA,qBAAO,KAACnB,6BAAamB;AACvB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type SizeTypeValues } from '../../../lib/adaptivity';\nimport { Tappable, type TappableProps } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { PaginationProps } from '../Pagination';\nimport { getPaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonOpts\n extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' \| 'disabled' \| 'className'>,\n Pick<PaginationProps, 'getPageLabel'> {\n isCurrent?: boolean;\n sizeY?: SizeTypeValues;\n children: number;\n}\n\nexport interface PaginationPageButtonProps extends PaginationPageButtonOpts {\n renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;\n}\n\nconst getTappablePropsFromPaginationPage = (\n opts: PaginationPageButtonOpts,\n): TappableProps & { 'data-page': number } => {\n const {\n isCurrent = false,\n getPageLabel,\n children,\n className,\n disabled,\n sizeY,\n ...restProps\n } = opts;\n\n const pageClassNames = getPaginationPageClassNames({\n isCurrent,\n disabled,\n sizeY,\n });\n\n const pageLabel = getPageLabel?.(isCurrent);\n return {\n 'className': classNames(pageClassNames, className),\n 'activeMode': styles.stateActive,\n 'hoverMode': styles.stateHover,\n 'focusVisibleMode': 'outside',\n 'aria-current': isCurrent ? true : undefined,\n 'disabled': disabled,\n 'children': (\n <Text normalize={false}>\n {pageLabel && <VisuallyHidden>{pageLabel} </VisuallyHidden>}\n {children}\n </Text>\n ),\n 'data-page': children,\n ...restProps,\n };\n};\n\nexport type CustomPaginationPageButtonProps = ReturnType<typeof getTappablePropsFromPaginationPage>;\n\nexport const PaginationPageButton = ({\n renderPageButton,\n ...restProps\n}: PaginationPageButtonProps): React.ReactNode => {\n const tappableProps = getTappablePropsFromPaginationPage(restProps);\n\n if (typeof renderPageButton === 'function') {\n return renderPageButton(tappableProps);\n }\n\n return <Tappable {...tappableProps} />;\n};\n"],"names":["React","classNames","Tappable","Text","VisuallyHidden","getPaginationPageClassNames","getTappablePropsFromPaginationPage","opts","isCurrent","getPageLabel","children","className","disabled","sizeY","restProps","pageClassNames","pageLabel","undefined","normalize","PaginationPageButton","renderPageButton","tappableProps"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAA4B,6BAA0B;AACvE,SAASC,IAAI,QAAQ,gCAA6B;AAClD,SAASC,cAAc,QAAQ,yCAAsC;AAErE,SAASC,2BAA2B,QAAQ,gCAA6B;AAezE,MAAMC,qCAAqC,CACzCC;IAEA,MAAM,EACJC,YAAY,KAAK,EACjBC,YAAY,EACZC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,KAAK,EAEN,GAAGN,MADCO,uCACDP;QAPFC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAME,iBAAiBV,4BAA4B;QACjDG;QACAI;QACAC;IACF;IAEA,MAAMG,YAAYP,yBAAAA,mCAAAA,aAAeD;IACjC,OAAO;QACL,aAAaP,WAAWc,gBAAgBJ;QACxC,YAAY;QACZ,WAAW;QACX,oBAAoB;QACpB,gBAAgBH,YAAY,OAAOS;QACnC,YAAYL;QACZ,0BACE,MAACT;YAAKe,WAAW;;gBACdF,2BAAa,MAACZ;;wBAAgBY;wBAAU;;;gBACxCN;;;QAGL,aAAaA;OACVI;AAEP;AAIA,OAAO,MAAMK,uBAAuB;QAAC,EACnCC,gBAAgB,EAEU,WADvBN;QADHM;;IAGA,MAAMC,gBAAgBf,mCAAmCQ;IAEzD,IAAI,OAAOM,qBAAqB,YAAY;QAC1C,OAAOA,iBAAiBC;IAC1B;IAEA,qBAAO,KAACnB,6BAAamB;AACvB,EAAE"}

package/dist/components/Removable/Removable.d.ts CHANGED Viewed

@@ -41,11 +41,15 @@ interface RemovableOwnProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElemen
      * @since 5.4.0
      */
     indent?: boolean;
+    /**
+     * Убирает базовые отступы для базовой платформы
+     */
+    noPadding?: boolean;
     children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ children, onRemove, removePlaceholder, align, indent, toggleButtonTestId, removeButtonTestId, disabled, ...restProps }: RemovableOwnProps) => React.ReactNode;
+export declare const Removable: ({ children, onRemove, removePlaceholder, align, indent, toggleButtonTestId, removeButtonTestId, disabled, noPadding, ...restProps }: RemovableOwnProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=Removable.d.ts.map

package/dist/components/Removable/Removable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Removable.d.ts","sourceRoot":"","sources":["../../../src/components/Removable/Removable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6FD,UAAU,uBAAuB;IAC/B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,cAAc;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC1F;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,~~6HAUnB~~,iBAAiB,KAAG,KAAK,CAAC,~~SAqD5B~~,CAAC"}
1	+ {"version":3,"file":"Removable.d.ts","sourceRoot":"","sources":["../../../src/components/Removable/Removable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6FD,UAAU,uBAAuB;IAC/B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,cAAc;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC1F;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,wIAWnB,iBAAiB,KAAG,KAAK,CAAC,SA2D5B,CAAC"}

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

@@ -96,7 +96,7 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */ export const Removable = (_param)=>{
-    var { children, onRemove, removePlaceholder = 'Удалить', align = 'center', indent = false, toggleButtonTestId, removeButtonTestId, disabled } = _param, restProps = _object_without_properties(_param, [
+    var { children, onRemove, removePlaceholder = 'Удалить', align = 'center', indent = false, toggleButtonTestId, removeButtonTestId, disabled, noPadding } = _param, restProps = _object_without_properties(_param, [
         "children",
         "onRemove",
         "removePlaceholder",
@@ -104,7 +104,8 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         "indent",
         "toggleButtonTestId",
         "removeButtonTestId",
-        "disabled"
+        "disabled",
+        "noPadding"
     ]);
     const platform = usePlatform();
     const onRemoveClick = (e)=>{
@@ -116,7 +117,7 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
         baseClassName: classNames(platform === 'ios' && "vkuiRemovable__ios", align === 'start' && "vkuiRemovable__alignStart", indent && "vkuiRemovable__indent"),
         children: [
             platform !== 'ios' && /*#__PURE__*/ _jsxs("div", {
-                className: classNames("vkuiRemovable__content", 'vkuiInternalRemovable__content'),
+                className: classNames("vkuiRemovable__content", !noPadding && "vkuiRemovable__withPadding", 'vkuiInternalRemovable__content'),
                 children: [
                     typeof children === 'function' ? children({
                         isRemoving: false

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n /\n Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only)\n /\n toggleButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки удаления\n /\n removeButtonTestId?: string;\n /\n Ячейка превращается в неактивную\n /\n disabled?: boolean;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children: childrenProp,\n toggleButtonTestId,\n removeButtonTestId,\n disabled,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={classNames(styles.content, 'vkuiInternalRemovable__content')}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0 \|\| disabled}\n data-testid={toggleButtonTestId}\n >\n <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n <i className={styles.toggleIn} role=\"presentation\" />\n </IconButton>\n {typeof childrenProp === 'function'\n ? childrenProp({ isRemoving: removeOffset > 0 })\n : childrenProp}\n\n <span className={styles.offset} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles.remove}\n onClick={onRemove}\n data-testid={removeButtonTestId}\n >\n <span className={styles.removeIn}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableIosRenderProps {\n /\n Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n * Когда контент сдвинут `isRemoving = true`.\n /\n isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n RemovableProps {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n /\n Скрывает кнопку, но оставляет отступ.\n * @since 5.4.0\n /\n indent?: boolean;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n children,\n onRemove,\n removePlaceholder = 'Удалить',\n align = 'center',\n indent = false,\n toggleButtonTestId,\n removeButtonTestId,\n disabled,\n ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n const platform = usePlatform();\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove?.(e);\n };\n\n const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n platform === 'ios' && styles.ios,\n align === 'start' && styles.alignStart,\n indent && styles.indent,\n )}\n >\n {platform !== 'ios' && (\n <div className={classNames(styles.content, 'vkuiInternalRemovable__content')}>\n {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n onClick={onRemoveClick}\n label={removePlaceholderString}\n data-testid={removeButtonTestId}\n disabled={disabled}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles.offset} aria-hidden />\n </div>\n )}\n\n {platform === 'ios' && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n disabled={disabled}\n >\n {children}\n </RemovableIos>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon24Cancel","classNames","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","onClick","data-testid","i","role","isRemoving","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","onRemoveClick","preventDefault","baseClassName","activeMode","hoverMode","label"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n /*\n Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n /\n removePlaceholder?: React.ReactNode;\n /\n Коллбэк срабатывает при клике на контрол удаления.\n /\n onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement \| null) => void;\n /\n Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only)\n /\n toggleButtonTestId?: string;\n /\n Передает атрибут `data-testid` для кнопки удаления\n /\n removeButtonTestId?: string;\n /\n Ячейка превращается в неактивную\n /\n disabled?: boolean;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n removePlaceholderString?: string;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/RemovableIos\n /\nconst RemovableIos = ({\n onRemove,\n removePlaceholder,\n removePlaceholderString,\n children: childrenProp,\n toggleButtonTestId,\n removeButtonTestId,\n disabled,\n}: RemovableIosOwnProps) => {\n const { window } = useDOM();\n\n const removeButtonRef = React.useRef<HTMLElement>(null);\n const disabledRef = React.useRef(true);\n const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n useGlobalEventListener(\n window,\n 'click',\n () => {\n if (removeOffset > 0) {\n updateRemoveOffset(0);\n }\n },\n { capture: true },\n );\n\n const onRemoveTransitionEnd = () => {\n if (removeOffset > 0) {\n removeButtonRef?.current?.focus();\n } else {\n disabledRef.current = true;\n }\n };\n\n const onRemoveActivateClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!removeButtonRef.current) {\n return;\n }\n const { offsetWidth } = removeButtonRef.current;\n disabledRef.current = false;\n updateRemoveOffset(offsetWidth);\n };\n\n return (\n <div\n className={classNames(styles.content, 'vkuiInternalRemovable__content')}\n style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n onTransitionEnd={onRemoveTransitionEnd}\n >\n <IconButton\n hasActive={false}\n hasHover={false}\n className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n onClick={onRemoveActivateClick}\n disabled={removeOffset > 0 \|\| disabled}\n data-testid={toggleButtonTestId}\n >\n <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n <i className={styles.toggleIn} role=\"presentation\" />\n </IconButton>\n {typeof childrenProp === 'function'\n ? childrenProp({ isRemoving: removeOffset > 0 })\n : childrenProp}\n\n <span className={styles.offset} aria-hidden />\n\n <Tappable\n Component=\"button\"\n hasActive={false}\n hasHover={false}\n disabled={disabledRef.current}\n getRootRef={removeButtonRef}\n className={styles.remove}\n onClick={onRemove}\n data-testid={removeButtonTestId}\n >\n <span className={styles.removeIn}>{removePlaceholder}</span>\n </Tappable>\n </div>\n );\n};\n\ninterface RemovableIosRenderProps {\n /\n Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n * Когда контент сдвинут `isRemoving = true`.\n /\n isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n RemovableProps {\n /\n Расположение кнопки удаления.\n /\n align?: 'start' \| 'center';\n /\n Скрывает кнопку, но оставляет отступ.\n * @since 5.4.0\n /\n indent?: boolean;\n /\n Убирает базовые отступы для базовой платформы\n /\n noPadding?: boolean;\n children?: React.ReactNode \| ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n children,\n onRemove,\n removePlaceholder = 'Удалить',\n align = 'center',\n indent = false,\n toggleButtonTestId,\n removeButtonTestId,\n disabled,\n noPadding,\n ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n const platform = usePlatform();\n\n const onRemoveClick = (e: React.MouseEvent) => {\n e.preventDefault();\n onRemove?.(e);\n };\n\n const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n platform === 'ios' && styles.ios,\n align === 'start' && styles.alignStart,\n indent && styles.indent,\n )}\n >\n {platform !== 'ios' && (\n <div\n className={classNames(\n styles.content,\n !noPadding && styles.withPadding,\n 'vkuiInternalRemovable__content',\n )}\n >\n {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n <IconButton\n activeMode=\"opacity\"\n hoverMode=\"opacity\"\n className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n onClick={onRemoveClick}\n label={removePlaceholderString}\n data-testid={removeButtonTestId}\n disabled={disabled}\n >\n <Icon24Cancel role=\"presentation\" />\n </IconButton>\n\n <span className={styles.offset} aria-hidden />\n </div>\n )}\n\n {platform === 'ios' && (\n <RemovableIos\n onRemove={onRemoveClick}\n removePlaceholder={removePlaceholder}\n removePlaceholderString={removePlaceholderString}\n toggleButtonTestId={toggleButtonTestId}\n removeButtonTestId={removeButtonTestId}\n disabled={disabled}\n >\n {children}\n </RemovableIos>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon24Cancel","classNames","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","onClick","data-testid","i","role","isRemoving","span","aria-hidden","Component","getRootRef","Removable","align","indent","noPadding","restProps","platform","onRemoveClick","preventDefault","baseClassName","activeMode","hoverMode","label"],"mappings":"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"}

package/dist/components/TabbarItem/TabbarItem.d.ts CHANGED Viewed

@@ -14,5 +14,5 @@ export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-export declare const TabbarItem: ({ children, selected, indicator, label, href, Component, disabled, ...restProps }: TabbarItemProps) => React.ReactNode;
+export declare const TabbarItem: ({ children, selected, indicator, label, href, Component, disabled, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps }: TabbarItemProps) => React.ReactNode;
 //# sourceMappingURL=TabbarItem.d.ts.map

package/dist/components/TabbarItem/TabbarItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAI~~/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM5D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACzD,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,~~sFASpB~~,eAAe,KAAG,KAAK,CAAC,~~SAgD1B~~,CAAC"}
1	+ {"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM5D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACzD,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,gIAWpB,eAAe,KAAG,KAAK,CAAC,SA4D1B,CAAC"}

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

@@ -5,7 +5,10 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
+import { useFocusVisible } from "../../hooks/useFocusVisible.js";
+import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
+import { callMultiple } from "../../lib/callMultiple.js";
 import { COMMON_WARNINGS, warnOnce } from "../../lib/warnOnce.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Tappable } from "../Tappable/Tappable.js";
@@ -14,14 +17,16 @@ const warn = warnOnce('TabbarItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */ export const TabbarItem = (_param)=>{
-    var { children, selected, indicator, label, href, Component = href ? 'a' : 'button', disabled } = _param, restProps = _object_without_properties(_param, [
+    var { children, selected, indicator, label, href, Component = href ? 'a' : 'button', disabled, onFocus: onFocusProp, onBlur: onBlurProp } = _param, restProps = _object_without_properties(_param, [
         "children",
         "selected",
         "indicator",
         "label",
         "href",
         "Component",
-        "disabled"
+        "disabled",
+        "onFocus",
+        "onBlur"
     ]);
     const platform = usePlatform();
     if (process.env.NODE_ENV === 'development') {
@@ -30,10 +35,16 @@ const warn = warnOnce('TabbarItem');
             warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
         }
     }
+    const { focusVisible, onFocus: handleFocusVisibleOnFocus, onBlur: handleFocusVisibleOnBlur } = useFocusVisible();
+    const focusVisibleClassNames = useFocusVisibleClassName({
+        focusVisible
+    });
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
         Component: Component
     }, restProps), {
         disabled: disabled,
+        onFocus: callMultiple(handleFocusVisibleOnFocus, onFocusProp),
+        onBlur: callMultiple(handleFocusVisibleOnBlur, onBlurProp),
         href: href,
         baseClassName: classNames("vkuiTabbarItem__host", platform === 'ios' && "vkuiTabbarItem__ios", platform === 'android' && "vkuiTabbarItem__android", selected && "vkuiTabbarItem__selected"),
         children: [
@@ -43,8 +54,9 @@ const warn = warnOnce('TabbarItem');
                 activeMode: platform === 'ios' ? "vkuiTabbarItem__tappableActive" : 'background',
                 activeEffectDelay: platform === 'ios' ? 0 : 300,
                 hasHover: false,
-                className: "vkuiTabbarItem__tappable",
-                onClick: noop
+                className: classNames("vkuiTabbarItem__tappable", focusVisibleClassNames),
+                onClick: noop,
+                tabIndex: -1
             }),
             /*#__PURE__*/ _jsxs("div", {
                 className: "vkuiTabbarItem__in",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\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 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://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n label,\n href,\n Component = href ? 'a' : 'button',\n disabled,\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 return (\n <RootComponent\n Component={Component}\n {...restProps}\n disabled={disabled}\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 >\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={styles.tappable}\n onClick={noop}\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":["React","classNames","hasReactNode","noop","usePlatform","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAkB3D,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa;QAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,~~EAEQ~~,WADbC;~~QAPHP~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,~~MAAME~~,~~WAAWhB~~;IAEjB,~~IAAIiB~~,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,~~oBAAoBT~~,~~SAASI~~,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;~~YACtBd~~,KAAKL,~~gBAAgBoB~~,IAAI,~~CAACR~~,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,~~MAACV~~;QACCU,WAAWA;~~OACPE~~;~~QACJD~~,UAAUA;~~QACVF~~,MAAMA;~~QACNU~~,~~eAAezB~~,~~mCAEbmB~~,aAAa,gCACbA,aAAa,~~wCACbP~~;;0BAGF,KAACL;~~gBACCmB~~,MAAK;~~gBACLT~~,UAAUA;~~gBACVU~~,~~YAAYR~~,aAAa,2CAAgC;~~gBACzDS~~,~~mBAAmBT~~,aAAa,QAAQ,IAAI;~~gBAC5CU~~,UAAU;gBACVC,~~SAAS~~;~~gBACTC~~,~~SAAS7B~~;;~~0BAEX~~,~~MAAC8B~~;~~gBAAIF~~,SAAS;;kCACZ,~~MAACE~~;~~wBAAIF~~,SAAS;;~~4BACXnB~~;0CACD,~~KAACqB~~;~~gCAAIF~~,WAAU;~~0CACZ7B~~,~~aAAaY~~,cAAcA;;;;oBAG/BC,uBACC,KAACN;wBAASQ,WAAU;~~wBAAMc~~,SAAS;~~wBAAgBG~~,QAAO;~~kCACvDnB~~;;;;;;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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 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://vkcom.github.io/VKUI/#/TabbarItem\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 {...restProps}\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 >\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":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","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","role","activeMode","activeEffectDelay","hasHover","className","onClick","tabIndex","div","weight"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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;AAkB3D,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa;QAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAEF,WADbC;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAMG,WAAWrB;IAEjB,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKL,gBAAgBwB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAG/B;IACJ,MAAMgC,yBAAyB/B,yBAAyB;QACtD4B;IACF;IAEA,qBACE,MAACvB;QACCU,WAAWA;OACPM;QACJL,UAAUA;QACVC,SAASf,aAAa2B,2BAA2BX;QACjDC,QAAQjB,aAAa4B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAepC,mCAEb0B,aAAa,gCACbA,aAAa,wCACbX;;0BAGF,KAACL;gBACC2B,MAAK;gBACLjB,UAAUA;gBACVkB,YAAYZ,aAAa,2CAAgC;gBACzDa,mBAAmBb,aAAa,QAAQ,IAAI;gBAC5Cc,UAAU;gBACVC,WAAWzC,uCAA4BmC;gBACvCO,SAASxC;gBACTyC,UAAU,CAAC;;0BAEb,MAACC;gBAAIH,SAAS;;kCACZ,MAACG;wBAAIH,SAAS;;4BACX3B;0CACD,KAAC8B;gCAAIH,WAAU;0CACZxC,aAAae,cAAcA;;;;oBAG/BC,uBACC,KAACN;wBAASQ,WAAU;wBAAMsB,SAAS;wBAAgBI,QAAO;kCACvD5B;;;;;;AAMb,EAAE"}

package/dist/components/TooltipBase/TooltipBase.d.ts CHANGED Viewed

@@ -15,6 +15,11 @@ export interface TooltipBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDiv
      * Заголовок тултипа.
      */
     title?: React.ReactNode;
+    /**
+     * [a11y] Id для заголовка тултипа.
+     * Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`
+     */
+    titleId?: string;
     /**
      * Для показа указателя, требуется передать хотя бы `coords` и `placement`.
      */
@@ -58,5 +63,5 @@ export interface TooltipBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDiv
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  * @private
  */
-export declare const TooltipBase: ({ appearance, arrowProps, ArrowIcon, description, title, maxWidth, closeIconLabel, onCloseIconClick, className, ...restProps }: TooltipBaseProps) => React.ReactNode;
+export declare const TooltipBase: ({ appearance, arrowProps, ArrowIcon, description, title, titleId, maxWidth, closeIconLabel, onCloseIconClick, className, ...restProps }: TooltipBaseProps) => React.ReactNode;
 //# sourceMappingURL=TooltipBase.d.ts.map

package/dist/components/TooltipBase/TooltipBase.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAOxF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AASrC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC9C;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,~~mIAWrB~~,gBAAgB,KAAG,KAAK,CAAC,SA4C3B,CAAC"}
1	+ {"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAOxF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AASrC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC9C;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,4IAYrB,gBAAgB,KAAG,KAAK,CAAC,SA4C3B,CAAC"}

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

@@ -25,12 +25,13 @@ const stylesAppearance = {
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  * @private
  */ export const TooltipBase = (_param)=>{
-    var { appearance = 'accent', arrowProps, ArrowIcon = DefaultIcon, description, title, maxWidth = TOOLTIP_MAX_WIDTH, closeIconLabel = 'Закрыть', onCloseIconClick, className } = _param, restProps = _object_without_properties(_param, [
+    var { appearance = 'accent', arrowProps, ArrowIcon = DefaultIcon, description, title, titleId, maxWidth = TOOLTIP_MAX_WIDTH, closeIconLabel = 'Закрыть', onCloseIconClick, className } = _param, restProps = _object_without_properties(_param, [
         "appearance",
         "arrowProps",
         "ArrowIcon",
         "description",
         "title",
+        "titleId",
         "maxWidth",
         "closeIconLabel",
         "onCloseIconClick",
@@ -53,6 +54,7 @@ const stylesAppearance = {
                     /*#__PURE__*/ _jsxs("div", {
                         children: [
                             hasReactNode(title) && /*#__PURE__*/ _jsx(Subhead, {
+                                id: titleId,
                                 className: "vkuiTooltipBase__title",
                                 weight: "2",
                                 children: title

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * 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 Для показа указателя, требуется передать хотя бы `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 * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n * @private\n */\nexport const TooltipBase = ({\n appearance = 'accent',\n arrowProps,\n ArrowIcon = DefaultIcon,\n description,\n title,\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 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":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","role","iconClassName","Icon","div","style","undefined","weight","Component","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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;AAGlE,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;~~AAsDA~~;;;;;CAKC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYf,WAAW,EACvBgB,WAAW,EACXC,KAAK,EACLC,~~WAAWZ~~,iBAAiB,~~EAC5Ba~~,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EAEQ,WADdC;~~QATHT~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,~~MAACnB~~,~~uDACKoB~~;QACJC,~~eAAezB~~,oCAEbe,eAAe,aAAaN,gBAAgB,CAACM,WAAW,~~EACxDQ~~;QAEFG,MAAK;;~~YAEJV~~,4BACC,KAACb,uDACKa;~~gBACJW~~,~~eAAe3B~~,qCAAyBgB,~~WAAWW~~,aAAa;gBAChEC,~~MAAMX~~;;0BAGV,~~MAACY~~;gBAAIN,SAAS;gBAAkBO,OAAOV,aAAa,OAAO;oBAAEA;gBAAS,IAAIW;;kCACxE,MAACF;;~~4BACE5B~~,aAAakB,wBACZ,KAACb;~~gCAAQiB~~,SAAS;~~gCAAgBS~~,QAAO;~~0CACtCb~~;;4BAGJlB,aAAaiB,8BACZ,KAACZ;~~gCAAQiB~~,SAAS;~~0CAAuBL~~;;;;oBAG5C,~~OAAOI~~,qBAAqB,4BAC3B,~~MAACjB~~;~~wBACC4B~~,WAAU;~~wBACVV~~,SAAS;~~wBACTW~~,WAAU;wBACVC,YAAW;wBACXC,~~SAASd~~;;0CAET,~~KAACf~~;~~0CAAgBc~~;;0CACjB,~~KAACtB~~;~~gCAAasC~~,SAAQ;;;;;;;;AAMlC,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * 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 * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\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":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","titleId","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","role","iconClassName","Icon","div","style","undefined","id","weight","Component","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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;AAGlE,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AA2DA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYf,WAAW,EACvBgB,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,WAAWb,iBAAiB,EAC5Bc,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EAEQ,WADdC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACpB,uDACKqB;QACJC,eAAe1B,oCAEbe,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDS;QAEFG,MAAK;;YAEJX,4BACC,KAACb,uDACKa;gBACJY,eAAe5B,qCAAyBgB,WAAWY,aAAa;gBAChEC,MAAMZ;;0BAGV,MAACa;gBAAIN,SAAS;gBAAkBO,OAAOV,aAAa,OAAO;oBAAEA;gBAAS,IAAIW;;kCACxE,MAACF;;4BACE7B,aAAakB,wBACZ,KAACb;gCAAQ2B,IAAIb;gCAASI,SAAS;gCAAgBU,QAAO;0CACnDf;;4BAGJlB,aAAaiB,8BACZ,KAACZ;gCAAQkB,SAAS;0CAAuBN;;;;oBAG5C,OAAOK,qBAAqB,4BAC3B,MAAClB;wBACC8B,WAAU;wBACVX,SAAS;wBACTY,WAAU;wBACVC,YAAW;wBACXC,SAASf;;0CAET,KAAChB;0CAAgBe;;0CACjB,KAACvB;gCAAawC,SAAQ;;;;;;;;AAMlC,EAAE"}