@vkontakte/vkui 4.28.1 → 4.29.0

package/dist/cssm/components/ModalRoot/ModalRootDesktop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":["React","classNames","transitionEvent","withPlatform","withContext","ModalRootContext","ConfigProviderContext","WebviewType","ANDROID","VKCOM","getClassName","withDOM","getNavId","warnOnce","FocusTrap","withModalManager","warn","ModalRootDesktopComponent","props","undefined","maskElementRef","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","closeActiveModal","isInsideModal","platform","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","enteringState","requestAnimationFrame","waitTransitionFinish","onEnter","animateModalOpacity","activeModal","restoreFocusTo","document","activeElement","focus","prevModalState","onExit","setMaskOpacity","modalState","eventHandler","supported","onceHandler","innerElement","removeEventListener","name","addEventListener","setTimeout","timeout","display","style","transitionDelay","delayEnter","opacity","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","Math","max","min","toString","configProvider","webviewType","VKAPPS","modals","map","Modal","modalId","key","Boolean","Component","ModalRootDesktop"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,eAAT;AAEA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,OAAOC,gBAAP;AAGA,SACEC,qBADF,EAGEC,WAHF;AAMA,SAASC,OAAT,EAAkBC,KAAlB;AACA,SAASC,YAAT;AACA,SAAmBC,OAAnB;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,SAAT;AACA,SAA+BC,gBAA/B;AACA;AAEA,IAAMC,IAAI,GAAGH,QAAQ,CAAC,WAAD,CAArB;;IAeMI,yB;;;;;AAGJ,qCAAYC,KAAZ,EAA0D;AAAA;;AAAA;;AACxD,8BAAMA,KAAN;;AADwD;;AAAA,yEAeTC,SAfS;;AAAA;;AAAA,qEAiBRA,SAjBQ;;AAGxD,UAAKC,cAAL,gBAAsBpB,KAAK,CAACqB,SAAN,EAAtB;AAEA,UAAKC,gBAAL,GAAwB;AACtBC,MAAAA,iBAAiB,EAAE;AAAA,eAAMJ,SAAN;AAAA,OADG;AAEtBK,MAAAA,aAAa,EAAE;AAAA,YAAGC,EAAH,QAAGA,EAAH;AAAA,YAAUC,IAAV;;AAAA,eACbC,MAAM,CAACC,MAAP,CAAc,MAAKC,aAAL,CAAmBJ,EAAnB,CAAd,EAAsCC,IAAtC,CADa;AAAA,OAFO;AAItBI,MAAAA,OAAO,EAAE;AAAA,eAAM,MAAKZ,KAAL,CAAWa,gBAAX,EAAN;AAAA,OAJa;AAKtBC,MAAAA,aAAa,EAAE;AALO,KAAxB;AALwD;AAYzD;;;;SAOD,eAAsB;AACpB,aAAO,KAAKd,KAAL,CAAWe,QAAX,KAAwBzB,OAAxB,IAAmC,KAAKU,KAAL,CAAWe,QAAX,KAAwBxB,KAA3D,GACH,GADG,GAEH,GAFJ;AAGD;;;SAED,eAAqB;AACnB,aAAOT,KAAK,CAACkC,QAAN,CAAeC,OAAf,CAAuB,KAAKjB,KAAL,CAAWkB,QAAlC,CAAP;AACD;;;WAED,uBAAcX,EAAd,EAAiC;AAC/B,UAAIA,EAAE,KAAK,IAAX,EAAiB;AACf,eAAON,SAAP;AACD;;AACD,aAAO,KAAKD,KAAL,CAAWW,aAAX,CAAyBJ,EAAzB,CAAP;AACD;;;WAED,4BAAmBY,SAAnB,EAAqE;AAAA;;AACnE;AACA,UACE,KAAKnB,KAAL,CAAWoB,YAAX,IACA,KAAKpB,KAAL,CAAWoB,YAAX,KAA4BD,SAAS,CAACC,YAFxC,EAGE;AACA,aAAKC,UAAL,CAAgB,KAAKrB,KAAL,CAAWoB,YAA3B;AACD,OAPkE,CASnE;;;AACA,UACE,KAAKpB,KAAL,CAAWsB,aAAX,IACA,KAAKtB,KAAL,CAAWsB,aAAX,KAA6BH,SAAS,CAACG,aAFzC,EAGE;AACA,YAAQA,aAAR,GAA0B,KAAKtB,KAA/B,CAAQsB,aAAR;AACA,YAAMC,aAAa,GAAG,KAAKZ,aAAL,CAAmBW,aAAnB,CAAtB;AACAE,QAAAA,qBAAqB,CAAC,YAAM;AAC1B,cAAI,MAAI,CAACxB,KAAL,CAAWsB,aAAX,KAA6BA,aAAjC,EAAgD;AAC9C,YAAA,MAAI,CAACG,oBAAL,CAA0BF,aAA1B,EAAyC;AAAA,qBACvC,MAAI,CAACvB,KAAL,CAAW0B,OAAX,CAAmBJ,aAAnB,CADuC;AAAA,aAAzC;;AAGA,YAAA,MAAI,CAACK,mBAAL,CAAyBJ,aAAzB,EAAwC,IAAxC;AACD;AACF,SAPoB,CAArB;AAQD,OAxBkE,CA0BnE;;;AACA,UAAI,KAAKvB,KAAL,CAAW4B,WAAX,IAA0B,CAACT,SAAS,CAACS,WAAzC,EAAsD;AAAA;;AACpD,aAAKC,cAAL,oDAAuB,KAAK7B,KAAL,CAAW8B,QAAlC,yDAAuB,qBAAqBC,aAA5C,yEACE9B,SADF;AAED;;AACD,UACE,CAAC,KAAKD,KAAL,CAAW4B,WAAZ,IACA,CAAC,KAAK5B,KAAL,CAAWoB,YADZ,IAEA,KAAKS,cAHP,EAIE;AACA,aAAKA,cAAL,CAAoBG,KAApB;AACA,aAAKH,cAAL,GAAsB5B,SAAtB;AACD;AACF;;;WAED,oBAAWM,EAAX,EAAuB;AAAA;;AACrB,UAAM0B,cAAc,GAAG,KAAKtB,aAAL,CAAmBJ,EAAnB,CAAvB;;AACA,UAAI,CAAC0B,cAAL,EAAqB;AACnB;AACD;;AAED,WAAKR,oBAAL,CAA0BQ,cAA1B,EAA0C;AAAA,eAAM,MAAI,CAACjC,KAAL,CAAWkC,MAAX,CAAkB3B,EAAlB,CAAN;AAAA,OAA1C;AACA,WAAKoB,mBAAL,CAAyBM,cAAzB,EAAyC,KAAzC;;AACA,UAAI,CAAC,KAAKjC,KAAL,CAAW4B,WAAhB,EAA6B;AAC3B,aAAKO,cAAL,CAAoBF,cAApB,EAAoC,CAApC;AACD;AACF;;;WAED,8BACEG,UADF,EAEEC,YAFF,EAGE;AACA,UAAIrD,eAAe,CAACsD,SAApB,EAA+B;AAAA;;AAC7B,YAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA;;AACxBH,UAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,qCAAAA,UAAU,CAAEI,YAAZ,gFAA0BC,mBAA1B,CACEzD,eAAe,CAAC0D,IADlB,EAEEH,WAFF;AAIAF,UAAAA,YAAY;AACb,SAND;;AAQAD,QAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,sCAAAA,UAAU,CAAEI,YAAZ,kFAA0BG,gBAA1B,CACE3D,eAAe,CAAC0D,IADlB,EAEEH,WAFF;AAID,OAbD,MAaO;AACLK,QAAAA,UAAU,CAACP,YAAD,EAAe,KAAKQ,OAApB,CAAV;AACD;AACF;AAED;;;;WACA,6BACET,UADF,EAEEU,OAFF,EAGE;AACA,UAAIV,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEI,YAAhB,EAA8B;AAC5BJ,QAAAA,UAAU,CAACI,YAAX,CAAwBO,KAAxB,CAA8BC,eAA9B,GACEF,OAAO,IAAI,KAAK9C,KAAL,CAAWiD,UAAtB,aAAsC,KAAKJ,OAA3C,UAAyD,EAD3D;AAEAT,QAAAA,UAAU,CAACI,YAAX,CAAwBO,KAAxB,CAA8BG,OAA9B,GAAwCJ,OAAO,GAAG,GAAH,GAAS,GAAxD;AACD;AACF;AAED;;;;WACA,wBACEV,UADF,EAGE;AAAA;AAAA;;AAAA,UADAe,YACA,uEAD8B,IAC9B;;AACA,UAAIA,YAAY,KAAK,IAAjB,IAAyB,6BAAKnD,KAAL,CAAWoD,OAAX,4EAAqB,CAArB,OAA4BhB,UAAU,CAAC7B,EAApE,EAAwE;AACtE;AACD;;AAED,UAAI,KAAK8C,kBAAT,EAA6B;AAC3BC,QAAAA,oBAAoB,CAAC,KAAKD,kBAAN,CAApB;AACD;;AACD,WAAKA,kBAAL,GAA0B7B,qBAAqB,CAAC,YAAM;AACpD,YAAI,MAAI,CAACtB,cAAL,CAAoBqD,OAAxB,EAAiC;AAC/B,sCAAkDnB,UAAlD,CAAQoB,UAAR;AAAA,cAAQA,UAAR,sCAAqB,CAArB;AAAA,uCAAkDpB,UAAlD,CAAwBqB,iBAAxB;AAAA,cAAwBA,iBAAxB,uCAA4C,CAA5C;AAEA,cAAMP,OAAO,GACXC,YAAY,KAAK,IAAjB,GACI,IAAI,CAACM,iBAAiB,GAAGD,UAArB,KAAoC,MAAMA,UAA1C,CAAJ,IAA6D,CADjE,GAEIL,YAHN;AAIA,UAAA,MAAI,CAACjD,cAAL,CAAoBqD,OAApB,CAA4BR,KAA5B,CAAkCG,OAAlC,GAA4CQ,IAAI,CAACC,GAAL,CAC1C,CAD0C,EAE1CD,IAAI,CAACE,GAAL,CAAS,GAAT,EAAcV,OAAd,CAF0C,EAG1CW,QAH0C,EAA5C;AAID;AACF,OAb8C,CAA/C;AAcD;;;WAED,kBAAS;AAAA;AAAA;;AACP,wBAAqD,KAAK7D,KAA1D;AAAA,UAAQoB,YAAR,eAAQA,YAAR;AAAA,UAAsBQ,WAAtB,eAAsBA,WAAtB;AAAA,UAAmCN,aAAnC,eAAmCA,aAAnC;;AAEA,UAAI,CAACM,WAAD,IAAgB,CAACR,YAArB,EAAmC;AACjC,eAAO,IAAP;AACD;;AAED,aACE,oBAAC,gBAAD,CAAkB,QAAlB;AAA2B,QAAA,KAAK,EAAE,KAAKhB;AAAvC,SACE;AACE,QAAA,SAAS,EAAErB,UAAU,CACnBS,YAAY,CAAC,WAAD,EAAc,KAAKQ,KAAL,CAAWe,QAAzB,CADO,EAEnB;AACE,+BACE,+BAAKf,KAAL,CAAW8D,cAAX,gFAA2BC,WAA3B,MAA2C1E,WAAW,CAAC2E;AAF3D,SAFmB,EAMnB,oBANmB;AADvB,SAUE;AACE,QAAA,SAAS,EAAC,iBADZ;AAEE,QAAA,GAAG,EAAE,KAAK9D,cAFZ;AAGE,QAAA,OAAO,EAAE,KAAKF,KAAL,CAAWa;AAHtB,QAVF,EAeE;AAAK,QAAA,SAAS,EAAC;AAAf,SACG,KAAKoD,MAAL,CAAYC,GAAZ,CAAgB,UAACC,KAAD,EAA+B;AAC9C,YAAMC,OAAO,GAAG1E,QAAQ,CAACyE,KAAK,CAACnE,KAAP,EAAcF,IAAd,CAAxB;;AACA,YAAIsE,OAAO,KAAKxC,WAAZ,IAA2BwC,OAAO,KAAKhD,YAA3C,EAAyD;AACvD,iBAAO,IAAP;AACD;;AAED,YAAMiD,GAAG,mBAAYD,OAAZ,CAAT;AAEA,eACE,oBAAC,SAAD;AACE,UAAA,YAAY,EAAE,KADhB;AAEE,UAAA,OAAO,EAAE,MAAI,CAACpE,KAAL,CAAWa,gBAFtB;AAGE,UAAA,OAAO,EAAE,MAAI,CAACgC,OAHhB;AAIE,UAAA,GAAG,EAAEwB,GAJP;AAKE,UAAA,SAAS,EAAEtF,UAAU,CAAC,kBAAD,EAAqB;AACxC,wCACE,CAACqC,YAAD,IACA,CAACE,aADD,IAEA8C,OAAO,KAAKxC,WAJ0B;AAKxC,sCAA0BwC,OAAO,KAAKhD,YALE;AAMxC,sCACEkD,OAAO,CAAClD,YAAD,CAAP,IAAyBgD,OAAO,KAAKxC;AAPC,WAArB;AALvB,WAeGuC,KAfH,CADF;AAmBD,OA3BA,CADH,CAfF,CADF,CADF;AAkDD;;;;EApNqCrF,KAAK,CAACyF,S;;AAuN9C,OAAO,IAAMC,gBAAgB,GAAGtF,WAAW,CACzCD,YAAY,CACVQ,OAAO,CAAiBI,gBAAgB,GAAGE,yBAAH,CAAjC,CADG,CAD6B,EAIzCX,qBAJyC,EAKzC,gBALyC,CAApC","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { transitionEvent } from \"../../lib/supportEvents\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withContext } from \"../../hoc/withContext\";\nimport ModalRootContext, {\n  ModalRootContextInterface,\n} from \"./ModalRootContext\";\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from \"../ConfigProvider/ConfigProviderContext\";\nimport { ModalsStateEntry } from \"./types\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { DOMProps, withDOM } from \"../../lib/dom\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { ModalTransitionProps, withModalManager } from \"./useModalManager\";\nimport \"./ModalRoot.css\";\n\nconst warn = warnOnce(\"ModalRoot\");\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n\n  /**\n   * Будет вызвано при закрытии активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n}\n\nclass ModalRootDesktopComponent extends React.Component<\n  ModalRootProps & DOMProps & ModalTransitionProps\n> {\n  constructor(props: ModalRootProps & ModalTransitionProps) {\n    super(props);\n\n    this.maskElementRef = React.createRef();\n\n    this.modalRootContext = {\n      updateModalHeight: () => undefined,\n      registerModal: ({ id, ...data }) =>\n        Object.assign(this.getModalState(id), data),\n      onClose: () => this.props.closeActiveModal(),\n      isInsideModal: true,\n    };\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number | undefined = undefined;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private restoreFocusTo: HTMLElement | undefined = undefined;\n\n  private get timeout() {\n    return this.props.platform === ANDROID || this.props.platform === VKCOM\n      ? 320\n      : 400;\n  }\n\n  private get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  getModalState(id: string | null) {\n    if (id === null) {\n      return undefined;\n    }\n    return this.props.getModalState(id);\n  }\n\n  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n    // transition phase 2: animate exiting modal\n    if (\n      this.props.exitingModal &&\n      this.props.exitingModal !== prevProps.exitingModal\n    ) {\n      this.closeModal(this.props.exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (\n      this.props.enteringModal &&\n      this.props.enteringModal !== prevProps.enteringModal\n    ) {\n      const { enteringModal } = this.props;\n      const enteringState = this.getModalState(enteringModal);\n      requestAnimationFrame(() => {\n        if (this.props.enteringModal === enteringModal) {\n          this.waitTransitionFinish(enteringState, () =>\n            this.props.onEnter(enteringModal)\n          );\n          this.animateModalOpacity(enteringState, true);\n        }\n      });\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = (this.props.document?.activeElement ??\n        undefined) as HTMLElement | undefined;\n    }\n    if (\n      !this.props.activeModal &&\n      !this.props.exitingModal &&\n      this.restoreFocusTo\n    ) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = undefined;\n    }\n  }\n\n  closeModal(id: string) {\n    const prevModalState = this.getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));\n    this.animateModalOpacity(prevModalState, false);\n    if (!this.props.activeModal) {\n      this.setMaskOpacity(prevModalState, 0);\n    }\n  }\n\n  waitTransitionFinish(\n    modalState: ModalsStateEntry | undefined,\n    eventHandler: () => void\n  ) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState?.innerElement?.removeEventListener(\n          transitionEvent.name as string,\n          onceHandler\n        );\n        eventHandler();\n      };\n\n      modalState?.innerElement?.addEventListener(\n        transitionEvent.name as string,\n        onceHandler\n      );\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /* Анимирует сдивг модалки */\n  animateModalOpacity(\n    modalState: ModalsStateEntry | undefined,\n    display: boolean\n  ) {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transitionDelay =\n        display && this.props.delayEnter ? `${this.timeout}ms` : \"\";\n      modalState.innerElement.style.opacity = display ? \"1\" : \"0\";\n    }\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(\n    modalState: ModalsStateEntry,\n    forceOpacity: number | null = null\n  ) {\n    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (this.maskAnimationFrame) {\n      cancelAnimationFrame(this.maskAnimationFrame);\n    }\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        this.maskElementRef.current.style.opacity = Math.max(\n          0,\n          Math.min(100, opacity)\n        ).toString();\n      }\n    });\n  }\n\n  render() {\n    const { exitingModal, activeModal, enteringModal } = this.props;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          vkuiClass={classNames(\n            getClassName(\"ModalRoot\", this.props.platform),\n            {\n              \"ModalRoot--vkapps\":\n                this.props.configProvider?.webviewType === WebviewType.VKAPPS,\n            },\n            \"ModalRoot--desktop\"\n          )}\n        >\n          <div\n            vkuiClass=\"ModalRoot__mask\"\n            ref={this.maskElementRef}\n            onClick={this.props.closeActiveModal}\n          />\n          <div vkuiClass=\"ModalRoot__viewport\">\n            {this.modals.map((Modal: React.ReactElement) => {\n              const modalId = getNavId(Modal.props, warn);\n              if (modalId !== activeModal && modalId !== exitingModal) {\n                return null;\n              }\n\n              const key = `modal-${modalId}`;\n\n              return (\n                <FocusTrap\n                  restoreFocus={false}\n                  onClose={this.props.closeActiveModal}\n                  timeout={this.timeout}\n                  key={key}\n                  vkuiClass={classNames(\"ModalRoot__modal\", {\n                    \"ModalRoot__modal--active\":\n                      !exitingModal &&\n                      !enteringModal &&\n                      modalId === activeModal,\n                    \"ModalRoot__modal--prev\": modalId === exitingModal,\n                    \"ModalRoot__modal--next\":\n                      Boolean(exitingModal) && modalId === activeModal,\n                  })}\n                >\n                  {Modal}\n                </FocusTrap>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(\n  withPlatform(\n    withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))\n  ),\n  ConfigProviderContext,\n  \"configProvider\"\n);\n"],"file":"ModalRootDesktop.js"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":["React","classNames","transitionEvent","withPlatform","withContext","ModalRootContext","ConfigProviderContext","WebviewType","ANDROID","VKCOM","getClassName","withDOM","getNavId","warnOnce","FocusTrap","withModalManager","warn","ModalRootDesktopComponent","props","undefined","maskElementRef","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","platform","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","activeModal","restoreFocusTo","document","activeElement","focus","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","supported","onceHandler","innerElement","removeEventListener","name","addEventListener","setTimeout","timeout","display","style","transitionDelay","delayEnter","opacity","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","Math","max","min","toString","configProvider","webviewType","VKAPPS","modals","map","Modal","modalId","key","Boolean","Component","ModalRootDesktop"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { transitionEvent } from \"../../lib/supportEvents\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withContext } from \"../../hoc/withContext\";\nimport ModalRootContext, {\n  ModalRootContextInterface,\n} from \"./ModalRootContext\";\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from \"../ConfigProvider/ConfigProviderContext\";\nimport { ModalsStateEntry } from \"./types\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { DOMProps, withDOM } from \"../../lib/dom\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { ModalTransitionProps, withModalManager } from \"./useModalManager\";\nimport \"./ModalRoot.css\";\n\nconst warn = warnOnce(\"ModalRoot\");\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nclass ModalRootDesktopComponent extends React.Component<\n  ModalRootProps & DOMProps & ModalTransitionProps\n> {\n  constructor(props: ModalRootProps & ModalTransitionProps) {\n    super(props);\n\n    this.maskElementRef = React.createRef();\n\n    this.modalRootContext = {\n      updateModalHeight: () => undefined,\n      registerModal: ({ id, ...data }) =>\n        Object.assign(this.getModalState(id), data),\n      onClose: () => this.props.onExit(),\n      isInsideModal: true,\n    };\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number | undefined = undefined;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private restoreFocusTo: HTMLElement | undefined = undefined;\n\n  private get timeout() {\n    return this.props.platform === ANDROID || this.props.platform === VKCOM\n      ? 320\n      : 400;\n  }\n\n  private get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  getModalState(id: string | null) {\n    if (id === null) {\n      return undefined;\n    }\n    return this.props.getModalState(id);\n  }\n\n  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n    // transition phase 2: animate exiting modal\n    if (\n      this.props.exitingModal &&\n      this.props.exitingModal !== prevProps.exitingModal\n    ) {\n      this.closeModal(this.props.exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (\n      this.props.enteringModal &&\n      this.props.enteringModal !== prevProps.enteringModal\n    ) {\n      const { enteringModal } = this.props;\n      const enteringState = this.getModalState(enteringModal);\n      this.props.onEnter();\n      requestAnimationFrame(() => {\n        if (this.props.enteringModal === enteringModal) {\n          this.waitTransitionFinish(enteringState, () =>\n            this.props.onEntered(enteringModal)\n          );\n          this.animateModalOpacity(enteringState, true);\n        }\n      });\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = (this.props.document?.activeElement ??\n        undefined) as HTMLElement | undefined;\n    }\n    if (\n      !this.props.activeModal &&\n      !this.props.exitingModal &&\n      this.restoreFocusTo\n    ) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = undefined;\n    }\n  }\n\n  closeModal(id: string) {\n    const prevModalState = this.getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n    this.animateModalOpacity(prevModalState, false);\n    if (!this.props.activeModal) {\n      this.setMaskOpacity(prevModalState, 0);\n    }\n  }\n\n  waitTransitionFinish(\n    modalState: ModalsStateEntry | undefined,\n    eventHandler: () => void\n  ) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState?.innerElement?.removeEventListener(\n          transitionEvent.name as string,\n          onceHandler\n        );\n        eventHandler();\n      };\n\n      modalState?.innerElement?.addEventListener(\n        transitionEvent.name as string,\n        onceHandler\n      );\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /* Анимирует сдвиг модалки */\n  animateModalOpacity(\n    modalState: ModalsStateEntry | undefined,\n    display: boolean\n  ) {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transitionDelay =\n        display && this.props.delayEnter ? `${this.timeout}ms` : \"\";\n      modalState.innerElement.style.opacity = display ? \"1\" : \"0\";\n    }\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(\n    modalState: ModalsStateEntry,\n    forceOpacity: number | null = null\n  ) {\n    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (this.maskAnimationFrame) {\n      cancelAnimationFrame(this.maskAnimationFrame);\n    }\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        this.maskElementRef.current.style.opacity = Math.max(\n          0,\n          Math.min(100, opacity)\n        ).toString();\n      }\n    });\n  }\n\n  render() {\n    const { exitingModal, activeModal, enteringModal } = this.props;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          // eslint-disable-next-line vkui/no-object-expression-in-arguments\n          vkuiClass={classNames(\n            getClassName(\"ModalRoot\", this.props.platform),\n            {\n              \"ModalRoot--vkapps\":\n                this.props.configProvider?.webviewType === WebviewType.VKAPPS,\n            },\n            \"ModalRoot--desktop\"\n          )}\n        >\n          <div\n            vkuiClass=\"ModalRoot__mask\"\n            ref={this.maskElementRef}\n            onClick={this.props.onExit}\n          />\n          <div vkuiClass=\"ModalRoot__viewport\">\n            {this.modals.map((Modal: React.ReactElement) => {\n              const modalId = getNavId(Modal.props, warn);\n              if (modalId !== activeModal && modalId !== exitingModal) {\n                return null;\n              }\n\n              const key = `modal-${modalId}`;\n\n              return (\n                <FocusTrap\n                  restoreFocus={false}\n                  onClose={this.props.onExit}\n                  timeout={this.timeout}\n                  key={key}\n                  // eslint-disable-next-line vkui/no-object-expression-in-arguments\n                  vkuiClass={classNames(\"ModalRoot__modal\", {\n                    \"ModalRoot__modal--active\":\n                      !exitingModal &&\n                      !enteringModal &&\n                      modalId === activeModal,\n                    \"ModalRoot__modal--prev\": modalId === exitingModal,\n                    \"ModalRoot__modal--next\":\n                      Boolean(exitingModal) && modalId === activeModal,\n                  })}\n                >\n                  {Modal}\n                </FocusTrap>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(\n  withPlatform(\n    withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))\n  ),\n  ConfigProviderContext,\n  \"configProvider\"\n);\n"],"file":"ModalRootDesktop.js"}

package/dist/cssm/components/ModalRoot/types.d.ts

@@ -14,7 +14,22 @@ export interface ModalElements {
 }
 export interface ModalsStateEntry extends ModalElements {
     id: string | null;
-    onClose?: () => any;
+    /**
+     * Событие начала открытия модалки.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Событие открытия модалки.
+     */
+    onOpened?: VoidFunction;
+    /**
+     * Событие начала закрытия модалки.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Событие закрытия модалки.
+     */
+    onClosed?: VoidFunction;
     type?: ModalType;
     settlingHeight?: number;
     dynamicContentHeight?: boolean;

package/dist/cssm/components/ModalRoot/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"names":["ModalType"],"mappings":"AAAA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["export enum ModalType {\n  PAGE = \"page\",\n  CARD = \"card\",\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string | null;\n  onClose?: () => any;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  dynamicContentHeight?: boolean;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n"],"file":"types.js"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"names":["ModalType"],"mappings":"AAAA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["export enum ModalType {\n  PAGE = \"page\",\n  CARD = \"card\",\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  dynamicContentHeight?: boolean;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n"],"file":"types.js"}

package/dist/cssm/components/ModalRoot/useModalManager.d.ts

@@ -8,10 +8,11 @@ interface ModalTransitionState {
     isBack?: boolean | null;
 }
 export interface ModalTransitionProps extends ModalTransitionState {
-    onEnter: (id: string | null) => void;
-    onExit: (id: string | null) => void;
+    onEnter: VoidFunction;
+    onEntered: (id: string | null) => void;
+    onExit: VoidFunction;
+    onExited: (id: string | null) => void;
     getModalState: (id: string) => ModalsStateEntry;
-    closeActiveModal: VoidFunction;
     delayEnter: boolean;
 }
 export declare function modalTransitionReducer(state: ModalTransitionState, action: {
@@ -30,8 +31,8 @@ export declare function modalTransitionReducer(state: ModalTransitionState, acti
  *   4b. enteringModal переходит в null после завершения анимации
  * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
  */
-export declare function useModalManager(activeModal: string | null | undefined, children: React.ReactNode | React.ReactNode[], onClose: (id: string) => void, initModal?: (state: ModalsStateEntry) => void): ModalTransitionProps;
-export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.FC<Pick<Props, Exclude<keyof Props, "isBack" | "onEnter" | "history" | "onExit" | "getModalState" | "closeActiveModal" | "delayEnter" | "activeModal" | "enteringModal" | "exitingModal">> & {
+export declare function useModalManager(activeModal: string | null | undefined, children: React.ReactNode | React.ReactNode[], onOpen?: (id: string) => void, onOpened?: (id: string) => void, onClose?: (id: string) => void, onClosed?: (id: string) => void, initModal?: (state: ModalsStateEntry) => void): ModalTransitionProps;
+export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.FC<Pick<Props, Exclude<keyof Props, "isBack" | "onEnter" | "history" | "onEntered" | "onExit" | "onExited" | "getModalState" | "delayEnter" | "activeModal" | "enteringModal" | "exitingModal">> & {
     activeModal?: string | null | undefined;
 }>;
 export {};

package/dist/cssm/components/ModalRoot/useModalManager.js

@@ -74,8 +74,12 @@ export function modalTransitionReducer(state, action) {
  * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
  */
 
-export function useModalManager(activeModal, children, onClose) {
-  var initModal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
+export function useModalManager(activeModal, children) {
+  var onOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : noop;
+  var onOpened = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
+  var onClose = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : noop;
+  var onClosed = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : noop;
+  var initModal = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : noop;
   var modalsState = React.useRef({}).current;
   getModals(children).forEach(function (Modal) {
     var modalProps = Modal.props;
@@ -83,7 +87,10 @@ export function useModalManager(activeModal, children, onClose) {
     var state = id !== undefined && modalsState[id] || {
       id: id !== null && id !== void 0 ? id : null
     };
+    state.onOpen = Modal.props.onOpen;
+    state.onOpened = Modal.props.onOpened;
     state.onClose = Modal.props.onClose;
+    state.onClosed = Modal.props.onClosed;
     state.dynamicContentHeight = !!modalProps.dynamicContentHeight; // ModalPage props
 
     if (typeof modalProps.settlingHeight === "number") {
@@ -112,7 +119,7 @@ export function useModalManager(activeModal, children, onClose) {
   useIsomorphicLayoutEffect(function () {
     // ignore non-existent activeModal
     if (process.env.NODE_ENV === "development" && isMissing) {
-      warn("Can't transition - modal ".concat(activeModal, " not found"));
+      warn("Can't transition - modal ".concat(activeModal, " not found"), "error");
     }
 
     dispatchTransition({
@@ -137,24 +144,56 @@ export function useModalManager(activeModal, children, onClose) {
     return id != null && ((_modalsState$id = modalsState[id]) === null || _modalsState$id === void 0 ? void 0 : _modalsState$id.type) === ModalType.CARD;
   };
 
-  var onEnter = React.useCallback(function (id) {
-    return dispatchTransition({
+  var onEntered = React.useCallback(function (id) {
+    if (id) {
+      var modalState = modalsState[id];
+
+      if (isFunction(modalState.onOpened)) {
+        modalState.onOpened();
+      } else if (isFunction(onOpened)) {
+        onOpened(id);
+      }
+    }
+
+    dispatchTransition({
       type: "entered",
       id: id
     });
-  }, []);
-  var onExit = React.useCallback(function (id) {
-    return dispatchTransition({
+  }, [modalsState, onOpened]);
+  var onExited = React.useCallback(function (id) {
+    if (id) {
+      var modalState = modalsState[id];
+
+      if (isFunction(modalState.onClosed)) {
+        modalState.onClosed();
+      } else if (isFunction(onClosed)) {
+        onClosed(id);
+      }
+    }
+
+    dispatchTransition({
       type: "exited",
       id: id
     });
-  }, []);
+  }, [modalsState, onClosed]);
   var delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
   var getModalState = React.useCallback(function (id) {
     return modalsState[id];
   }, [modalsState]);
 
-  function closeActiveModal() {
+  function onEnter() {
+    var modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
+
+    if (modalState) {
+      if (isFunction(modalState.onOpen)) {
+        modalState.onOpen();
+      } else if (isFunction(onOpen)) {
+        onOpen(modalState.id);
+      }
+    }
+  }
+
+  function onExit() {
     var modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
 
     if (modalState) {
@@ -162,26 +201,25 @@ export function useModalManager(activeModal, children, onClose) {
         modalState.onClose();
       } else if (isFunction(onClose)) {
         onClose(modalState.id);
-      } else if (process.env.NODE_ENV === "development") {
-        warn("onClose is undefined");
       }
     }
   }
 
   return _objectSpread(_objectSpread({
     onEnter: onEnter,
-    onExit: onExit
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited
   }, transitionState), {}, {
     delayEnter: delayEnter,
-    getModalState: getModalState,
-    closeActiveModal: closeActiveModal
+    getModalState: getModalState
   });
 }
 export function withModalManager() {
   var initModal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
   return function (Wrapped) {
     return function WithModalManager(props) {
-      var transitionManager = useModalManager(props.activeModal, props.children, props.onClose, initModal);
+      var transitionManager = useModalManager(props.activeModal, props.children, props.onOpen, props.onOpened, props.onClose, props.onClosed, initModal);
       return createScopedElement(Wrapped, _extends({}, props, transitionManager));
     };
   };

package/dist/cssm/components/ModalRoot/useModalManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"names":["React","ModalType","warnOnce","getNavId","useIsomorphicLayoutEffect","noop","isFunction","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onClose","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","process","env","NODE_ENV","isCard","CARD","onEnter","useCallback","onExit","delayEnter","getModalState","closeActiveModal","modalState","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { ModalsState, ModalsStateEntry, ModalType } from \"./types\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { noop, isFunction } from \"../../lib/utils\";\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: (id: string | null) => void;\n  onExit: (id: string | null) => void;\n  getModalState: (id: string) => ModalsStateEntry;\n  closeActiveModal: VoidFunction;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce(\"ModalRoot\");\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: \"setActive\" | \"entered\" | \"exited\" | \"inited\";\n    id: string | null;\n  }\n): ModalTransitionState {\n  if (action.type === \"setActive\" && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === \"entered\" && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === \"exited\" && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === \"inited\" && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onClose: (id: string) => void,\n  initModal: (state: ModalsStateEntry) => void = noop\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onClose = Modal.props.onClose;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === \"number\") {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(\n    modalTransitionReducer,\n    {\n      activeModal: safeActiveModal,\n      enteringModal: null,\n      exitingModal: null,\n      history: safeActiveModal ? [safeActiveModal] : [],\n      isBack: false,\n    }\n  );\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === \"development\" && isMissing) {\n      warn(`Can't transition - modal ${activeModal} not found`);\n    }\n    dispatchTransition({ type: \"setActive\", id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: \"inited\", id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) =>\n    id != null && modalsState[id]?.type === ModalType.CARD;\n  const onEnter = React.useCallback(\n    (id: string | null) => dispatchTransition({ type: \"entered\", id }),\n    []\n  );\n  const onExit = React.useCallback(\n    (id: string | null) => dispatchTransition({ type: \"exited\", id }),\n    []\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal &&\n      (isCard(activeModal) || isCard(transitionState.exitingModal))\n  );\n  const getModalState = React.useCallback(\n    (id: string) => modalsState[id],\n    [modalsState]\n  );\n\n  function closeActiveModal() {\n    const modalState =\n      transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose)) {\n        onClose(modalState.id);\n      } else if (process.env.NODE_ENV === \"development\") {\n        warn(\"onClose is undefined\");\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onExit,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n    closeActiveModal,\n  };\n}\n\nexport function withModalManager(\n  initModal: (a: ModalsStateEntry) => void = noop\n) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>\n  ): React.FC<\n    Omit<Props, keyof ModalTransitionProps> & { activeModal?: string | null }\n  > {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onClose,\n        initModal\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"file":"useModalManager.js"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"names":["React","ModalType","warnOnce","getNavId","useIsomorphicLayoutEffect","noop","isFunction","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { ModalsState, ModalsStateEntry, ModalType } from \"./types\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { noop, isFunction } from \"../../lib/utils\";\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: VoidFunction;\n  onEntered: (id: string | null) => void;\n  onExit: VoidFunction;\n  onExited: (id: string | null) => void;\n  getModalState: (id: string) => ModalsStateEntry;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce(\"ModalRoot\");\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: \"setActive\" | \"entered\" | \"exited\" | \"inited\";\n    id: string | null;\n  }\n): ModalTransitionState {\n  if (action.type === \"setActive\" && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === \"entered\" && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === \"exited\" && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === \"inited\" && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onOpen: (id: string) => void = noop,\n  onOpened: (id: string) => void = noop,\n  onClose: (id: string) => void = noop,\n  onClosed: (id: string) => void = noop,\n  initModal: (state: ModalsStateEntry) => void = noop\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onOpen = Modal.props.onOpen;\n    state.onOpened = Modal.props.onOpened;\n    state.onClose = Modal.props.onClose;\n    state.onClosed = Modal.props.onClosed;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === \"number\") {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(\n    modalTransitionReducer,\n    {\n      activeModal: safeActiveModal,\n      enteringModal: null,\n      exitingModal: null,\n      history: safeActiveModal ? [safeActiveModal] : [],\n      isBack: false,\n    }\n  );\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === \"development\" && isMissing) {\n      warn(`Can't transition - modal ${activeModal} not found`, \"error\");\n    }\n    dispatchTransition({ type: \"setActive\", id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: \"inited\", id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) =>\n    id != null && modalsState[id]?.type === ModalType.CARD;\n  const onEntered = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onOpened)) {\n          modalState.onOpened();\n        } else if (isFunction(onOpened)) {\n          onOpened(id);\n        }\n      }\n\n      dispatchTransition({ type: \"entered\", id });\n    },\n    [modalsState, onOpened]\n  );\n  const onExited = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onClosed)) {\n          modalState.onClosed();\n        } else if (isFunction(onClosed)) {\n          onClosed(id);\n        }\n      }\n\n      dispatchTransition({ type: \"exited\", id });\n    },\n    [modalsState, onClosed]\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal &&\n      (isCard(activeModal) || isCard(transitionState.exitingModal))\n  );\n  const getModalState = React.useCallback(\n    (id: string) => modalsState[id],\n    [modalsState]\n  );\n\n  function onEnter() {\n    const modalState =\n      transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onOpen)) {\n        modalState.onOpen();\n      } else if (isFunction(onOpen)) {\n        onOpen(modalState.id);\n      }\n    }\n  }\n\n  function onExit() {\n    const modalState =\n      transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose)) {\n        onClose(modalState.id);\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n  };\n}\n\nexport function withModalManager(\n  initModal: (a: ModalsStateEntry) => void = noop\n) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>\n  ): React.FC<\n    Omit<Props, keyof ModalTransitionProps> & { activeModal?: string | null }\n  > {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onOpen,\n        (props as any).onOpened,\n        (props as any).onClose,\n        (props as any).onClosed,\n        initModal\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"file":"useModalManager.js"}

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -69,7 +69,8 @@ var NativeSelect = function NativeSelect(_ref) {
   }, [value, children]);
   var TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
   return createScopedElement(FormField, {
-    Component: "label",
+    Component: "label" // eslint-disable-next-line vkui/no-object-expression-in-arguments
+    ,
     vkuiClass: classNames(getClassName("Select", platform), (_classNames = {}, _defineProperty(_classNames, "Select--not-selected", notSelected), _defineProperty(_classNames, "Select--align-".concat(align), !!align), _defineProperty(_classNames, "Select--sizeX--".concat(sizeX), !!sizeX), _defineProperty(_classNames, "Select--sizeY--".concat(sizeY), !!sizeY), _defineProperty(_classNames, "Select--multiline", multiline), _classNames)),
     className: className,
     style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","DropdownIcon","FormField","withAdaptivity","SizeType","getClassName","Headline","Text","VKCOM","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","COMPACT"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT,EAAyBC,QAAzB;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,OAAOC,IAAP;AACA,SAASC,KAAT;AACA,SAASC,yBAAT;AACA,SAASC,iBAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAKA;;AAkBA,IAAMC,YAEL,GAAG,SAFEA,YAEF,OAcE;AAAA;;AAAA,MAbJC,KAaI,QAbJA,KAaI;AAAA,+BAZJC,YAYI;AAAA,MAZJA,YAYI,kCAZW,EAYX;AAAA,MAXJC,KAWI,QAXJA,KAWI;AAAA,MAVJC,WAUI,QAVJA,WAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,SAQI,QARJA,SAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,UAMI,QANJA,UAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGf,WAAW,EAA5B;;AACA,wBAA0Bb,KAAK,CAAC6B,QAAN,CAAe,EAAf,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAAsC/B,KAAK,CAAC6B,QAAN,CAAe,KAAf,CAAtC;AAAA;AAAA,MAAOG,WAAP;AAAA,MAAoBC,cAApB;;AACA,2BAA0BtB,iBAAiB,CAACgB,SAAD,EAAY;AAAEX,IAAAA,YAAY,EAAZA;AAAF,GAAZ,CAA3C;AAAA;AAAA,MAAOkB,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,SAAS,GAAGxB,YAAY,CAACS,MAAD,CAA9B;AACAX,EAAAA,yBAAyB,CAAC,YAAM;AAAA;;AAC9B,QAAM2B,cAAc,yBAClBD,SAAS,CAACE,OADQ,uDAClB,mBAAmBC,OAAnB,CAA2BH,SAAS,CAACE,OAAV,CAAkBE,aAA7C,CADF;;AAEA,QAAIH,cAAJ,EAAoB;AAClBN,MAAAA,QAAQ,CAACM,cAAc,CAACI,IAAhB,CAAR;AACAR,MAAAA,cAAc,CAACI,cAAc,CAACH,KAAf,KAAyB,EAAzB,IAA+BhB,WAAW,IAAI,IAA/C,CAAd;AACD;AACF,GAPwB,EAOtB,CAACgB,KAAD,EAAQf,QAAR,CAPsB,CAAzB;AASA,MAAMuB,mBAAmB,GACvBd,QAAQ,KAAKnB,KAAb,IAAsBgB,KAAK,KAAKpB,QAAQ,CAACsC,OAAzC,GAAmDnC,IAAnD,GAA0DD,QAD5D;AAGA,SACE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAC,OADZ;AAEE,IAAA,SAAS,EAAEN,UAAU,CAACK,YAAY,CAAC,QAAD,EAAWsB,QAAX,CAAb,kDAClB,sBADkB,EACOI,WADP,wDAEDf,KAFC,GAES,CAAC,CAACA,KAFX,yDAGAO,KAHA,GAGU,CAAC,CAACA,KAHZ,yDAIAC,KAJA,GAIU,CAAC,CAACA,KAJZ,gCAKnB,mBALmB,EAKEC,SALF,gBAFvB;AASE,IAAA,SAAS,EAAEN,SATb;AAUE,IAAA,KAAK,EAAEL,KAVT;AAWE,IAAA,UAAU,EAAEO,UAXd;AAYE,IAAA,QAAQ,EAAEC,QAZZ;AAaE,IAAA,KAAK,EAAE,oBAAC,YAAD;AAbT,KAeE,2CACMI,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAFZ;AAGE,IAAA,SAAS,EAAC,YAHZ;AAIE,IAAA,QAAQ,EAAEY,QAJZ;AAKE,IAAA,KAAK,EAAED,KALT;AAME,IAAA,GAAG,EAAEE;AANP,MAQGlB,WAAW,IAAI;AAAQ,IAAA,KAAK,EAAC;AAAd,KAAkBA,WAAlB,CARlB,EASGC,QATH,CAfF,EA0BE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCW,KAAjC,CALF,CA1BF,CADF;AAoCD,CAtED,C,CAwEA;;;AACA,eAAe1B,cAAc,CAACU,YAAD,EAAe;AAC1CU,EAAAA,KAAK,EAAE,IADmC;AAE1CC,EAAAA,KAAK,EAAE;AAFmC,CAAf,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Text from \"../Typography/Text/Text\";\nimport { VKCOM } from \"../../lib/platform\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"../Select/Select.css\";\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>[\"value\"];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<\n  NativeSelectProps & AdaptivityContextInterface\n> = ({\n  style,\n  defaultValue = \"\",\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  sizeX,\n  sizeY,\n  multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState(\"\");\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption =\n      selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === \"\" && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent =\n    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName(\"Select\", platform), {\n        [\"Select--not-selected\"]: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        \"Select--multiline\": multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent\n        Component=\"div\"\n        weight=\"regular\"\n        vkuiClass=\"Select__container\"\n      >\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","DropdownIcon","FormField","withAdaptivity","SizeType","getClassName","Headline","Text","VKCOM","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","COMPACT"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Text from \"../Typography/Text/Text\";\nimport { VKCOM } from \"../../lib/platform\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"../Select/Select.css\";\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>[\"value\"];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<\n  NativeSelectProps & AdaptivityContextInterface\n> = ({\n  style,\n  defaultValue = \"\",\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  sizeX,\n  sizeY,\n  multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState(\"\");\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption =\n      selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === \"\" && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent =\n    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"Select\", platform), {\n        [\"Select--not-selected\"]: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        \"Select--multiline\": multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent\n        Component=\"div\"\n        weight=\"regular\"\n        vkuiClass=\"Select__container\"\n      >\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}

package/dist/cssm/components/Pagination/Pagination.css

@@ -1 +1 @@
-.vkuiPagination__list{display:flex;margin:0;padding:0;list-style-type:none}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{box-sizing:border-box;padding-right:8px;padding-left:8px;width:100%;min-width:40px;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);text-align:center;color:#818c99;color:var(--vkui--color_text_secondary);-webkit-user-select:none;user-select:none}.vkuiPagination__page--state-hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiPagination__page--state-active,.vkuiPagination__page--current{color:#000;color:var(--vkui--color_text_primary);background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact);height:36px;height:var(--vkui--size_button_large_height--compact)}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular);height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-right:0;padding-left:0}
+.vkuiPagination__list{display:flex;margin:0;padding:0;list-style-type:none}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{box-sizing:border-box;padding-right:8px;padding-left:8px;width:100%;min-width:40px;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);text-align:center;color:#818c99;color:var(--vkui--color_text_secondary);-webkit-user-select:none;user-select:none}.vkuiPagination__page--state-hover{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiPagination__page--state-active,.vkuiPagination__page--current{color:#000;color:var(--vkui--color_text_primary);background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact);height:36px;height:var(--vkui--size_button_large_height--compact);letter-spacing:var(--vk-sans-ls-17)}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular);height:44px;height:var(--vkui--size_button_large_height--regular);letter-spacing:var(--vk-sans-ls-2)}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-right:0;padding-left:0}

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

@@ -23,17 +23,17 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>,
      */
     disabled?: boolean;
     /**
-     * Переобределение `aria-label` для кнопки навигации назад.
+     * Переопределение `aria-label` для кнопки навигации назад.
      * По умолчанию используется текст на "ru_RU".
      */
     prevButtonAriaLabel?: string;
     /**
-     * Переобределение `aria-label` для кнопки навигации вперёд.
+     * Переопределение `aria-label` для кнопки навигации вперёд.
      * По умолчанию используется текст на "ru_RU".
      */
     nextButtonAriaLabel?: string;
     /**
-     * Функция для переопределния и/или локализации `aria-label` атрибута.
+     * Функция для переопределения и/или локализации `aria-label` атрибута.
      * По умолчанию используется текст на "ru_RU".
      */
     getPageAriaLabel?(page: number, isCurrent: boolean): string;

package/dist/cssm/components/Pagination/Pagination.js

@@ -8,7 +8,7 @@ import { classNames } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePagination } from "../../hooks/usePagination";
 import Tappable from "../Tappable/Tappable";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 import "./Pagination.css";
 
 function getPageAriaLabelDefault(page, isCurrent) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Pagination/Pagination.tsx"],"names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","Tappable","Button","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24ChevronCompactLeft,\n  Icon24ChevronCompactRight,\n} from \"@vkontakte/icons\";\n\nimport type { HasRootRef } from \"../../types\";\n\nimport { classNames } from \"../../lib/classNames\";\n\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { PaginationPageType, usePagination } from \"../../hooks/usePagination\";\n\nimport Tappable from \"../Tappable/Tappable\";\nimport Button from \"../Button/Button\";\n\nimport \"./Pagination.css\";\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\">,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переобределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переобределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределния и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = \"Перейти на предыдущую страницу\",\n  nextButtonAriaLabel = \"Перейти на следующую страницу\",\n  getRootRef,\n  onChange,\n  ...resetProps\n}) => {\n  const { sizeY } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || \"1\";\n      onChange?.(Number(page));\n    },\n    [onChange]\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case \"start-ellipsis\":\n        case \"end-ellipsis\":\n          return (\n            <li key={page}>\n              <div\n                vkuiClass={classNames(\n                  \"Pagination__page\",\n                  \"Pagination__page--type-ellipsis\",\n                  `Pagination__page--sizeY-${sizeY}`,\n                  disabled && \"Pagination__page--disabled\"\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                vkuiClass={classNames(\n                  \"Pagination__page\",\n                  `Pagination__page--sizeY-${sizeY}`,\n                  isCurrent && \"Pagination__page--current\",\n                  disabled && \"Pagination__page--disabled\"\n                )}\n                activeMode=\"Pagination__page--state-active\"\n                hoverMode=\"Pagination__page--state-hover\"\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick]\n  );\n\n  return (\n    <nav\n      vkuiClass=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul vkuiClass=\"Pagination__list\">\n        <li vkuiClass=\"Pagination__prevButtonContainer\">\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            stretched\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li vkuiClass=\"Pagination__nextButtonContainer\">\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            stretched\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"file":"Pagination.js"}
+{"version":3,"sources":["../../../../src/components/Pagination/Pagination.tsx"],"names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","Tappable","Button","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24ChevronCompactLeft,\n  Icon24ChevronCompactRight,\n} from \"@vkontakte/icons\";\n\nimport type { HasRootRef } from \"../../types\";\n\nimport { classNames } from \"../../lib/classNames\";\n\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { PaginationPageType, usePagination } from \"../../hooks/usePagination\";\n\nimport Tappable from \"../Tappable/Tappable\";\nimport { Button } from \"../Button/Button\";\n\nimport \"./Pagination.css\";\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\">,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = \"Перейти на предыдущую страницу\",\n  nextButtonAriaLabel = \"Перейти на следующую страницу\",\n  getRootRef,\n  onChange,\n  ...resetProps\n}) => {\n  const { sizeY } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || \"1\";\n      onChange?.(Number(page));\n    },\n    [onChange]\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case \"start-ellipsis\":\n        case \"end-ellipsis\":\n          return (\n            <li key={page}>\n              <div\n                vkuiClass={classNames(\n                  \"Pagination__page\",\n                  \"Pagination__page--type-ellipsis\",\n                  `Pagination__page--sizeY-${sizeY}`,\n                  disabled && \"Pagination__page--disabled\"\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                vkuiClass={classNames(\n                  \"Pagination__page\",\n                  `Pagination__page--sizeY-${sizeY}`,\n                  isCurrent && \"Pagination__page--current\",\n                  disabled && \"Pagination__page--disabled\"\n                )}\n                activeMode=\"Pagination__page--state-active\"\n                hoverMode=\"Pagination__page--state-hover\"\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick]\n  );\n\n  return (\n    <nav\n      vkuiClass=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul vkuiClass=\"Pagination__list\">\n        <li vkuiClass=\"Pagination__prevButtonContainer\">\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            stretched\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li vkuiClass=\"Pagination__nextButtonContainer\">\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            stretched\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"file":"Pagination.js"}

package/dist/cssm/components/Panel/Panel.js

@@ -22,7 +22,8 @@ export var Panel = withAdaptivity(function (_ref) {
 
   var platform = usePlatform();
   return createScopedElement("div", _extends({}, restProps, {
-    ref: getRootRef,
+    ref: getRootRef // eslint-disable-next-line vkui/no-object-expression-in-arguments
+    ,
     vkuiClass: classNames(getClassName("Panel", platform), "Panel--".concat(sizeX), _defineProperty({
       "Panel--centered": centered
     }, "Panel--sizeX-".concat(sizeX), true))

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"names":["getClassName","classNames","Touch","TooltipContainer","withAdaptivity","IOS","usePlatform","Panel","centered","children","getRootRef","sizeX","nav","restProps","platform"],"mappings":";;;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,gBAAT;AAEA,SAASC,cAAT;AACA,SAASC,GAAT;AACA,SAASC,WAAT;AAMA;AAUA,OAAO,IAAMC,KAAK,GAAGH,cAAc,CACjC,gBAA0E;AAAA,2BAAvEI,QAAuE;AAAA,MAAvEA,QAAuE,8BAA5D,KAA4D;AAAA,MAArDC,QAAqD,QAArDA,QAAqD;AAAA,MAA3CC,UAA2C,QAA3CA,UAA2C;AAAA,MAA/BC,KAA+B,QAA/BA,KAA+B;AAAA,MAAxBC,GAAwB,QAAxBA,GAAwB;AAAA,MAAhBC,SAAgB;;AACxE,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AAEA,SACE,wCACMO,SADN;AAEE,IAAA,GAAG,EAAEH,UAFP;AAGE,IAAA,SAAS,EAAET,UAAU,CACnBD,YAAY,CAAC,OAAD,EAAUc,QAAV,CADO,mBAETH,KAFS;AAIjB,yBAAmBH;AAJF,8BAKAG,KALA,GAKU,IALV;AAHvB,MAYE,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAER,gBAAlB;AAAoC,IAAA,SAAS,EAAC;AAA9C,KACGW,QAAQ,KAAKT,GAAb,IAAoB;AAAK,IAAA,SAAS,EAAC;AAAf,IADvB,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,IAFF,EAGGG,QAAQ,GACP;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCC,QAAlC,CADO,GAGPA,QANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,IARF,CAZF,CADF;AAyBD,CA7BgC,EA8BjC;AACEE,EAAAA,KAAK,EAAE;AADT,CA9BiC,CAA5B","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Touch } from \"../Touch/Touch\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { NavIdProps } from \"../../lib/getNavId\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Panel.css\";\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  centered?: boolean;\n}\n\nexport const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(\n  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {\n    const platform = usePlatform();\n\n    return (\n      <div\n        {...restProps}\n        ref={getRootRef}\n        vkuiClass={classNames(\n          getClassName(\"Panel\", platform),\n          `Panel--${sizeX}`,\n          {\n            \"Panel--centered\": centered,\n            [`Panel--sizeX-${sizeX}`]: true,\n          }\n        )}\n      >\n        <Touch Component={TooltipContainer} vkuiClass=\"Panel__in\">\n          {platform === IOS && <div vkuiClass=\"Panel__fade\" />}\n          <div vkuiClass=\"Panel__in-before\" />\n          {centered ? (\n            <div vkuiClass=\"Panel__centered\">{children}</div>\n          ) : (\n            children\n          )}\n          <div vkuiClass=\"Panel__in-after\" />\n        </Touch>\n      </div>\n    );\n  },\n  {\n    sizeX: true,\n  }\n);\n"],"file":"Panel.js"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"names":["getClassName","classNames","Touch","TooltipContainer","withAdaptivity","IOS","usePlatform","Panel","centered","children","getRootRef","sizeX","nav","restProps","platform"],"mappings":";;;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,gBAAT;AAEA,SAASC,cAAT;AACA,SAASC,GAAT;AACA,SAASC,WAAT;AAMA;AAUA,OAAO,IAAMC,KAAK,GAAGH,cAAc,CACjC,gBAA0E;AAAA,2BAAvEI,QAAuE;AAAA,MAAvEA,QAAuE,8BAA5D,KAA4D;AAAA,MAArDC,QAAqD,QAArDA,QAAqD;AAAA,MAA3CC,UAA2C,QAA3CA,UAA2C;AAAA,MAA/BC,KAA+B,QAA/BA,KAA+B;AAAA,MAAxBC,GAAwB,QAAxBA,GAAwB;AAAA,MAAhBC,SAAgB;;AACxE,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AAEA,SACE,wCACMO,SADN;AAEE,IAAA,GAAG,EAAEH,UAFP,CAGE;AAHF;AAIE,IAAA,SAAS,EAAET,UAAU,CACnBD,YAAY,CAAC,OAAD,EAAUc,QAAV,CADO,mBAETH,KAFS;AAIjB,yBAAmBH;AAJF,8BAKAG,KALA,GAKU,IALV;AAJvB,MAaE,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAER,gBAAlB;AAAoC,IAAA,SAAS,EAAC;AAA9C,KACGW,QAAQ,KAAKT,GAAb,IAAoB;AAAK,IAAA,SAAS,EAAC;AAAf,IADvB,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,IAFF,EAGGG,QAAQ,GACP;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCC,QAAlC,CADO,GAGPA,QANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,IARF,CAbF,CADF;AA0BD,CA9BgC,EA+BjC;AACEE,EAAAA,KAAK,EAAE;AADT,CA/BiC,CAA5B","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Touch } from \"../Touch/Touch\";\nimport { TooltipContainer } from \"../Tooltip/TooltipContainer\";\nimport { HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { NavIdProps } from \"../../lib/getNavId\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Panel.css\";\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps,\n    NavIdProps {\n  centered?: boolean;\n}\n\nexport const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(\n  ({ centered = false, children, getRootRef, sizeX, nav, ...restProps }) => {\n    const platform = usePlatform();\n\n    return (\n      <div\n        {...restProps}\n        ref={getRootRef}\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(\n          getClassName(\"Panel\", platform),\n          `Panel--${sizeX}`,\n          {\n            \"Panel--centered\": centered,\n            [`Panel--sizeX-${sizeX}`]: true,\n          }\n        )}\n      >\n        <Touch Component={TooltipContainer} vkuiClass=\"Panel__in\">\n          {platform === IOS && <div vkuiClass=\"Panel__fade\" />}\n          <div vkuiClass=\"Panel__in-before\" />\n          {centered ? (\n            <div vkuiClass=\"Panel__centered\">{children}</div>\n          ) : (\n            children\n          )}\n          <div vkuiClass=\"Panel__in-after\" />\n        </Touch>\n      </div>\n    );\n  },\n  {\n    sizeX: true,\n  }\n);\n"],"file":"Panel.js"}

package/dist/cssm/components/PanelHeader/PanelHeader.css

@@ -1 +1 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed::before{display:block;content:""}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10}.vkuiPanelHeader__in{display:flex;justify-content:space-between;align-items:center;white-space:nowrap;position:relative;background:#fff;background:var(--header_background)}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:0 0}.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}.vkuiPanelHeader__left{box-sizing:border-box;color:#2688eb;color:var(--header_tint);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--header_text);font-weight:500;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display)}.vkuiPanelHeader__right{display:flex;justify-content:flex-end;box-sizing:border-box;color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader--vkapps .vkuiPanelHeader__right{min-width:90px}.vkuiPanelHeader--sizeX-compact .vkuiPanelHeader__separator{padding-top:4px}.vkuiPanelHeader--ios~.vkuiFixedLayout--top,.vkuiPanelHeader--ios~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed){top:calc(52px + 20px);top:calc(var(--panelheader_height_ios) + var(--safe-area-inset-top))}.vkuiPanelHeader--ios::before,.vkuiPanelHeader--ios .vkuiPanelHeader__in{height:52px;height:var(--panelheader_height_ios);padding-top:20px;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader--ios .vkuiPanelHeader__left{flex-basis:0;flex-shrink:0;flex-grow:1;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing);padding:4px 0 4px 4px}.vkuiPanelHeader--ios .vkuiPanelHeader__left .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{text-align:center;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px;line-height:52px;line-height:var(--panelheader_height_ios)}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-left .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-left .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-right .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-right .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__right{flex-basis:0;flex-shrink:0;flex-grow:1;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing);padding:4px 4px 4px 0}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__left,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__right,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}@supports not (padding-top:env(safe-area-inset-top)){.vkuiPanelHeader--android,.vkuiPanelHeader--vkcom{--safe-area-inset-top:0px}}.vkuiPanelHeader--android~.vkuiFixedLayout--top,.vkuiPanelHeader--android~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed){top:calc(56px + 20px);top:calc(var(--panelheader_height_android) + var(--safe-area-inset-top))}.vkuiPanelHeader--android::before,.vkuiPanelHeader--android .vkuiPanelHeader__in{height:56px;height:var(--panelheader_height_android);padding-top:20px;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader--android .vkuiPanelHeader__left:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiPanelHeader--android.vkuiPanelHeader--no-left .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-left .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-left .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-left:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-right .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-right .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-right .vkuiPanelHeader__content{padding-right:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-right:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}.vkuiPanelHeader--android .vkuiPanelHeader__right:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__right:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10}.vkuiPanelHeader--vkcom~.vkuiFixedLayout--top,.vkuiPanelHeader--vkcom~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed){top:calc(48px + 20px);top:calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top))}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sep .vkuiPanelHeader__in{border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 0 0 1px #e1e3e6 inset;box-shadow:0 0 0 var(--thin-border) var(--input_border) inset;border-bottom:none}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom::before,.vkuiPanelHeader--vkcom .vkuiPanelHeader__in{height:48px;height:var(--panelheader_height_vkcom);padding-top:20px;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader--vkcom .vkuiPanelHeader__left:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__left,.vkuiPanelHeader--vkcom .vkuiPanelHeader__right{flex-basis:0;flex-shrink:0;flex-grow:1}
+.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed::before{display:block;content:""}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10}.vkuiPanelHeader__in{display:flex;justify-content:space-between;align-items:center;white-space:nowrap;position:relative;background:#fff;background:var(--header_background)}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:0 0}.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}.vkuiPanelHeader__left{box-sizing:border-box;color:#2688eb;color:var(--header_tint);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--header_text);font-weight:500;font-family:"VK Sans Display",-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display)}.vkuiPanelHeader__right{display:flex;justify-content:flex-end;box-sizing:border-box;color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader--vkapps .vkuiPanelHeader__right{min-width:90px}.vkuiPanelHeader--sizeX-compact .vkuiPanelHeader__separator{padding-top:4px}.vkuiPanelHeader--ios~.vkuiFixedLayout--top,.vkuiPanelHeader--ios~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed){top:calc(52px + 20px);top:calc(var(--panelheader_height_ios) + var(--safe-area-inset-top))}.vkuiPanelHeader--ios::before,.vkuiPanelHeader--ios .vkuiPanelHeader__in{height:52px;height:var(--panelheader_height_ios);padding-top:20px;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader--ios .vkuiPanelHeader__left{flex-basis:0;flex-shrink:0;flex-grow:1;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing);padding:4px 0 4px 4px}.vkuiPanelHeader--ios .vkuiPanelHeader__left .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{text-align:center;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px;line-height:52px;line-height:var(--panelheader_height_ios);letter-spacing:var(--vk-sans-ls-2);font-family:var(--vk-sans-display)}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-left .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-left .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-right .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-right .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__right{flex-basis:0;flex-shrink:0;flex-grow:1;opacity:1;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing);padding:4px 4px 4px 0}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__left,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__right,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}@supports not (padding-top:env(safe-area-inset-top)){.vkuiPanelHeader--android,.vkuiPanelHeader--vkcom{--safe-area-inset-top:0px}}.vkuiPanelHeader--android~.vkuiFixedLayout--top,.vkuiPanelHeader--android~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed){top:calc(56px + 20px);top:calc(var(--panelheader_height_android) + var(--safe-area-inset-top))}.vkuiPanelHeader--android::before,.vkuiPanelHeader--android .vkuiPanelHeader__in{height:56px;height:var(--panelheader_height_android);padding-top:20px;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader--android .vkuiPanelHeader__left:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px;letter-spacing:var(--vk-sans-ls-25);font-family:var(--vk-sans-display)}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiPanelHeader--android.vkuiPanelHeader--no-left .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-left .vkuiPanelHeader__content>*{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-left .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-left:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-right .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-right .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-right .vkuiPanelHeader__content{padding-right:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-right:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}.vkuiPanelHeader--android .vkuiPanelHeader__right:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__right:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10}.vkuiPanelHeader--vkcom~.vkuiFixedLayout--top,.vkuiPanelHeader--vkcom~* .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed){top:calc(48px + 20px);top:calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top))}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sep .vkuiPanelHeader__in{border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 0 0 1px #e1e3e6 inset;box-shadow:0 0 0 var(--thin-border) var(--input_border) inset;border-bottom:none}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom::before,.vkuiPanelHeader--vkcom .vkuiPanelHeader__in{height:48px;height:var(--panelheader_height_vkcom);padding-top:20px;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader--vkcom .vkuiPanelHeader__left:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__left,.vkuiPanelHeader--vkcom .vkuiPanelHeader__right{flex-basis:0;flex-shrink:0;flex-grow:1}

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -70,6 +70,7 @@ var PanelHeader = function PanelHeader(props) {
   var needShadow = shadow && sizeX === SizeType.REGULAR;
   var isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
   return createScopedElement("div", _extends({}, restProps, {
+    // eslint-disable-next-line vkui/no-object-expression-in-arguments
     vkuiClass: classNames(getClassName("PanelHeader", platform), {
       "PanelHeader--trnsp": transparent,
       "PanelHeader--shadow": needShadow,