@vkontakte/vkui 7.11.6 → 7.11.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/OnboardingTooltip/OnboardingTooltip.d.ts.map +1 -1
- package/dist/components/OnboardingTooltip/OnboardingTooltip.js +3 -1
- package/dist/components/OnboardingTooltip/OnboardingTooltip.js.map +1 -1
- package/dist/components/Popper/Popper.d.ts.map +1 -1
- package/dist/components/Popper/Popper.js +3 -1
- package/dist/components/Popper/Popper.js.map +1 -1
- package/dist/components/Root/Root.d.ts.map +1 -1
- package/dist/components/Root/Root.js +38 -31
- package/dist/components/Root/Root.js.map +1 -1
- package/dist/components/View/View.d.ts.map +1 -1
- package/dist/components/View/View.js +59 -52
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/ViewInfinite.d.ts.map +1 -1
- package/dist/components/View/ViewInfinite.js +43 -36
- package/dist/components/View/ViewInfinite.js.map +1 -1
- package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js +3 -1
- package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js.map +1 -1
- package/dist/cssm/components/Popper/Popper.js +3 -1
- package/dist/cssm/components/Popper/Popper.js.map +1 -1
- package/dist/cssm/components/Root/Root.js +36 -29
- package/dist/cssm/components/Root/Root.js.map +1 -1
- package/dist/cssm/components/View/View.js +57 -50
- package/dist/cssm/components/View/View.js.map +1 -1
- package/dist/cssm/components/View/ViewInfinite.js +41 -34
- package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
- package/dist/cssm/lib/floating/LockFloatingPosition/LockFloatingPosition.js +6 -0
- package/dist/cssm/lib/floating/LockFloatingPosition/LockFloatingPosition.js.map +1 -0
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.d.ts +6 -0
- package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.d.ts.map +1 -0
- package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.js +6 -0
- package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.js.map +1 -0
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +3 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/package.json +1 -1
- package/src/components/OnboardingTooltip/OnboardingTooltip.tsx +6 -1
- package/src/components/Popper/Popper.tsx +12 -7
- package/src/components/Root/Root.tsx +55 -48
- package/src/components/View/View.tsx +94 -83
- package/src/components/View/ViewInfinite.tsx +74 -65
- package/src/lib/floating/LockFloatingPosition/LockFloatingPosition.tsx +6 -0
- package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnboardingTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAGL,KAAK,sBAAsB,EAI5B,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"OnboardingTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAGL,KAAK,sBAAsB,EAI5B,MAAM,oBAAoB,CAAC;AAK5B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,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,GACvB,wBAAwB,GACxB,kBAAkB,GAClB,iBAAiB,CACpB,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CACjC,gBAAgB,EAChB,YAAY,GAAG,gBAAgB,GAAG,kBAAkB,CACrD,CAAC;AAEF,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,EACzB,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,icA2B/B,sBAAsB,KAAG,KAAK,CAAC,SAyIjC,CAAC"}
|
|
@@ -10,6 +10,7 @@ import { useExternRef } from "../../hooks/useExternRef.js";
|
|
|
10
10
|
import { usePatchChildren } from "../../hooks/usePatchChildren.js";
|
|
11
11
|
import { createPortal } from "../../lib/createPortal.js";
|
|
12
12
|
import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
|
|
13
|
+
import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
|
|
13
14
|
import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
|
|
14
15
|
import { warnOnce } from "../../lib/warnOnce.js";
|
|
15
16
|
import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from "../FloatingArrow/DefaultIcon.js";
|
|
@@ -67,11 +68,12 @@ const warn = warnOnce('OnboardingTooltip');
|
|
|
67
68
|
disableShiftMiddleware,
|
|
68
69
|
overflowPadding
|
|
69
70
|
});
|
|
71
|
+
const isLock = React.useContext(LockFloatingPositionContext);
|
|
70
72
|
const { x: floatingDataX, y: floatingDataY, refs, placement: resolvedPlacement, middlewareData: { arrow: arrowCoords } } = useFloating({
|
|
71
73
|
strategy: positionStrategy,
|
|
72
74
|
placement: strictPlacement,
|
|
73
75
|
middleware: middlewares,
|
|
74
|
-
whileElementsMounted: autoUpdateFloatingElement
|
|
76
|
+
whileElementsMounted: isLock ? undefined : autoUpdateFloatingElement
|
|
75
77
|
});
|
|
76
78
|
const tooltipRef = useExternRef(getRootRef, refs.setFloating);
|
|
77
79
|
const [childRef, child] = usePatchChildren(children, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\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 type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\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 | 'disableShiftMiddleware'\n | 'disableFocusTrap'\n | 'overflowPadding'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n TooltipBaseProps,\n 'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'\n>;\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 Pick<UseFocusTrapProps, 'restoreFocus'> {\n /**\n * Скрывает стрелку, указывающую на якорный элемент.\n */\n disableArrow?: boolean;\n /**\n * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n */\n onClose?: (this: void) => void;\n /**\n * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n */\n overlayLabel?: string;\n}\n\n/**\n * @see https://vkui.io/components/onboarding-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 disableShiftMiddleware = false,\n overlayLabel = 'Закрыть',\n title,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n restoreFocus,\n disableFocusTrap,\n overflowPadding,\n ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\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 disableShiftMiddleware,\n overflowPadding,\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 const titleId = React.useId();\n if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {\n warn(\n 'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n );\n }\n\n let tooltip: React.ReactPortal | null = null;\n if (shown) {\n const floatingStyle = convertFloatingDataToReactCSSProperties({\n strategy: positionStrategy,\n x: floatingDataX,\n y: floatingDataY,\n });\n\n tooltip = createPortal(\n <FocusTrap\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\n onClose={onClose}\n disabled={disableFocusTrap}\n restoreFocus={restoreFocus}\n >\n <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />\n <TooltipBase\n {...restProps}\n id={tooltipId}\n title={title}\n titleId={title ? titleId : undefined}\n getRootRef={tooltipRef}\n style={mergeStyle(floatingStyle, styleProp)}\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 </FocusTrap>,\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":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","warn","OnboardingTooltip","idProp","children","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placementProp","maxWidth","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","disableShiftMiddleware","overlayLabel","title","ariaLabel","ariaLabelledBy","restoreFocus","disableFocusTrap","overflowPadding","restProps","generatedId","useId","tooltipId","entering","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","titleId","process","env","NODE_ENV","tooltip","floatingStyle","role","aria-modal","aria-label","aria-labelledby","disabled","button","className","onClickCapture","id","style","arrowProps","offset","isStaticOffset","coords","initialize","referenceEl","current","closest","position","setReference","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\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 { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\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 | 'disableShiftMiddleware'\n | 'disableFocusTrap'\n | 'overflowPadding'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n TooltipBaseProps,\n 'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'\n>;\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 Pick<UseFocusTrapProps, 'restoreFocus'> {\n /**\n * Скрывает стрелку, указывающую на якорный элемент.\n */\n disableArrow?: boolean;\n /**\n * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n */\n onClose?: (this: void) => void;\n /**\n * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n */\n overlayLabel?: string;\n}\n\n/**\n * @see https://vkui.io/components/onboarding-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 disableShiftMiddleware = false,\n overlayLabel = 'Закрыть',\n title,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n restoreFocus,\n disableFocusTrap,\n overflowPadding,\n ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\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 disableShiftMiddleware,\n overflowPadding,\n });\n\n const isLock = React.useContext(LockFloatingPositionContext);\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: isLock ? undefined : autoUpdateFloatingElement,\n });\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 const titleId = React.useId();\n if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {\n warn(\n 'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n );\n }\n\n let tooltip: React.ReactPortal | null = null;\n if (shown) {\n const floatingStyle = convertFloatingDataToReactCSSProperties({\n strategy: positionStrategy,\n x: floatingDataX,\n y: floatingDataY,\n });\n\n tooltip = createPortal(\n <FocusTrap\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\n onClose={onClose}\n disabled={disableFocusTrap}\n restoreFocus={restoreFocus}\n >\n <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />\n <TooltipBase\n {...restProps}\n id={tooltipId}\n title={title}\n titleId={title ? titleId : undefined}\n getRootRef={tooltipRef}\n style={mergeStyle(floatingStyle, styleProp)}\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 </FocusTrap>,\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":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","LockFloatingPositionContext","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","warn","OnboardingTooltip","idProp","children","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placementProp","maxWidth","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","disableShiftMiddleware","overlayLabel","title","ariaLabel","ariaLabelledBy","restoreFocus","disableFocusTrap","overflowPadding","restProps","generatedId","useId","tooltipId","entering","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","isLock","useContext","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","undefined","tooltipRef","setFloating","childRef","child","titleId","process","env","NODE_ENV","tooltip","floatingStyle","role","aria-modal","aria-label","aria-labelledby","disabled","button","className","onClickCapture","id","style","arrowProps","offset","isStaticOffset","coords","initialize","referenceEl","current","closest","position","setReference","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,sBAAsB,EAI3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,sBAAsB,EAI3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,UAAU,GACV,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,eAAe,GACf,cAAc,GACd,yBAAyB,GACzB,yBAAyB,GACzB,WAAW,GACX,QAAQ,GACR,UAAU,GACV,WAAW,GACX,mBAAmB,GACnB,mBAAmB,GACnB,uBAAuB,GACvB,wBAAwB,GACxB,yCAAyC,GACzC,iBAAiB,CACpB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,6BAA6B,CAAC;IACtF;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD;;OAEG;IACH,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,cAAc,CAAC;CACjE;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,+dAmCpB,WAAW,KAAG,KAAK,CAAC,SA2FtB,CAAC"}
|
|
@@ -7,6 +7,7 @@ import * as React from "react";
|
|
|
7
7
|
import { mergeStyle } from "../../helpers/mergeStyle.js";
|
|
8
8
|
import { useExternRef } from "../../hooks/useExternRef.js";
|
|
9
9
|
import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
|
|
10
|
+
import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
|
|
10
11
|
import { useReferenceHiddenChangeCallback } from "../../lib/floating/useReferenceHiddenChangeCallback.js";
|
|
11
12
|
import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
|
|
12
13
|
import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
|
|
@@ -65,11 +66,12 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
|
|
|
65
66
|
flipMiddlewareFallbackAxisSideDirection,
|
|
66
67
|
overflowPadding
|
|
67
68
|
});
|
|
69
|
+
const isLock = React.useContext(LockFloatingPositionContext);
|
|
68
70
|
const { x: floatingDataX, y: floatingDataY, strategy: floatingPositionStrategy, placement: resolvedPlacement, refs, middlewareData } = useFloating({
|
|
69
71
|
placement: strictPlacement,
|
|
70
72
|
strategy: strategyProp,
|
|
71
73
|
middleware: middlewares,
|
|
72
|
-
whileElementsMounted (...args)
|
|
74
|
+
whileElementsMounted: isLock ? undefined : (...args)=>{
|
|
73
75
|
/* istanbul ignore next: не знаю как проверить */ return autoUpdateFloatingElement(...args, {
|
|
74
76
|
elementResize: autoUpdateOnTargetResize,
|
|
75
77
|
animationFrame: autoUpdateOnAnimationFrame
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n autoUpdateFloatingElement,\n convertFloatingDataToReactCSSProperties,\n type FloatingComponentProps,\n useFloating,\n useFloatingMiddlewaresBootstrap,\n usePlacementChangeCallback,\n type VirtualElement,\n} from '../../lib/floating';\nimport { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n DEFAULT_ARROW_HEIGHT,\n DEFAULT_ARROW_PADDING,\n DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n FloatingArrow,\n type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n FloatingArrowPropsPrivate,\n 'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n | 'arrow'\n | 'arrowRef'\n | 'arrowHeight'\n | 'arrowPadding'\n | 'hoverDelay'\n | 'placement'\n | 'offsetByMainAxis'\n | 'offsetByCrossAxis'\n | 'shown'\n | 'onShownChange'\n | 'defaultShown'\n | 'hideWhenReferenceHidden'\n | 'onReferenceHiddenChange'\n | 'sameWidth'\n | 'zIndex'\n | 'strategy'\n | 'usePortal'\n | 'customMiddlewares'\n | 'onPlacementChange'\n | 'disableFlipMiddleware'\n | 'disableShiftMiddleware'\n | 'flipMiddlewareFallbackAxisSideDirection'\n | 'overflowPadding'\n>;\n\nexport interface PopperCommonProps\n extends AllowedFloatingComponentProps,\n Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n /**\n * Позволяет набросить на стрелку пользовательские атрибуты.\n */\n arrowProps?: FloatingArrowProps;\n /**\n * Пользовательская SVG иконка.\n *\n * Требования:\n *\n * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (смотри https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n */\n ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n /**\n * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n */\n autoUpdateOnTargetResize?: boolean;\n /**\n * Пытаться обновлять позицию всплывающего элемента каждый фрейм.\n */\n autoUpdateOnAnimationFrame?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n /**\n * Ref на якорный элемент.\n */\n targetRef: React.RefObject<HTMLElement | null> | VirtualElement;\n}\n\n/**\n * @see https://vkui.io/components/popper\n */\nexport const Popper = ({\n // UseFloatingMiddlewaresBootstrapProps\n placement: placementProp = 'bottom-start',\n sameWidth,\n hideWhenReferenceHidden,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n arrow,\n arrowHeight = DEFAULT_ARROW_HEIGHT,\n arrowPadding = DEFAULT_ARROW_PADDING,\n customMiddlewares,\n disableFlipMiddleware = false,\n disableShiftMiddleware = false,\n flipMiddlewareFallbackAxisSideDirection,\n overflowPadding,\n\n // UseFloatingProps\n autoUpdateOnTargetResize = false,\n autoUpdateOnAnimationFrame = false,\n strategy: strategyProp,\n\n // ArrowProps\n arrowProps,\n ArrowIcon = DefaultIcon,\n\n // rest\n targetRef,\n getRootRef,\n children,\n usePortal = true,\n onPlacementChange,\n onReferenceHiddenChange,\n zIndex,\n style,\n ...restProps\n}: PopperProps): React.ReactNode => {\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n placement: placementProp,\n sameWidth,\n arrow,\n arrowRef,\n arrowHeight,\n arrowPadding,\n offsetByMainAxis,\n offsetByCrossAxis,\n hideWhenReferenceHidden,\n customMiddlewares,\n disableFlipMiddleware,\n disableShiftMiddleware,\n flipMiddlewareFallbackAxisSideDirection,\n overflowPadding,\n });\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n strategy: floatingPositionStrategy,\n placement: resolvedPlacement,\n refs,\n middlewareData,\n } = useFloating({\n placement: strictPlacement,\n strategy: strategyProp,\n middleware: middlewares,\n whileElementsMounted(...args) {\n /* istanbul ignore next: не знаю как проверить */\n return autoUpdateFloatingElement(...args, {\n elementResize: autoUpdateOnTargetResize,\n animationFrame: autoUpdateOnAnimationFrame,\n });\n },\n });\n\n usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);\n\n const { arrow: arrowCoords } = middlewareData;\n\n const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n useIsomorphicLayoutEffect(() => {\n refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n }, [refs.setReference, targetRef]);\n\n const dropdownStyle =\n typeof zIndex !== 'undefined'\n ? {\n zIndex,\n }\n : undefined;\n\n const dropdown = (\n <RootComponent\n {...restProps}\n style={mergeStyle(dropdownStyle, style)}\n baseClassName={styles.host}\n getRootRef={handleRootRef}\n baseStyle={convertFloatingDataToReactCSSProperties({\n strategy: floatingPositionStrategy,\n x: floatingDataX,\n y: floatingDataY,\n initialWidth: sameWidth ? null : undefined,\n middlewareData,\n })}\n >\n {arrow && (\n <FloatingArrow\n {...arrowProps}\n coords={arrowCoords}\n placement={resolvedPlacement}\n getRootRef={setArrowRef}\n Icon={ArrowIcon}\n />\n )}\n {children}\n </RootComponent>\n );\n\n return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useReferenceHiddenChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","disableShiftMiddleware","flipMiddlewareFallbackAxisSideDirection","overflowPadding","autoUpdateOnTargetResize","autoUpdateOnAnimationFrame","strategy","strategyProp","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","onReferenceHiddenChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","animationFrame","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","undefined","dropdown","baseClassName","baseStyle","initialWidth","coords","Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n autoUpdateFloatingElement,\n convertFloatingDataToReactCSSProperties,\n type FloatingComponentProps,\n useFloating,\n useFloatingMiddlewaresBootstrap,\n usePlacementChangeCallback,\n type VirtualElement,\n} from '../../lib/floating';\nimport { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';\nimport { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n DEFAULT_ARROW_HEIGHT,\n DEFAULT_ARROW_PADDING,\n DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n FloatingArrow,\n type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n FloatingArrowPropsPrivate,\n 'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n | 'arrow'\n | 'arrowRef'\n | 'arrowHeight'\n | 'arrowPadding'\n | 'hoverDelay'\n | 'placement'\n | 'offsetByMainAxis'\n | 'offsetByCrossAxis'\n | 'shown'\n | 'onShownChange'\n | 'defaultShown'\n | 'hideWhenReferenceHidden'\n | 'onReferenceHiddenChange'\n | 'sameWidth'\n | 'zIndex'\n | 'strategy'\n | 'usePortal'\n | 'customMiddlewares'\n | 'onPlacementChange'\n | 'disableFlipMiddleware'\n | 'disableShiftMiddleware'\n | 'flipMiddlewareFallbackAxisSideDirection'\n | 'overflowPadding'\n>;\n\nexport interface PopperCommonProps\n extends AllowedFloatingComponentProps,\n Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n /**\n * Позволяет набросить на стрелку пользовательские атрибуты.\n */\n arrowProps?: FloatingArrowProps;\n /**\n * Пользовательская SVG иконка.\n *\n * Требования:\n *\n * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (смотри https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n */\n ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n /**\n * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n */\n autoUpdateOnTargetResize?: boolean;\n /**\n * Пытаться обновлять позицию всплывающего элемента каждый фрейм.\n */\n autoUpdateOnAnimationFrame?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n /**\n * Ref на якорный элемент.\n */\n targetRef: React.RefObject<HTMLElement | null> | VirtualElement;\n}\n\n/**\n * @see https://vkui.io/components/popper\n */\nexport const Popper = ({\n // UseFloatingMiddlewaresBootstrapProps\n placement: placementProp = 'bottom-start',\n sameWidth,\n hideWhenReferenceHidden,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n arrow,\n arrowHeight = DEFAULT_ARROW_HEIGHT,\n arrowPadding = DEFAULT_ARROW_PADDING,\n customMiddlewares,\n disableFlipMiddleware = false,\n disableShiftMiddleware = false,\n flipMiddlewareFallbackAxisSideDirection,\n overflowPadding,\n\n // UseFloatingProps\n autoUpdateOnTargetResize = false,\n autoUpdateOnAnimationFrame = false,\n strategy: strategyProp,\n\n // ArrowProps\n arrowProps,\n ArrowIcon = DefaultIcon,\n\n // rest\n targetRef,\n getRootRef,\n children,\n usePortal = true,\n onPlacementChange,\n onReferenceHiddenChange,\n zIndex,\n style,\n ...restProps\n}: PopperProps): React.ReactNode => {\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n placement: placementProp,\n sameWidth,\n arrow,\n arrowRef,\n arrowHeight,\n arrowPadding,\n offsetByMainAxis,\n offsetByCrossAxis,\n hideWhenReferenceHidden,\n customMiddlewares,\n disableFlipMiddleware,\n disableShiftMiddleware,\n flipMiddlewareFallbackAxisSideDirection,\n overflowPadding,\n });\n\n const isLock = React.useContext(LockFloatingPositionContext);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n strategy: floatingPositionStrategy,\n placement: resolvedPlacement,\n refs,\n middlewareData,\n } = useFloating({\n placement: strictPlacement,\n strategy: strategyProp,\n middleware: middlewares,\n whileElementsMounted: isLock\n ? undefined\n : (...args) => {\n /* istanbul ignore next: не знаю как проверить */\n return autoUpdateFloatingElement(...args, {\n elementResize: autoUpdateOnTargetResize,\n animationFrame: autoUpdateOnAnimationFrame,\n });\n },\n });\n\n usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);\n\n const { arrow: arrowCoords } = middlewareData;\n\n const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n useIsomorphicLayoutEffect(() => {\n refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n }, [refs.setReference, targetRef]);\n\n const dropdownStyle =\n typeof zIndex !== 'undefined'\n ? {\n zIndex,\n }\n : undefined;\n\n const dropdown = (\n <RootComponent\n {...restProps}\n style={mergeStyle(dropdownStyle, style)}\n baseClassName={styles.host}\n getRootRef={handleRootRef}\n baseStyle={convertFloatingDataToReactCSSProperties({\n strategy: floatingPositionStrategy,\n x: floatingDataX,\n y: floatingDataY,\n initialWidth: sameWidth ? null : undefined,\n middlewareData,\n })}\n >\n {arrow && (\n <FloatingArrow\n {...arrowProps}\n coords={arrowCoords}\n placement={resolvedPlacement}\n getRootRef={setArrowRef}\n Icon={ArrowIcon}\n />\n )}\n {children}\n </RootComponent>\n );\n\n return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","LockFloatingPositionContext","useReferenceHiddenChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","disableShiftMiddleware","flipMiddlewareFallbackAxisSideDirection","overflowPadding","autoUpdateOnTargetResize","autoUpdateOnAnimationFrame","strategy","strategyProp","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","onReferenceHiddenChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","isLock","useContext","x","floatingDataX","y","floatingDataY","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","undefined","args","elementResize","animationFrame","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","dropdown","baseClassName","baseStyle","initialWidth","coords","Icon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAGD,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wEAMlB,SAAS,KAAG,KAAK,CAAC,SA0HpB,CAAC"}
|
|
@@ -7,6 +7,7 @@ import * as React from "react";
|
|
|
7
7
|
import { classNames } from "@vkontakte/vkjs";
|
|
8
8
|
import { usePlatform } from "../../hooks/usePlatform.js";
|
|
9
9
|
import { useDOM } from "../../lib/dom.js";
|
|
10
|
+
import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
|
|
10
11
|
import { getNavId } from "../../lib/getNavId.js";
|
|
11
12
|
import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
|
|
12
13
|
import { warnOnce } from "../../lib/warnOnce.js";
|
|
@@ -94,41 +95,47 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
|
|
|
94
95
|
disableAnimation,
|
|
95
96
|
finishTransition
|
|
96
97
|
]);
|
|
97
|
-
const onAnimationEnd = ()=>{
|
|
98
|
+
const onAnimationEnd = (e)=>{
|
|
99
|
+
if (e.target !== e.currentTarget) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
98
102
|
finishTransition();
|
|
99
103
|
};
|
|
100
|
-
return /*#__PURE__*/ _jsx(
|
|
101
|
-
|
|
102
|
-
children:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
children: /*#__PURE__*/ _jsx(
|
|
119
|
-
|
|
120
|
-
children: /*#__PURE__*/ _jsx(
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
104
|
+
return /*#__PURE__*/ _jsx(LockFloatingPositionContext.Provider, {
|
|
105
|
+
value: transition,
|
|
106
|
+
children: /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
|
|
107
|
+
baseClassName: classNames("vkuiRoot__host", platform === 'ios' && "vkuiRoot__ios", transition && "vkuiRoot__transition"),
|
|
108
|
+
children: views.map((view)=>{
|
|
109
|
+
const viewId = getNavId(view.props, warn);
|
|
110
|
+
if (viewId !== activeView && !(transition && viewId === prevView)) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
|
|
114
|
+
const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
|
|
115
|
+
var _scrolls_viewId;
|
|
116
|
+
return /*#__PURE__*/ _jsx("div", {
|
|
117
|
+
ref: (e)=>{
|
|
118
|
+
viewId && (viewNodes[viewId] = e);
|
|
119
|
+
},
|
|
120
|
+
onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
|
|
121
|
+
className: classNames("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__viewHideBack", transition && viewId === prevView && !isBack && "vkuiRoot__viewHideForward", transition && viewId === activeView && isBack && "vkuiRoot__viewShowBack", transition && viewId === activeView && !isBack && "vkuiRoot__viewShowForward"),
|
|
122
|
+
children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
|
|
123
|
+
isBack: isBack,
|
|
124
|
+
children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
|
|
125
|
+
entering: transition && viewId === activeView,
|
|
126
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
127
|
+
className: "vkuiRoot__scrollCompensation",
|
|
128
|
+
style: {
|
|
129
|
+
marginTop: compensateScroll ? viewId && -((_scrolls_viewId = scrolls[viewId]) !== null && _scrolls_viewId !== void 0 ? _scrolls_viewId : 0) : undefined
|
|
130
|
+
},
|
|
131
|
+
children: view
|
|
132
|
+
})
|
|
126
133
|
})
|
|
127
134
|
})
|
|
128
|
-
})
|
|
129
|
-
}
|
|
130
|
-
})
|
|
131
|
-
})
|
|
135
|
+
}, viewId);
|
|
136
|
+
})
|
|
137
|
+
}))
|
|
138
|
+
});
|
|
132
139
|
};
|
|
133
140
|
|
|
134
141
|
//# sourceMappingURL=Root.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Root/Root.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n /**\n * `id` активной `View`.\n */\n activeView: string;\n /**\n * Обработчик, который вызывается при завершении анимации смены активной `View`.\n */\n onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n /**\n * Коллекция `View`. У каждой `View` должен быть `id`.\n */\n children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkui.io/components/root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n ...restProps\n}: RootProps): React.ReactNode => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled || !animate;\n\n const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n React.useEffect(\n function onAnimationEndFallback() {\n if (transition && disableAnimation) {\n finishTransition();\n }\n },\n [transition, disableAnimation, finishTransition],\n );\n\n const onAnimationEnd = () => {\n finishTransition();\n };\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n platform === 'ios' && styles.ios,\n transition && styles.transition,\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView || (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => {\n viewId && (viewNodes[viewId] = e);\n }}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles.view,\n transition && viewId === prevView && isBack && styles.viewHideBack,\n transition && viewId === prevView && !isBack && styles.viewHideForward,\n transition && viewId === activeView && isBack && styles.viewShowBack,\n transition && viewId === activeView && !isBack && styles.viewShowForward,\n )}\n >\n <NavTransitionDirectionProvider isBack={isBack}>\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles.scrollCompensation}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </NavTransitionDirectionProvider>\n </div>\n );\n })}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","usePlatform","useDOM","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","e","undefined","className","entering","style","marginTop"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Root/Root.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n /**\n * `id` активной `View`.\n */\n activeView: string;\n /**\n * Обработчик, который вызывается при завершении анимации смены активной `View`.\n */\n onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n /**\n * Коллекция `View`. У каждой `View` должен быть `id`.\n */\n children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkui.io/components/root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n ...restProps\n}: RootProps): React.ReactNode => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled || !animate;\n\n const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n React.useEffect(\n function onAnimationEndFallback() {\n if (transition && disableAnimation) {\n finishTransition();\n }\n },\n [transition, disableAnimation, finishTransition],\n );\n\n const onAnimationEnd: React.AnimationEventHandler<HTMLElement> = (e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n finishTransition();\n };\n\n return (\n <LockFloatingPositionContext.Provider value={transition}>\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n platform === 'ios' && styles.ios,\n transition && styles.transition,\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView || (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => {\n viewId && (viewNodes[viewId] = e);\n }}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles.view,\n transition && viewId === prevView && isBack && styles.viewHideBack,\n transition && viewId === prevView && !isBack && styles.viewHideForward,\n transition && viewId === activeView && isBack && styles.viewShowBack,\n transition && viewId === activeView && !isBack && styles.viewShowForward,\n )}\n >\n <NavTransitionDirectionProvider isBack={isBack}>\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles.scrollCompensation}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </NavTransitionDirectionProvider>\n </div>\n );\n })}\n </RootComponent>\n </LockFloatingPositionContext.Provider>\n );\n};\n"],"names":["React","classNames","usePlatform","useDOM","LockFloatingPositionContext","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","Provider","value","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","entering","style","marginTop"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../src/components/View/View.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../src/components/View/View.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgB7D,UAAU,OAAO;IACf,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,UAAU,YAAY;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,eAAO,IAAI,YAAY,EAAE,YAAiB,CAAC;AAE3C,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU;IACnF;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,SAAS,CAAC;IACpE;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,0KAWlB,SAAS,KAAG,KAAK,CAAC,SAidpB,CAAC"}
|
|
@@ -9,6 +9,7 @@ import { usePlatform } from "../../hooks/usePlatform.js";
|
|
|
9
9
|
import { usePrevious } from "../../hooks/usePrevious.js";
|
|
10
10
|
import { millisecondsInSecond } from "../../lib/date.js";
|
|
11
11
|
import { blurActiveElement, useDOM } from "../../lib/dom.js";
|
|
12
|
+
import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
|
|
12
13
|
import { getNavId } from "../../lib/getNavId.js";
|
|
13
14
|
import { warnOnce } from "../../lib/warnOnce.js";
|
|
14
15
|
import { useScroll } from "../AppRoot/ScrollContext.js";
|
|
@@ -108,7 +109,10 @@ const warn = warnOnce('View');
|
|
|
108
109
|
onTransition,
|
|
109
110
|
scroll
|
|
110
111
|
]);
|
|
111
|
-
const handleAnimatedTargetAnimationEnd = ()=>{
|
|
112
|
+
const handleAnimatedTargetAnimationEnd = (e)=>{
|
|
113
|
+
if (e.target !== e.currentTarget) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
112
116
|
if (prevPanel !== null) {
|
|
113
117
|
flushTransition(prevPanel, Boolean(isBack));
|
|
114
118
|
}
|
|
@@ -348,61 +352,64 @@ const warn = warnOnce('View');
|
|
|
348
352
|
]);
|
|
349
353
|
return /*#__PURE__*/ _jsx(NavViewIdContext.Provider, {
|
|
350
354
|
value: id,
|
|
351
|
-
children: /*#__PURE__*/ _jsx(
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
children:
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
if (
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
355
|
+
children: /*#__PURE__*/ _jsx(LockFloatingPositionContext.Provider, {
|
|
356
|
+
value: swipingBack || animated,
|
|
357
|
+
children: /*#__PURE__*/ _jsx(Touch, _object_spread_props(_object_spread({
|
|
358
|
+
Component: "section"
|
|
359
|
+
}, restProps), {
|
|
360
|
+
className: classNames("vkuiView__host", platform === 'ios' && classNames("vkuiView__ios", 'vkuiInternalView--ios'), !disableAnimation && animated && "vkuiView__animated", !disableAnimation && swipingBack && "vkuiView__swipingBack", disableAnimation && "vkuiView__noMotion", className),
|
|
361
|
+
onMoveX: iOSSwipeBackSimulationEnabled ? handleTouchMoveXForIOSSwipeBackSimulation : platform === 'ios' ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext : undefined,
|
|
362
|
+
onEnd: iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined,
|
|
363
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
364
|
+
className: "vkuiView__panels",
|
|
365
|
+
children: panels.map((panel)=>{
|
|
366
|
+
const panelId = getNavId(panel.props, warn);
|
|
367
|
+
const isPanelActive = panelId === activePanel;
|
|
368
|
+
const isPanelPrev = panelId === prevPanel;
|
|
369
|
+
const isPanelNext = panelId === nextPanel;
|
|
370
|
+
const isAnimatedTarget = animated && (isBack ? isPanelPrev : isPanelNext);
|
|
371
|
+
const isSwipeBackPrev = panelId === swipeBackPrevPanel;
|
|
372
|
+
const isSwipeBackNext = panelId === swipeBackNextPanel;
|
|
373
|
+
const isSwipeBackTarget = swipeBackResult && isSwipeBackPrev;
|
|
374
|
+
let scrollCompensateStyle = undefined;
|
|
375
|
+
if (isPanelPrev || isPanelNext && isBack || isSwipeBackPrev || isSwipeBackNext) {
|
|
376
|
+
const marginTop = scrolls.current[panelId];
|
|
377
|
+
if (marginTop !== undefined) {
|
|
378
|
+
scrollCompensateStyle = {
|
|
379
|
+
marginTop: -1 * marginTop
|
|
380
|
+
};
|
|
381
|
+
}
|
|
375
382
|
}
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
383
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
384
|
+
className: classNames("vkuiView__panel", isPanelActive && "vkuiView__panelActive", isPanelPrev && "vkuiView__panelPrev", isPanelNext && "vkuiView__panelNext", isSwipeBackPrev && "vkuiView__panelSwipeBackPrev", isSwipeBackNext && "vkuiView__panelSwipeBackNext", swipeBackResult === 'success' && "vkuiView__panelSwipeBackSuccess", swipeBackResult === 'fail' && "vkuiView__panelSwipeBackFailed"),
|
|
385
|
+
onTransitionEnd: isSwipeBackTarget ? handleSwipeBackTargetTransitionEnd : undefined,
|
|
386
|
+
onAnimationEnd: isAnimatedTarget ? handleAnimatedTargetAnimationEnd : undefined,
|
|
387
|
+
ref: (el)=>{
|
|
388
|
+
panelId !== undefined && (panelNodes.current[panelId] = el);
|
|
389
|
+
},
|
|
390
|
+
style: calcPanelSwipeStyles(isSwipeBackPrev, isSwipeBackNext),
|
|
391
|
+
children: [
|
|
392
|
+
platform === 'ios' && /*#__PURE__*/ _jsx("div", {
|
|
393
|
+
className: "vkuiView__panelOverlay",
|
|
394
|
+
style: calcPanelSwipeBackOverlayStyles(isSwipeBackNext)
|
|
395
|
+
}),
|
|
396
|
+
/*#__PURE__*/ _jsx("div", {
|
|
397
|
+
className: "vkuiView__panelIn",
|
|
398
|
+
style: scrollCompensateStyle,
|
|
399
|
+
children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
|
|
400
|
+
isBack: swipingBack || isBack,
|
|
401
|
+
children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
|
|
402
|
+
entering: panelId === nextPanel || panelId === swipeBackNextPanel,
|
|
403
|
+
children: panel
|
|
404
|
+
})
|
|
398
405
|
})
|
|
399
406
|
})
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
}
|
|
407
|
+
]
|
|
408
|
+
}, panelId);
|
|
409
|
+
})
|
|
403
410
|
})
|
|
404
|
-
})
|
|
405
|
-
})
|
|
411
|
+
}))
|
|
412
|
+
})
|
|
406
413
|
});
|
|
407
414
|
};
|
|
408
415
|
|