@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { HasComponent, HasDataAttribute } from '../../types';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent &\n  HasDataAttribute & {\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(\n  ({ fixed = false, Component = 'div', ...props }, ref) => {\n    const dataProps = {\n      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',\n    };\n\n    return <Component {...dataProps} {...props} ref={ref} />;\n  },\n);\n\nOnboardingTooltipContainer.displayName = 'OnboardingTooltipContainer';\n"],"names":["React","onboardingTooltipContainerAttr","OnboardingTooltipContainer","forwardRef","fixed","Component","props","ref","dataProps","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,iCAAiC,oCAAoC;AAQlF,OAAO,MAAMC,2CAETF,MAAMG,UAAU,CAClB,CAAC,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAO,EAAEC;IAC/C,MAAMC,YAAY;QAChB,CAACP,+BAA+B,EAAEG,QAAQ,UAAU;IACtD;IAEA,qBAAO,KAACC;QAAW,GAAGG,SAAS;QAAG,GAAGF,KAAK;QAAEC,KAAKA;;AACnD,GACA;AAEFL,2BAA2BO,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasComponent, HasDataAttribute } from '../../types';\nimport { OnboardingTooltipContext } from './OnboardingTooltipContext';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent &\n  HasDataAttribute & {\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer: React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>\n> = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(\n  ({ fixed = false, Component = 'div', ...props }, ref) => {\n    const containerRef = useExternRef(ref);\n    const dataProps = {\n      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',\n    };\n\n    return (\n      <OnboardingTooltipContext.Provider value={{ containerRef }}>\n        <Component {...dataProps} {...props} ref={containerRef} />\n      </OnboardingTooltipContext.Provider>\n    );\n  },\n);\n\nOnboardingTooltipContainer.displayName = 'OnboardingTooltipContainer';\n"],"names":["React","useExternRef","OnboardingTooltipContext","onboardingTooltipContainerAttr","OnboardingTooltipContainer","forwardRef","fixed","Component","props","ref","containerRef","dataProps","Provider","value","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SAASC,wBAAwB,QAAQ,gCAA6B;AAEtE,OAAO,MAAMC,iCAAiC,oCAAoC;AAQlF,OAAO,MAAMC,2CAETJ,MAAMK,UAAU,CAClB,CAAC,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAO,EAAEC;IAC/C,MAAMC,eAAeT,aAAaQ;IAClC,MAAME,YAAY;QAChB,CAACR,+BAA+B,EAAEG,QAAQ,UAAU;IACtD;IAEA,qBACE,KAACJ,yBAAyBU,QAAQ;QAACC,OAAO;YAAEH;QAAa;kBACvD,cAAA,KAACH;YAAW,GAAGI,SAAS;YAAG,GAAGH,KAAK;YAAEC,KAAKC;;;AAGhD,GACA;AAEFN,2BAA2BU,WAAW,GAAG"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContext.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+export const OnboardingTooltipContext = /*#__PURE__*/ React.createContext({
+    containerRef: {
+        current: null
+    }
+});
+export const useOnboardingTooltipContext = ()=>React.useContext(OnboardingTooltipContext);
+
+//# sourceMappingURL=OnboardingTooltipContext.js.map

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltipContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface OnboardingTooltipContextValue {\n  containerRef: React.RefObject<HTMLElement | null>;\n}\n\nexport const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({\n  containerRef: { current: null },\n});\n\nexport const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);\n"],"names":["React","OnboardingTooltipContext","createContext","containerRef","current","useOnboardingTooltipContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,yCAA2BD,MAAME,aAAa,CAAgC;IACzFC,cAAc;QAAEC,SAAS;IAAK;AAChC,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAML,MAAMM,UAAU,CAACL,0BAA0B"}

package/dist/cssm/components/Pagination/Pagination.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from "@vkontakte/icons";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePagination } from "../../hooks/usePagination.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
@@ -13,6 +14,8 @@ import styles from "./Pagination.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
  */ export const Pagination = ({ currentPage = 1, siblingCount = 1, boundaryCount = 1, totalPages = 1, disabled, prevButtonCaption = 'Назад', nextButtonCaption = 'Вперёд', navigationButtonsStyle = 'icon', getPageLabel, navigationLabel = 'Страницы', navigationLabelComponent = 'h2', prevButtonLabel = 'Перейти на предыдущую страницу', nextButtonLabel = 'Перейти на следующую страницу', onChange, renderPageButton, pageButtonTestId, prevButtonTestId, nextButtonTestId, renderNavigationButton, ...resetProps })=>{
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const pages = usePagination({
         currentPage,
         totalPages,
@@ -104,7 +107,7 @@ import styles from "./Pagination.module.css";
                             type: "prev",
                             style: navigationButtonsStyle,
                             caption: prevButtonCaption,
-                            Icon: Icon24ChevronCompactLeft,
+                            Icon: isRtl ? Icon24ChevronCompactRight : Icon24ChevronCompactLeft,
                             a11yLabel: prevButtonLabel,
                             disabled: isFirstPage || disabled,
                             onClick: handlePrevClick,
@@ -120,7 +123,7 @@ import styles from "./Pagination.module.css";
                             type: "next",
                             style: navigationButtonsStyle,
                             caption: nextButtonCaption,
-                            Icon: Icon24ChevronCompactRight,
+                            Icon: isRtl ? Icon24ChevronCompactLeft : Icon24ChevronCompactRight,
                             a11yLabel: nextButtonLabel,
                             disabled: isLastPage || disabled,
                             onClick: handleNextClick,

package/dist/cssm/components/Pagination/Pagination.js.map

@@ -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 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","styles","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","list","prevButtonContainer","type","style","caption","Icon","a11yLabel","data-page","map","nextButtonContainer"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,yBAAyB,QAAQ,mBAAmB;AACvF,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAAkCC,aAAa,QAAQ,+BAA4B;AAEnF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAEEC,0BAA0B,QAErB,6DAA0D;AACjE,SAEEC,oBAAoB,QACf,2CAAwC;AAC/C,SAASC,sBAAsB,QAAQ,6CAA0C;AACjF,OAAOC,YAAY,0BAA0B;AA6F7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,cAAc,CAAC,EACfC,eAAe,CAAC,EAChBC,gBAAgB,CAAC,EACjBC,aAAa,CAAC,EACdC,QAAQ,EACRC,oBAAoB,OAAO,EAC3BC,oBAAoB,QAAQ,EAC5BC,yBAAyB,MAAM,EAC/BC,YAAY,EACZC,kBAAkB,UAAU,EAC5BC,2BAA2B,IAAI,EAC/BC,kBAAkB,gCAAgC,EAClDC,kBAAkB,+BAA+B,EACjDC,QAAQ,EACRC,gBAAgB,EAChBC,gBAAgB,EAChBC,gBAAgB,EAChBC,gBAAgB,EAChBC,sBAAsB,EACtB,GAAGC,YACa;IAChB,MAAMC,QAAQ5B,cAAc;QAC1BQ;QACAG;QACAF;QACAC;IACF;IACA,MAAMmB,cAAcrB,gBAAgB;IACpC,MAAMsB,aAAatB,gBAAgBG;IACnC,MAAMoB,WAAWF,cAAcG,YAAYxB,cAAc;IACzD,MAAMyB,WAAWH,aAAaE,YAAYxB,cAAc;IAExD,MAAM0B,kBAAkBtC,MAAMuC,WAAW,CACvC,CAACC;QACC,IAAIf,YAAYU,aAAaC,WAAW;YACtCX,SAASU,UAAUK;QACrB;IACF,GACA;QAACL;QAAUV;KAAS;IAGtB,MAAMgB,cAAczC,MAAMuC,WAAW,CACnC,CAACC;QACC,MAAME,OAAeF,MAAMG,aAAa,CAACC,OAAO,CAACF,IAAI,IAAI;QACzDjB,WAAWoB,OAAOH,OAAOF;IAC3B,GACA;QAACf;KAAS;IAGZ,MAAMqB,kBAAkB9C,MAAMuC,WAAW,CACvC,CAACC;QACC,IAAIf,YAAYY,aAAaD,WAAW;YACtCX,SAASY,UAAUG;QACrB;IACF,GACA;QAACH;QAAUZ;KAAS;IAGtB,MAAM,EAAEsB,KAAK,EAAE,GAAG5C;IAElB,MAAM6C,cAAchD,MAAMuC,WAAW,CACnC,CAACG;QACC,MAAMO,YAAYP,SAAS9B;QAC3B,MAAMsC,aAAavB,mBAAmBe,MAAMO;QAE5C,OAAQP;YACN,KAAK;YACL,KAAK;gBACH,qBACE,KAACS;8BACC,cAAA,KAAC1C;wBAAuBO,UAAUA;wBAAUoC,eAAaF;;mBADlDR;YAIb;gBAAS;oBACP,qBACE,KAACS;kCACC,cAAA,KAAC3C;4BACCY,cAAcA;4BACd6B,WAAWA;4BACXI,SAASZ;4BACTzB,UAAUA;4BACV+B,OAAOA;4BACPrB,kBAAkBA;4BAClB0B,eAAaF;sCAEZR;;uBAVIA;gBAcb;QACF;IACF,GACA;QAAC9B;QAAaI;QAAUI;QAAcqB;QAAaf;QAAkBqB;QAAOpB;KAAiB;IAG/F,MAAM2B,oBAAoBtD,MAAMuD,KAAK;IAErC,qBACE,MAAClD;QACCmD,WAAU;QACVC,MAAK;QACLC,mBAAiBJ;QAChB,GAAGvB,UAAU;;0BAEd,KAACzB;gBAAeqD,IAAIL;gBAAmBE,WAAWlC;0BAC/CD;;0BAEH,MAACuC;gBAAGC,WAAWnD,OAAOoD,IAAI;;kCACxB,KAACX;wBAAGU,WAAWnD,OAAOqD,mBAAmB;kCACvC,cAAA,KAACxD;4BACCyD,MAAK;4BACLC,OAAO9C;4BACP+C,SAASjD;4BACTkD,MAAMlE;4BACNmE,WAAW7C;4BACXP,UAAUiB,eAAejB;4BACzBqC,SAASf;4BACT+B,aAAWlC;4BACXiB,eAAaxB;4BACbE,wBAAwBA;;;oBAG3BE,MAAMsC,GAAG,CAACtB;kCACX,KAACG;wBAAGU,WAAWnD,OAAO6D,mBAAmB;kCACvC,cAAA,KAAChE;4BACCyD,MAAK;4BACLC,OAAO9C;4BACP+C,SAAShD;4BACTiD,MAAMjE;4BACNkE,WAAW5C;4BACXR,UAAUkB,cAAclB;4BACxBqC,SAASP;4BACTuB,aAAWhC;4BACXe,eAAavB;4BACbC,wBAAwBA;;;;;;;AAMpC,EAAE"}
+{"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 { useConfigDirection } from '../../hooks/useConfigDirection';\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 direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\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={isRtl ? Icon24ChevronCompactRight : 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={isRtl ? Icon24ChevronCompactLeft : 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","useConfigDirection","usePagination","RootComponent","VisuallyHidden","PaginationNavigationButton","PaginationPageButton","PaginationPageEllipsis","styles","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","prevButtonCaption","nextButtonCaption","navigationButtonsStyle","getPageLabel","navigationLabel","navigationLabelComponent","prevButtonLabel","nextButtonLabel","onChange","renderPageButton","pageButtonTestId","prevButtonTestId","nextButtonTestId","renderNavigationButton","resetProps","direction","isRtl","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","list","prevButtonContainer","type","style","caption","Icon","a11yLabel","data-page","map","nextButtonContainer"],"mappings":"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"}

package/dist/cssm/components/Pagination/Pagination.module.css

@@ -1,7 +1,7 @@
 .list {
   display: flex;
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style-type: none;
 }
 

package/dist/cssm/components/Pagination/PaginationPage/PaginationPage.module.css

@@ -1,19 +1,19 @@
 /* Page styles */
 .host {
   box-sizing: border-box;
-  padding-inline: 8px;
+  display: block;
   inline-size: 100%;
   min-inline-size: 40px;
-  border-radius: var(--vkui--size_border_radius--regular);
-  text-align: center;
+  block-size: var(--vkui--size_button_large_height--regular);
+  padding-inline: 8px;
+  line-height: var(--vkui--size_button_large_height--regular);
   color: var(--vkui--color_text_secondary);
+  text-align: center;
+  text-decoration: none;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  block-size: var(--vkui--size_button_large_height--regular);
-  line-height: var(--vkui--size_button_large_height--regular);
-  display: block;
-  text-decoration: none;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 .stateHover {
   background-color: var(--vkui--color_transparent--hover);
@@ -27,13 +27,13 @@
   opacity: var(--vkui--opacity_disable);
 }
 .sizeYCompact {
-  line-height: var(--vkui--size_button_large_height--compact);
   block-size: var(--vkui--size_button_large_height--compact);
+  line-height: var(--vkui--size_button_large_height--compact);
 }
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
-    line-height: var(--vkui--size_button_large_height--compact);
     block-size: var(--vkui--size_button_large_height--compact);
+    line-height: var(--vkui--size_button_large_height--compact);
   }
 }
 .typeEllipsis {

package/dist/cssm/components/Panel/Panel.module.css

@@ -7,19 +7,19 @@
 .in {
   position: relative;
   box-sizing: border-box;
-  inline-size: 100%;
-  min-block-size: 100%;
   display: flex;
   flex-direction: column;
+  inline-size: 100%;
+  min-block-size: 100%;
 }
 
 .centered {
+  box-sizing: border-box;
   display: flex;
   flex: 1 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
 }
 
 /* stylelint-disable selector-max-universal */

package/dist/cssm/components/PanelHeader/PanelHeader.module.css

@@ -8,9 +8,9 @@
 }
 
 .host:not(.static):not(.hasFixed) {
-  block-size: 0;
   /* см. https://github.com/VKCOM/VKUI/issues/5571 */
   z-index: var(--vkui_internal--z_index_panel_header);
+  block-size: 0;
 }
 
 .fixed {
@@ -18,11 +18,11 @@
 }
 
 .in {
+  position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   white-space: nowrap;
-  position: relative;
   background: var(--vkui--color_background_content);
 }
 
@@ -42,9 +42,9 @@
 
 .before {
   box-sizing: border-box;
-  color: var(--vkui--color_icon_accent_themed);
   display: flex;
   flex-shrink: 0;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .content {
@@ -60,9 +60,9 @@
 }
 
 .contentIn {
-  color: var(--vkui--color_text_primary);
-  font-weight: 500;
   font-family: var(--vkui--font_family_accent);
+  font-weight: 500;
+  color: var(--vkui--color_text_primary);
 }
 
 .host::before,
@@ -73,10 +73,10 @@
 }
 
 .after {
+  box-sizing: border-box;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  box-sizing: border-box;
+  justify-content: flex-end;
   color: var(--vkui--color_icon_accent_themed);
 }
 
@@ -92,20 +92,20 @@
  */
 
 .ios .before {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  flex-shrink: 0;
+  flex-basis: 0;
   padding-block: 4px;
   padding-inline: 4px 0;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
 }
 
 .ios .before .host + .primitive {
-  -webkit-margin-start: -6px;
-          margin-inline-start: -6px;
   -webkit-padding-start: 0;
           padding-inline-start: 0;
+  -webkit-margin-start: -6px;
+          margin-inline-start: -6px;
 }
 
 .ios .content {
@@ -143,13 +143,13 @@
 }
 
 .ios .after {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  flex-shrink: 0;
+  flex-basis: 0;
   padding-block: 4px;
   padding-inline: 0 4px;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
 }
 
 /**
@@ -164,8 +164,8 @@
 }
 
 .android .content {
-  align-items: center;
   flex-grow: 1;
+  align-items: center;
   max-inline-size: 100%;
 }
 
@@ -283,43 +283,43 @@
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp)
   .in::after {
   position: absolute;
-  inset-inline: var(--vkui--size_border--regular);
   inset-block-end: 0;
+  inset-inline: var(--vkui--size_border--regular);
   block-size: var(--vkui--size_border--regular);
-  background-color: var(--vkui--color_background_content);
   content: '';
+  background-color: var(--vkui--color_background_content);
 }
 
 @media (min-width: 768px) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .vkcom.sizeXNone:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp) .in::after {
     position: absolute;
-    inset-inline: var(--vkui--size_border--regular);
     inset-block-end: 0;
+    inset-inline: var(--vkui--size_border--regular);
     block-size: var(--vkui--size_border--regular);
-    background-color: var(--vkui--color_background_content);
     content: '';
+    background-color: var(--vkui--color_background_content);
   }
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.trnsp) .in {
+  -webkit-border-after: 0;
+          border-block-end: 0;
   border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
   border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
   box-shadow: 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset;
-  -webkit-border-after: 0;
-          border-block-end: 0;
 }
 
 @media (min-width: 768px) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .vkcom.sizeXNone:not(:global(.vkuiInternalModalPageHeader__in)):not(.trnsp) .in {
+    -webkit-border-after: 0;
+            border-block-end: 0;
     border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
     border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
     box-shadow: 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset;
-    -webkit-border-after: 0;
-            border-block-end: 0;
   }
 }
 
@@ -334,9 +334,9 @@
 
 .vkcom .before,
 .vkcom .after {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
 }
 
 .separator {
@@ -360,7 +360,7 @@
 
 :global(.vkuiInternalPanel--centered) .host {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
 }

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Icon20ChevronLeftOutline, Icon24ArrowLeftOutline, Icon28ArrowLeftOutline, Icon28ChevronBack, Icon28ChevronLeftOutline } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { AdaptiveIconRenderer } from "../AdaptiveIconRenderer/AdaptiveIconRenderer.js";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton.js";
@@ -33,13 +34,14 @@ const getBackIcon = (platform)=>{
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ export const PanelHeaderBack = ({ label = 'Назад', className, hideLabelOnVKCom = false, hideLabelOnIOS = false, ...restProps })=>{
     const platform = usePlatform();
+    const direction = useConfigDirection();
     const { sizeX = 'none' } = useAdaptivity();
     // также label нужно скрывать при platform === 'ios' && sizeX === regular
     // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
     const showLabel = platform === 'vkcom' && !hideLabelOnVKCom || platform === 'ios' && !hideLabelOnIOS;
     return /*#__PURE__*/ _jsx(PanelHeaderButton, {
         ...restProps,
-        className: classNames(sizeX !== 'regular' && sizeXClassNames[sizeX], platform === 'ios' && styles.backIos, platform === 'vkcom' && styles.backVkcom, showLabel && !!label && styles.backHasLabel, className),
+        className: classNames(sizeX !== 'regular' && sizeXClassNames[sizeX], platform === 'ios' && styles.backIos, platform === 'vkcom' && styles.backVkcom, showLabel && !!label && styles.backHasLabel, direction === 'rtl' && styles.rtl, className),
         label: showLabel ? label : label && /*#__PURE__*/ _jsx(VisuallyHidden, {
             children: label
         }),

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nconst sizeXClassNames = {\n  none: styles.backSizeXNone,\n  compact: styles.backSizeXCompact,\n};\n\nexport type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {\n  hideLabelOnVKCom?: boolean;\n  hideLabelOnIOS?: boolean;\n};\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label = 'Назад',\n  className,\n  hideLabelOnVKCom = false,\n  hideLabelOnIOS = false,\n  ...restProps\n}: PanelHeaderBackProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel =\n    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n        platform === 'ios' && styles.backIos,\n        platform === 'vkcom' && styles.backVkcom,\n        showLabel && !!label && styles.backHasLabel,\n        className,\n      )}\n      label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","sizeXClassNames","none","backSizeXNone","compact","backSizeXCompact","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","hideLabelOnVKCom","hideLabelOnIOS","restProps","sizeX","showLabel","backIos","backVkcom","backHasLabel"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAEvE,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,aAAa;IAC1BC,SAASJ,OAAOK,gBAAgB;AAClC;AAOA,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAACf;QACV,KAAK;YACH,qBACE,KAACK;gBACCW,aAAanB;gBACboB,aAAahB;;QAGnB;YACE,qBACE,KAACI;gBACCW,aAAalB;gBACbmB,aAAalB;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmB,kBAAkB,CAAC,EAC9BC,QAAQ,OAAO,EACfC,SAAS,EACTC,mBAAmB,KAAK,EACxBC,iBAAiB,KAAK,EACtB,GAAGC,WACkB;IACrB,MAAMR,WAAWX;IACjB,MAAM,EAAEoB,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMsB,YACJ,AAACV,aAAa,WAAW,CAACM,oBAAsBN,aAAa,SAAS,CAACO;IAEzE,qBACE,KAAChB;QACE,GAAGiB,SAAS;QACbH,WAAWlB,WACTsB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CT,aAAa,SAASP,OAAOkB,OAAO,EACpCX,aAAa,WAAWP,OAAOmB,SAAS,EACxCF,aAAa,CAAC,CAACN,SAASX,OAAOoB,YAAY,EAC3CR;QAEFD,OAAOM,YAAYN,QAAQA,uBAAS,KAACZ;sBAAgBY;;kBAEpDL,YAAYC;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nconst sizeXClassNames = {\n  none: styles.backSizeXNone,\n  compact: styles.backSizeXCompact,\n};\n\nexport type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {\n  hideLabelOnVKCom?: boolean;\n  hideLabelOnIOS?: boolean;\n};\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label = 'Назад',\n  className,\n  hideLabelOnVKCom = false,\n  hideLabelOnIOS = false,\n  ...restProps\n}: PanelHeaderBackProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel =\n    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n        platform === 'ios' && styles.backIos,\n        platform === 'vkcom' && styles.backVkcom,\n        showLabel && !!label && styles.backHasLabel,\n        direction === 'rtl' && styles.rtl,\n        className,\n      )}\n      label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","useConfigDirection","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","sizeXClassNames","none","backSizeXNone","compact","backSizeXCompact","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","hideLabelOnVKCom","hideLabelOnIOS","restProps","direction","sizeX","showLabel","backIos","backVkcom","backHasLabel","rtl"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAEvE,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,aAAa;IAC1BC,SAASJ,OAAOK,gBAAgB;AAClC;AAOA,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAAChB;QACV,KAAK;YACH,qBACE,KAACM;gBACCW,aAAapB;gBACbqB,aAAajB;;QAGnB;YACE,qBACE,KAACK;gBACCW,aAAanB;gBACboB,aAAanB;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMoB,kBAAkB,CAAC,EAC9BC,QAAQ,OAAO,EACfC,SAAS,EACTC,mBAAmB,KAAK,EACxBC,iBAAiB,KAAK,EACtB,GAAGC,WACkB;IACrB,MAAMR,WAAWX;IACjB,MAAMoB,YAAYrB;IAClB,MAAM,EAAEsB,QAAQ,MAAM,EAAE,GAAGvB;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMwB,YACJ,AAACX,aAAa,WAAW,CAACM,oBAAsBN,aAAa,SAAS,CAACO;IAEzE,qBACE,KAAChB;QACE,GAAGiB,SAAS;QACbH,WAAWnB,WACTwB,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CV,aAAa,SAASP,OAAOmB,OAAO,EACpCZ,aAAa,WAAWP,OAAOoB,SAAS,EACxCF,aAAa,CAAC,CAACP,SAASX,OAAOqB,YAAY,EAC3CL,cAAc,SAAShB,OAAOsB,GAAG,EACjCV;QAEFD,OAAOO,YAAYP,QAAQA,uBAAS,KAACZ;sBAAgBY;;kBAEpDL,YAAYC;;AAGnB,EAAE"}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -1,15 +1,15 @@
 .host {
+  position: relative;
+  display: block;
+  padding: 0;
+  margin: 0;
+  color: currentColor;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background: none;
   border: 0;
   box-shadow: none;
-  display: block;
-  color: currentColor;
-  padding: 0;
-  margin: 0;
-  position: relative;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -24,11 +24,19 @@
 
 .primitive {
   block-size: 48px;
-  line-height: 48px;
   padding-block: 0;
   padding-inline: 10px;
+  line-height: 48px;
+}
+
+/* stylelint-disable selector-max-type */
+
+.rtl svg {
+  transform: scaleX(-1);
 }
 
+/* stylelint-enable selector-max-type */
+
 /*
  * iOS
  */
@@ -97,8 +105,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .vkcom > :not(:global(.vkuiInternalBadge)):not(:global(.vkuiInternalCounter)) {
-  transition: opacity 0.3s;
   opacity: 0.7;
+  transition: opacity 0.3s;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -150,9 +158,9 @@
 
 .host :global(.vkuiInternalCounter) {
   position: absolute;
-  padding: 0;
   inset-block-start: 4px;
   inset-inline-end: 4px;
+  padding: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.module.css

@@ -1,12 +1,12 @@
 .host {
-  line-height: initial;
-  block-size: 100%;
-  max-inline-size: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  max-inline-size: 100%;
+  block-size: 100%;
   font-family: var(--vkui--font_family_base);
+  line-height: initial;
 }
 
 .before {
@@ -16,12 +16,12 @@
 }
 
 .in {
-  flex-grow: 1;
-  min-inline-size: 0;
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
+  min-inline-size: 0;
   block-size: 100%;
 }
 
@@ -29,22 +29,22 @@
 .childrenIn,
 .childrenText {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .subtitle {
   order: 1;
+  max-inline-size: 100%;
   -webkit-margin-before: 1px;
           margin-block-start: 1px;
-  max-inline-size: 100%;
   color: var(--vkui--color_text_secondary);
 }
 
 .children {
-  max-inline-size: 100%;
   display: flex;
   align-items: center;
+  max-inline-size: 100%;
 }
 
 .childrenIn {
@@ -74,8 +74,8 @@
  */
 
 .ios .childrenIn {
-  font-size: 21px;
   font-family: var(--vkui--font_family_accent);
+  font-size: 21px;
   font-weight: 500;
   line-height: var(--vkui_internal--panel_header_height);
 }
@@ -85,8 +85,8 @@
  */
 
 .android .childrenIn {
-  font-size: 23px;
   font-family: var(--vkui--font_family_accent);
+  font-size: 23px;
   font-weight: 500;
   line-height: var(--vkui_internal--panel_header_height);
 }

package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.module.css

@@ -22,21 +22,21 @@
 
 .in {
   position: absolute;
-  z-index: 1;
   inset-inline-start: 0;
+  z-index: 1;
+  box-sizing: border-box;
   inline-size: 100%;
   padding: 8px;
-  box-sizing: border-box;
 }
 
 .fade {
-  display: var(--vkui_internal--PanelHeaderContext__fade_display);
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 0;
+  display: var(--vkui_internal--PanelHeaderContext__fade_display);
   inline-size: 100%;
   block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
   background: rgba(0, 0, 0, 0.4);
 }
 
@@ -83,16 +83,16 @@
 
 .host:not(.ios) .content,
 .sizeXRegular.ios .content {
-  border-radius: 12px;
   padding-block: 8px;
   padding-inline: 0;
+  border-radius: 12px;
 }
 
 @media (min-width: 768px) {
   .sizeXNone.ios .content {
-    border-radius: 12px;
     padding-block: 8px;
     padding-inline: 0;
+    border-radius: 12px;
   }
 }
 

package/dist/cssm/components/Placeholder/Placeholder.module.css

@@ -1,10 +1,10 @@
 .host {
+  box-sizing: border-box;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   text-align: center;
-  box-sizing: border-box;
 }
 
 .withPadding {
@@ -18,9 +18,9 @@
 }
 
 .icon {
+  display: inline-block;
   -webkit-margin-after: 12px;
           margin-block-end: 12px;
-  display: inline-block;
   vertical-align: top;
   color: var(--vkui--color_icon_secondary);
 }

package/dist/cssm/components/PlatformProvider/PlatformProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { TokensClassProvider } from "../../lib/tokens/index.js";
+import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";
 import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride.js";
 /**
  * Компонент, позволяющий переопределить платформу для части приложения