@vkontakte/vkui 5.0.3 → 5.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","useDOM","classNamesString","Popper","FocusTrap","useTimeout","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { PopperCommonProps, Popper } from \"../Popper/Popper\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\nimport styles from \"./Popover.module.css\";\n\nexport interface PopoverProps\n  extends Omit<PopperCommonProps, \"arrow\" | \"arrowClassName\"> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: \"click\" | \"hover\";\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = \"click\",\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === \"hover\";\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(\n    null\n  );\n\n  const shown = typeof shownProp === \"boolean\" ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== \"boolean\") {\n      setComputedShown(value);\n    }\n    typeof onShownChange === \"function\" && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, \"click\", handleOutsideClick);\n  const targetEnterListener = useEventListener(\"mouseenter\", handleTargetEnter);\n  const targetClickEvent = useEventListener(\"click\", handleTargetClick);\n  const targetLeaveListener = useEventListener(\"mouseleave\", handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNamesString(styles[\"Popover\"], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              \"--vkui_internal--popover_safe_zone_padding\": `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,MAAM,QAAQ,kBAAkB;AAC5D,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,mBAAmB,QAAQ,iCAAiC;AAAC;AAgDtE;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAaA;EAAA,uBAZlBC,MAAM;IAANA,MAAM,4BAAG,OAAO;IACTC,SAAS,QAAhBC,KAAK;IAAA,sBACLC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,sBACfC,SAAS;IAATA,SAAS,+BAAG,GAAG;IAAA,2BACfC,cAAc;IAAdA,cAAc,oCAAG,CAAC;IAClBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACNC,aAAa,QAAbA,aAAa;IACVC,SAAS;EAEZ,cAAqBvB,MAAM,EAAE;IAArBwB,QAAQ,WAARA,QAAQ;EAEhB,IAAMC,SAAS,GAAGf,MAAM,KAAK,OAAO;EACpC,IAAMgB,OAAO,GAAG3B,KAAK,CAAC4B,MAAM,CAAC,KAAK,CAAC;EACnC,sBAA0C5B,KAAK,CAAC6B,QAAQ,CAACjB,SAAS,IAAI,KAAK,CAAC;IAAA;IAArEkB,aAAa;IAAEC,gBAAgB;EACtC,uBAAsC/B,KAAK,CAAC6B,QAAQ,CAClD,IAAI,CACL;IAAA;IAFMG,YAAY;IAAEC,aAAa;EAIlC,IAAMpB,KAAK,GAAG,OAAOD,SAAS,KAAK,SAAS,GAAGA,SAAS,GAAGkB,aAAa;EAExE,IAAMI,gBAAgB,GAAG5B,YAAY,CAAiB2B,aAAa,EAAEX,MAAM,CAAC;EAE5E,2BAA0Bb,mBAAmB,CAACS,QAAQ,CAAC;IAAA;IAAhDiB,QAAQ;IAAEC,KAAK;EAEtB,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAc,EAAK;IACnC,IAAI,OAAO1B,SAAS,KAAK,SAAS,EAAE;MAClCmB,gBAAgB,CAACO,KAAK,CAAC;IACzB;IACA,OAAOf,aAAa,KAAK,UAAU,IAAIA,aAAa,CAACe,KAAK,CAAC;EAC7D,CAAC;EAED,IAAMC,WAAW,GAAGlC,UAAU,CAAC;IAAA,OAAMgC,QAAQ,CAAC,IAAI,CAAC;EAAA,GAAEvB,SAAS,CAAC;EAE/D,IAAM0B,WAAW,GAAGnC,UAAU,CAAC;IAAA,OAAMgC,QAAQ,CAAC,KAAK,CAAC;EAAA,GAAEtB,SAAS,CAAC;EAEhE,IAAM0B,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9Bd,OAAO,CAACe,OAAO,GAAG,IAAI;IACtBF,WAAW,CAACG,KAAK,EAAE;IACnBJ,WAAW,CAACK,GAAG,EAAE;EACnB,CAAC;EAED,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9B,IAAIlB,OAAO,CAACe,OAAO,IAAI7B,KAAK,EAAE;MAC5B;IACF;IACAwB,QAAQ,CAAC,CAACxB,KAAK,CAAC;EAClB,CAAC;EAED,IAAMiC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9BnB,OAAO,CAACe,OAAO,GAAG,KAAK;IACvBH,WAAW,CAACI,KAAK,EAAE;IACnBH,WAAW,CAACI,GAAG,EAAE;EACnB,CAAC;EAED,IAAMG,0BAA0B,GAAG,SAA7BA,0BAA0B,GAAS;IACvCV,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,IAAMW,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,CAAa,EAAK;IAAA;IAC5C,IACEjB,YAAY,IACZ,uBAACG,QAAQ,CAACO,OAAO,8CAAhB,kBAAkBQ,QAAQ,CAACD,CAAC,CAACE,MAAM,CAAS,KAC7C,CAACnB,YAAY,CAACkB,QAAQ,CAACD,CAAC,CAACE,MAAM,CAAS,EACxC;MACAd,QAAQ,CAAC,KAAK,CAAC;IACjB;EACF,CAAC;EAED7B,sBAAsB,CAACiB,QAAQ,EAAE,OAAO,EAAEuB,kBAAkB,CAAC;EAC7D,IAAMI,mBAAmB,GAAG7C,gBAAgB,CAAC,YAAY,EAAEkC,iBAAiB,CAAC;EAC7E,IAAMY,gBAAgB,GAAG9C,gBAAgB,CAAC,OAAO,EAAEsC,iBAAiB,CAAC;EACrE,IAAMS,mBAAmB,GAAG/C,gBAAgB,CAAC,YAAY,EAAEuC,iBAAiB,CAAC;EAE7E9C,KAAK,CAACuD,SAAS,CAAC,YAAM;IACpB,IAAI,CAACpB,QAAQ,CAACO,OAAO,EAAE;MACrB;IACF;IAEAW,gBAAgB,CAACG,GAAG,CAACrB,QAAQ,CAACO,OAAO,CAAC;EACxC,CAAC,EAAE,CAACP,QAAQ,EAAEkB,gBAAgB,CAAC,CAAC;EAEhCrD,KAAK,CAACuD,SAAS,CAAC,YAAM;IACpB,IAAI,CAACpB,QAAQ,CAACO,OAAO,EAAE;MACrB;IACF;IAEA,IAAIhB,SAAS,EAAE;MACb0B,mBAAmB,CAACI,GAAG,CAACrB,QAAQ,CAACO,OAAO,CAAC;MACzCY,mBAAmB,CAACE,GAAG,CAACrB,QAAQ,CAACO,OAAO,CAAC;IAC3C;IAEA,OAAO,YAAM;MACXU,mBAAmB,CAACK,MAAM,EAAE;MAC5BH,mBAAmB,CAACG,MAAM,EAAE;IAC9B,CAAC;EACH,CAAC,EAAE,CAACtB,QAAQ,EAAET,SAAS,EAAE0B,mBAAmB,EAAEE,mBAAmB,CAAC,CAAC;EAEnE,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZlB,KAAK,EACLvB,KAAK,iBACJ,oBAAC,MAAM,eACDW,SAAS;IACb,SAAS,EAAEtB,gBAAgB,gBAAoBmB,SAAS,CAAE;IAC1D,SAAS,EAAEc,QAAS;IACpB,MAAM,EAAED,gBAAiB;IACzB,cAAc,EAAElB,cAAe;IAC/B,KAAK,EACH;IACA;IAAA,gCAEKG,SAAS;MACZ,4CAA4C,YAAKH,cAAc;IAAI,EAEtE;IACD,aAAa,EAAE;MAAA,IAAc0C,gBAAgB,SAA3BrC,SAAS;MAAA,oBACzB,oBAAC,SAAS;QACR,SAAS,EAAEqC,gBAAiB;QAC5B,OAAO,EAAEX;MAA2B,GAEnC9B,OAAO,CACE;IAAA,CACZ;IACF,WAAW,EAAES,SAAS,GAAGc,WAAW,CAACG,KAAK,GAAGgB,SAAU;IACvD,UAAU,EAAEjC,SAAS,GAAGoB,iBAAiB,GAAGa;EAAU,GAEzD,CACc;AAErB,CAAC"}
+{"version":3,"file":"Popover.js","names":["React","useDOM","classNames","Popper","FocusTrap","useTimeout","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiPopover{animation:vkui-popper-fadein .2s ease;background:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation3);position:relative}.vkuiPopover:before{bottom:calc(-1 * 8px);bottom:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));content:"";left:calc(-1 * 8px);left:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));position:absolute;right:calc(-1 * 8px);right:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));top:calc(-1 * 8px);top:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));z-index:-1}
+.vkuiPopover{animation:vkui-popper-fadein .2s ease;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);position:relative}.vkuiPopover:before{bottom:calc(-1 * 8px);bottom:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));content:"";left:calc(-1 * 8px);left:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));position:absolute;right:calc(-1 * 8px);right:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));top:calc(-1 * 8px);top:calc(-1 * var(--vkui_internal--popover_safe_zone_padding))}

package/dist/cssm/components/Popper/Popper.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { Modifier } from "react-popper";
-import { HasRef } from "../../types";
-export declare type Placement = "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "top" | "bottom" | "left" | "right";
+import * as React from 'react';
+import { Modifier } from 'react-popper';
+import { HasRef } from '../../types';
+export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
 export interface PopperRenderContentProps {
     className: string;
 }

package/dist/cssm/components/Popper/Popper.js

@@ -4,39 +4,39 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
-import * as React from "react";
-import { usePopper } from "react-popper";
-import { AppRootPortal } from "../AppRoot/AppRootPortal";
-import { PopperArrow } from "../PopperArrow/PopperArrow";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { usePopper } from 'react-popper';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { PopperArrow } from '../PopperArrow/PopperArrow';
+import { usePlatform } from '../../hooks/usePlatform';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { classNames } from '@vkontakte/vkjs';
 import "./Popper.module.css";
 var ARROW_PADDING = 8;
 var ARROW_WIDTH = 20;
 var ARROW_HEIGHT = 8;
 var preventOverflowModifier = {
-  name: "preventOverflow",
+  name: 'preventOverflow',
   options: {
     mainAxis: false
   }
 };
 var flipModifier = {
-  name: "flip"
+  name: 'flip'
 };
 var arrowModifier = {
-  name: "arrow",
+  name: 'arrow',
   options: {
     padding: ARROW_PADDING
   }
 };
 var sameWidthModifier = {
-  name: "sameWidth",
+  name: 'sameWidth',
   enabled: true,
-  phase: "beforeWrite",
-  requires: ["computeStyles"],
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
   fn: function fn(_ref) {
     var state = _ref.state;
     state.styles.popper.width = "".concat(state.rects.reference.width, "px");
@@ -56,7 +56,7 @@ export var Popper = function Popper(_ref3) {
     children = _ref3.children,
     getRef = _ref3.getRef,
     _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? "bottom-start" : _ref3$placement,
+    placement = _ref3$placement === void 0 ? 'bottom-start' : _ref3$placement,
     onPlacementChange = _ref3.onPlacementChange,
     arrow = _ref3.arrow,
     arrowClassName = _ref3.arrowClassName,
@@ -84,7 +84,7 @@ export var Popper = function Popper(_ref3) {
   var setExternalRef = useExternRef(getRef, setPopperNode);
   var modifiers = React.useMemo(function () {
     var modifiers = [preventOverflowModifier, {
-      name: "offset",
+      name: 'offset',
       options: {
         offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
       }
@@ -108,16 +108,16 @@ export var Popper = function Popper(_ref3) {
     state = _usePopper.state,
     attributes = _usePopper.attributes;
   var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
-  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован с краю
+  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю
 
   // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
   // таргета из-за маленьких размеров последнего
   useIsomorphicLayoutEffect(function () {
     if (arrow && isEdgePlacement) {
       var _ref4, _targetRef$current, _targetRef$current2;
-      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith("bottom") || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith("top") ? "vertical" : "horizontal";
-      var arrowSize = placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
-      var targetSize = (_ref4 = placementDirection === "vertical" ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
+      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('bottom') || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
+      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
+      var targetSize = (_ref4 = placementDirection === 'vertical' ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
       }
@@ -133,7 +133,7 @@ export var Popper = function Popper(_ref3) {
     }
   }, [onPlacementChange, resolvedPlacement]);
   var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, attributes.popper, {
-    className: classNamesString("vkuiPopper", getPlatformClassName("vkuiPopper", platform), className),
+    className: classNames("vkuiPopper", getPlatformClassName("vkuiPopper", platform), className),
     ref: setExternalRef,
     style: _objectSpread(_objectSpread(_objectSpread({}, compStyles), popperStyles.popper), {}, {
       minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["React","usePopper","AppRootPortal","PopperArrow","usePlatform","getPlatformClassName","useExternRef","useIsomorphicLayoutEffect","classNamesString","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","offset","push","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { usePopper, Modifier } from \"react-popper\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { HasRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Popper.module.css\";\n\nexport type Placement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\";\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: \"preventOverflow\",\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: \"flip\",\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: \"arrow\",\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: \"sameWidth\",\n  enabled: true,\n  phase: \"beforeWrite\",\n  requires: [\"computeStyles\"],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = \"bottom-start\",\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =\n    React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: \"offset\",\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement =\n    !!resolvedPlacement && resolvedPlacement.includes(\"-\"); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith(\"bottom\") ||\n        resolvedPlacement?.startsWith(\"top\")\n          ? \"vertical\"\n          : \"horizontal\";\n\n      const arrowSize =\n        placementDirection === \"vertical\" ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === \"vertical\"\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNamesString(\n        styles[\"Popper\"],\n        getPlatformClassName(styles[\"Popper\"], platform),\n        className\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles[\"Popper__content\"] })\n      ) : (\n        <div className={styles[\"Popper__content\"]}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles[\"PopperPortal\"]}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popper.js","names":["React","usePopper","AppRootPortal","PopperArrow","usePlatform","getPlatformClassName","useExternRef","useIsomorphicLayoutEffect","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","offset","push","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopper, Modifier } from 'react-popper';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { PopperArrow } from '../PopperArrow/PopperArrow';\nimport { HasRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: 'preventOverflow',\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: 'flip',\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: 'arrow',\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(null);\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: 'offset',\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith('bottom') || resolvedPlacement?.startsWith('top')\n          ? 'vertical'\n          : 'horizontal';\n\n      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === 'vertical'\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNames(\n        styles['Popper'],\n        getPlatformClassName(styles['Popper'], platform),\n        className,\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiPopper{z-index:100}
+.vkuiPopper{z-index:100;z-index:var(--vkui--z_index_popout)}

package/dist/cssm/components/PopperArrow/PopperArrow.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import * as React from 'react';
 export interface PopperArrowProps {
     style?: React.CSSProperties;
     attributes?: React.HTMLAttributes<HTMLDivElement> | null;
     arrowClassName?: string;
 }
-export declare const PopperArrow: ({ style, attributes, arrowClassName, }: PopperArrowProps) => JSX.Element;
+export declare const PopperArrow: ({ style, attributes, arrowClassName }: PopperArrowProps) => JSX.Element;

package/dist/cssm/components/PopperArrow/PopperArrow.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./PopperArrow.module.css";
 export var PopperArrow = function PopperArrow(_ref) {
   var style = _ref.style,
@@ -14,10 +14,10 @@ export var PopperArrow = function PopperArrow(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     style: style
   }, restAttributes, {
-    className: classNamesString("vkuiPopperArrow", arrowWrapperClassName),
+    className: classNames("vkuiPopperArrow", arrowWrapperClassName),
     "data-popper-arrow": true
   }), /*#__PURE__*/React.createElement("svg", {
-    className: classNamesString("vkuiPopperArrow__in", arrowClassName),
+    className: classNames("vkuiPopperArrow__in", arrowClassName),
     width: "20",
     height: "8",
     viewBox: "0 0 20 8",

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

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["React","classNamesString","PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./PopperArrow.module.css\";\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  style,\n  attributes,\n  arrowClassName,\n}: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } =\n    attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNamesString(styles[\"PopperArrow\"], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNamesString(styles[\"PopperArrow__in\"], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AASxD,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAIA;EAAA,IAHtBC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,cAAc,QAAdA,cAAc;EAEd,YACED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IADCE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAE3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAEP,gBAAgB,oBAAwBK,qBAAqB,CAAE;IAC1E,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAEL,gBAAgB,wBAA4BI,cAAc,CAAE;IACvE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC"}
+{"version":3,"file":"PopperArrow.js","names":["React","classNames","PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PopperArrow.module.css';\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({ style, attributes, arrowClassName }: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } = attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNames(styles['PopperArrow'], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAS7C,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAAgE;EAAA,IAA1DC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,cAAc,QAAdA,cAAc;EAC7D,YAAgED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IAA7DE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAC3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAEP,UAAU,oBAAwBK,qBAAqB,CAAE;IACpE,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAEL,UAAU,wBAA4BI,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC"}

package/dist/cssm/components/Progress/Progress.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     value?: number;
 }

package/dist/cssm/components/Progress/Progress.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "getRootRef", "className"];
-import * as React from "react";
-import { clamp } from "../../helpers/math";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { clamp } from '../../helpers/math';
+import { classNames } from '@vkontakte/vkjs';
 import "./Progress.module.css";
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
@@ -18,14 +18,16 @@ export var Progress = function Progress(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
+  var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
   return /*#__PURE__*/React.createElement("div", _extends({
-    "aria-valuenow": value
+    "aria-valuenow": value,
+    title: title
   }, restProps, {
     role: "progressbar",
     "aria-valuemin": PROGRESS_MIN_VALUE,
     "aria-valuemax": PROGRESS_MAX_VALUE,
     ref: getRootRef,
-    className: classNamesString("vkuiProgress", className)
+    className: classNames("vkuiProgress", className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiProgress__in",
     style: {

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["React","clamp","classNamesString","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clamp } from \"../../helpers/math\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport styles from \"./Progress.module.css\";\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNamesString(styles[\"Progress\"], className)}\n    >\n      <div\n        className={styles[\"Progress__in\"]}\n        style={{ width: `${progress}%` }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AAUxD,IAAMC,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAKA;EAAA,sBAJnBC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,KAAK,CAACK,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EAErE,oBACE;IACE,iBAAeE;EAAM,GACjBG,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAEL,gBAAgB,iBAAqBM,SAAS;EAAE,iBAE3D;IACE,SAAS,oBAAyB;IAClC,KAAK,EAAE;MAAEG,KAAK,YAAKD,QAAQ;IAAI;EAAE,EACjC,CACE;AAEV,CAAC"}
+{"version":3,"file":"Progress.js","names":["React","clamp","classNames","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","title","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({ value = 0, getRootRef, className, ...restProps }: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(styles['Progress'], className)}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAU7C,IAAMC,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA0E;EAAA,sBAApEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvE,IAAMC,QAAQ,GAAGT,KAAK,CAACK,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMO,KAAK,aAAMD,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEK;EAAM,GACTF,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAEL,UAAU,iBAAqBM,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEI,KAAK,YAAKF,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC"}

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

@@ -1 +1 @@
-.vkuiProgress{background:var(--vkui--color_track_background);border-radius:1px;height:2px}.vkuiProgress__in{background:var(--vkui--color_stroke_accent);border-radius:inherit;height:100%;transition:width .2s ease}
+.vkuiProgress{background:#e1e3e6;background:var(--vkui--color_track_background);border-radius:1px;height:2px}.vkuiProgress__in{background:#2688eb;background:var(--vkui--color_stroke_accent);border-radius:inherit;height:100%;transition:width .2s ease}

package/dist/cssm/components/PromoBanner/PromoBanner.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-declare type StatsType = "playbackStarted" | "click";
+import * as React from 'react';
+declare type StatsType = 'playbackStarted' | 'click';
 declare type BannerData = {
     title?: string;
     url_types?: string;

package/dist/cssm/components/PromoBanner/PromoBanner.js

@@ -4,13 +4,13 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["bannerData", "onClose", "isCloseButtonHidden", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Icon24Dismiss } from "@vkontakte/icons";
-import { Button } from "../Button/Button";
-import { SimpleCell } from "../SimpleCell/SimpleCell";
-import { Image } from "../Image/Image";
-import { Footnote } from "../Typography/Footnote/Footnote";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Icon24Dismiss } from '@vkontakte/icons';
+import { Button } from '../Button/Button';
+import { SimpleCell } from '../SimpleCell/SimpleCell';
+import { Image } from '../Image/Image';
+import { Footnote } from '../Typography/Footnote/Footnote';
 import "./PromoBanner.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
@@ -22,7 +22,7 @@ export var PromoBanner = function PromoBanner(_ref) {
     isCloseButtonHidden = _ref.isCloseButtonHidden,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(""),
+  var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentPixel = _React$useState2[0],
     setCurrentPixel = _React$useState2[1];
@@ -32,7 +32,7 @@ export var PromoBanner = function PromoBanner(_ref) {
     }, {}) : {};
   }, [bannerData.statistics]);
   var onClick = React.useCallback(function () {
-    return setCurrentPixel(statsPixels.click || "");
+    return setCurrentPixel(statsPixels.click || '');
   }, [statsPixels.click]);
   React.useEffect(function () {
     if (statsPixels.playbackStarted) {
@@ -40,12 +40,12 @@ export var PromoBanner = function PromoBanner(_ref) {
     }
   }, [statsPixels.playbackStarted]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNamesString("vkuiPromoBanner", className)
+    className: classNames("vkuiPromoBanner", className)
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPromoBanner__head"
   }, /*#__PURE__*/React.createElement(Footnote, {
     className: "vkuiPromoBanner__label"
-  }, bannerData.advertisingLabel || "Advertisement"), bannerData.ageRestrictions && /*#__PURE__*/React.createElement(Footnote, {
+  }, bannerData.advertisingLabel || 'Advertisement'), bannerData.ageRestrictions && /*#__PURE__*/React.createElement(Footnote, {
     className: "vkuiPromoBanner__age"
   }, bannerData.ageRestrictions), !isCloseButtonHidden && /*#__PURE__*/React.createElement("div", {
     className: "vkuiPromoBanner__close",
@@ -59,11 +59,11 @@ export var PromoBanner = function PromoBanner(_ref) {
       size: 48,
       src: bannerData.iconLink,
       alt: bannerData.title,
-      "data-testid": process.env.NODE_ENV === "test" ? "avatar" : undefined
+      "data-testid": process.env.NODE_ENV === 'test' ? 'avatar' : undefined
     }),
     after: bannerData.ctaText && /*#__PURE__*/React.createElement(Button, {
       mode: "outline",
-      "data-testid": process.env.NODE_ENV === "test" ? "button-ctaText" : undefined
+      "data-testid": process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined
     }, bannerData.ctaText),
     subtitle: bannerData.domain
   }, bannerData.title), currentPixel.length > 0 && /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"PromoBanner.js","names":["React","classNamesString","Icon24Dismiss","Button","SimpleCell","Image","Footnote","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { Button } from \"../Button/Button\";\nimport { SimpleCell } from \"../SimpleCell/SimpleCell\";\nimport { Image } from \"../Image/Image\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport styles from \"./PromoBanner.module.css\";\n\ntype StatsType =\n  | \"playbackStarted\" // Начало показа\n  | \"click\"; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState(\"\");\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce(\n            (acc, item) => ({ ...acc, [item.type]: item.url }),\n            {}\n          )\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics]\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || \"\"),\n    [statsPixels.click]\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div\n      className={classNamesString(styles[\"PromoBanner\"], className)}\n      {...restProps}\n    >\n      <div className={styles[\"PromoBanner__head\"]}>\n        <Footnote className={styles[\"PromoBanner__label\"]}>\n          {bannerData.advertisingLabel || \"Advertisement\"}\n        </Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles[\"PromoBanner__age\"]}>\n            {bannerData.ageRestrictions}\n          </Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles[\"PromoBanner__close\"]} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={\n                process.env.NODE_ENV === \"test\" ? \"avatar\" : undefined\n              }\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={\n                process.env.NODE_ENV === \"test\" ? \"button-ctaText\" : undefined\n              }\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles[\"PromoBanner__pixels\"]}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PromoBanner.js","names":["React","classNames","Icon24Dismiss","Button","SimpleCell","Image","Footnote","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { Button } from '../Button/Button';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Image } from '../Image/Image';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote className={styles['PromoBanner__label']}>\n          {bannerData.advertisingLabel || 'Advertisement'}\n        </Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiPromoBanner{background:var(--vkui--color_background_content);box-sizing:border-box;color:var(--vkui--color_text_primary);outline:1px solid var(--vkui--color_separator_primary_alpha);outline:var(--vkui_internal--thin_border) solid var(--vkui--color_separator_primary_alpha);padding-bottom:10px;position:relative;width:100%}.vkuiPromoBanner__head{color:var(--vkui--color_text_secondary);display:flex;padding:14px var(--vkui--size_base_padding_horizontal--regular) 10px}.vkuiPromoBanner__age{margin-left:6px}.vkuiPromoBanner__close{align-items:center;color:var(--vkui--color_icon_secondary);display:flex;height:48px;justify-content:center;position:absolute;right:0;top:0;width:48px}.vkuiPromoBanner__close:active{opacity:.7}.vkuiPromoBanner__pixels{display:none}
+.vkuiPromoBanner{background:#fff;background:var(--vkui--color_background_content);box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);outline:1px solid rgba(0,0,0,.12);outline:var(--vkui_internal--thin_border) solid var(--vkui--color_separator_primary_alpha);padding-bottom:10px;position:relative;width:100%}.vkuiPromoBanner__head{color:#818c99;color:var(--vkui--color_text_secondary);display:flex;padding:14px 16px 10px;padding:14px var(--vkui--size_base_padding_horizontal--regular) 10px}.vkuiPromoBanner__age{margin-left:6px}.vkuiPromoBanner__close{align-items:center;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;height:48px;justify-content:center;position:absolute;right:0;top:0;width:48px}.vkuiPromoBanner__close:active{opacity:.7}.vkuiPromoBanner__pixels{display:none}

package/dist/cssm/components/PullToRefresh/PullToRefresh.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { AnyFunction } from "../../types";
-import { DOMProps } from "../../lib/dom";
-import { ScrollContextInterface } from "../AppRoot/ScrollContext";
-import { TouchProps } from "../Touch/Touch";
+import * as React from 'react';
+import { AnyFunction } from '../../types';
+import { DOMProps } from '../../lib/dom';
+import { ScrollContextInterface } from '../AppRoot/ScrollContext';
+import { TouchProps } from '../Touch/Touch';
 export interface PullToRefreshProps extends DOMProps, TouchProps {
     /**
      * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)

package/dist/cssm/components/PullToRefresh/PullToRefresh.js

@@ -2,22 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "isFetching", "onRefresh", "className"];
-import * as React from "react";
-import { useDOM } from "../../lib/dom";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { runTapticImpactOccurred } from "../../lib/taptic";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { useScroll } from "../AppRoot/ScrollContext";
-import { Touch } from "../Touch/Touch";
-import { FixedLayout } from "../FixedLayout/FixedLayout";
-import { PullToRefreshSpinner } from "./PullToRefreshSpinner";
-import TouchRootContext from "../Touch/TouchContext";
-import { usePrevious } from "../../hooks/usePrevious";
-import { useTimeout } from "../../hooks/useTimeout";
-import { clamp } from "../../helpers/math";
+import * as React from 'react';
+import { useDOM } from '../../lib/dom';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { runTapticImpactOccurred } from '../../lib/taptic';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useScroll } from '../AppRoot/ScrollContext';
+import { Touch } from '../Touch/Touch';
+import { FixedLayout } from '../FixedLayout/FixedLayout';
+import { PullToRefreshSpinner } from './PullToRefreshSpinner';
+import TouchRootContext from '../Touch/TouchContext';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useTimeout } from '../../hooks/useTimeout';
+import { clamp } from '../../helpers/math';
 import "./PullToRefresh.module.css";
 function cancelEvent(event) {
   if (!event) {
@@ -98,7 +98,7 @@ export var PullToRefresh = function PullToRefresh(_ref) {
       event.stopPropagation();
     }
   };
-  useGlobalEventListener(document, "touchmove", onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
+  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
   var resetRefreshingState = React.useCallback(function () {
     setWatching(false);
     setCanRefresh(false);
@@ -134,7 +134,7 @@ export var PullToRefresh = function PullToRefresh(_ref) {
         return platform === Platform.IOS ? prevSpinnerY : initParams.refreshing;
       });
       onRefresh();
-      runTapticImpactOccurred("light");
+      runTapticImpactOccurred('light');
     }
   }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);
   useIsomorphicLayoutEffect(function () {
@@ -192,9 +192,9 @@ export var PullToRefresh = function PullToRefresh(_ref) {
     setTouchDown(false);
   };
   var spinnerTransform = "translate3d(0, ".concat(spinnerY, "px, 0)");
-  var contentTransform = "";
+  var contentTransform = '';
   if (platform === Platform.IOS && refreshing && !touchDown) {
-    contentTransform = "translate3d(0, 100px, 0)";
+    contentTransform = 'translate3d(0, 100px, 0)';
   } else if (platform === Platform.IOS && (contentShift || refreshing)) {
     contentTransform = "translate3d(0, ".concat(contentShift, "px, 0)");
   }
@@ -204,7 +204,7 @@ export var PullToRefresh = function PullToRefresh(_ref) {
     onStart: onTouchStart,
     onMove: onTouchMove,
     onEnd: onTouchEnd,
-    className: classNamesString("vkuiPullToRefresh", platform === Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
+    className: classNames("vkuiPullToRefresh", platform === Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
   }), /*#__PURE__*/React.createElement(FixedLayout, {
     className: "vkuiPullToRefresh__controls"
   }, /*#__PURE__*/React.createElement(PullToRefreshSpinner, {