@vkontakte/vkui 6.0.2 → 6.1.0

package/dist/cjs/components/NavTransitionDirectionContext/NavTransitionDirectionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavTransitionDirectionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,oBAAoB,GAAG,OAAO,GAAG,SAAS,CAAC;AAIhD,eAAO,MAAM,8BAA8B,sCAGxC,MAAM,iBAAiB,CAAC;IAAE,MAAM,EAAE,oBAAoB,CAAA;CAAE,CAAC,sBAgB3D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;AAEvE,eAAO,MAAM,eAAe,QAAO,mBAKlC,CAAC"}
+{"version":3,"file":"NavTransitionDirectionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,oBAAoB,GAAG,OAAO,GAAG,SAAS,CAAC;AAIhD,eAAO,MAAM,8BAA8B,sCAGxC,MAAM,iBAAiB,CAAC;IAAE,MAAM,EAAE,oBAAoB,CAAA;CAAE,CAAC,4CAgB3D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;AAEvE,eAAO,MAAM,eAAe,QAAO,mBAKlC,CAAC"}

package/dist/cjs/components/NavTransitionDirectionContext/NavTransitionDirectionContext.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const TransitionDirectionContext = /*#__PURE__*/ _react.createContext(undefined);
 const NavTransitionDirectionProvider = ({ children, isBack: isBackProp })=>{
@@ -28,9 +29,10 @@ const NavTransitionDirectionProvider = ({ children, isBack: isBackProp })=>{
     // to make sure we don't trigger new re-render for the panel
     // due to change in the prop passed to provider
     const [isBackOnMount] = _react.useState(isBack);
-    return /*#__PURE__*/ _react.createElement(TransitionDirectionContext.Provider, {
-        value: isBackOnMount
-    }, children);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TransitionDirectionContext.Provider, {
+        value: isBackOnMount,
+        children: children
+    });
 };
 const useNavDirection = ()=>{
     const isBack = _react.useContext(TransitionDirectionContext);

package/dist/cjs/components/NavTransitionDirectionContext/NavTransitionDirectionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype DirectionContextType = boolean | undefined;\n\nconst TransitionDirectionContext = React.createContext<DirectionContextType>(undefined);\n\nexport const NavTransitionDirectionProvider = ({\n  children,\n  isBack: isBackProp,\n}: React.PropsWithChildren<{ isBack: DirectionContextType }>) => {\n  const parentIsBack = React.useContext(TransitionDirectionContext);\n  // if local isBack is undefined then transition happend on the parent side (probably Root)\n  const isBack = isBackProp !== undefined ? isBackProp : parentIsBack;\n\n  // 'direction' should always represent the direction state of the panel on mount\n  // save the on mount value of the panel to the state\n  // to make sure we don't trigger new re-render for the panel\n  // due to change in the prop passed to provider\n  const [isBackOnMount] = React.useState<DirectionContextType>(isBack);\n\n  return (\n    <TransitionDirectionContext.Provider value={isBackOnMount}>\n      {children}\n    </TransitionDirectionContext.Provider>\n  );\n};\n\nexport type TransitionDirection = undefined | 'forwards' | 'backwards';\n\nexport const useNavDirection = (): TransitionDirection => {\n  const isBack = React.useContext(TransitionDirectionContext);\n  const transitionDirection = isBack === undefined ? undefined : isBack ? 'backwards' : 'forwards';\n\n  return transitionDirection;\n};\n"],"names":["NavTransitionDirectionProvider","useNavDirection","TransitionDirectionContext","React","createContext","undefined","children","isBack","isBackProp","parentIsBack","useContext","isBackOnMount","useState","Provider","value","transitionDirection"],"mappings":";;;;;;;;;;;IAMaA,8BAA8B;eAA9BA;;IAuBAC,eAAe;eAAfA;;;;iEA7BU;AAIvB,MAAMC,2CAA6BC,OAAMC,aAAa,CAAuBC;AAEtE,MAAML,iCAAiC,CAAC,EAC7CM,QAAQ,EACRC,QAAQC,UAAU,EACwC;IAC1D,MAAMC,eAAeN,OAAMO,UAAU,CAACR;IACtC,0FAA0F;IAC1F,MAAMK,SAASC,eAAeH,YAAYG,aAAaC;IAEvD,gFAAgF;IAChF,oDAAoD;IACpD,4DAA4D;IAC5D,+CAA+C;IAC/C,MAAM,CAACE,cAAc,GAAGR,OAAMS,QAAQ,CAAuBL;IAE7D,qBACE,qBAACL,2BAA2BW,QAAQ;QAACC,OAAOH;OACzCL;AAGP;AAIO,MAAML,kBAAkB;IAC7B,MAAMM,SAASJ,OAAMO,UAAU,CAACR;IAChC,MAAMa,sBAAsBR,WAAWF,YAAYA,YAAYE,SAAS,cAAc;IAEtF,OAAOQ;AACT"}
+{"version":3,"sources":["../../../../src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype DirectionContextType = boolean | undefined;\n\nconst TransitionDirectionContext = React.createContext<DirectionContextType>(undefined);\n\nexport const NavTransitionDirectionProvider = ({\n  children,\n  isBack: isBackProp,\n}: React.PropsWithChildren<{ isBack: DirectionContextType }>) => {\n  const parentIsBack = React.useContext(TransitionDirectionContext);\n  // if local isBack is undefined then transition happend on the parent side (probably Root)\n  const isBack = isBackProp !== undefined ? isBackProp : parentIsBack;\n\n  // 'direction' should always represent the direction state of the panel on mount\n  // save the on mount value of the panel to the state\n  // to make sure we don't trigger new re-render for the panel\n  // due to change in the prop passed to provider\n  const [isBackOnMount] = React.useState<DirectionContextType>(isBack);\n\n  return (\n    <TransitionDirectionContext.Provider value={isBackOnMount}>\n      {children}\n    </TransitionDirectionContext.Provider>\n  );\n};\n\nexport type TransitionDirection = undefined | 'forwards' | 'backwards';\n\nexport const useNavDirection = (): TransitionDirection => {\n  const isBack = React.useContext(TransitionDirectionContext);\n  const transitionDirection = isBack === undefined ? undefined : isBack ? 'backwards' : 'forwards';\n\n  return transitionDirection;\n};\n"],"names":["NavTransitionDirectionProvider","useNavDirection","TransitionDirectionContext","React","createContext","undefined","children","isBack","isBackProp","parentIsBack","useContext","isBackOnMount","useState","Provider","value","transitionDirection"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,8BAA8B;eAA9BA;;IAuBAC,eAAe;eAAfA;;;;;iEA7BU;AAIvB,MAAMC,2CAA6BC,OAAMC,aAAa,CAAuBC;AAEtE,MAAML,iCAAiC,CAAC,EAC7CM,QAAQ,EACRC,QAAQC,UAAU,EACwC;IAC1D,MAAMC,eAAeN,OAAMO,UAAU,CAACR;IACtC,0FAA0F;IAC1F,MAAMK,SAASC,eAAeH,YAAYG,aAAaC;IAEvD,gFAAgF;IAChF,oDAAoD;IACpD,4DAA4D;IAC5D,+CAA+C;IAC/C,MAAM,CAACE,cAAc,GAAGR,OAAMS,QAAQ,CAAuBL;IAE7D,qBACE,qBAACL,2BAA2BW,QAAQ;QAACC,OAAOH;kBACzCL;;AAGP;AAIO,MAAML,kBAAkB;IAC7B,MAAMM,SAASJ,OAAMO,UAAU,CAACR;IAChC,MAAMa,sBAAsBR,WAAWF,YAAYA,YAAYE,SAAS,cAAc;IAEtF,OAAOQ;AACT"}

package/dist/cjs/components/OnboardingTooltip/OnboardingTooltip.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { type FloatingComponentProps } from '../../lib/floating';
 import { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
 import { type TooltipBaseProps } from '../TooltipBase/TooltipBase';
-type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrowHeight' | 'arrowPadding' | 'arrowRef' | 'placement' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'shown' | 'children' | 'onPlacementChange'>;
+type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrowHeight' | 'arrowPadding' | 'arrowRef' | 'placement' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'shown' | 'children' | 'onPlacementChange' | 'disableFlipMiddleware'>;
 type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;
 type AllowedFloatingArrowProps = {
     /**
@@ -22,11 +21,11 @@ export interface OnboardingTooltipProps extends AllowedFloatingComponentProps, A
     /**
      * Callback, который вызывается при клике по любому месту в пределах экрана.
      */
-    onClose?(this: void): void;
+    onClose?: (this: void) => void;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const OnboardingTooltip: ({ id: idProp, children, shown: shownProp, arrowPadding, arrowHeight, offsetByMainAxis, offsetByCrossAxis, arrowOffset, isStaticArrowOffset, onClose, placement: placementProp, maxWidth, style: styleProp, getRootRef, disableArrow, onPlacementChange, ...restProps }: OnboardingTooltipProps) => React.JSX.Element;
+export declare const OnboardingTooltip: ({ id: idProp, children, shown: shownProp, arrowPadding, arrowHeight, offsetByMainAxis, offsetByCrossAxis, arrowOffset, isStaticArrowOffset, onClose, placement: placementProp, maxWidth, style: styleProp, getRootRef, disableArrow, onPlacementChange, disableFlipMiddleware, ...restProps }: OnboardingTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=OnboardingTooltip.d.ts.map

package/dist/cjs/components/OnboardingTooltip/OnboardingTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAGL,KAAK,sBAAsB,EAI5B,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAkC,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAMnG,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,UAAU,GACV,mBAAmB,CACtB,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEpE,KAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC3C;;OAEG;IACH,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC5D,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,uBAAuB,EACvB,yBAAyB;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,2QAkB3B,sBAAsB,sBAqHxB,CAAC"}
+{"version":3,"file":"OnboardingTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,sBAAsB,EAI5B,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAkC,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAMnG,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,UAAU,GACV,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEpE,KAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC3C;;OAEG;IACH,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC5D,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,uBAAuB,EACvB,yBAAyB;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,kSAmB3B,sBAAsB,4CAsHxB,CAAC"}

package/dist/cjs/components/OnboardingTooltip/OnboardingTooltip.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useExternRef = require("../../hooks/useExternRef");
@@ -26,7 +27,7 @@ const _TooltipBase = require("../TooltipBase/TooltipBase");
 const _OnboardingTooltipContainer = require("./OnboardingTooltipContainer");
 const warn = (0, _warnOnce.warnOnce)('OnboardingTooltip');
 const OnboardingTooltip = (_param)=>{
-    var { id: idProp, children, shown: shownProp = true, arrowPadding = _DefaultIcon.DEFAULT_ARROW_PADDING, arrowHeight = _DefaultIcon.DEFAULT_ARROW_HEIGHT, offsetByMainAxis = 0, offsetByCrossAxis = 0, arrowOffset = 0, isStaticArrowOffset = false, onClose, placement: placementProp = 'bottom-start', maxWidth = _TooltipBase.TOOLTIP_MAX_WIDTH, style: styleProp, getRootRef, disableArrow = false, onPlacementChange } = _param, restProps = _object_without_properties._(_param, [
+    var { id: idProp, children, shown: shownProp = true, arrowPadding = _DefaultIcon.DEFAULT_ARROW_PADDING, arrowHeight = _DefaultIcon.DEFAULT_ARROW_HEIGHT, offsetByMainAxis = 0, offsetByCrossAxis = 0, arrowOffset = 0, isStaticArrowOffset = false, onClose, placement: placementProp = 'bottom-start', maxWidth = _TooltipBase.TOOLTIP_MAX_WIDTH, style: styleProp, getRootRef, disableArrow = false, onPlacementChange, disableFlipMiddleware = false } = _param, restProps = _object_without_properties._(_param, [
         "id",
         "children",
         "shown",
@@ -42,7 +43,8 @@ const OnboardingTooltip = (_param)=>{
         "style",
         "getRootRef",
         "disableArrow",
-        "onPlacementChange"
+        "onPlacementChange",
+        "disableFlipMiddleware"
     ]);
     const generatedId = _react.useId();
     const tooltipId = idProp || generatedId;
@@ -58,7 +60,8 @@ const OnboardingTooltip = (_param)=>{
         arrowRef,
         arrow: !disableArrow,
         arrowHeight,
-        arrowPadding
+        arrowPadding,
+        disableFlipMiddleware
     });
     const { x: floatingDataX, y: floatingDataY, refs, placement: resolvedPlacement, middlewareData: { arrow: arrowCoords } } = (0, _floating.useFloating)({
         strategy: positionStrategy,
@@ -70,29 +73,34 @@ const OnboardingTooltip = (_param)=>{
     const [childRef, child] = (0, _usePatchChildren.usePatchChildren)(children, {
         'aria-describedby': shown ? tooltipId : undefined
     });
-    (0, _floating.usePlacementChangeCallback)(resolvedPlacement, onPlacementChange);
+    (0, _floating.usePlacementChangeCallback)(placementProp, resolvedPlacement, onPlacementChange);
     let tooltip = null;
     if (shown) {
         const floatingStyle = (0, _floating.convertFloatingDataToReactCSSProperties)(positionStrategy, floatingDataX, floatingDataY);
         if (styleProp) {
             Object.assign(floatingStyle, styleProp);
         }
-        tooltip = (0, _createPortal.createPortal)(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_TooltipBase.TooltipBase, _object_spread_props._(_object_spread._({}, restProps), {
-            id: tooltipId,
-            getRootRef: tooltipRef,
-            style: floatingStyle,
-            maxWidth: maxWidth,
-            arrowProps: disableArrow ? undefined : {
-                offset: arrowOffset,
-                isStaticOffset: isStaticArrowOffset,
-                coords: arrowCoords,
-                placement: resolvedPlacement,
-                getRootRef: setArrowRef
-            }
-        })), /*#__PURE__*/ _react.createElement("div", {
-            className: "vkuiOnboardingTooltip__overlay",
-            onClickCapture: onClose
-        })), tooltipContainer);
+        tooltip = (0, _createPortal.createPortal)(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TooltipBase.TooltipBase, _object_spread_props._(_object_spread._({}, restProps), {
+                    id: tooltipId,
+                    getRootRef: tooltipRef,
+                    style: floatingStyle,
+                    maxWidth: maxWidth,
+                    arrowProps: disableArrow ? undefined : {
+                        offset: arrowOffset,
+                        isStaticOffset: isStaticArrowOffset,
+                        coords: arrowCoords,
+                        placement: resolvedPlacement,
+                        getRootRef: setArrowRef
+                    }
+                })),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "vkuiOnboardingTooltip__overlay",
+                    onClickCapture: onClose
+                })
+            ]
+        }), tooltipContainer);
     }
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function initialize() {
         const referenceEl = childRef.current;
@@ -117,7 +125,12 @@ const OnboardingTooltip = (_param)=>{
             throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');
         }
     }
-    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, tooltip);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+        children: [
+            child,
+            tooltip
+        ]
+    });
 };
 
 //# sourceMappingURL=OnboardingTooltip.js.map

package/dist/cjs/components/OnboardingTooltip/OnboardingTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'arrowRef'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'children'\n  | 'onPlacementChange'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;\n\ntype AllowedFloatingArrowProps = {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  arrowOffset?: FloatingArrowProps['offset'];\n  /**\n   * Включает абсолютное смещение по `arrowOffset`.\n   */\n  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n  extends AllowedFloatingComponentProps,\n    AllowedTooltipBaseProps,\n    AllowedFloatingArrowProps {\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?(this: void): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n  id: idProp,\n  children,\n  shown: shownProp = true,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  arrowOffset = 0,\n  isStaticArrowOffset = false,\n  onClose,\n  placement: placementProp = 'bottom-start',\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  style: styleProp,\n  getRootRef,\n  disableArrow = false,\n  onPlacementChange,\n  ...restProps\n}: OnboardingTooltipProps) => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n  const { entering } = useNavTransition();\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);\n  const [positionStrategy, setPositionStrategy] = React.useState<'fixed' | 'absolute'>('absolute');\n  const shown = shownProp && tooltipContainer && !entering;\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    arrowRef,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n  });\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    refs,\n    placement: resolvedPlacement,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: positionStrategy,\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n  const [childRef, child] = usePatchChildren(children, {\n    'aria-describedby': shown ? tooltipId : undefined,\n  });\n\n  usePlacementChangeCallback(resolvedPlacement, onPlacementChange);\n\n  let tooltip: React.ReactPortal | null = null;\n  if (shown) {\n    const floatingStyle = convertFloatingDataToReactCSSProperties(\n      positionStrategy,\n      floatingDataX,\n      floatingDataY,\n    );\n\n    if (styleProp) {\n      Object.assign(floatingStyle, styleProp);\n    }\n\n    tooltip = createPortal(\n      <>\n        <TooltipBase\n          {...restProps}\n          id={tooltipId}\n          getRootRef={tooltipRef}\n          style={floatingStyle}\n          maxWidth={maxWidth}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  offset: arrowOffset,\n                  isStaticOffset: isStaticArrowOffset,\n                  coords: arrowCoords,\n                  placement: resolvedPlacement,\n                  getRootRef: setArrowRef,\n                }\n          }\n        />\n        <div className={styles['OnboardingTooltip__overlay']} onClickCapture={onClose} />\n      </>,\n      tooltipContainer,\n    );\n  }\n\n  useIsomorphicLayoutEffect(\n    function initialize() {\n      const referenceEl = childRef.current;\n      if (referenceEl) {\n        setTooltipContainer(\n          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties\n        );\n        setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n        refs.setReference(referenceEl);\n      }\n    },\n    [childRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n\n    if (refs.reference.current && !tooltipContainer) {\n      throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n    }\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["OnboardingTooltip","warn","warnOnce","id","idProp","children","shown","shownProp","arrowPadding","DEFAULT_ARROW_PADDING","arrowHeight","DEFAULT_ARROW_HEIGHT","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placement","placementProp","maxWidth","TOOLTIP_MAX_WIDTH","style","styleProp","getRootRef","disableArrow","onPlacementChange","restProps","generatedId","React","useId","tooltipId","entering","useNavTransition","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","middlewares","strictPlacement","useFloatingMiddlewaresBootstrap","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","useFloating","strategy","middleware","whileElementsMounted","autoUpdateFloatingElement","tooltipRef","useExternRef","setFloating","childRef","child","usePatchChildren","undefined","usePlacementChangeCallback","tooltip","floatingStyle","convertFloatingDataToReactCSSProperties","Object","assign","createPortal","TooltipBase","arrowProps","offset","isStaticOffset","coords","div","className","onClickCapture","useIsomorphicLayoutEffect","initialize","referenceEl","current","closest","onboardingTooltipContainerAttr","position","setReference","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","hasReactNode","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'arrowRef'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'children'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;\n\ntype AllowedFloatingArrowProps = {\n  /**\n   * Сдвиг стрелки относительно текущих координат.\n   */\n  arrowOffset?: FloatingArrowProps['offset'];\n  /**\n   * Включает абсолютное смещение по `arrowOffset`.\n   */\n  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n  extends AllowedFloatingComponentProps,\n    AllowedTooltipBaseProps,\n    AllowedFloatingArrowProps {\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: (this: void) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n  id: idProp,\n  children,\n  shown: shownProp = true,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  arrowOffset = 0,\n  isStaticArrowOffset = false,\n  onClose,\n  placement: placementProp = 'bottom-start',\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  style: styleProp,\n  getRootRef,\n  disableArrow = false,\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  ...restProps\n}: OnboardingTooltipProps) => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n  const { entering } = useNavTransition();\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);\n  const [positionStrategy, setPositionStrategy] = React.useState<'fixed' | 'absolute'>('absolute');\n  const shown = shownProp && tooltipContainer && !entering;\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    arrowRef,\n    arrow: !disableArrow,\n    arrowHeight,\n    arrowPadding,\n    disableFlipMiddleware,\n  });\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    refs,\n    placement: resolvedPlacement,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: positionStrategy,\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n  const [childRef, child] = usePatchChildren(children, {\n    'aria-describedby': shown ? tooltipId : undefined,\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  let tooltip: React.ReactPortal | null = null;\n  if (shown) {\n    const floatingStyle = convertFloatingDataToReactCSSProperties(\n      positionStrategy,\n      floatingDataX,\n      floatingDataY,\n    );\n\n    if (styleProp) {\n      Object.assign(floatingStyle, styleProp);\n    }\n\n    tooltip = createPortal(\n      <>\n        <TooltipBase\n          {...restProps}\n          id={tooltipId}\n          getRootRef={tooltipRef}\n          style={floatingStyle}\n          maxWidth={maxWidth}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  offset: arrowOffset,\n                  isStaticOffset: isStaticArrowOffset,\n                  coords: arrowCoords,\n                  placement: resolvedPlacement,\n                  getRootRef: setArrowRef,\n                }\n          }\n        />\n        <div className={styles['OnboardingTooltip__overlay']} onClickCapture={onClose} />\n      </>,\n      tooltipContainer,\n    );\n  }\n\n  useIsomorphicLayoutEffect(\n    function initialize() {\n      const referenceEl = childRef.current;\n      if (referenceEl) {\n        setTooltipContainer(\n          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties\n        );\n        setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n        refs.setReference(referenceEl);\n      }\n    },\n    [childRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n\n    if (refs.reference.current && !tooltipContainer) {\n      throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n    }\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["OnboardingTooltip","warn","warnOnce","id","idProp","children","shown","shownProp","arrowPadding","DEFAULT_ARROW_PADDING","arrowHeight","DEFAULT_ARROW_HEIGHT","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placement","placementProp","maxWidth","TOOLTIP_MAX_WIDTH","style","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","restProps","generatedId","React","useId","tooltipId","entering","useNavTransition","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","middlewares","strictPlacement","useFloatingMiddlewaresBootstrap","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","useFloating","strategy","middleware","whileElementsMounted","autoUpdateFloatingElement","tooltipRef","useExternRef","setFloating","childRef","child","usePatchChildren","undefined","usePlacementChangeCallback","tooltip","floatingStyle","convertFloatingDataToReactCSSProperties","Object","assign","createPortal","TooltipBase","arrowProps","offset","isStaticOffset","coords","div","className","onClickCapture","useIsomorphicLayoutEffect","initialize","referenceEl","current","closest","onboardingTooltipContainerAttr","position","setReference","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","hasReactNode","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cjs/components/OnboardingTooltip/OnboardingTooltipContainer.js

@@ -20,6 +20,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';
 const OnboardingTooltipContainer = /*#__PURE__*/ _react.forwardRef((_param, ref)=>{
@@ -27,7 +28,7 @@ const OnboardingTooltipContainer = /*#__PURE__*/ _react.forwardRef((_param, ref)
         "fixed"
     ]);
     props[onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, props), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, props), {
         ref: ref
     }));
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { HasDataAttribute } from '../../types';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasDataAttribute & {\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer = React.forwardRef<\n  HTMLDivElement,\n  OnboardingTooltipContainerProps\n>(({ fixed = false, ...props }, ref) => {\n  props[onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';\n  return <div {...props} ref={ref} />;\n});\n\nOnboardingTooltipContainer.displayName = 'OnboardingTooltipContainer';\n"],"names":["OnboardingTooltipContainer","onboardingTooltipContainerAttr","React","forwardRef","ref","fixed","props","div","displayName"],"mappings":";;;;;;;;;;;IAUaA,0BAA0B;eAA1BA;;IAPAC,8BAA8B;eAA9BA;;;;;;;iEAHU;AAGhB,MAAMA,iCAAiC;AAOvC,MAAMD,2CAA6BE,OAAMC,UAAU,CAGxD,SAA8BC;QAA7B,EAAEC,QAAQ,KAAK,EAAY,WAAPC;QAAlBD;;IACHC,KAAK,CAACL,+BAA+B,GAAGI,QAAQ,UAAU;IAC1D,qBAAO,qBAACE,mDAAQD;QAAOF,KAAKA;;AAC9B;AAEAJ,2BAA2BQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { HasDataAttribute } from '../../types';\n\nexport const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';\n\ntype OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &\n  HasDataAttribute & {\n    fixed?: boolean;\n  };\n\nexport const OnboardingTooltipContainer = React.forwardRef<\n  HTMLDivElement,\n  OnboardingTooltipContainerProps\n>(({ fixed = false, ...props }, ref) => {\n  props[onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';\n  return <div {...props} ref={ref} />;\n});\n\nOnboardingTooltipContainer.displayName = 'OnboardingTooltipContainer';\n"],"names":["OnboardingTooltipContainer","onboardingTooltipContainerAttr","React","forwardRef","ref","fixed","props","div","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUaA,0BAA0B;eAA1BA;;IAPAC,8BAA8B;eAA9BA;;;;;;;;iEAHU;AAGhB,MAAMA,iCAAiC;AAOvC,MAAMD,2CAA6BE,OAAMC,UAAU,CAGxD,SAA8BC;QAA7B,EAAEC,QAAQ,KAAK,EAAY,WAAPC;QAAlBD;;IACHC,KAAK,CAACL,+BAA+B,GAAGI,QAAQ,UAAU;IAC1D,qBAAO,qBAACE,mDAAQD;QAAOF,KAAKA;;AAC9B;AAEAJ,2BAA2BQ,WAAW,GAAG"}

package/dist/cjs/components/Pagination/Pagination.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import { type CustomPaginationNavigationButton, type PaginationNavigationButtonProps } from './PaginationNavigationButton/PaginationNavigationButton';
+import { type CustomPaginationPageButtonProps } from './PaginationPage/PaginationPageButton';
 export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {
     /**
      * Текущая страница.
@@ -22,30 +24,58 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
      */
     disabled?: boolean;
     /**
-     * Переопределение текста для обозначения блока навигации.
-     * По умолчанию используется текст на "ru_RU".
+     * Декоративный текст для кнопки навигации назад.
+     *
+     * > Note: Экранные дикторы будут использовать `prevButtonLabel`.
+     */
+    prevButtonCaption?: string;
+    /**
+     * Декоративный текст для кнопки навигации вперёд.
+     *
+     * > Note: Экранные дикторы будут использовать `nextButtonLabel`.
+     */
+    nextButtonCaption?: string;
+    /**
+     * Задаёт стиль отображения кнопок навигации.
+     *
+     * - `icon` – показывать только иконку;
+     * - `caption` – показывать только подпись;
+     * - `both` – показывать и иконку, и подпись.
+     */
+    navigationButtonsStyle?: PaginationNavigationButtonProps['style'];
+    /**
+     * [a11y] Метка для обозначения блока навигации.
      */
     navigationLabel?: string;
     navigationLabelComponent?: HasComponent['Component'];
     /**
-     * Переопределение текста для кнопки навигации назад.
-     * По умолчанию используется текст на "ru_RU".
+     * [a11y] Метка для кнопки навигации назад.
      */
     prevButtonLabel?: string;
     /**
-     * Переопределение текста для кнопки навигации вперёд.
-     * По умолчанию используется текст на "ru_RU".
+     * [a11y] Метка для кнопки навигации вперёд.
      */
     nextButtonLabel?: string;
     /**
-     * Функция для переопределения и/или локализации текста кнопки страницы.
-     * По умолчанию используется текст на "ru_RU".
+     * [a11y] Функция для переопределения и/или локализации метки кнопки страницы.
+     */
+    getPageLabel?: (isCurrent: boolean) => string;
+    onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Функция для кастомного рендера кнопок страниц.
+     *
+     * > Note: `CustomPaginationPageButtonProps` наследует API [Tappable](https://vkcom.github.io/VKUI/#/Tappable).
+     */
+    renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;
+    /**
+     Функция для кастомного рендера кнопок навигации `prev` и `next`.
+     *
+     * > Note: `CustomPaginationNavigationButton` наследует API [Button](https://vkcom.github.io/VKUI/#/Button).
      */
-    getPageLabel?(isCurrent: boolean): string;
-    onChange?(page: number): void;
+    renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
  */
-export declare const Pagination: ({ currentPage, siblingCount, boundaryCount, totalPages, disabled, getPageLabel, navigationLabel, navigationLabelComponent, prevButtonLabel, nextButtonLabel, onChange, ...resetProps }: PaginationProps) => React.JSX.Element;
+export declare const Pagination: ({ currentPage, siblingCount, boundaryCount, totalPages, disabled, prevButtonCaption, nextButtonCaption, navigationButtonsStyle, getPageLabel, navigationLabel, navigationLabelComponent, prevButtonLabel, nextButtonLabel, onChange, renderPageButton, renderNavigationButton, ...resetProps }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/cjs/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC/F;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACrD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1C,QAAQ,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,2LAapB,eAAe,sBAkGjB,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG3E,OAAO,EACL,KAAK,gCAAgC,EAErC,KAAK,+BAA+B,EACrC,MAAM,yDAAyD,CAAC;AACjE,OAAO,EACL,KAAK,+BAA+B,EAErC,MAAM,uCAAuC,CAAC;AAK/C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC/F;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAClE;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACrD;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxE;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/E;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvF;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,mSAkBpB,eAAe,4CA2GjB,CAAC"}

package/dist/cjs/components/Pagination/Pagination.js

@@ -10,29 +10,37 @@ Object.defineProperty(exports, "Pagination", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _icons = require("@vkontakte/icons");
+const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _usePagination = require("../../hooks/usePagination");
-const _Button = require("../Button/Button");
 const _RootComponent = require("../RootComponent/RootComponent");
 const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
+const _PaginationNavigationButton = require("./PaginationNavigationButton/PaginationNavigationButton");
 const _PaginationPageButton = require("./PaginationPage/PaginationPageButton");
 const _PaginationPageEllipsis = require("./PaginationPage/PaginationPageEllipsis");
 const _utils = require("./utils");
 const Pagination = (_param)=>{
-    var { currentPage = 1, siblingCount = 1, boundaryCount = 1, totalPages = 1, disabled, getPageLabel = _utils.getPageLabelDefault, navigationLabel = 'Навигация по страницам', navigationLabelComponent = 'h2', prevButtonLabel = 'Перейти на предыдущую страницу', nextButtonLabel = 'Перейти на следующую страницу', onChange } = _param, resetProps = _object_without_properties._(_param, [
+    var { currentPage = 1, siblingCount = 1, boundaryCount = 1, totalPages = 1, disabled, prevButtonCaption = 'Назад', nextButtonCaption = 'Вперёд', navigationButtonsStyle = 'icon', getPageLabel = _utils.getPageLabelDefault, navigationLabel = 'Навигация по страницам', navigationLabelComponent = 'h2', prevButtonLabel = 'Перейти на предыдущую страницу', nextButtonLabel = 'Перейти на следующую страницу', onChange, renderPageButton, renderNavigationButton } = _param, resetProps = _object_without_properties._(_param, [
         "currentPage",
         "siblingCount",
         "boundaryCount",
         "totalPages",
         "disabled",
+        "prevButtonCaption",
+        "nextButtonCaption",
+        "navigationButtonsStyle",
         "getPageLabel",
         "navigationLabel",
         "navigationLabelComponent",
         "prevButtonLabel",
         "nextButtonLabel",
-        "onChange"
+        "onChange",
+        "renderPageButton",
+        "renderNavigationButton"
     ]);
     const pages = (0, _usePagination.usePagination)({
         currentPage,
@@ -42,88 +50,109 @@ const Pagination = (_param)=>{
     });
     const isFirstPage = currentPage === 1;
     const isLastPage = currentPage === totalPages;
-    const handlePrevClick = _react.useCallback(()=>{
-        if (onChange && !isFirstPage) {
-            onChange(currentPage - 1);
+    const prevPage = isFirstPage ? undefined : currentPage - 1;
+    const nextPage = isLastPage ? undefined : currentPage + 1;
+    const handlePrevClick = _react.useCallback((event)=>{
+        if (onChange && prevPage !== undefined) {
+            onChange(prevPage, event);
         }
     }, [
-        currentPage,
-        isFirstPage,
+        prevPage,
         onChange
     ]);
     const handleClick = _react.useCallback((event)=>{
         const page = event.currentTarget.dataset.page || '1';
-        onChange === null || onChange === void 0 ? void 0 : onChange(Number(page));
+        onChange === null || onChange === void 0 ? void 0 : onChange(Number(page), event);
     }, [
         onChange
     ]);
-    const handleNextClick = _react.useCallback(()=>{
-        if (onChange && !isLastPage) {
-            onChange(currentPage + 1);
+    const handleNextClick = _react.useCallback((event)=>{
+        if (onChange && nextPage !== undefined) {
+            onChange(nextPage, event);
         }
     }, [
-        currentPage,
-        isLastPage,
+        nextPage,
         onChange
     ]);
+    const { sizeY } = (0, _useAdaptivity.useAdaptivity)();
     const renderPages = _react.useCallback((page)=>{
         switch(page){
             case 'start-ellipsis':
             case 'end-ellipsis':
-                return /*#__PURE__*/ _react.createElement("li", {
-                    key: page
-                }, /*#__PURE__*/ _react.createElement(_PaginationPageEllipsis.PaginationPageEllipsis, {
-                    disabled: disabled
-                }));
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PaginationPageEllipsis.PaginationPageEllipsis, {
+                        disabled: disabled
+                    })
+                }, page);
             default:
                 {
                     const isCurrent = page === currentPage;
-                    return /*#__PURE__*/ _react.createElement("li", {
-                        key: page
-                    }, /*#__PURE__*/ _react.createElement(_PaginationPageButton.PaginationPageButton, {
-                        getPageLabel: getPageLabel,
-                        isCurrent: isCurrent,
-                        onClick: handleClick,
-                        disabled: disabled
-                    }, page));
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PaginationPageButton.PaginationPageButton, {
+                            getPageLabel: getPageLabel,
+                            isCurrent: isCurrent,
+                            onClick: handleClick,
+                            disabled: disabled,
+                            sizeY: sizeY,
+                            renderPageButton: renderPageButton,
+                            children: page
+                        })
+                    }, page);
                 }
         }
     }, [
         currentPage,
         disabled,
         getPageLabel,
-        handleClick
+        handleClick,
+        renderPageButton,
+        sizeY
     ]);
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         Component: "nav",
         role: "navigation"
-    }, resetProps), /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, {
-        Component: navigationLabelComponent
-    }, navigationLabel), /*#__PURE__*/ _react.createElement("ul", {
-        className: "vkuiPagination__list"
-    }, /*#__PURE__*/ _react.createElement("li", {
-        className: "vkuiPagination__prevButtonContainer"
-    }, /*#__PURE__*/ _react.createElement(_Button.Button, {
-        size: "l",
-        before: /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, prevButtonLabel), ' ', /*#__PURE__*/ _react.createElement(_icons.Icon24ChevronCompactLeft, {
-            width: 24
-        })),
-        appearance: "accent",
-        mode: "tertiary",
-        disabled: isFirstPage || disabled,
-        onClick: handlePrevClick
-    })), pages.map(renderPages), /*#__PURE__*/ _react.createElement("li", {
-        className: "vkuiPagination__nextButtonContainer"
-    }, /*#__PURE__*/ _react.createElement(_Button.Button, {
-        size: "l",
-        after: /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, nextButtonLabel), /*#__PURE__*/ _react.createElement(_icons.Icon24ChevronCompactRight, {
-            width: 24
-        })),
-        appearance: "accent",
-        mode: "tertiary",
-        disabled: isLastPage || disabled,
-        onClick: handleNextClick
-    }))));
+    }, resetProps), {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                Component: navigationLabelComponent,
+                children: navigationLabel
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
+                className: "vkuiPagination__list",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        className: "vkuiPagination__prevButtonContainer",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PaginationNavigationButton.PaginationNavigationButton, {
+                            type: "prev",
+                            style: navigationButtonsStyle,
+                            caption: prevButtonCaption,
+                            Icon: _icons.Icon24ChevronCompactLeft,
+                            a11yLabel: prevButtonLabel,
+                            disabled: isFirstPage || disabled,
+                            onClick: handlePrevClick,
+                            "data-page": prevPage,
+                            renderNavigationButton: renderNavigationButton
+                        })
+                    }),
+                    pages.map(renderPages),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                        className: "vkuiPagination__nextButtonContainer",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PaginationNavigationButton.PaginationNavigationButton, {
+                            type: "next",
+                            style: navigationButtonsStyle,
+                            caption: nextButtonCaption,
+                            Icon: _icons.Icon24ChevronCompactRight,
+                            a11yLabel: nextButtonLabel,
+                            disabled: isLastPage || disabled,
+                            onClick: handleNextClick,
+                            "data-page": nextPage,
+                            renderNavigationButton: renderNavigationButton
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=Pagination.js.map