@vkontakte/vkui 8.1.1 → 8.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/components/Flex/FlexItem/FlexItem.d.ts +1 -1
  2. package/dist/components/Flex/FlexItem/FlexItem.d.ts.map +1 -1
  3. package/dist/components/Flex/FlexItem/FlexItem.js +39 -8
  4. package/dist/components/Flex/FlexItem/FlexItem.js.map +1 -1
  5. package/dist/components/NavTransitionContext/NavTransitionContext.d.ts +2 -1
  6. package/dist/components/NavTransitionContext/NavTransitionContext.d.ts.map +1 -1
  7. package/dist/components/NavTransitionContext/NavTransitionContext.js +8 -4
  8. package/dist/components/NavTransitionContext/NavTransitionContext.js.map +1 -1
  9. package/dist/components/OnboardingTooltip/OnboardingTooltip.d.ts.map +1 -1
  10. package/dist/components/OnboardingTooltip/OnboardingTooltip.js +2 -4
  11. package/dist/components/OnboardingTooltip/OnboardingTooltip.js.map +1 -1
  12. package/dist/components/Popper/Popper.d.ts.map +1 -1
  13. package/dist/components/Popper/Popper.js +6 -3
  14. package/dist/components/Popper/Popper.js.map +1 -1
  15. package/dist/components/Root/Root.d.ts.map +1 -1
  16. package/dist/components/Root/Root.js +29 -32
  17. package/dist/components/Root/Root.js.map +1 -1
  18. package/dist/components/View/View.d.ts.map +1 -1
  19. package/dist/components/View/View.js +50 -53
  20. package/dist/components/View/View.js.map +1 -1
  21. package/dist/components/View/ViewInfinite.d.ts.map +1 -1
  22. package/dist/components/View/ViewInfinite.js +34 -37
  23. package/dist/components/View/ViewInfinite.js.map +1 -1
  24. package/dist/components.css +1 -1
  25. package/dist/components.css.map +1 -1
  26. package/dist/cssm/components/Flex/FlexItem/FlexItem.js +39 -9
  27. package/dist/cssm/components/Flex/FlexItem/FlexItem.js.map +1 -1
  28. package/dist/cssm/components/NavTransitionContext/NavTransitionContext.js +8 -4
  29. package/dist/cssm/components/NavTransitionContext/NavTransitionContext.js.map +1 -1
  30. package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js +2 -4
  31. package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js.map +1 -1
  32. package/dist/cssm/components/Popper/Popper.js +6 -3
  33. package/dist/cssm/components/Popper/Popper.js.map +1 -1
  34. package/dist/cssm/components/Root/Root.js +29 -32
  35. package/dist/cssm/components/Root/Root.js.map +1 -1
  36. package/dist/cssm/components/View/View.js +50 -53
  37. package/dist/cssm/components/View/View.js.map +1 -1
  38. package/dist/cssm/components/View/ViewInfinite.js +34 -37
  39. package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
  40. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +4 -4
  41. package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  42. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
  43. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +4 -4
  44. package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
  45. package/dist/vkui.css +1 -1
  46. package/dist/vkui.css.map +1 -1
  47. package/package.json +1 -1
  48. package/src/components/Flex/FlexItem/FlexItem.tsx +38 -11
  49. package/src/components/NavTransitionContext/NavTransitionContext.tsx +5 -1
  50. package/src/components/OnboardingTooltip/OnboardingTooltip.tsx +2 -5
  51. package/src/components/Popper/Popper.tsx +7 -4
  52. package/src/components/Root/Root.tsx +50 -52
  53. package/src/components/View/View.tsx +83 -89
  54. package/src/components/View/ViewInfinite.tsx +65 -69
  55. package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +4 -5
  56. package/dist/cssm/components/Flex/FlexItem/FlexItem.module.css +0 -17
  57. package/dist/cssm/lib/floating/LockFloatingPosition/LockFloatingPosition.js +0 -6
  58. package/dist/cssm/lib/floating/LockFloatingPosition/LockFloatingPosition.js.map +0 -1
  59. package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.d.ts +0 -6
  60. package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.d.ts.map +0 -1
  61. package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.js +0 -6
  62. package/dist/lib/floating/LockFloatingPosition/LockFloatingPosition.js.map +0 -1
  63. package/src/components/Flex/FlexItem/FlexItem.module.css +0 -17
  64. package/src/components/Flex/FlexItem/FlexItem.module.css.d.ts.map +0 -1
  65. package/src/lib/floating/LockFloatingPosition/LockFloatingPosition.tsx +0 -6
@@ -1,22 +1,52 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { getRequiredValueByKey } from "../../../helpers/getValueByKey.js";
2
3
  import { resolveLayoutProps } from "../../../lib/layouts/index.js";
3
4
  import { warnOnce } from "../../../lib/warnOnce.js";
4
5
  import { RootComponent } from "../../RootComponent/RootComponent.js";
5
- import styles from "./FlexItem.module.css";
6
- const flexClassNames = {
7
- grow: styles.flexGrow,
8
- shrink: styles.flexShrink,
9
- content: styles.flexContent,
10
- fixed: styles.flexFixed
6
+ const resolveFlexProps = (flex, flexBasis)=>{
7
+ const overrideProps = flexBasis !== undefined ? {
8
+ flexBasis
9
+ } : {};
10
+ if (!flex) {
11
+ return overrideProps;
12
+ }
13
+ return {
14
+ ...getRequiredValueByKey(flex, {
15
+ grow: {
16
+ flexGrow: 1,
17
+ flexShrink: 0,
18
+ flexBasis: 'auto'
19
+ },
20
+ shrink: {
21
+ flexGrow: 0,
22
+ flexShrink: 1,
23
+ flexBasis: 'auto'
24
+ },
25
+ content: {
26
+ flexGrow: 1,
27
+ flexShrink: 1,
28
+ flexBasis: 'auto'
29
+ },
30
+ fixed: {
31
+ flexGrow: 0,
32
+ flexShrink: 0,
33
+ flexBasis: 'auto'
34
+ }
35
+ }),
36
+ ...overrideProps
37
+ };
11
38
  };
12
39
  const warn = warnOnce('Flex.Item');
13
- export const FlexItem = ({ flex, ...restProps })=>{
40
+ export const FlexItem = ({ flex, flexBasis, ...restProps })=>{
14
41
  if (process.env.NODE_ENV === 'development') {
15
42
  warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');
16
43
  }
17
- const resolvedProps = resolveLayoutProps(restProps);
44
+ const flexProps = resolveFlexProps(flex, flexBasis);
45
+ const resolvedProps = resolveLayoutProps({
46
+ ...restProps,
47
+ ...flexProps
48
+ });
18
49
  return /*#__PURE__*/ _jsx(RootComponent, {
19
- baseClassName: flex && flexClassNames[flex],
20
50
  ...resolvedProps
21
51
  });
22
52
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport styles from './FlexItem.module.css';\n\nconst flexClassNames = {\n grow: styles.flexGrow,\n shrink: styles.flexShrink,\n content: styles.flexContent,\n fixed: styles.flexFixed,\n};\n\nexport type FlexItemProps = RootComponentProps<HTMLElement> &\n Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {\n /**\n * Позволяет задать предопределенные значения свойства `flex`:\n *\n * - `grow` соответствует значению `1 0 auto`\n * - `shrink` соответствует значению `0 1 auto`\n * - `content` соответствует значению `1 1 auto`\n * - `fixed` соответствует значению `0 0 auto`.\n */\n flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;\n };\n\nconst warn = warnOnce('Flex.Item');\n\nexport const FlexItem = ({ flex, ...restProps }: FlexItemProps): React.ReactNode => {\n if (process.env.NODE_ENV === 'development') {\n warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');\n }\n\n const resolvedProps = resolveLayoutProps(restProps);\n\n return <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;\n};\n"],"names":["resolveLayoutProps","warnOnce","RootComponent","styles","flexClassNames","grow","flexGrow","shrink","flexShrink","content","flexContent","fixed","flexFixed","warn","FlexItem","flex","restProps","process","env","NODE_ENV","resolvedProps","baseClassName"],"mappings":";AAAA,SAA2BA,kBAAkB,QAAQ,gCAAuB;AAC5E,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAElE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,iBAAiB;IACrBC,MAAMF,OAAOG,QAAQ;IACrBC,QAAQJ,OAAOK,UAAU;IACzBC,SAASN,OAAOO,WAAW;IAC3BC,OAAOR,OAAOS,SAAS;AACzB;AAeA,MAAMC,OAAOZ,SAAS;AAEtB,OAAO,MAAMa,WAAW,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA0B;IAC5D,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CN,KAAK;IACP;IAEA,MAAMO,gBAAgBpB,mBAAmBgB;IAEzC,qBAAO,KAACd;QAAcmB,eAAeN,QAAQX,cAAc,CAACW,KAAK;QAAG,GAAGK,aAAa;;AACtF,EAAE"}
1
+ {"version":3,"sources":["../../../../../src/components/Flex/FlexItem/FlexItem.tsx"],"sourcesContent":["import { getRequiredValueByKey } from '../../../helpers/getValueByKey';\nimport { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\n\nexport type FlexItemProps = RootComponentProps<HTMLElement> &\n Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {\n /**\n * Позволяет задать предопределенные значения свойства `flex`:\n *\n * - `grow` соответствует значению `1 0 auto`\n * - `shrink` соответствует значению `0 1 auto`\n * - `content` соответствует значению `1 1 auto`\n * - `fixed` соответствует значению `0 0 auto`.\n */\n flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;\n };\n\nconst resolveFlexProps = (flex: FlexItemProps['flex'], flexBasis: FlexItemProps['flexBasis']) => {\n const overrideProps = flexBasis !== undefined ? { flexBasis } : {};\n if (!flex) {\n return overrideProps;\n }\n return {\n ...getRequiredValueByKey<Pick<LayoutProps, 'flexGrow' | 'flexShrink' | 'flexBasis'>>(flex, {\n grow: {\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: 'auto',\n },\n shrink: {\n flexGrow: 0,\n flexShrink: 1,\n flexBasis: 'auto',\n },\n content: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: 'auto',\n },\n fixed: {\n flexGrow: 0,\n flexShrink: 0,\n flexBasis: 'auto',\n },\n }),\n ...overrideProps,\n };\n};\n\nconst warn = warnOnce('Flex.Item');\n\nexport const FlexItem = ({ flex, flexBasis, ...restProps }: FlexItemProps): React.ReactNode => {\n if (process.env.NODE_ENV === 'development') {\n warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');\n }\n\n const flexProps = resolveFlexProps(flex, flexBasis);\n\n const resolvedProps = resolveLayoutProps({ ...restProps, ...flexProps });\n\n return <RootComponent {...resolvedProps} />;\n};\n"],"names":["getRequiredValueByKey","resolveLayoutProps","warnOnce","RootComponent","resolveFlexProps","flex","flexBasis","overrideProps","undefined","grow","flexGrow","flexShrink","shrink","content","fixed","warn","FlexItem","restProps","process","env","NODE_ENV","flexProps","resolvedProps"],"mappings":";AAAA,SAASA,qBAAqB,QAAQ,oCAAiC;AACvE,SAA2BC,kBAAkB,QAAQ,gCAAuB;AAC5E,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAgBlE,MAAMC,mBAAmB,CAACC,MAA6BC;IACrD,MAAMC,gBAAgBD,cAAcE,YAAY;QAAEF;IAAU,IAAI,CAAC;IACjE,IAAI,CAACD,MAAM;QACT,OAAOE;IACT;IACA,OAAO;QACL,GAAGP,sBAAkFK,MAAM;YACzFI,MAAM;gBACJC,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;YACAM,QAAQ;gBACNF,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;YACAO,SAAS;gBACPH,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;YACAQ,OAAO;gBACLJ,UAAU;gBACVC,YAAY;gBACZL,WAAW;YACb;QACF,EAAE;QACF,GAAGC,aAAa;IAClB;AACF;AAEA,MAAMQ,OAAOb,SAAS;AAEtB,OAAO,MAAMc,WAAW,CAAC,EAAEX,IAAI,EAAEC,SAAS,EAAE,GAAGW,WAA0B;IACvE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CL,KAAK;IACP;IAEA,MAAMM,YAAYjB,iBAAiBC,MAAMC;IAEzC,MAAMgB,gBAAgBrB,mBAAmB;QAAE,GAAGgB,SAAS;QAAE,GAAGI,SAAS;IAAC;IAEtE,qBAAO,KAAClB;QAAe,GAAGmB,aAAa;;AACzC,EAAE"}
@@ -2,16 +2,20 @@
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  /* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
4
4
  const TransitionContext = /*#__PURE__*/ React.createContext({
5
- entering: false
5
+ entering: false,
6
+ animating: false
6
7
  });
7
8
  export const useNavTransition = ()=>React.useContext(TransitionContext);
8
- export const NavTransitionProvider = ({ children, entering })=>{
9
+ export const NavTransitionProvider = ({ children, entering, animating })=>{
9
10
  const parentContext = useNavTransition();
10
11
  const contextValue = React.useMemo(()=>({
11
- entering: parentContext.entering || entering
12
+ entering: parentContext.entering || entering,
13
+ animating: parentContext.animating || animating
12
14
  }), [
13
15
  entering,
14
- parentContext.entering
16
+ animating,
17
+ parentContext.entering,
18
+ parentContext.animating
15
19
  ]);
16
20
  return /*#__PURE__*/ _jsx(TransitionContext.Provider, {
17
21
  value: contextValue,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface TransitionContextProps {\n entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n entering: false,\n});\nexport const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n children,\n entering,\n}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {\n const parentContext = useNavTransition();\n const contextValue = React.useMemo(\n () => ({\n entering: parentContext.entering || entering,\n }),\n [entering, parentContext.entering],\n );\n\n return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["React","TransitionContext","createContext","entering","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue","useMemo","Provider","value"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAK/B,MAAMC,kCAAoBD,MAAME,aAAa,CAAyB;IACpEC,UAAU;AACZ;AACA,OAAO,MAAMC,mBAAmB,IAA8BJ,MAAMK,UAAU,CAACJ,mBAAmB;AAElG,OAAO,MAAMK,wBAAwB,CAAC,EACpCC,QAAQ,EACRJ,QAAQ,EACwC;IAChD,MAAMK,gBAAgBJ;IACtB,MAAMK,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLP,UAAUK,cAAcL,QAAQ,IAAIA;QACtC,CAAA,GACA;QAACA;QAAUK,cAAcL,QAAQ;KAAC;IAGpC,qBAAO,KAACF,kBAAkBU,QAAQ;QAACC,OAAOH;kBAAeF;;AAC3D,EAAE"}
1
+ {"version":3,"sources":["../../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface TransitionContextProps {\n entering: boolean;\n animating: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n entering: false,\n animating: false,\n});\nexport const useNavTransition = (): TransitionContextProps => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n children,\n entering,\n animating,\n}: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {\n const parentContext = useNavTransition();\n const contextValue = React.useMemo(\n () => ({\n entering: parentContext.entering || entering,\n animating: parentContext.animating || animating,\n }),\n [entering, animating, parentContext.entering, parentContext.animating],\n );\n\n return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["React","TransitionContext","createContext","entering","animating","useNavTransition","useContext","NavTransitionProvider","children","parentContext","contextValue","useMemo","Provider","value"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAM/B,MAAMC,kCAAoBD,MAAME,aAAa,CAAyB;IACpEC,UAAU;IACVC,WAAW;AACb;AACA,OAAO,MAAMC,mBAAmB,IAA8BL,MAAMM,UAAU,CAACL,mBAAmB;AAElG,OAAO,MAAMM,wBAAwB,CAAC,EACpCC,QAAQ,EACRL,QAAQ,EACRC,SAAS,EACuC;IAChD,MAAMK,gBAAgBJ;IACtB,MAAMK,eAAeV,MAAMW,OAAO,CAChC,IAAO,CAAA;YACLR,UAAUM,cAAcN,QAAQ,IAAIA;YACpCC,WAAWK,cAAcL,SAAS,IAAIA;QACxC,CAAA,GACA;QAACD;QAAUC;QAAWK,cAAcN,QAAQ;QAAEM,cAAcL,SAAS;KAAC;IAGxE,qBAAO,KAACH,kBAAkBW,QAAQ;QAACC,OAAOH;kBAAeF;;AAC3D,EAAE"}
@@ -8,7 +8,6 @@ import { useGlobalEscKeyDown } from "../../hooks/useGlobalEscKeyDown.js";
8
8
  import { usePatchChildren } from "../../hooks/usePatchChildren.js";
9
9
  import { createPortal } from "../../lib/createPortal.js";
10
10
  import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
11
- import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
12
11
  import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
13
12
  import { warnOnce } from "../../lib/warnOnce.js";
14
13
  import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from "../FloatingArrow/DefaultIcon.js";
@@ -24,7 +23,7 @@ const warn = warnOnce('OnboardingTooltip');
24
23
  */ export const OnboardingTooltip = ({ 'id': idProp, children, 'shown': shownProp = true, arrowPadding = DEFAULT_ARROW_PADDING, arrowHeight = DEFAULT_ARROW_HEIGHT, offsetByMainAxis = 0, offsetByCrossAxis = 0, arrowOffset = 0, isStaticArrowOffset = false, onClose, 'placement': placementProp = 'bottom-start', maxWidth = TOOLTIP_MAX_WIDTH, 'style': styleProp, getRootRef, disableArrow = false, onPlacementChange, disableFlipMiddleware = false, disableShiftMiddleware = false, overlayLabel = 'Закрыть', title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, restoreFocus, disableFocusTrap, overflowPadding, ...restProps })=>{
25
24
  const generatedId = React.useId();
26
25
  const tooltipId = idProp || generatedId;
27
- const { entering } = useNavTransition();
26
+ const { entering, animating } = useNavTransition();
28
27
  const [arrowRef, setArrowRef] = React.useState(null);
29
28
  const [tooltipContainer, setTooltipContainer] = React.useState(null);
30
29
  const [positionStrategy, setPositionStrategy] = React.useState('absolute');
@@ -41,14 +40,13 @@ const warn = warnOnce('OnboardingTooltip');
41
40
  disableShiftMiddleware,
42
41
  overflowPadding
43
42
  });
44
- const isLock = React.useContext(LockFloatingPositionContext);
45
43
  const { x: floatingDataX, y: floatingDataY, isPositioned, refs, placement: resolvedPlacement, middlewareData: { arrow: arrowCoords } } = useFloating({
46
44
  strategy: positionStrategy,
47
45
  ...strictPlacement !== undefined && {
48
46
  placement: strictPlacement
49
47
  },
50
48
  middleware: middlewares,
51
- ...!isLock && {
49
+ ...!animating && {
52
50
  whileElementsMounted: (...args)=>autoUpdateFloatingElement(...args, {
53
51
  elementResize: true
54
52
  })
@@ -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 { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\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 { RootComponent } from '../RootComponent/RootComponent';\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'] | undefined;\n /**\n * Включает абсолютное смещение по `arrowOffset`.\n */\n isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'] | undefined;\n};\n\nexport interface OnboardingTooltipProps\n extends AllowedFloatingComponentProps,\n AllowedTooltipBaseProps,\n AllowedFloatingArrowProps {\n /**\n * Управление поведением возврата фокуса при закрытии всплывающего окна.\n * @default true\n */\n restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;\n /**\n * Скрывает стрелку, указывающую на якорный элемент.\n */\n disableArrow?: boolean | undefined;\n /**\n * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n */\n onClose?: ((this: void) => void) | undefined;\n /**\n * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n */\n overlayLabel?: string | undefined;\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 isPositioned,\n refs,\n placement: resolvedPlacement,\n middlewareData: { arrow: arrowCoords },\n } = useFloating({\n strategy: positionStrategy,\n ...(strictPlacement !== undefined && { placement: strictPlacement }),\n middleware: middlewares,\n ...(!isLock && {\n whileElementsMounted: (...args) =>\n autoUpdateFloatingElement(...args, { elementResize: true }),\n }),\n });\n\n const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n const focusTrapRootRef = React.useRef<HTMLDivElement | null>(null);\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 useGlobalEscKeyDown(!!shown, onClose);\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 if (!isPositioned) {\n floatingStyle.visibility = 'hidden';\n }\n\n tooltip = createPortal(\n <FocusTrap rootRef={focusTrapRootRef} disabled={disableFocusTrap} restoreFocus={restoreFocus}>\n <RootComponent\n tabIndex={-1}\n getRootRef={focusTrapRootRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\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 </RootComponent>\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","useGlobalEscKeyDown","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","LockFloatingPositionContext","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","RootComponent","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","styles","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","isPositioned","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","undefined","middleware","whileElementsMounted","args","elementResize","tooltipRef","setFloating","focusTrapRootRef","useRef","childRef","child","titleId","process","env","NODE_ENV","tooltip","floatingStyle","visibility","rootRef","disabled","tabIndex","role","aria-modal","aria-label","aria-labelledby","button","className","overlay","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 { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\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 { RootComponent } from '../RootComponent/RootComponent';\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'] | undefined;\n /**\n * Включает абсолютное смещение по `arrowOffset`.\n */\n isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'] | undefined;\n};\n\nexport interface OnboardingTooltipProps\n extends AllowedFloatingComponentProps,\n AllowedTooltipBaseProps,\n AllowedFloatingArrowProps {\n /**\n * Управление поведением возврата фокуса при закрытии всплывающего окна.\n * @default true\n */\n restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;\n /**\n * Скрывает стрелку, указывающую на якорный элемент.\n */\n disableArrow?: boolean | undefined;\n /**\n * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.\n */\n onClose?: ((this: void) => void) | undefined;\n /**\n * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.\n */\n overlayLabel?: string | undefined;\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, animating } = 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 {\n x: floatingDataX,\n y: floatingDataY,\n isPositioned,\n refs,\n placement: resolvedPlacement,\n middlewareData: { arrow: arrowCoords },\n } = useFloating({\n strategy: positionStrategy,\n ...(strictPlacement !== undefined && { placement: strictPlacement }),\n middleware: middlewares,\n ...(!animating && {\n whileElementsMounted: (...args) =>\n autoUpdateFloatingElement(...args, { elementResize: true }),\n }),\n });\n\n const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n const focusTrapRootRef = React.useRef<HTMLDivElement | null>(null);\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 useGlobalEscKeyDown(!!shown, onClose);\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 if (!isPositioned) {\n floatingStyle.visibility = 'hidden';\n }\n\n tooltip = createPortal(\n <FocusTrap rootRef={focusTrapRootRef} disabled={disableFocusTrap} restoreFocus={restoreFocus}>\n <RootComponent\n tabIndex={-1}\n getRootRef={focusTrapRootRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}\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 </RootComponent>\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","useGlobalEscKeyDown","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","FocusTrap","useNavTransition","RootComponent","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","styles","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","animating","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","shown","middlewares","strictPlacement","placement","arrow","x","floatingDataX","y","floatingDataY","isPositioned","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","undefined","middleware","whileElementsMounted","args","elementResize","tooltipRef","setFloating","focusTrapRootRef","useRef","childRef","child","titleId","process","env","NODE_ENV","tooltip","floatingStyle","visibility","rootRef","disabled","tabIndex","role","aria-modal","aria-label","aria-labelledby","button","className","overlay","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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"}
@@ -4,12 +4,12 @@ import * as React from "react";
4
4
  import { mergeStyle } from "../../helpers/mergeStyle.js";
5
5
  import { useExternRef } from "../../hooks/useExternRef.js";
6
6
  import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
7
- import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
8
7
  import { useReferenceHiddenChangeCallback } from "../../lib/floating/useReferenceHiddenChangeCallback.js";
9
8
  import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
10
9
  import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
11
10
  import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from "../FloatingArrow/DefaultIcon.js";
12
11
  import { FloatingArrow } from "../FloatingArrow/FloatingArrow.js";
12
+ import { useNavTransition } from "../NavTransitionContext/NavTransitionContext.js";
13
13
  import { RootComponent } from "../RootComponent/RootComponent.js";
14
14
  import styles from "./Popper.module.css";
15
15
  /**
@@ -19,6 +19,7 @@ placement: placementProp = 'bottom-start', sameWidth, hideWhenReferenceHidden, o
19
19
  autoUpdateOnTargetResize = false, autoUpdateOnAnimationFrame = false, strategy: strategyProp, // ArrowProps
20
20
  arrowProps, ArrowIcon = DefaultIcon, // rest
21
21
  targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenceHiddenChange, zIndex, style, ...restProps })=>{
22
+ const { entering, animating } = useNavTransition();
22
23
  const [arrowRef, setArrowRef] = React.useState(null);
23
24
  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({
24
25
  placement: placementProp,
@@ -36,7 +37,6 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenc
36
37
  flipMiddlewareFallbackAxisSideDirection,
37
38
  overflowPadding
38
39
  });
39
- const isLock = React.useContext(LockFloatingPositionContext);
40
40
  const { x: floatingDataX, y: floatingDataY, strategy: floatingPositionStrategy, placement: resolvedPlacement, refs, middlewareData } = useFloating({
41
41
  ...strictPlacement !== undefined && {
42
42
  placement: strictPlacement
@@ -45,7 +45,7 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenc
45
45
  strategy: strategyProp
46
46
  },
47
47
  middleware: middlewares,
48
- ...isLock ? {} : {
48
+ ...animating ? {} : {
49
49
  whileElementsMounted: (...args)=>{
50
50
  /* istanbul ignore next: не знаю как проверить */ return autoUpdateFloatingElement(...args, {
51
51
  elementResize: autoUpdateOnTargetResize,
@@ -90,6 +90,9 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenc
90
90
  children
91
91
  ]
92
92
  });
93
+ if (entering) {
94
+ return null;
95
+ }
93
96
  return /*#__PURE__*/ _jsx(AppRootPortal, {
94
97
  usePortal: usePortal,
95
98
  children: dropdown
@@ -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 { 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 | undefined;\n /**\n * Пользовательская SVG иконка.\n *\n * Требования:\n *\n * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (смотри https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n */\n ArrowIcon?: FloatingArrowPropsPrivate['Icon'] | undefined;\n /**\n * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n */\n autoUpdateOnTargetResize?: boolean | undefined;\n /**\n * Пытаться обновлять позицию всплывающего элемента каждый фрейм.\n */\n autoUpdateOnAnimationFrame?: boolean | undefined;\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 ...(strictPlacement !== undefined && { placement: strictPlacement }),\n ...(strategyProp !== undefined && { strategy: strategyProp }),\n middleware: middlewares,\n ...(isLock\n ? {}\n : {\n whileElementsMounted: (...args) => {\n /* istanbul ignore next: не знаю как проверить */\n return autoUpdateFloatingElement(...args, {\n elementResize: autoUpdateOnTargetResize,\n animationFrame: autoUpdateOnAnimationFrame,\n });\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","styles","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","undefined","middleware","whileElementsMounted","args","elementResize","animationFrame","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","dropdown","baseClassName","host","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 { 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 { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\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 | undefined;\n /**\n * Пользовательская SVG иконка.\n *\n * Требования:\n *\n * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n * растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n * (смотри https://github.com/VKCOM/VKUI/pull/4496).\n * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n */\n ArrowIcon?: FloatingArrowPropsPrivate['Icon'] | undefined;\n /**\n * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n */\n autoUpdateOnTargetResize?: boolean | undefined;\n /**\n * Пытаться обновлять позицию всплывающего элемента каждый фрейм.\n */\n autoUpdateOnAnimationFrame?: boolean | undefined;\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 { entering, animating } = useNavTransition();\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 ...(strictPlacement !== undefined && { placement: strictPlacement }),\n ...(strategyProp !== undefined && { strategy: strategyProp }),\n middleware: middlewares,\n ...(animating\n ? {}\n : {\n whileElementsMounted: (...args) => {\n /* istanbul ignore next: не знаю как проверить */\n return autoUpdateFloatingElement(...args, {\n elementResize: autoUpdateOnTargetResize,\n animationFrame: autoUpdateOnAnimationFrame,\n });\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 if (entering) {\n return null;\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","useNavTransition","RootComponent","styles","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","entering","animating","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","undefined","middleware","whileElementsMounted","args","elementResize","animationFrame","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","dropdown","baseClassName","host","baseStyle","initialWidth","coords","Icon"],"mappings":"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"}
@@ -4,7 +4,6 @@ import * as React from "react";
4
4
  import { classNames } from "@vkontakte/vkjs";
5
5
  import { usePlatform } from "../../hooks/usePlatform.js";
6
6
  import { useDOM } from "../../lib/dom.js";
7
- import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
8
7
  import { getNavId } from "../../lib/getNavId.js";
9
8
  import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
10
9
  import { warnOnce } from "../../lib/warnOnce.js";
@@ -93,39 +92,37 @@ import styles from "./Root.module.css";
93
92
  }
94
93
  finishTransition();
95
94
  };
96
- return /*#__PURE__*/ _jsx(LockFloatingPositionContext.Provider, {
97
- value: transition,
98
- children: /*#__PURE__*/ _jsx(RootComponent, {
99
- ...restProps,
100
- baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, transition && styles.transition),
101
- children: views.map((view)=>{
102
- const viewId = getNavId(view.props, warn);
103
- if (viewId !== activeView && !(transition && viewId === prevView)) {
104
- return null;
105
- }
106
- const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
107
- const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
108
- return /*#__PURE__*/ _jsx("div", {
109
- ref: (e)=>{
110
- viewId && viewNodes.set(viewId, e);
111
- },
112
- onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
113
- className: classNames(styles.view, transition && viewId === prevView && isBack && styles.viewHideBack, transition && viewId === prevView && !isBack && styles.viewHideForward, transition && viewId === activeView && isBack && styles.viewShowBack, transition && viewId === activeView && !isBack && styles.viewShowForward),
114
- children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
115
- isBack: isBack,
116
- children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
117
- entering: transition && viewId === activeView,
118
- children: /*#__PURE__*/ _jsx("div", {
119
- className: styles.scrollCompensation,
120
- style: {
121
- marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined
122
- },
123
- children: view
124
- })
95
+ return /*#__PURE__*/ _jsx(RootComponent, {
96
+ ...restProps,
97
+ baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, transition && styles.transition),
98
+ children: views.map((view)=>{
99
+ const viewId = getNavId(view.props, warn);
100
+ if (viewId !== activeView && !(transition && viewId === prevView)) {
101
+ return null;
102
+ }
103
+ const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
104
+ const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
105
+ return /*#__PURE__*/ _jsx("div", {
106
+ ref: (e)=>{
107
+ viewId && viewNodes.set(viewId, e);
108
+ },
109
+ onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
110
+ className: classNames(styles.view, transition && viewId === prevView && isBack && styles.viewHideBack, transition && viewId === prevView && !isBack && styles.viewHideForward, transition && viewId === activeView && isBack && styles.viewShowBack, transition && viewId === activeView && !isBack && styles.viewShowForward),
111
+ children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
112
+ isBack: isBack,
113
+ children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
114
+ entering: transition && viewId === activeView,
115
+ animating: transition,
116
+ children: /*#__PURE__*/ _jsx("div", {
117
+ className: styles.scrollCompensation,
118
+ style: {
119
+ marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined
120
+ },
121
+ children: view
125
122
  })
126
123
  })
127
- }, viewId);
128
- })
124
+ })
125
+ }, viewId);
129
126
  })
130
127
  });
131
128
  };
@@ -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 { 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) | undefined;\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 | undefined;\n prevView?: string | undefined;\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.useState(() => new Map<string, number>());\n const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());\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.set(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.get(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.set(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\n ? viewId && -(scrolls.get(viewId) ?? 0)\n : 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","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useState","Map","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","set","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","get","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","Provider","value","baseClassName","host","ios","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","viewHideBack","viewHideForward","viewShowBack","viewShowForward","entering","scrollCompensation","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 { 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) | undefined;\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 | undefined;\n prevView?: string | undefined;\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.useState(() => new Map<string, number>());\n const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());\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.set(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.get(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 <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.set(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\n entering={transition && viewId === activeView}\n animating={transition}\n >\n <div\n className={styles.scrollCompensation}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls.get(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","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useState","Map","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","set","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","get","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","baseClassName","host","ios","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","viewHideBack","viewHideForward","viewShowBack","viewShowForward","entering","animating","scrollCompensation","style","marginTop"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,QAAQ,QAAyB,wBAAqB;AAC/D,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,qBAAqB,QAAQ,kDAA+C;AACrF,SAASC,8BAA8B,QAAQ,oEAAiE;AAChH,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,OAAOC,YAAY,oBAAoB;AAwBvC,qCAAqC,GAErC,MAAMC,OAAOR,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMS,OAAO,CAAC,EACnBC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,YAAY,EACZC,GAAG,EACH,GAAGC,WACO;IACV,MAAMC,SAAStB,MAAMuB,UAAU,CAAChB;IAChC,MAAMiB,WAAWtB;IACjB,MAAM,EAAEuB,QAAQ,EAAE,GAAGtB;IACrB,MAAM,CAACuB,QAAQ,GAAG1B,MAAM2B,QAAQ,CAAC,IAAM,IAAIC;IAC3C,MAAM,CAACC,UAAU,GAAG7B,MAAM2B,QAAQ,CAAC,IAAM,IAAIC;IAE7C,MAAM,EAAEE,0BAA0B,IAAI,EAAE,GAAGtB;IAC3C,MAAM,EAAEuB,OAAO,EAAE,GAAG/B,MAAMuB,UAAU,CAACX;IACrC,MAAMoB,mBAAmB,CAACF,2BAA2B,CAACC;IAEtD,MAAME,QAAQjC,MAAMkC,QAAQ,CAACC,OAAO,CAACnB;IAErC,MAAM,CAAC,EAAEoB,QAAQ,EAAEnB,UAAU,EAAEoB,UAAU,EAAEC,MAAM,EAAE,EAAEC,UAAU,GAAGvC,MAAM2B,QAAQ,CAAY;QAC1FV,YAAYC;QACZmB,YAAY;IACd;IACA,MAAMG,eAAe,CAACC;QACpB,IAAIA,UAAUxB,YAAY;YACxB,MAAMyB,UAAUT,MAAMU,GAAG,CAAC,CAACC,OAASxC,SAASwC,KAAKC,KAAK,EAAE/B;YACzD,MAAMwB,SAASI,QAAQI,OAAO,CAACL,SAASC,QAAQI,OAAO,CAAC7B;YACxDS,QAAQqB,GAAG,CAAC9B,YAAYK,OAAO0B,SAAS,GAAGC,CAAC;YAC5CV,UAAU;gBACRtB,YAAYwB;gBACZL,UAAUnB;gBACVoB,YAAY,CAACL;gBACbM;YACF;QACF;IACF;IACA,MAAMY,mBAAmBlD,MAAMmD,WAAW,CACxC,IAAMZ,UAAU;YAAEtB;YAAYmB;YAAUE;YAAQD,YAAY;QAAM,IAClE;QAACpB;QAAYqB;QAAQF;KAAS;IAGhC/B,0BAA0B;QACvBoB,SAAU2B,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAACpC;KAAW;IAEf,gBAAgB;IAChBZ,0BAA0B,IAAMmC,aAAatB,cAAc;QAACA;KAAY;IACxEb,0BAA0B;QACxB,IAAI,CAACgC,cAAcD,UAAU;YAC3B,qBAAqB;YACrBd,OAAOgC,QAAQ,CAAC,GAAGhB,SAASZ,QAAQ6B,GAAG,CAACtC,cAAc;YACtDE,gBACEA,aAAa;gBACXmB,QAAQkB,QAAQlB;gBAChBmB,MAAMrB;gBACNsB,IAAIzC;YACN;QACJ;IACF,GAAG;QAACoB;QAAYD;KAAS;IAEzBpC,MAAM2D,SAAS,CACb,SAASC;QACP,IAAIvB,cAAcL,kBAAkB;YAClCkB;QACF;IACF,GACA;QAACb;QAAYL;QAAkBkB;KAAiB;IAGlD,MAAMW,iBAA2D,CAACC;QAChE,IAAIA,EAAEC,MAAM,KAAKD,EAAEE,aAAa,EAAE;YAChC;QACF;QAEAd;IACF;IAEA,qBACE,KAACvC;QACE,GAAGU,SAAS;QACb4C,eAAehE,WACbY,OAAOqD,IAAI,EACX1C,aAAa,SAASX,OAAOsD,GAAG,EAChC9B,cAAcxB,OAAOwB,UAAU;kBAGhCJ,MAAMU,GAAG,CAAC,CAACC;YACV,MAAMwB,SAAShE,SAASwC,KAAKC,KAAK,EAAE/B;YACpC,IAAIsD,WAAWnD,cAAc,CAAEoB,CAAAA,cAAc+B,WAAWhC,QAAO,GAAI;gBACjE,OAAO;YACT;YACA,MAAMiC,qBAAqBhC,cAAc+B,WAAY9B,CAAAA,SAASF,WAAWnB,UAAS;YAClF,MAAMqD,mBACJjC,cAAe+B,CAAAA,WAAWhC,YAAaE,UAAU8B,WAAWnD,UAAU;YACxE,qBACE,KAACsD;gBAECC,KAAK,CAACV;oBACJM,UAAUvC,UAAUkB,GAAG,CAACqB,QAAQN;gBAClC;gBACAD,gBAAgBQ,qBAAqBR,iBAAiBY;gBACtDC,WAAWzE,WACTY,OAAO+B,IAAI,EACXP,cAAc+B,WAAWhC,YAAYE,UAAUzB,OAAO8D,YAAY,EAClEtC,cAAc+B,WAAWhC,YAAY,CAACE,UAAUzB,OAAO+D,eAAe,EACtEvC,cAAc+B,WAAWnD,cAAcqB,UAAUzB,OAAOgE,YAAY,EACpExC,cAAc+B,WAAWnD,cAAc,CAACqB,UAAUzB,OAAOiE,eAAe;0BAG1E,cAAA,KAACpE;oBAA+B4B,QAAQA;8BACtC,cAAA,KAAC7B;wBACCsE,UAAU1C,cAAc+B,WAAWnD;wBACnC+D,WAAW3C;kCAEX,cAAA,KAACkC;4BACCG,WAAW7D,OAAOoE,kBAAkB;4BACpCC,OAAO;gCACLC,WAAWb,mBAAmBF,UAAU,CAAE1C,CAAAA,QAAQ6B,GAAG,CAACa,WAAW,CAAA,IAAKK;4BACxE;sCAEC7B;;;;eAxBFwB;QA8BX;;AAGN,EAAE"}