npm - @vkontakte/vkui - Versions diffs - 4.32.0 → 4.33.2 - Mend

@vkontakte/vkui 4.32.0 → 4.33.2

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","mode","header","text","arrowRef","style","attributes","container","arrow","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","_isShown","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","tooltipArrowRef","setTooltipArrowRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","strategy","position","Error","arrowOffsetModifier","name","enabled","phase","fn","state","modifiersData","undefined","y","modifiers","options","offset","padding","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","createPortal","el","popper","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n target?: HTMLDivElement;\n arrowRef?: React.Ref<HTMLDivElement>;\n style?: {\n arrow: React.CSSProperties;\n container: React.CSSProperties;\n };\n attributes?: {\n arrow: React.HTMLAttributes<HTMLDivElement> \| null;\n container: React.HTMLAttributes<HTMLDivElement> \| null;\n };\n}\n\nconst isDOMTypeElement = (\n element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n function SimpleTooltip(\n { mode = \"accent\", header, text, arrowRef, style = {}, attributes },\n ref\n ) {\n return (\n <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>\n <div\n vkuiClass=\"Tooltip__container\"\n ref={ref}\n style={style.container}\n {...attributes?.container}\n >\n <div\n vkuiClass=\"Tooltip__corner\"\n style={style.arrow}\n {...attributes?.arrow}\n ref={arrowRef}\n />\n <div vkuiClass=\"Tooltip__content\">\n {header && (\n <Subhead weight=\"1\" vkuiClass=\"Tooltip__title\">\n {header}\n </Subhead>\n )}\n {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n </div>\n </div>\n </div>\n );\n }\n);\n\nexport interface TooltipProps {\n /*\n Важно: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n /\n children: React.ReactElement;\n mode?: \"accent\" \| \"light\";\n /\n Если передан `false`, то рисуется просто `children`.\n /\n isShown?: boolean;\n /\n Текст тултипа.\n /\n text?: React.ReactNode;\n /\n Заголовок тултипа.\n /\n header?: React.ReactNode;\n /\n Положение по горизонтали (прижатие к левому или правому краю `children`).\n * Если не задано, позиция по горизонтали определятся автоматически\n /\n alignX?: \"center\" \| \"left\" \| \"right\";\n /\n Положение по вертикали (расположение над или под `children`).\n * Если не задано, позиция по вертикали определятся автоматически\n /\n alignY?: \"top\" \| \"bottom\";\n /\n Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n /\n offsetX?: number;\n /\n Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n /\n offsetY?: number;\n /\n Сдвиг стрелочки относительно центра дочернего элемента.\n /\n cornerOffset?: number;\n /\n Сдвиг стрелочки относительно ширины тултипа\n /\n cornerAbsoluteOffset?: number;\n /\n Callback, который вызывается при клике по любому месту в пределах экрана.\n /\n onClose?: () => void;\n}\n\ndeclare type ArrowOffsetModifierOptions = {\n offset: number;\n};\ndeclare type ArrowOffsetModifier = Modifier<\n \"arrowOffset\",\n ArrowOffsetModifierOptions\n>;\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n switch (x) {\n case \"left\":\n return \"start\";\n case \"right\":\n return \"end\";\n default:\n return \"\";\n }\n}\nfunction getPlacement(\n alignX: TooltipProps[\"alignX\"],\n alignY: TooltipProps[\"alignY\"]\n): Placement {\n return [alignY \|\| \"bottom\", mapAlignX(alignX \|\| \"left\")]\n .filter((p) => !!p)\n .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n return placement.startsWith(\"top\") \|\| placement.startsWith(\"bottom\");\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Tooltip\n /\nconst Tooltip: React.FC<TooltipProps> = ({\n children,\n isShown: _isShown,\n offsetX = 0,\n offsetY = 15,\n alignX,\n alignY,\n onClose,\n cornerOffset = 0,\n cornerAbsoluteOffset,\n ...restProps\n}) => {\n const { entering } = useNavTransition();\n const isShown = _isShown && !entering;\n const [tooltipRef, setTooltipRef] = React.useState<HTMLElement \| null>(null);\n const [tooltipArrowRef, setTooltipArrowRef] =\n React.useState<HTMLElement \| null>(null);\n const [target, setTarget] = React.useState<HTMLElement>();\n\n if (IS_DEV) {\n const multiChildren = React.Children.count(children) > 1;\n // Empty children is a noop\n const primitiveChild =\n 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\n / eslint-disable no-restricted-properties /\n / eslint-disable @typescript-eslint/no-unnecessary-type-assertion/\n const tooltipContainer = React.useMemo(\n () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n [target]\n );\n const strategy = React.useMemo(\n () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n [target]\n );\n / eslint-enable @typescript-eslint/no-unnecessary-type-assertion/\n / eslint-enable no-restricted-properties */\n\n if (IS_DEV && target && !tooltipContainer) {\n throw new Error(\n \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n );\n }\n\n const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {\n return {\n name: \"arrowOffset\",\n enabled: true,\n phase: \"main\",\n fn({ state }) {\n if (!state.modifiersData.arrow) {\n return;\n }\n if (isVerticalPlacement(state.placement)) {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.x = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.x !== undefined) {\n state.modifiersData.arrow.x += cornerOffset;\n }\n }\n } else {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.y = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.y !== undefined) {\n state.modifiersData.arrow.y += cornerOffset;\n }\n }\n }\n },\n };\n }, [cornerOffset, cornerAbsoluteOffset]);\n\n const placement = getPlacement(alignX, alignY);\n const { styles, attributes } = usePopper(target, tooltipRef, {\n strategy,\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [offsetX, offsetY],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: tooltipArrowRef,\n padding: 14,\n },\n },\n {\n name: \"preventOverflow\",\n },\n {\n name: \"flip\",\n },\n arrowOffsetModifier,\n ],\n });\n\n const { document } = useDOM();\n useGlobalEventListener(document, \"click\", isShown && onClose, {\n passive: true,\n });\n // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n const childRef =\n React.isValidElement(children) &&\n (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n const patchedRef = useExternRef(setTarget, childRef);\n const child = React.isValidElement(children)\n ? React.cloneElement(children, {\n [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n })\n : children;\n\n return (\n <React.Fragment>\n {child}\n {isShown &&\n target != null &&\n ReactDOM.createPortal(\n <SimpleTooltip\n {...restProps}\n ref={(el) => setTooltipRef(el)}\n arrowRef={(el) => setTooltipArrowRef(el)}\n style={{ arrow: styles.arrow, container: styles.popper }}\n attributes={{\n arrow: attributes.arrow ?? null,\n container: attributes.popper ?? null,\n }}\n />,\n tooltipContainer\n )}\n </React.Fragment>\n );\n};\n\nTooltip.defaultProps = {\n offsetX: 0,\n offsetY: 15,\n cornerOffset: 0,\n isShown: true,\n mode: \"accent\",\n};\n// eslint-disable-next-line import/no-default-export\nexport default Tooltip;\n"],"file":"Tooltip.js"}
1	+ {"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","mode","header","text","arrowRef","style","attributes","container","arrow","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","_isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","tooltipArrowRef","setTooltipArrowRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","strategy","position","Error","arrowOffsetModifier","name","enabled","phase","fn","state","modifiersData","undefined","y","modifiers","options","offset","padding","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","createPortal","el","popper"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n target?: HTMLDivElement;\n arrowRef?: React.Ref<HTMLDivElement>;\n style?: {\n arrow: React.CSSProperties;\n container: React.CSSProperties;\n };\n attributes?: {\n arrow: React.HTMLAttributes<HTMLDivElement> \| null;\n container: React.HTMLAttributes<HTMLDivElement> \| null;\n };\n}\n\nconst isDOMTypeElement = (\n element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n function SimpleTooltip(\n { mode = \"accent\", header, text, arrowRef, style = {}, attributes },\n ref\n ) {\n return (\n <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>\n <div\n vkuiClass=\"Tooltip__container\"\n ref={ref}\n style={style.container}\n {...attributes?.container}\n >\n <div\n vkuiClass=\"Tooltip__corner\"\n style={style.arrow}\n {...attributes?.arrow}\n ref={arrowRef}\n />\n <div vkuiClass=\"Tooltip__content\">\n {header && (\n <Subhead weight=\"1\" vkuiClass=\"Tooltip__title\">\n {header}\n </Subhead>\n )}\n {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n </div>\n </div>\n </div>\n );\n }\n);\n\nexport interface TooltipProps {\n /*\n Важно: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n /\n children: React.ReactElement;\n mode?: \"accent\" \| \"light\";\n /\n Если передан `false`, то рисуется просто `children`.\n /\n isShown?: boolean;\n /\n Текст тултипа.\n /\n text?: React.ReactNode;\n /\n Заголовок тултипа.\n /\n header?: React.ReactNode;\n /\n Положение по горизонтали (прижатие к левому или правому краю `children`).\n * Если не задано, позиция по горизонтали определятся автоматически\n /\n alignX?: \"center\" \| \"left\" \| \"right\";\n /\n Положение по вертикали (расположение над или под `children`).\n * Если не задано, позиция по вертикали определятся автоматически\n /\n alignY?: \"top\" \| \"bottom\";\n /\n Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n /\n offsetX?: number;\n /\n Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n /\n offsetY?: number;\n /\n Сдвиг стрелочки относительно центра дочернего элемента.\n /\n cornerOffset?: number;\n /\n Сдвиг стрелочки относительно ширины тултипа\n /\n cornerAbsoluteOffset?: number;\n /\n Callback, который вызывается при клике по любому месту в пределах экрана.\n /\n onClose?: () => void;\n}\n\ndeclare type ArrowOffsetModifierOptions = {\n offset: number;\n};\ndeclare type ArrowOffsetModifier = Modifier<\n \"arrowOffset\",\n ArrowOffsetModifierOptions\n>;\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n switch (x) {\n case \"left\":\n return \"start\";\n case \"right\":\n return \"end\";\n default:\n return \"\";\n }\n}\nfunction getPlacement(\n alignX: TooltipProps[\"alignX\"],\n alignY: TooltipProps[\"alignY\"]\n): Placement {\n return [alignY \|\| \"bottom\", mapAlignX(alignX \|\| \"left\")]\n .filter((p) => !!p)\n .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n return placement.startsWith(\"top\") \|\| placement.startsWith(\"bottom\");\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Tooltip\n /\nexport const Tooltip: React.FC<TooltipProps> = ({\n children,\n isShown: _isShown = true,\n offsetX = 0,\n offsetY = 15,\n alignX,\n alignY,\n onClose,\n cornerOffset = 0,\n cornerAbsoluteOffset,\n mode = \"accent\",\n ...restProps\n}) => {\n const { entering } = useNavTransition();\n const isShown = _isShown && !entering;\n const [tooltipRef, setTooltipRef] = React.useState<HTMLElement \| null>(null);\n const [tooltipArrowRef, setTooltipArrowRef] =\n React.useState<HTMLElement \| null>(null);\n const [target, setTarget] = React.useState<HTMLElement>();\n\n if (IS_DEV) {\n const multiChildren = React.Children.count(children) > 1;\n // Empty children is a noop\n const primitiveChild =\n 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\n / eslint-disable no-restricted-properties /\n / eslint-disable @typescript-eslint/no-unnecessary-type-assertion/\n const tooltipContainer = React.useMemo(\n () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n [target]\n );\n const strategy = React.useMemo(\n () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n [target]\n );\n / eslint-enable @typescript-eslint/no-unnecessary-type-assertion/\n / eslint-enable no-restricted-properties */\n\n if (IS_DEV && target && !tooltipContainer) {\n throw new Error(\n \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n );\n }\n\n const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {\n return {\n name: \"arrowOffset\",\n enabled: true,\n phase: \"main\",\n fn({ state }) {\n if (!state.modifiersData.arrow) {\n return;\n }\n if (isVerticalPlacement(state.placement)) {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.x = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.x !== undefined) {\n state.modifiersData.arrow.x += cornerOffset;\n }\n }\n } else {\n if (cornerAbsoluteOffset !== undefined) {\n state.modifiersData.arrow.y = cornerAbsoluteOffset;\n } else {\n if (state.modifiersData.arrow?.y !== undefined) {\n state.modifiersData.arrow.y += cornerOffset;\n }\n }\n }\n },\n };\n }, [cornerOffset, cornerAbsoluteOffset]);\n\n const placement = getPlacement(alignX, alignY);\n const { styles, attributes } = usePopper(target, tooltipRef, {\n strategy,\n placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [offsetX, offsetY],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: tooltipArrowRef,\n padding: 14,\n },\n },\n {\n name: \"preventOverflow\",\n },\n {\n name: \"flip\",\n },\n arrowOffsetModifier,\n ],\n });\n\n const { document } = useDOM();\n useGlobalEventListener(document, \"click\", isShown && onClose, {\n passive: true,\n });\n // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n const childRef =\n React.isValidElement(children) &&\n (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n const patchedRef = useExternRef(setTarget, childRef);\n const child = React.isValidElement(children)\n ? React.cloneElement(children, {\n [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n })\n : children;\n\n return (\n <React.Fragment>\n {child}\n {isShown &&\n target != null &&\n ReactDOM.createPortal(\n <SimpleTooltip\n {...restProps}\n mode={mode}\n ref={(el) => setTooltipRef(el)}\n arrowRef={(el) => setTooltipArrowRef(el)}\n style={{ arrow: styles.arrow, container: styles.popper }}\n attributes={{\n arrow: attributes.arrow ?? null,\n container: attributes.popper ?? null,\n }}\n />,\n tooltipContainer\n )}\n </React.Fragment>\n );\n};\n"],"file":"Tooltip.js"}

package/dist/components/Typography/Title/Title.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export interface TitleProps extends React.AllHTMLAttributes<HTMLElement>, HasCom
      * > ⚠️ Начертания `"heavy"`, `"bold"`, `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
      */
     weight?: "heavy" | "bold" | "semibold" | "medium" | "regular" | "1" | "2" | "3";
-    level: "1" | "2" | "3";
+    level?: "1" | "2" | "3";
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Title

package/dist/components/Typography/Title/Title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Typography/Title/Title.tsx"],"names":["classNames","warnOnce","warn","Title","children","weight","level","Component","restProps","process","env","NODE_ENV","includes"],"mappings":";;;;AAEA,SAASA,UAAT;AACA,SAASC,QAAT;AAuBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,OAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAME,KAA2B,GAAG,SAA9BA,KAA8B,OAMrC;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,GAGJ;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;;AACJ,MAAI,CAACD,SAAL,EAAgB;AACdA,IAAAA,SAAS,GAAI,MAAMD,KAAnB;AACD;;AAED,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;AAC1C,QACEN,MAAM,IACN,CAAC,OAAD,EAAU,MAAV,EAAkB,UAAlB,EAA8B,QAA9B,EAAwC,SAAxC,EAAmDO,QAAnD,CAA4DP,MAA5D,CAFF,EAIEH,IAAI,iFACoBG,MADpB,sSAAJ;AAGH;;AAED,SACE,oBAAC,SAAD,eACMG,SADN;AAEE,IAAA,SAAS,EAAER,UAAU,CACnB,OADmB,qBAEPM,KAFO,GAGnBD,MAAM,uBAAgBA,MAAhB,CAHa;AAFvB,MAQGD,QARH,CADF;AAYD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport \"./Title.css\";\n\nexport interface TitleProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasComponent {\n /*\n Задаёт начертание шрифта отличное от стандартного.\n \n > ⚠️ Начертания `\"heavy\"`, `\"bold\"`, `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n /\n weight?:\n \| \"heavy\"\n \| \"bold\"\n \| \"semibold\"\n \| \"medium\"\n \| \"regular\"\n \| \"1\"\n \| \"2\"\n \| \"3\";\n level: \"1\" \| \"2\" \| \"3\";\n}\n\nconst warn = warnOnce(\"Title\");\n\n/\n @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title: React.FC<TitleProps> = ({\n children,\n weight,\n level = \"1\",\n Component,\n ...restProps\n}) => {\n if (!Component) {\n Component = (\"h\" + level) as React.ElementType;\n }\n\n if (process.env.NODE_ENV === \"development\") {\n if (\n weight &&\n [\"heavy\", \"bold\", \"semibold\", \"medium\", \"regular\"].includes(weight)\n )\n warn(\n `Начертание weight=\"${weight}\" устарело и будет удалено в 5.0.0. Используйте значения \"1\", \"2\" и \"3\"`\n );\n }\n\n return (\n <Component\n {...restProps}\n vkuiClass={classNames(\n \"Title\",\n `Title--l-${level}`,\n weight && `Title--w-${weight}`\n )}\n >\n {children}\n </Component>\n );\n};\n"],"file":"Title.js"}
1	+ {"version":3,"sources":["../../../../src/components/Typography/Title/Title.tsx"],"names":["classNames","warnOnce","warn","Title","children","weight","level","Component","restProps","process","env","NODE_ENV","includes"],"mappings":";;;;AAEA,SAASA,UAAT;AACA,SAASC,QAAT;AAuBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,OAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAME,KAA2B,GAAG,SAA9BA,KAA8B,OAMrC;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,GAGJ;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;;AACJ,MAAI,CAACD,SAAL,EAAgB;AACdA,IAAAA,SAAS,GAAI,MAAMD,KAAnB;AACD;;AAED,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;AAC1C,QACEN,MAAM,IACN,CAAC,OAAD,EAAU,MAAV,EAAkB,UAAlB,EAA8B,QAA9B,EAAwC,SAAxC,EAAmDO,QAAnD,CAA4DP,MAA5D,CAFF,EAIEH,IAAI,iFACoBG,MADpB,sSAAJ;AAGH;;AAED,SACE,oBAAC,SAAD,eACMG,SADN;AAEE,IAAA,SAAS,EAAER,UAAU,CACnB,OADmB,qBAEPM,KAFO,GAGnBD,MAAM,uBAAgBA,MAAhB,CAHa;AAFvB,MAQGD,QARH,CADF;AAYD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport \"./Title.css\";\n\nexport interface TitleProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasComponent {\n /*\n Задаёт начертание шрифта отличное от стандартного.\n \n > ⚠️ Начертания `\"heavy\"`, `\"bold\"`, `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n /\n weight?:\n \| \"heavy\"\n \| \"bold\"\n \| \"semibold\"\n \| \"medium\"\n \| \"regular\"\n \| \"1\"\n \| \"2\"\n \| \"3\";\n level?: \"1\" \| \"2\" \| \"3\";\n}\n\nconst warn = warnOnce(\"Title\");\n\n/\n @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title: React.FC<TitleProps> = ({\n children,\n weight,\n level = \"1\",\n Component,\n ...restProps\n}) => {\n if (!Component) {\n Component = (\"h\" + level) as React.ElementType;\n }\n\n if (process.env.NODE_ENV === \"development\") {\n if (\n weight &&\n [\"heavy\", \"bold\", \"semibold\", \"medium\", \"regular\"].includes(weight)\n )\n warn(\n `Начертание weight=\"${weight}\" устарело и будет удалено в 5.0.0. Используйте значения \"1\", \"2\" и \"3\"`\n );\n }\n\n return (\n <Component\n {...restProps}\n vkuiClass={classNames(\n \"Title\",\n `Title--l-${level}`,\n weight && `Title--w-${weight}`\n )}\n >\n {children}\n </Component>\n );\n};\n"],"file":"Title.js"}

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

@@ -19,5 +19,7 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     visibleCount?: number;
 }
-declare const _default: React.NamedExoticComponent<UsersStackProps>;
-export default _default;
+/**
+ * @see https://vkcom.github.io/VKUI/#/UsersStack
+ */
+export declare const UsersStack: ({ photos, visibleCount, size, layout, children, ...restProps }: UsersStackProps) => JSX.Element;

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

@@ -2,31 +2,28 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["photos", "visibleCount", "size", "layout", "children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
-import { Subhead } from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
 /**
  * @see https://vkcom.github.io/VKUI/#/UsersStack
  */
-var UsersStack = function UsersStack(props) {
-  var platform = usePlatform();
-  var _props$photos = props.photos,
-      photos = _props$photos === void 0 ? [] : _props$photos,
-      _props$visibleCount = props.visibleCount,
-      visibleCount = _props$visibleCount === void 0 ? 0 : _props$visibleCount,
-      size = props.size,
-      layout = props.layout,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
+export var UsersStack = function UsersStack(_ref) {
+  var _ref$photos = _ref.photos,
+      photos = _ref$photos === void 0 ? [] : _ref$photos,
+      _ref$visibleCount = _ref.visibleCount,
+      visibleCount = _ref$visibleCount === void 0 ? 3 : _ref$visibleCount,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "s" : _ref$size,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? "horizontal" : _ref$layout,
+      children = _ref.children,
+      restProps = _objectWithoutProperties(_ref, _excluded);
   var _useDOM = useDOM(),
       document = _useDOM.document;
@@ -35,40 +32,52 @@ var UsersStack = function UsersStack(props) {
     createMasks(document);
   }, [document]);
   var othersCount = Math.max(0, photos.length - visibleCount);
-  var canShowOthers = othersCount > 0 && size === "m";
+  var canShowOthers = othersCount > 0 && size !== "xs";
+  var CounterTypography = size === "m" ? Footnote : Caption;
+  var photoSize = {
+    xs: 16,
+    s: 24,
+    m: 32
+  }[size];
+  var directionClip = canShowOthers ? "right" : "left";
   var photosShown = photos.slice(0, visibleCount);
   return createScopedElement("div", _extends({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames(getClassName("UsersStack", platform), "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), {
-      "UsersStack--others": canShowOthers
-    })
+    vkuiClass: classNames("UsersStack", "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), canShowOthers && "UsersStack--others")
   }), createScopedElement("div", {
     vkuiClass: "UsersStack__photos",
     role: "presentation"
   }, photosShown.map(function (photo, i) {
-    return createScopedElement("div", {
-      key: i,
+    var direction = i === 0 && !canShowOthers ? "circle" : directionClip;
+    var pathHref = "#users_stack_".concat(photoSize, "_").concat(direction);
+    var clipPathHref = "url(#users_stack_mask_".concat(photoSize, "_").concat(direction, ")");
+    return createScopedElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
       vkuiClass: "UsersStack__photo",
-      style: {
-        backgroundImage: "url(".concat(photo, ")")
-      }
-    });
-  }), canShowOthers && createScopedElement(Caption, {
+      key: i,
+      "aria-hidden": true
+    }, createScopedElement("g", {
+      clipPath: clipPathHref
+    }, createScopedElement("use", {
+      vkuiClass: "UsersStack__fill",
+      href: pathHref
+    }), createScopedElement("image", {
+      href: photo,
+      width: photoSize,
+      height: photoSize
+    }), createScopedElement("use", {
+      href: pathHref,
+      fill: "none",
+      stroke: "rgba(0, 0, 0, 0.08)"
+    })));
+  }), canShowOthers && createScopedElement(CounterTypography, {
+    caps: true,
     weight: "1",
+    level: "2" // TODO: remove only level in #2343
+    ,
     vkuiClass: "UsersStack__photo UsersStack__photo--others",
-    "aria-hidden": "true"
-  }, createScopedElement("span", null, "+", othersCount))), hasReactNode(children) && createScopedElement(Subhead, {
-    Component: "span",
+    "aria-hidden": true
+  }, createScopedElement("span", null, "+", othersCount))), hasReactNode(children) && createScopedElement(Footnote, {
     vkuiClass: "UsersStack__text"
   }, children));
 };
-UsersStack.defaultProps = {
-  photos: [],
-  size: "s",
-  visibleCount: 3,
-  layout: "horizontal"
-}; // eslint-disable-next-line import/no-default-export
-export default /*#__PURE__*/React.memo(UsersStack);
 //# sourceMappingURL=UsersStack.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/UsersStack/UsersStack.tsx"],"names":["~~React","getClassName","usePlatform","~~hasReactNode","classNames","useIsomorphicLayoutEffect","~~Caption~~","~~Subhead~~","createMasks","useDOM","UsersStack","~~props","platform","~~photos","visibleCount","size","layout","children","restProps","document","othersCount","Math","max","length","canShowOthers","photosShown","slice","map","photo","i","~~backgroundImage~~","~~defaultProps~~","~~memo~~"],"mappings":";;;;~~AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;~~AACA,~~SAASC~~,YAAT;AACA,SAASC,~~WAAT;AACA,SAASC,YAAT;AACA,SAASC,~~UAAT;AACA,SAASC,yBAAT;AACA,SAASC,~~OAAT~~;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA,SAASC,MAAT;;AAuBA;AACA;AACA;AACA,IAAMC,~~UAAqC~~,GAAG,~~SAAxCA~~,~~UAAwC~~,~~CAACC~~,~~KAAD~~,~~EAA4B~~;~~AACxE~~,~~MAAMC~~,~~QAAQ~~,~~GAAGV~~,~~WAAW~~,~~EAA5B;;AACA,sBAOIS,KAPJ,CACEE,MADF~~;AAAA,~~MACEA~~,~~MADF~~,~~8BACW~~,~~EADX~~;AAAA,~~4BAOIF~~,~~KAPJ,CAEEG,YAFF~~;AAAA,~~MAEEA~~,~~YAFF~~,~~oCAEiB~~,~~CAFjB~~;AAAA,~~MAGEC~~,~~IAHF,GAOIJ,KAPJ,CAGEI,IAHF~~;AAAA,~~MAIEC~~,~~MAJF~~,~~GAOIL~~,~~KAPJ,CAIEK,MAJF~~;AAAA,~~MAKEC~~,~~QALF~~,~~GAOIN~~,~~KAPJ,CAKEM,QALF~~;AAAA,~~MAMKC~~,~~SANL,4BAOIP,KAPJ~~;;~~AAQA~~,~~gBAAqBF~~,MAAM,EAA3B;AAAA,~~MAAQU~~,QAAR,WAAQA,QAAR;;~~AAEAd~~,EAAAA,yBAAyB,CAAC,YAAM;AAC9BG,IAAAA,WAAW,~~CAACW~~,QAAD,CAAX;AACD,GAFwB,EAEtB,CAACA,QAAD,CAFsB,CAAzB;AAIA,MAAMC,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYT,MAAM,CAACU,MAAP,GAAgBT,YAA5B,CAApB;AACA,MAAMU,aAAa,GAAGJ,WAAW,GAAG,CAAd,IAAmBL,IAAI,KAAK,~~GAAlD~~;~~AAEA~~,MAAMU,WAAW,~~GAAGZ~~,MAAM,~~CAACa~~,KAAP,CAAa,CAAb,~~EAAgBZ~~,YAAhB,CAApB;AAEA,SACE,wCACMI,SADN;AAEE~~;AACA~~,IAAA,SAAS,~~EAAEd~~,UAAU,~~CACnBH~~,~~YAAY~~,~~CAAC~~,~~YAAD,EAAeW,QAAf,CADO,6BAECG,~~IAFD,2BAGFC,MAHE,~~GAInB;AACE~~,~~4BAAsBQ;AADxB~~,~~KAJmB~~;~~AAHvB~~,~~MAYE~~;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,IAAA,IAAI,EAAC;AAAzC,~~KACGC~~,WAAW,CAACE,GAAZ,CAAgB,UAACC,KAAD,EAAQC,CAAR;~~AAAA~~,~~WACf~~;AACE,MAAA,~~GAAG~~,~~EAAEA~~,~~CADP~~;AAEE,MAAA,SAAS,EAAC,mBAFZ;AAGE,MAAA,~~KAAK~~,~~EAAE~~;~~AAAEC~~,~~QAAAA~~,~~eAAe~~,~~gBAASF~~,~~KAAT~~;~~AAAjB;AAHT~~,~~MADe~~;~~AAAA~~,~~GAAhB~~,~~CADH~~,~~EASGJ~~,~~aAAa~~,~~IACZ~~,~~oBAAC~~,~~OAAD~~;~~AACE~~,~~IAAA~~,~~MAAM~~,~~EAAC~~,~~GADT~~;~~AAEE~~,~~IAAA~~,~~SAAS~~,~~EAAC~~,~~6CAFZ~~;~~AAGE~~,~~mBAAY~~;~~AAHd~~,~~KAKE~~,~~uCAAQJ~~,~~WAAR~~,~~CALF~~,~~CAVJ~~,~~CAZF~~,~~EA+BGjB~~,~~YAAY~~,~~CAACc~~,~~QAAD~~,~~CAAZ~~,~~IACC~~,~~oBAAC~~,~~OAAD~~;~~AAAS~~,~~IAAA~~,~~SAAS~~,~~EAAC~~,~~MAAnB~~;~~AAA0B~~,IAAA,~~SAAS~~,~~EAAC~~;~~AAApC~~,~~KACGA~~,~~QADH~~,~~CAhCJ~~,~~CADF~~;~~AAuCD~~,~~CA5DD;;AA8DAP~~,~~UAAU~~,~~CAACqB~~,~~YAAX~~,~~GAA0B~~;~~AACxBlB~~,~~EAAAA~~,~~MAAM~~,~~EAAE~~,~~EADgB~~;~~AAExBE~~,~~EAAAA~~,~~IAAI~~,~~EAAE~~,~~GAFkB;AAGxBD~~,~~EAAAA~~,YAAY,~~EAAE~~,~~CAHU;AAIxBE~~,~~EAAAA~~,~~MAAM~~,~~EAAE~~;~~AAJgB~~,~~CAA1B~~,C,~~CAOA;;AACA~~,~~4BAAehB~~,~~KAAK~~,~~CAACgC~~,~~IAAN~~,~~CAAWtB,UAAX,CAAf~~","sourcesContent":["import * as React from \"react\";\nimport { ~~getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {~~ hasReactNode } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { ~~Caption~~ } from \"../Typography/~~Caption~~/~~Caption~~\";\nimport { ~~Subhead~~ } from \"../Typography/~~Subhead~~/~~Subhead~~\";\nimport { createMasks } from \"./masks\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./UsersStack.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n Массив ссылок на фотографии\n /\n photos?: string[];\n /\n Размер аватарок\n /\n size?: \"xs\" \| \"s\" \| \"m\";\n /\n Вертикальный режим рекомендуется использовать с размером `m`\n /\n layout?: \"vertical\" \| \"horizontal\";\n /\n Количество аватарок, которые будут показаны.\n * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n /\n visibleCount?: number;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/UsersStack\n */\~~nconst~~ UsersStack: ~~React.FC<UsersStackProps>~~ = (~~props: UsersStackProps) =>~~ {\n ~~const platform = usePlatform();\n const {\n~~ photos = [],\n visibleCount = 0,\n size,\n layout,\n children,\n ...restProps\n } = ~~props;\~~n const { document } = useDOM();\n\n useIsomorphicLayoutEffect(() => {\n createMasks(document);\n }, [document]);\n\n const othersCount = Math.max(0, photos.length - visibleCount);\n const canShowOthers = othersCount > 0 && size === \"m\";\n\n const photosShown = photos.slice(0, visibleCount);\n\n return (\n <div\n {...restProps}\n ~~// eslint-disable-next-line vkui/no-object-expression-in-arguments\n~~ vkuiClass={classNames(\n ~~getClassName(~~\"UsersStack\"~~, platform)~~,\n `UsersStack--size-${size}`,\n `UsersStack--l-${layout}`,\n {\~~n \~~"UsersStack--others\"~~: canShowOthers,\n }~~\n )}\n >\n <div vkuiClass=\"UsersStack__photos\" role=\"presentation\">\n {photosShown.map((photo, i) => (\n ~~<div~~\n ~~key~~={i}\n vkuiClass=\"UsersStack__photo\"\n ~~style~~={{ ~~backgroundImage:~~ ~~`url($~~{photo})` }}\n ~~/>\~~n ))}\n\n {canShowOthers && (\n <~~Caption~~\n weight=\"1\"\n vkuiClass=\"UsersStack__photo UsersStack__photo--others\"\n aria-hidden~~=\"true~~\"\n >\n <span>+{othersCount}</span>\n </~~Caption~~>\n )}\n </div>\n {hasReactNode(children) && (\n <~~Subhead~~ ~~Component=\"span\"~~ vkuiClass=\"UsersStack__text\"~~>\n~~ {children}\n </~~Subhead~~>\n )}\n </div>\n );\n};\n~~\nUsersStack.defaultProps = {\n photos: [],\n size: \~~"~~s\",\n visibleCount: 3,\n layout: \"horizontal\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default React.memo(UsersStack);\n"~~],"file":"UsersStack.js"}
1	+ {"version":3,"sources":["../../../src/components/UsersStack/UsersStack.tsx"],"names":["hasReactNode","classNames","useIsomorphicLayoutEffect","Footnote","Caption","createMasks","useDOM","UsersStack","photos","visibleCount","size","layout","children","restProps","document","othersCount","Math","max","length","canShowOthers","CounterTypography","photoSize","xs","s","m","directionClip","photosShown","slice","map","photo","i","direction","pathHref","clipPathHref"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { createMasks } from \"./masks\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./UsersStack.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n Массив ссылок на фотографии\n /\n photos?: string[];\n /\n Размер аватарок\n /\n size?: \"xs\" \| \"s\" \| \"m\"; // TODO: \"s\" \| \"m\" \| \"l\"\n /\n Вертикальный режим рекомендуется использовать с размером `m`\n /\n layout?: \"vertical\" \| \"horizontal\";\n /\n Количество аватарок, которые будут показаны.\n * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n /\n visibleCount?: number;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n photos = [],\n visibleCount = 3,\n size = \"s\",\n layout = \"horizontal\",\n children,\n ...restProps\n}: UsersStackProps) => {\n const { document } = useDOM();\n\n useIsomorphicLayoutEffect(() => {\n createMasks(document);\n }, [document]);\n\n const othersCount = Math.max(0, photos.length - visibleCount);\n const canShowOthers = othersCount > 0 && size !== \"xs\";\n const CounterTypography = size === \"m\" ? Footnote : Caption;\n\n const photoSize = {\n xs: 16,\n s: 24,\n m: 32,\n }[size];\n const directionClip = canShowOthers ? \"right\" : \"left\";\n\n const photosShown = photos.slice(0, visibleCount);\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"UsersStack\",\n `UsersStack--size-${size}`,\n `UsersStack--l-${layout}`,\n canShowOthers && \"UsersStack--others\"\n )}\n >\n <div vkuiClass=\"UsersStack__photos\" role=\"presentation\">\n {photosShown.map((photo, i) => {\n const direction =\n i === 0 && !canShowOthers ? \"circle\" : directionClip;\n\n const pathHref = `#users_stack_${photoSize}_${direction}`;\n const clipPathHref = `url(#users_stack_mask_${photoSize}_${direction})`;\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n vkuiClass=\"UsersStack__photo\"\n key={i}\n aria-hidden\n >\n <g clipPath={clipPathHref}>\n <use vkuiClass=\"UsersStack__fill\" href={pathHref} />\n <image href={photo} width={photoSize} height={photoSize} />\n <use href={pathHref} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n </g>\n </svg>\n );\n })}\n\n {canShowOthers && (\n <CounterTypography\n caps\n weight=\"1\"\n level=\"2\" // TODO: remove only level in #2343\n vkuiClass=\"UsersStack__photo UsersStack__photo--others\"\n aria-hidden\n >\n <span>+{othersCount}</span>\n </CounterTypography>\n )}\n </div>\n {hasReactNode(children) && (\n <Footnote vkuiClass=\"UsersStack__text\">{children}</Footnote>\n )}\n </div>\n );\n};\n"],"file":"UsersStack.js"}

package/dist/components/UsersStack/masks.js CHANGED Viewed

@@ -13,7 +13,7 @@ export function createMasks(document) {
   svgElement.style.position = "absolute";
   svgElement.style.width = "0px";
   svgElement.style.height = "0px";
-  svgElement.innerHTML = "<defs>\n  <clipPath id=\"users_stack_mask_16_left\">\n    <path transform=\"translate(1.5 0)\" d=\"M1.20772 8C1.20772 6.32671 0.768742 4.75626 0 3.39821C1.44342 1.34278 3.8277 0 6.52463 0C10.9293 0 14.5 3.58172 14.5 8C14.5 12.4183 10.9293 16 6.52463 16C3.8277 16 1.44342 14.6572 0 12.6018C0.768742 11.2437 1.20772 9.6733 1.20772 8Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_left\">\n    <path d=\"M3.9971785,12 C3.9971785,9.49005736 3.33667467,7.13438366 2.18,5.09731189 C4.35181237,2.01417617 7.93927741,0 11.9971785,0 C18.6245955,0 23.9971785,5.372583 23.9971785,12 C23.9971785,18.627417 18.6245955,24 11.9971785,24 C7.93927741,24 4.35181237,21.9858238 2.18,18.9026881 C3.33667467,16.8656163 3.9971785,14.5099426 3.9971785,12 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_right\">\n    <path d=\"M21.8171785,5.09731189 C20.6605038,7.13438366 20,9.49005736 20,12 C20,14.5099426 20.6605038,16.8656163 21.8171785,18.9026881 C19.6453661,21.9858238 16.0579011,24 12,24 C5.372583,24 3.90798505e-14,18.627417 3.90798505e-14,12 C3.90798505e-14,5.372583 5.372583,0 12,0 C16.0579011,0 19.6453661,2.01417617 21.8171785,5.09731189 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_left\">\n    <path d=\"M2.13430019,23.9892466 C3.32858917,21.5820026 4,18.8694095 4,16 C4,13.1305905 3.32858917,10.4179974 2.13430019,8.0107534 C4.89924175,3.22241289 10.0733034,-2.30926389e-14 16,-2.30926389e-14 C24.836556,-2.30926389e-14 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C10.0733034,32 4.89924175,28.7775871 2.13430019,23.9892466 L2.13430019,23.9892466 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_right\">\n    <path d=\"M29.8656998,8.0107534 C28.6714108,10.4179974 28,13.1305905 28,16 C28,18.8694095 28.6714108,21.5820026 29.8656998,23.9892466 C27.1007583,28.7775871 21.9266966,32 16,32 C7.163444,32 3.90798505e-14,24.836556 3.90798505e-14,16 C3.90798505e-14,7.163444 7.163444,0 16,0 C21.9266966,0 27.1007583,3.22241289 29.8656998,8.0107534 Z\"></path>\n  </clipPath>\n</defs>";
+  svgElement.innerHTML = "<defs>\n  <path id=\"users_stack_16_left\" d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\" />\n  <circle id=\"users_stack_16_circle\" cx=\"8\" cy=\"8\" r=\"8\" />\n  \n  <path id=\"users_stack_24_left\" d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\" />\n  <circle id=\"users_stack_24_circle\" cx=\"12\" cy=\"12\" r=\"12\" />\n  <path id=\"users_stack_24_right\" d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\" />\n\n  <path id=\"users_stack_32_left\" d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\" />\n  <circle id=\"users_stack_32_circle\" cx=\"16\" cy=\"16\" r=\"16\" />\n  <path id=\"users_stack_32_right\" d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\" />\n\n  <clipPath id=\"users_stack_mask_16_left\">\n    <use href=\"#users_stack_16_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_16_circle\">\n    <use href=\"#users_stack_16_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_left\">\n    <use href=\"#users_stack_24_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_circle\">\n    <use href=\"#users_stack_24_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_right\">\n    <use href=\"#users_stack_24_right\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_left\">\n    <use href=\"#users_stack_32_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_circle\">\n    <use href=\"#users_stack_32_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_right\">\n    <use href=\"#users_stack_32_right\"/>\n  </clipPath>\n</defs>";
   document.body.appendChild(svgElement);
   masksCreated.push(document);
 }

package/dist/components/UsersStack/masks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/UsersStack/masks.tsx"],"names":["canUseDOM","masksCreated","createMasks","document","includes","svgElement","createElementNS","setAttributeNS","style","position","width","height","innerHTML","body","appendChild","push"],"mappings":"AAAA,SAASA,SAAT;AAEA,IAAMC,YAAwB,GAAG,EAAjC;AAEA,OAAO,SAASC,WAAT,CAAqBC,QAArB,EAAgD;AACrD,MAAI,CAACH,SAAD,IAAc,CAACG,QAAf,IAA2BF,YAAY,CAACG,QAAb,CAAsBD,QAAtB,CAA/B,EAAgE;AAC9D;AACD,GAHoD,CAKrD;;;AACA,MAAME,UAAU,GAAGF,QAAQ,CAACG,eAAT,CACjB,4BADiB,EAEjB,KAFiB,CAAnB;AAIAD,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,IAAhC,EAAsC,oBAAtC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,OAAhC,EAAyC,GAAzC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,QAAhC,EAA0C,GAA1C;AACAF,EAAAA,UAAU,CAACG,KAAX,CAAiBC,QAAjB,GAA4B,UAA5B;AACAJ,EAAAA,UAAU,CAACG,KAAX,CAAiBE,KAAjB,GAAyB,KAAzB;AACAL,EAAAA,UAAU,CAACG,KAAX,CAAiBG,MAAjB,GAA0B,KAA1B;AAEAN,EAAAA,UAAU,CAACO,SAAX;~~AAsBAT~~,EAAAA,QAAQ,CAACU,IAAT,CAAcC,WAAd,CAA0BT,UAA1B;AACAJ,EAAAA,YAAY,CAACc,IAAb,CAAkBZ,QAAlB;AACD","sourcesContent":["import { canUseDOM } from \"../../lib/dom\";\n\nconst masksCreated: Document[] = [];\n\nexport function createMasks(document?: Document): void {\n if (!canUseDOM \|\| !document \|\| masksCreated.includes(document)) {\n return;\n }\n\n // eslint-disable-next-line no-restricted-globals\n const svgElement = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"svg\"\n );\n svgElement.setAttributeNS(null, \"id\", \"__SVG_MASKS_NODE__\");\n svgElement.setAttributeNS(null, \"width\", \"0\");\n svgElement.setAttributeNS(null, \"height\", \"0\");\n svgElement.style.position = \"absolute\";\n svgElement.style.width = \"0px\";\n svgElement.style.height = \"0px\";\n\n svgElement.innerHTML = `<defs>\n <~~clipPath~~ id=\"~~users_stack_mask_16_left~~\"~~>\n <path~~ ~~transform=\"translate(1.5 0)\"~~ d=\"M1.~~20772~~ ~~8C1.20772~~ ~~6.32671~~ 0~~.768742~~ ~~4.75626~~ 0 ~~3.39821C1.44342~~ ~~1.34278~~ ~~3.8277~~ 0 ~~6.52463~~ ~~0C10.9293~~ 0 ~~14.5~~ ~~3.58172~~ ~~14.5~~ ~~8C14.5~~ ~~12.4183~~ ~~10.9293~~ 16 6.~~52463~~ ~~16C3.8277~~ 16 ~~1.44342 14.6572~~ 0 ~~12.6018C0.768742~~ 11.~~2437~~ ~~1.20772~~ ~~9.6733~~ ~~1.20772~~ 8Z\"~~></path>\~~n ~~</clipPath>\n~~\n <~~clipPath~~ id=\"~~users_stack_mask_24_left~~\"~~>\n <path~~ d=\"M3.~~9971785,~~12 ~~C3.9971785,9.49005736~~ ~~3.33667467,7.13438366~~ ~~2.18,5.09731189~~ ~~C4.35181237,2.01417617~~ ~~7.93927741,~~0 ~~11.9971785,~~0 ~~C18.6245955,~~0 ~~23.9971785,5.372583~~ ~~23.9971785,~~12 ~~C23.9971785,18.627417~~ ~~18.6245955,24~~ ~~11.9971785,24~~ ~~C7.93927741,24~~ 4.~~35181237,21.9858238~~ 2~~.18~~,18.~~9026881~~ ~~C3.33667467,16.8656163~~ ~~3.9971785,14.5099426~~ ~~3.9971785,~~12 Z\"~~></path>\n </clipPath>\n~~\n <~~clipPath~~ id=\"~~users_stack_mask_24_right~~\"~~>\n <path~~ d=\"~~M21.8171785~~,5.~~09731189~~ ~~C20.6605038,7.13438366~~ ~~20,9.49005736~~ ~~20,~~12 ~~C20,14.5099426~~ ~~20.6605038,16.8656163~~ ~~21.8171785,18.9026881~~ ~~C19.6453661,21.9858238~~ ~~16.0579011,24~~ 12~~,24~~ ~~C5.372583,24~~ ~~3.90798505e-14,18.627417 3.90798505e-14,~~12 ~~C3.90798505e-14,5.372583~~ 5.~~372583,0~~ 12,0 ~~C16.0579011,~~0 ~~19.6453661,2.01417617~~ ~~21.8171785~~,5.~~09731189 Z~~\"~~></path>\~~n ~~</clipPath>\n~~\n <~~clipPath~~ id=\"~~users_stack_mask_32_left~~\"~~>\n <path~~ d=\"M2~~.13430019~~,23.~~9892466~~ ~~C3.32858917,21.5820026~~ ~~4,18.8694095~~ 4,16 ~~C4,13.1305905~~ ~~3.32858917,10.4179974~~ ~~2.13430019,8.0107534~~ ~~C4.89924175,3.22241289~~ ~~10.0733034,-2.30926389e-14~~ 16~~,-2.30926389e-14~~ ~~C24.836556,-2.30926389e-14~~ ~~32,7.163444 32,~~16 ~~C32,24.836556~~ 24.~~836556,32~~ 16~~,32~~ ~~C10.0733034,32~~ ~~4.89924175,28.7775871~~ 2~~.13430019~~,23.~~9892466 L2.13430019,23.9892466 Z~~\"~~></path>\~~n ~~</clipPath>\n\n~~ <~~clipPath~~ id=\"~~users_stack_mask_32_right~~\">\n <path d=\"~~M29.8656998~~,8.~~0107534~~ ~~C28.6714108,10.4179974~~ ~~28,13.1305905~~ ~~28,~~16 ~~C28,18.8694095~~ ~~28.6714108,21.5820026~~ ~~29.8656998,23.9892466~~ ~~C27.1007583,28.7775871~~ ~~21.9266966,32~~ 16~~,32~~ ~~C7.163444,32~~ ~~3.90798505e-14,24.836556 3.90798505e-14,~~16 ~~C3.90798505e-14,7.163444~~ ~~7.163444,~~0 16,0 ~~C21.9266966,~~0 ~~27.1007583,3.22241289~~ ~~29.8656998~~,8.~~0107534~~ Z\"~~></path~~>\n </clipPath>\n</defs>`;\n\n document.body.appendChild(svgElement);\n masksCreated.push(document);\n}\n"],"file":"masks.js"}
1	+ {"version":3,"sources":["../../../src/components/UsersStack/masks.tsx"],"names":["canUseDOM","masksCreated","createMasks","document","includes","svgElement","createElementNS","setAttributeNS","style","position","width","height","innerHTML","body","appendChild","push"],"mappings":"AAAA,SAASA,SAAT;AAEA,IAAMC,YAAwB,GAAG,EAAjC;AAEA,OAAO,SAASC,WAAT,CAAqBC,QAArB,EAAgD;AACrD,MAAI,CAACH,SAAD,IAAc,CAACG,QAAf,IAA2BF,YAAY,CAACG,QAAb,CAAsBD,QAAtB,CAA/B,EAAgE;AAC9D;AACD,GAHoD,CAKrD;;;AACA,MAAME,UAAU,GAAGF,QAAQ,CAACG,eAAT,CACjB,4BADiB,EAEjB,KAFiB,CAAnB;AAIAD,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,IAAhC,EAAsC,oBAAtC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,OAAhC,EAAyC,GAAzC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,QAAhC,EAA0C,GAA1C;AACAF,EAAAA,UAAU,CAACG,KAAX,CAAiBC,QAAjB,GAA4B,UAA5B;AACAJ,EAAAA,UAAU,CAACG,KAAX,CAAiBE,KAAjB,GAAyB,KAAzB;AACAL,EAAAA,UAAU,CAACG,KAAX,CAAiBG,MAAjB,GAA0B,KAA1B;AAEAN,EAAAA,UAAU,CAACO,SAAX;AA6CAT,EAAAA,QAAQ,CAACU,IAAT,CAAcC,WAAd,CAA0BT,UAA1B;AACAJ,EAAAA,YAAY,CAACc,IAAb,CAAkBZ,QAAlB;AACD","sourcesContent":["import { canUseDOM } from \"../../lib/dom\";\n\nconst masksCreated: Document[] = [];\n\nexport function createMasks(document?: Document): void {\n if (!canUseDOM \|\| !document \|\| masksCreated.includes(document)) {\n return;\n }\n\n // eslint-disable-next-line no-restricted-globals\n const svgElement = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"svg\"\n );\n svgElement.setAttributeNS(null, \"id\", \"__SVG_MASKS_NODE__\");\n svgElement.setAttributeNS(null, \"width\", \"0\");\n svgElement.setAttributeNS(null, \"height\", \"0\");\n svgElement.style.position = \"absolute\";\n svgElement.style.width = \"0px\";\n svgElement.style.height = \"0px\";\n\n svgElement.innerHTML = `<defs>\n <path id=\"users_stack_16_left\" d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\" />\n <circle id=\"users_stack_16_circle\" cx=\"8\" cy=\"8\" r=\"8\" />\n \n <path id=\"users_stack_24_left\" d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\" />\n <circle id=\"users_stack_24_circle\" cx=\"12\" cy=\"12\" r=\"12\" />\n <path id=\"users_stack_24_right\" d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\" />\n\n <path id=\"users_stack_32_left\" d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\" />\n <circle id=\"users_stack_32_circle\" cx=\"16\" cy=\"16\" r=\"16\" />\n <path id=\"users_stack_32_right\" d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\" />\n\n <clipPath id=\"users_stack_mask_16_left\">\n <use href=\"#users_stack_16_left\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_16_circle\">\n <use href=\"#users_stack_16_circle\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_24_left\">\n <use href=\"#users_stack_24_left\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_24_circle\">\n <use href=\"#users_stack_24_circle\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_24_right\">\n <use href=\"#users_stack_24_right\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_32_left\">\n <use href=\"#users_stack_32_left\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_32_circle\">\n <use href=\"#users_stack_32_circle\"/>\n </clipPath>\n\n <clipPath id=\"users_stack_mask_32_right\">\n <use href=\"#users_stack_32_right\"/>\n </clipPath>\n</defs>`;\n\n document.body.appendChild(svgElement);\n masksCreated.push(document);\n}\n"],"file":"masks.js"}

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

@@ -69,12 +69,15 @@ export interface ViewState {
     prevPanel: string | null;
     nextPanel: string | null;
     swipingBack: boolean;
-    swipebackStartX: number;
+    swipeBackStartX: number;
     swipeBackShift: number;
     swipeBackNextPanel: string | null;
     swipeBackPrevPanel: string | null;
     swipeBackResult: SwipeBackResults | null;
     browserSwipe: boolean;
 }
-declare const _default: React.FC<Pick<ViewProps, "hidden" | "dir" | "nav" | "slot" | "style" | "title" | "scroll" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "popout" | "modal" | "onTransition" | "activePanel" | "onSwipeBack" | "onSwipeBackStart" | "onSwipeBackCancel" | "history" | "splitCol" | "configProvider">>;
-export default _default;
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
+export declare const View: React.FC<Pick<ViewProps, "hidden" | "dir" | "nav" | "slot" | "style" | "title" | "scroll" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "popout" | "modal" | "onTransition" | "activePanel" | "onSwipeBack" | "onSwipeBackStart" | "onSwipeBackCancel" | "history" | "splitCol" | "configProvider">>;
+export {};

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

@@ -11,8 +11,7 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { transitionEvent, animationEvent } from "../../lib/supportEvents";
-import { getClassName } from "../../helpers/getClassName";
-import { IOS, ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { Touch } from "../Touch/Touch";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withContext } from "../../hoc/withContext";
@@ -34,19 +33,16 @@ var SwipeBackResults;
 export var scrollsCache = {};
 var warn = warnOnce("View");
-/**
- * @see https://vkcom.github.io/VKUI/#/View
- */
-var View = /*#__PURE__*/function (_React$Component) {
-  _inherits(View, _React$Component);
+var ViewComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(ViewComponent, _React$Component);
-  var _super = _createSuper(View);
+  var _super = _createSuper(ViewComponent);
-  function View(props) {
+  function ViewComponent(props) {
     var _this;
-    _classCallCheck(this, View);
+    _classCallCheck(this, ViewComponent);
     _this = _super.call(this, props);
@@ -111,7 +107,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           _this.setState({
             swipingBack: true,
-            swipebackStartX: e.startX,
+            swipeBackStartX: e.startX,
             swipeBackPrevPanel: _this.state.activePanel,
             swipeBackNextPanel: _this.props.history.slice(-2)[0]
           });
@@ -122,7 +118,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           if (e.shiftX < 0) {
             swipeBackShift = 0;
-          } else if (e.shiftX > _this.window.innerWidth - _this.state.swipebackStartX) {
+          } else if (e.shiftX > _this.window.innerWidth - _this.state.swipeBackStartX) {
             var _this$window;
             swipeBackShift = (_this$window = _this.window) === null || _this$window === void 0 ? void 0 : _this$window.innerWidth;
@@ -147,7 +143,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           _this.onSwipeBackCancel();
         } else if (_this.state.swipeBackShift >= ((_this$window$innerWid = (_this$window2 = _this.window) === null || _this$window2 === void 0 ? void 0 : _this$window2.innerWidth) !== null && _this$window$innerWid !== void 0 ? _this$window$innerWid : 0)) {
           _this.onSwipeBackSuccess();
-        } else if (speed > 250 || _this.state.swipebackStartX + _this.state.swipeBackShift > _this.window.innerWidth / 2) {
+        } else if (speed > 250 || _this.state.swipeBackStartX + _this.state.swipeBackShift > _this.window.innerWidth / 2) {
           _this.setState({
             swipeBackResult: SwipeBackResults.success
           });
@@ -167,7 +163,7 @@ var View = /*#__PURE__*/function (_React$Component) {
       prevPanel: null,
       nextPanel: null,
       swipingBack: false,
-      swipebackStartX: 0,
+      swipeBackStartX: 0,
       swipeBackShift: 0,
       swipeBackNextPanel: null,
       swipeBackPrevPanel: null,
@@ -177,7 +173,7 @@ var View = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
-  _createClass(View, [{
+  _createClass(ViewComponent, [{
     key: "document",
     get: function get() {
       return this.props.document;
@@ -253,7 +249,7 @@ var View = /*#__PURE__*/function (_React$Component) {
               clearTimeout(this.animationFinishTimeout);
             }
-            this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+            this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === IOS ? 600 : 300);
           }
         }
       } // Закончилась анимация свайпа назад
@@ -272,7 +268,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           swipeBackNextPanel: null,
           swipingBack: false,
           swipeBackResult: null,
-          swipebackStartX: 0,
+          swipeBackStartX: 0,
           swipeBackShift: 0,
           activePanel: nextPanel,
           visiblePanels: [nextPanel]
@@ -338,7 +334,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           clearTimeout(this.transitionFinishTimeout);
         }
-        this.transitionFinishTimeout = setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        this.transitionFinishTimeout = setTimeout(eventHandler, this.props.platform === IOS ? 600 : 300);
       }
     }
   }, {
@@ -402,7 +398,7 @@ var View = /*#__PURE__*/function (_React$Component) {
         swipeBackNextPanel: null,
         swipingBack: false,
         swipeBackResult: null,
-        swipebackStartX: 0,
+        swipeBackStartX: 0,
         swipeBackShift: 0
       });
     }
@@ -486,15 +482,10 @@ var View = /*#__PURE__*/function (_React$Component) {
         return panelId !== undefined && _this4.state.visiblePanels.includes(panelId) || panelId === swipeBackPrevPanel || panelId === swipeBackNextPanel;
       });
       var disableAnimation = this.shouldDisableTransitionMotion();
-      var modifiers = {
-        "View--animated": !disableAnimation && animated,
-        "View--swiping-back": !disableAnimation && this.state.swipingBack,
-        "View--no-motion": disableAnimation
-      };
       return createScopedElement(Touch, _extends({
         Component: "section"
       }, restProps, {
-        vkuiClass: classNames(getClassName("View", platform), modifiers),
+        vkuiClass: classNames("View", platform === IOS && "View--ios", !disableAnimation && animated && "View--animated", !disableAnimation && this.state.swipingBack && "View--swiping-back", disableAnimation && "View--no-motion"),
         onMoveX: this.onMoveX,
         onEnd: this.onEnd
       }), createScopedElement("div", {
@@ -507,16 +498,7 @@ var View = /*#__PURE__*/function (_React$Component) {
         var isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
         var compensateScroll = isPrev || panelId === swipeBackNextPanel || panelId === nextPanel && isBack;
         return createScopedElement("div", {
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass: classNames("View__panel", {
-            "View__panel--active": panelId === activePanel,
-            "View__panel--prev": panelId === prevPanel,
-            "View__panel--next": panelId === nextPanel,
-            "View__panel--swipe-back-prev": panelId === swipeBackPrevPanel,
-            "View__panel--swipe-back-next": panelId === swipeBackNextPanel,
-            "View__panel--swipe-back-success": swipeBackResult === SwipeBackResults.success,
-            "View__panel--swipe-back-failed": swipeBackResult === SwipeBackResults.fail
-          }),
+          vkuiClass: classNames("View__panel", panelId === activePanel && "View__panel--active", panelId === prevPanel && "View__panel--prev", panelId === nextPanel && "View__panel--next", panelId === swipeBackPrevPanel && "View__panel--swipe-back-prev", panelId === swipeBackNextPanel && "View__panel--swipe-back-next", swipeBackResult === SwipeBackResults.success && "View__panel--swipe-back-success", swipeBackResult === SwipeBackResults.fail && "View__panel--swipe-back-failed"),
           onAnimationEnd: isTransitionTarget ? _this4.transitionEndHandler : undefined,
           ref: function ref(el) {
             return panelId !== undefined && (_this4.panelNodes[panelId] = el);
@@ -539,13 +521,17 @@ var View = /*#__PURE__*/function (_React$Component) {
     }
   }]);
-  return View;
-}(React.Component); // eslint-disable-next-line import/no-default-export
+  return ViewComponent;
+}(React.Component);
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
-_defineProperty(View, "defaultProps", {
+_defineProperty(ViewComponent, "defaultProps", {
   history: []
 });
-export default withContext(withContext(withContext(withPlatform(withDOM(View)), SplitColContext, "splitCol"), ConfigProviderContext, "configProvider"), ScrollContext, "scroll");
+export var View = withContext(withContext(withContext(withPlatform(withDOM(ViewComponent)), SplitColContext, "splitCol"), ConfigProviderContext, "configProvider"), ScrollContext, "scroll");
+View.displayName = "View";
 //# sourceMappingURL=View.js.map