npm - @vkontakte/vkui - Versions diffs - 5.4.3 → 5.5.1 - Mend

@vkontakte/vkui 5.4.3 → 5.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1975) hide show

package/dist/cjs/components/ModalRoot/ModalRootDesktop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n activeModal: activeModalProp,\n children,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootWithDOMProps) => {\n const maskElementRef = React.useRef<HTMLDivElement>(null);\n const maskAnimationFrame = React.useRef<number \| undefined>(undefined);\n const restoreFocusTo = React.useRef<HTMLElement \| undefined>(undefined);\n\n const { document } = useDOM();\n const { webviewType, platform } = useConfigProvider();\n const {\n activeModal,\n exitingModal,\n onExit,\n getModalState,\n enteringModal,\n onEnter,\n onEntered,\n onExited,\n history,\n delayEnter,\n } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n const { waitTransitionFinish } = useWaitTransitionFinish();\n const prevProps = usePrevious({\n exitingModal,\n enteringModal,\n activeModal,\n });\n const modalRootContext: ModalRootContextInterface = useObjectMemo({\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n onClose: onExit,\n isInsideModal: true,\n });\n\n const timeout = platform === Platform.IOS ? 400 : 320;\n const modals = React.Children.toArray(children) as React.ReactElement[];\n\n /* Анимирует сдвиг модального окна /\n const animateModalOpacity = (modalState: ModalsStateEntry \| undefined, display: boolean) => {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n };\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number \| null = null) => {\n if (forceOpacity === null && history?.[0] !== modalState.id) {\n return;\n }\n\n if (maskAnimationFrame.current) {\n cancelAnimationFrame(maskAnimationFrame.current);\n }\n maskAnimationFrame.current = requestAnimationFrame(() => {\n if (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 maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n };\n\n const openModal = () => {\n if (!enteringModal \|\| !prevProps) {\n return;\n }\n\n const enteringState = getModalState(enteringModal);\n onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (enteringModal === enteringModal) {\n waitTransitionFinish(\n enteringState?.innerElement,\n () => onEntered(enteringModal),\n timeout,\n );\n animateModalOpacity(enteringState, true);\n }\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n if (enteringState?.innerElement) {\n enteringState.innerElement.style.transition = 'none';\n enteringState.innerElement.style.opacity = '1';\n }\n\n onEntered(enteringModal);\n };\n\n const closeModal = (id: string) => {\n const prevModalState = getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!activeModal) {\n requestAnimationFrame(() => {\n waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n animateModalOpacity(prevModalState, false);\n setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n onExited(id);\n };\n\n React.useEffect(() => {\n if (!prevProps) {\n return;\n }\n\n // transition phase 2: animate exiting modal\n if (exitingModal && exitingModal !== prevProps.exitingModal) {\n closeModal(exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (enteringModal && enteringModal !== prevProps.enteringModal) {\n openModal();\n }\n\n // focus restoration\n if (activeModal && !prevProps.activeModal) {\n restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement \| undefined;\n }\n if (!activeModal && !exitingModal && restoreFocusTo.current) {\n restoreFocusTo.current.focus();\n restoreFocusTo.current = undefined;\n }\n });\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\n <div className={styles['ModalRoot__viewport']}>\n {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={onExit}\n timeout={timeout}\n key={key}\n className={styles['ModalRoot__modal']}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n};\n"],"names":["ModalRootDesktop","warn","warnOnce","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","React","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","useDOM","useConfigProvider","webviewType","platform","useModalManager","noop","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","useWaitTransitionFinish","prevProps","usePrevious","modalRootContext","useObjectMemo","updateModalHeight","registerModal","Object","id","data","assign","isInsideModal","timeout","Platform","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","clamp","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","ModalRootContext","Provider","value","div","className","classNames","WebviewType","VKAPPS","ref","onClick","map","Modal","modalId","getNavId","props","key","FocusTrap","restoreFocus"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n activeModal: activeModalProp,\n children,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootWithDOMProps) => {\n const maskElementRef = React.useRef<HTMLDivElement>(null);\n const maskAnimationFrame = React.useRef<number \| undefined>(undefined);\n const restoreFocusTo = React.useRef<HTMLElement \| undefined>(undefined);\n\n const { document } = useDOM();\n const { webviewType, platform } = useConfigProvider();\n const {\n activeModal,\n exitingModal,\n onExit,\n getModalState,\n enteringModal,\n onEnter,\n onEntered,\n onExited,\n history,\n delayEnter,\n } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n const { waitTransitionFinish } = useWaitTransitionFinish();\n const prevProps = usePrevious({\n exitingModal,\n enteringModal,\n activeModal,\n });\n const modalRootContext: ModalRootContextInterface = useObjectMemo({\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n onClose: onExit,\n isInsideModal: true,\n });\n\n const timeout = platform === Platform.IOS ? 400 : 320;\n const modals = React.Children.toArray(children) as React.ReactElement[];\n\n /* Анимирует сдвиг модального окна /\n const animateModalOpacity = (modalState: ModalsStateEntry \| undefined, display: boolean) => {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n };\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number \| null = null) => {\n if (forceOpacity === null && history?.[0] !== modalState.id) {\n return;\n }\n\n if (maskAnimationFrame.current) {\n cancelAnimationFrame(maskAnimationFrame.current);\n }\n maskAnimationFrame.current = requestAnimationFrame(() => {\n if (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 maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n };\n\n const openModal = () => {\n if (!enteringModal \|\| !prevProps) {\n return;\n }\n\n const enteringState = getModalState(enteringModal);\n onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (enteringModal === enteringModal) {\n waitTransitionFinish(\n enteringState?.innerElement,\n () => onEntered(enteringModal),\n timeout,\n );\n animateModalOpacity(enteringState, true);\n }\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n if (enteringState?.innerElement) {\n enteringState.innerElement.style.transition = 'none';\n enteringState.innerElement.style.opacity = '1';\n }\n\n onEntered(enteringModal);\n };\n\n const closeModal = (id: string) => {\n const prevModalState = getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!activeModal) {\n requestAnimationFrame(() => {\n waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n animateModalOpacity(prevModalState, false);\n setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n onExited(id);\n };\n\n React.useEffect(() => {\n if (!prevProps) {\n return;\n }\n\n // transition phase 2: animate exiting modal\n if (exitingModal && exitingModal !== prevProps.exitingModal) {\n closeModal(exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (enteringModal && enteringModal !== prevProps.enteringModal) {\n openModal();\n }\n\n // focus restoration\n if (activeModal && !prevProps.activeModal) {\n restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement \| undefined;\n }\n if (!activeModal && !exitingModal && restoreFocusTo.current) {\n restoreFocusTo.current.focus();\n restoreFocusTo.current = undefined;\n }\n });\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\n <div className={styles['ModalRoot__viewport']}>\n {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={onExit}\n timeout={timeout}\n key={key}\n className={styles['ModalRoot__modal']}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n};\n"],"names":["ModalRootDesktop","warn","warnOnce","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","React","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","useDOM","useConfigProvider","webviewType","platform","useModalManager","noop","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","useWaitTransitionFinish","prevProps","usePrevious","modalRootContext","useObjectMemo","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","Platform","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","clamp","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","ModalRootContext","Provider","value","div","className","classNames","WebviewType","VKAPPS","ref","onClick","map","Modal","modalId","getNavId","props","key","FocusTrap","restoreFocus"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;+DAnBU;oBACU;oBACX;6BACQ;2BACF;uCACY;mBACjB;wBACE;wBACA;wBACA;qCACsB;yBACrB;gCACkC;+BAE5B;AAGhC,IAAMC,OAAOC,IAAAA,oBAAS;AAEf,IAAMF,mBAAmB;QAC9BG,AAAaC,wBAAbD,aACAE,iBAAAA,UACAC,eAAAA,QACAC,iBAAAA,UACAC,gBAAAA,SACAC,iBAAAA;IAEA,IAAMC,iBAAiBC,OAAMC,OAAuB;IACpD,IAAMC,qBAAqBF,OAAMC,OAA2BE;IAC5D,IAAMC,iBAAiBJ,OAAMC,OAAgCE;IAE7D,IAAM,AAAEE,WAAaC,IAAAA,eAAbD;IACR,IAAkCE,qBAAAA,IAAAA,6CAA1BC,cAA0BD,mBAA1BC,aAAaC,WAAaF,mBAAbE;IACrB,IAWIC,oBAAAA,IAAAA,kCAAgBjB,iBAAiBC,UAAUC,QAAQC,UAAUC,SAASC,UAAUa,aAVlFnB,cAUEkB,kBAVFlB,aACAoB,eASEF,kBATFE,cACAC,SAQEH,kBARFG,QACAC,gBAOEJ,kBAPFI,eACAC,gBAMEL,kBANFK,eACAC,UAKEN,kBALFM,SACAC,YAIEP,kBAJFO,WACAC,WAGER,kBAHFQ,UACAC,UAEET,kBAFFS,SACAC,aACEV,kBADFU;IAGF,IAAM,AAAEC,uBAAyBC,IAAAA,oDAAzBD;IACR,IAAME,YAAYC,IAAAA,0BAAY;QAC5BZ,cAAAA;QACAG,eAAAA;QACAvB,aAAAA;IACF;QAGoDsB;IAFpD,IAAMW,mBAA8CC,IAAAA,8BAAc;QAChEC,mBAAmB;mBAAMxB;;QACzByB,eAAe;gBAAGC,YAAAA,IAAOC;gBAAPD;;mBAAkBE,OAAOC,OAAOlB,CAAAA,iBAAAA,cAAce,iBAAdf,4BAAAA,iBAAqB,CAAC,GAAGgB;QAAI;QAC/EjC,SAASgB;QACToB,eAAe;IACjB;IAEA,IAAMC,UAAUzB,aAAa0B,mBAASC,MAAM,MAAM;IAClD,IAAMC,SAASrC,OAAMsC,SAASC,QAAQ7C;IAEtC,mCAAmC,GACnC,IAAM8C,sBAAsB,SAACC,YAA0CC;QACrE,IAAID,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYE,cAAc;YAC5BF,WAAWE,aAAaC,MAAMC,aAAa;YAC3CJ,WAAWE,aAAaC,MAAME,kBAAkBJ,WAAWtB,aAAa,AAAC,GAAU,OAARc,SAAQ,QAAM;YACzFO,WAAWE,aAAaC,MAAMG,UAAUL,UAAU,MAAM;QAC1D;IACF;IAEA,0DAA0D,GAC1D,IAAMM,iBAAiB,SAACP;YAA8BQ,gFAA8B;QAClF,IAAIA,iBAAiB,QAAQ9B,CAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,OAAS,CAAC,EAAE,AAAD,MAAMsB,WAAWZ,IAAI;YAC3D;QACF;QAEA,IAAI3B,mBAAmBgD,SAAS;YAC9BC,qBAAqBjD,mBAAmBgD;QAC1C;QACAhD,mBAAmBgD,UAAUE,sBAAsB;YACjD,IAAIrD,eAAemD,SAAS;gBAC1B,6BAAkDT,WAA1CY,YAAAA,iDAAa,4DAA6BZ,WAA1Ba,mBAAAA,+DAAoB;gBAE5C,IAAMP,UACJE,iBAAiB,OACb,IAAI,AAACK,CAAAA,oBAAoBD,UAAS,IAAM,CAAA,MAAMA,UAAS,KAAM,IAC7DJ;gBACNlD,eAAemD,QAAQN,MAAMG,UAAUQ,IAAAA,aAAMR,SAAS,GAAG,KAAKS;YAChE;QACF;IACF;IAEA,IAAMC,YAAY;QAChB,IAAI,CAAC1C,iBAAiB,CAACQ,WAAW;YAChC;QACF;QAEA,IAAMmC,gBAAgB5C,cAAcC;QACpCC;QAEA,oCAAoC;QACpC,IAAI,CAACO,UAAUX,cAAc;YAC3BwC,sBAAsB;gBACpB,IAAIrC,kBAAkBA,eAAe;oBACnCM,qBACEqC,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAef,cACf;+BAAM1B,UAAUF;uBAChBmB;oBAEFM,oBAAoBkB,eAAe;gBACrC;YACF;YAEA;QACF;QAEA,+CAA+C;QAC/C,IAAIA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAef,cAAc;YAC/Be,cAAcf,aAAaC,MAAMC,aAAa;YAC9Ca,cAAcf,aAAaC,MAAMG,UAAU;QAC7C;QAEA9B,UAAUF;IACZ;IAEA,IAAM4C,aAAa,SAAC9B;QAClB,IAAM+B,iBAAiB9C,cAAce;QACrC,IAAI,CAAC+B,gBAAgB;YACnB;QACF;QAEA,oCAAoC;QACpC,IAAI,CAACpE,aAAa;YAChB4D,sBAAsB;gBACpB/B,qBAAqBuC,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBjB,cAAc;2BAAMzB,SAASW;mBAAKK;gBACvEM,oBAAoBoB,gBAAgB;gBACpCZ,eAAeY,gBAAgB;YACjC;YAEA;QACF;QAEA,+CAA+C;QAC/C1C,SAASW;IACX;IAEA7B,OAAM6D,UAAU;QACd,IAAI,CAACtC,WAAW;YACd;QACF;QAEA,4CAA4C;QAC5C,IAAIX,gBAAgBA,iBAAiBW,UAAUX,cAAc;YAC3D+C,WAAW/C;QACb;QAEA,6CAA6C;QAC7C,IAAIG,iBAAiBA,kBAAkBQ,UAAUR,eAAe;YAC9D0C;QACF;QAEA,oBAAoB;QACpB,IAAIjE,eAAe,CAAC+B,UAAU/B,aAAa;gBACfa;YAA1BD,eAAe8C,UAAW7C,CAAAA,0BAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAUyD,2BAAVzD,qCAAAA,0BAA2BF;QACvD;QACA,IAAI,CAACX,eAAe,CAACoB,gBAAgBR,eAAe8C,SAAS;YAC3D9C,eAAe8C,QAAQa;YACvB3D,eAAe8C,UAAU/C;QAC3B;IACF;IAEA,IAAI,CAACX,eAAe,CAACoB,cAAc;QACjC,OAAO;IACT;IAEA,qBACE,qBAACoD,mCAAiBC;QAASC,OAAOzC;qBAChC,qBAAC0C;QACCC,WAAWC,IAAAA,mCAET7D,gBAAgB8D,mCAAYC;qBAI9B,qBAACJ;QAAIC,SAAS;QAA6BI,KAAKzE;QAAgB0E,SAAS5D;sBACzE,qBAACsD;QAAIC,SAAS;OACX/B,OAAOqC,IAAI,SAACC;QACX,IAAMC,UAAUC,IAAAA,oBAASF,MAAMG,OAAOxF;QACtC,IAAIsF,YAAYpF,eAAeoF,YAAYhE,cAAc;YACvD,OAAO;QACT;QAEA,IAAMmE,MAAM,AAAC,SAAgB,OAARH;QAErB,qBACE,qBAACI;YACCC,cAAc;YACdpF,SAASgB;YACTqB,SAASA;YACT6C,KAAKA;YACLX,SAAS;WAERO;IAGP;AAKV"}

package/dist/cjs/components/ModalRoot/useModalManager.js CHANGED Viewed

@@ -19,12 +19,12 @@ _export(exports, {
         return withModalManager;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _toConsumableArray = require("@swc/helpers/lib/_to_consumable_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _getNavId = require("../../lib/getNavId");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
@@ -39,7 +39,7 @@ function modalTransitionReducer(state, action) {
         var nextModal = action.id;
         // preserve exiting modal if switching mid-transition
         var prevModal = state.exitingModal || state.activeModal;
-        var history = state.history ? _toConsumableArray(state.history) : [];
+        var history = state.history ? _to_consumable_array._(state.history) : [];
         var isBack = Boolean(nextModal && history.includes(nextModal));
         if (nextModal === null) {
             history = [];
@@ -58,17 +58,17 @@ function modalTransitionReducer(state, action) {
         };
     }
     if (action.type === "entered" && action.id === state.enteringModal) {
-        return _objectSpreadProps(_objectSpread({}, state), {
+        return _object_spread_props._(_object_spread._({}, state), {
             enteringModal: null
         });
     }
     if (action.type === "exited" && action.id === state.exitingModal) {
-        return _objectSpreadProps(_objectSpread({}, state), {
+        return _object_spread_props._(_object_spread._({}, state), {
             exitingModal: null
         });
     }
     if (action.type === "inited" && action.id === state.activeModal) {
-        return _objectSpreadProps(_objectSpread({}, state), {
+        return _object_spread_props._(_object_spread._({}, state), {
             enteringModal: action.id
         });
     }
@@ -117,7 +117,7 @@ function useModalManager(activeModal, children) {
     });
     var isMissing = activeModal && !modalsState[activeModal];
     var safeActiveModal = isMissing ? null : activeModal;
-    var _React_useReducer = _slicedToArray(_react.useReducer(modalTransitionReducer, {
+    var _React_useReducer = _sliced_to_array._(_react.useReducer(modalTransitionReducer, {
         activeModal: safeActiveModal,
         enteringModal: null,
         exitingModal: null,
@@ -195,7 +195,7 @@ function useModalManager(activeModal, children) {
     }, [
         modalsState
     ]);
-    return _objectSpreadProps(_objectSpread({
+    return _object_spread_props._(_object_spread._({
         onEnter: onEnter,
         onEntered: onEntered,
         onExit: onExit,
@@ -210,7 +210,7 @@ function withModalManager() {
     return function(Wrapped) {
         return function WithModalManager(props) {
             var transitionManager = useModalManager(props.activeModal, props.children, props.onOpen, props.onOpened, props.onClose, props.onClosed, initModal);
-            return /*#__PURE__*/ _react.createElement(Wrapped, _objectSpread({}, props, transitionManager));
+            return /*#__PURE__*/ _react.createElement(Wrapped, _object_spread._({}, props, transitionManager));
         };
     };
 }

package/dist/cjs/components/ModalRoot/useModalManager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\n\ninterface ModalTransitionState {\n activeModal?: string \| null;\n enteringModal?: string \| null;\n exitingModal?: string \| null;\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 \| undefined \| null) => ModalsStateEntry \| undefined;\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 // 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(modalTransitionReducer, {\n activeModal: safeActiveModal,\n enteringModal: null,\n exitingModal: null,\n history: safeActiveModal ? [safeActiveModal] : [],\n isBack: false,\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(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, '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 && (isCard(activeModal) \|\| isCard(transitionState.exitingModal)),\n );\n const getModalState = React.useCallback(\n (id: string \| undefined \| null) => (id ? modalsState[id] : undefined),\n [modalsState],\n );\n\n function onEnter() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onOpen)) {\n modalState.onOpen();\n } else if (isFunction(onOpen) && modalState.id) {\n onOpen(modalState.id);\n }\n }\n }\n\n function onExit() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onClose)) {\n modalState.onClose();\n } else if (isFunction(onClose) && modalState.id) {\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\ntype WithModalManager<Props extends ModalTransitionProps> = HasChildren &\n Omit<Props, keyof ModalTransitionProps> & {\n activeModal?: string \| null;\n };\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n return function <Props extends ModalTransitionProps>(\n Wrapped: React.ComponentType<Props>,\n ): React.ComponentType<WithModalManager<Props>> {\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"],"names":["modalTransitionReducer","useModalManager","withModalManager","getModals","children","React","Children","toArray","warn","warnOnce","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","onOpen","noop","onOpened","onClose","onClosed","initModal","onEnter","modalState","transitionState","modalsState","isFunction","onExit","useRef","current","forEach","Modal","modalProps","props","getNavId","undefined","settlingHeight","isMissing","safeActiveModal","useReducer","dispatchTransition","useIsomorphicLayoutEffect","process","env","NODE_ENV","isCard","ModalType","CARD","onEntered","useCallback","onExited","delayEnter","getModalState","Wrapped","WithModalManager","transitionManager"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\n\ninterface ModalTransitionState {\n activeModal?: string \| null;\n enteringModal?: string \| null;\n exitingModal?: string \| null;\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 \| undefined \| null) => ModalsStateEntry \| undefined;\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 // 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(modalTransitionReducer, {\n activeModal: safeActiveModal,\n enteringModal: null,\n exitingModal: null,\n history: safeActiveModal ? [safeActiveModal] : [],\n isBack: false,\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(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, '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 && (isCard(activeModal) \|\| isCard(transitionState.exitingModal)),\n );\n const getModalState = React.useCallback(\n (id: string \| undefined \| null) => (id ? modalsState[id] : undefined),\n [modalsState],\n );\n\n function onEnter() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onOpen)) {\n modalState.onOpen();\n } else if (isFunction(onOpen) && modalState.id) {\n onOpen(modalState.id);\n }\n }\n }\n\n function onExit() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onClose)) {\n modalState.onClose();\n } else if (isFunction(onClose) && modalState.id) {\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\ntype WithModalManager<Props extends ModalTransitionProps> = HasChildren &\n Omit<Props, keyof ModalTransitionProps> & {\n activeModal?: string \| null;\n };\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n return function <Props extends ModalTransitionProps>(\n Wrapped: React.ComponentType<Props>,\n ): React.ComponentType<WithModalManager<Props>> {\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"],"names":["modalTransitionReducer","useModalManager","withModalManager","getModals","children","React","Children","toArray","warn","warnOnce","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","onOpen","noop","onOpened","onClose","onClosed","initModal","onEnter","modalState","transitionState","modalsState","isFunction","onExit","useRef","current","forEach","Modal","modalProps","props","getNavId","undefined","settlingHeight","isMissing","safeActiveModal","useReducer","dispatchTransition","useIsomorphicLayoutEffect","process","env","NODE_ENV","isCard","ModalType","CARD","onEntered","useCallback","onExited","delayEnter","getModalState","Wrapped","WithModalManager","transitionManager"],"mappings":"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"}

package/dist/cjs/components/ModalRoot/useModalRootContext.js CHANGED Viewed

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "useModalRootContext", {
         return useModalRootContext;
     }
 });
-var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
-var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-var _modalRootContext = require("./ModalRootContext");
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _ModalRootContext = require("./ModalRootContext");
 var useModalRootContext = function() {
-    return _react.default.useContext(_modalRootContext.ModalRootContext);
+    return _react.default.useContext(_ModalRootContext.ModalRootContext);
 };
 //# sourceMappingURL=useModalRootContext.js.map

package/dist/cjs/components/ModalRoot/useModalRootContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/useModalRootContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ModalRootContext } from './ModalRootContext';\n\nexport const useModalRootContext = () => React.useContext(ModalRootContext);\n"],"names":["useModalRootContext","React","useContext","ModalRootContext"],"mappings":";;;;+BAGaA;;;eAAAA;;;;~~0DAHK~~;gCACe;AAE1B,IAAMA,sBAAsB;WAAMC,~~cAAK~~,~~CAACC,UAAU,CAACC,kCAAgB~~"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/useModalRootContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ModalRootContext } from './ModalRootContext';\n\nexport const useModalRootContext = () => React.useContext(ModalRootContext);\n"],"names":["useModalRootContext","React","useContext","ModalRootContext"],"mappings":";;;;+BAGaA;;;eAAAA;;;;8DAHK;gCACe;AAE1B,IAAMA,sBAAsB;WAAMC,eAAMC,WAAWC"}

package/dist/cjs/components/ModalRoot/withModalRootContext.js CHANGED Viewed

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "withModalRootContext", {
         return withModalRootContext;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _modalRootContext = require("./ModalRootContext");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _ModalRootContext = require("./ModalRootContext");
 function withModalRootContext(Component) {
     var WithModalRootContext = function WithModalRootContext(props) {
-        var updateModalHeight = _react.useContext(_modalRootContext.ModalRootContext).updateModalHeight;
-        return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, props), {
+        var updateModalHeight = _react.useContext(_ModalRootContext.ModalRootContext).updateModalHeight;
+        return /*#__PURE__*/ _react.createElement(Component, _object_spread_props._(_object_spread._({}, props), {
             updateModalHeight: updateModalHeight
         }));
     };

package/dist/cjs/components/ModalRoot/withModalRootContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/withModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\n\ntype PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;\n\nexport function withModalRootContext<P extends PickedProps>(\n Component: React.ComponentType<P>,\n): React.ComponentType<Omit<P, keyof PickedProps>> {\n function WithModalRootContext(props: Omit<P, keyof PickedProps>) {\n const { updateModalHeight } = React.useContext(ModalRootContext);\n\n return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;\n }\n return WithModalRootContext;\n}\n"],"names":["withModalRootContext","Component","WithModalRootContext","props","updateModalHeight","React","useContext","ModalRootContext"],"mappings":";;;;+BAKgBA;;;eAAAA~~;;;;;;2DALO~~;gCACqC;AAIrD,SAASA,qBACdC,SAAiC~~,EACgB~~;~~QACxCC~~,uBAAT,SAASA,qBAAqBC,KAAiC~~,EAAE~~;~~QAC/D~~,IAAM,AAAEC,oBAAsBC,OAAMC,~~UAAU~~,~~CAACC,kCAAgB,EAAvDH~~;QAER,qBAAO,qBAACH,~~gDAAeE~~;YAAaC,mBAAmBA;;IACzD;IACA,OAAOF;AACT"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/withModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\n\ntype PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;\n\nexport function withModalRootContext<P extends PickedProps>(\n Component: React.ComponentType<P>,\n): React.ComponentType<Omit<P, keyof PickedProps>> {\n function WithModalRootContext(props: Omit<P, keyof PickedProps>) {\n const { updateModalHeight } = React.useContext(ModalRootContext);\n\n return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;\n }\n return WithModalRootContext;\n}\n"],"names":["withModalRootContext","Component","WithModalRootContext","props","updateModalHeight","React","useContext","ModalRootContext"],"mappings":";;;;+BAKgBA;;;eAAAA;;;;;;+DALO;gCACqC;AAIrD,SAASA,qBACdC,SAAiC;QAExBC,uBAAT,SAASA,qBAAqBC,KAAiC;QAC7D,IAAM,AAAEC,oBAAsBC,OAAMC,WAAWC,oCAAvCH;QAER,qBAAO,qBAACH,uDAAeE;YAAaC,mBAAmBA;;IACzD;IACA,OAAOF;AACT"}

package/dist/cjs/components/NativeSelect/NativeSelect.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
+export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
     placeholder?: string;
     multiline?: boolean;
     selectType?: SelectType;
@@ -19,5 +19,5 @@ export interface SelectState {
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
-declare const NativeSelect: ({ style, defaultValue, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange: onChangeProp, value: valueProp, ...restProps }: NativeSelectProps) => JSX.Element;
+declare const NativeSelect: ({ style, defaultValue, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange: onChangeProp, value: valueProp, ...restProps }: NativeSelectProps) => React.JSX.Element;
 export { NativeSelect };

package/dist/cjs/components/NativeSelect/NativeSelect.js CHANGED Viewed

@@ -8,29 +8,29 @@ Object.defineProperty(exports, "NativeSelect", {
         return NativeSelect;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useEnsuredControl = require("../../hooks/useEnsuredControl");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _dropdownIcon = require("../DropdownIcon/DropdownIcon");
-var _formField = require("../FormField/FormField");
-var _selectTypography = require("../SelectTypography/SelectTypography");
-var sizeYClassNames = _defineProperty({
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
+var _FormField = require("../FormField/FormField");
+var _SelectTypography = require("../SelectTypography/SelectTypography");
+var sizeYClassNames = _define_property._({
     none: "vkuiSelect--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiSelect--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */ var NativeSelect = function(_param) {
-    var style = _param.style, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, align = _param.align, placeholder = _param.placeholder, children = _param.children, className = _param.className, getRef = _param.getRef, getRootRef = _param.getRootRef, disabled = _param.disabled, multiline = _param.multiline, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? "default" : _param_selectType, status = _param.status, _param_icon = _param.icon, icon = _param_icon === void 0 ? /*#__PURE__*/ _react.createElement(_dropdownIcon.DropdownIcon, null) : _param_icon, before = _param.before, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _objectWithoutProperties(_param, [
+    var style = _param.style, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, align = _param.align, placeholder = _param.placeholder, children = _param.children, className = _param.className, getRef = _param.getRef, getRootRef = _param.getRootRef, disabled = _param.disabled, multiline = _param.multiline, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? "default" : _param_selectType, status = _param.status, _param_icon = _param.icon, icon = _param_icon === void 0 ? /*#__PURE__*/ _react.createElement(_DropdownIcon.DropdownIcon, null) : _param_icon, before = _param.before, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties._(_param, [
         "style",
         "defaultValue",
         "align",
@@ -48,9 +48,9 @@ var sizeYClassNames = _defineProperty({
         "onChange",
         "value"
     ]);
-    var _React_useState = _slicedToArray(_react.useState(""), 2), title = _React_useState[0], setTitle = _React_useState[1];
-    var _React_useState1 = _slicedToArray(_react.useState(false), 2), empty = _React_useState1[0], setEmpty = _React_useState1[1];
-    var _useEnsuredControl1 = _slicedToArray((0, _useEnsuredControl.useEnsuredControl)({
+    var _React_useState = _sliced_to_array._(_react.useState(""), 2), title = _React_useState[0], setTitle = _React_useState[1];
+    var _React_useState1 = _sliced_to_array._(_react.useState(false), 2), empty = _React_useState1[0], setEmpty = _React_useState1[1];
+    var _useEnsuredControl1 = _sliced_to_array._((0, _useEnsuredControl.useEnsuredControl)({
         defaultValue: defaultValue,
         disabled: disabled,
         onChange: onChangeProp,
@@ -69,7 +69,7 @@ var sizeYClassNames = _defineProperty({
         value,
         children
     ]);
-    return /*#__PURE__*/ _react.createElement(_formField.FormField, {
+    return /*#__PURE__*/ _react.createElement(_FormField.FormField, {
         Component: "label",
         className: (0, _vkjs.classNames)("vkuiSelect", "vkuiInternalNativeSelect", before && "vkuiSelect--hasBefore", empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align === "center" && "vkuiSelect--align-center", align === "right" && "vkuiSelect--align-right", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
         style: style,
@@ -78,7 +78,7 @@ var sizeYClassNames = _defineProperty({
         before: before,
         after: icon,
         status: status
-    }, /*#__PURE__*/ _react.createElement("select", _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement("select", _object_spread_props._(_object_spread._({}, restProps), {
         disabled: disabled,
         className: "vkuiSelect__el",
         onChange: onChange,
@@ -89,7 +89,7 @@ var sizeYClassNames = _defineProperty({
     }, placeholder), children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSelect__container",
         "aria-hidden": true
-    }, /*#__PURE__*/ _react.createElement(_selectTypography.SelectTypography, {
+    }, /*#__PURE__*/ _react.createElement(_SelectTypography.SelectTypography, {
         className: "vkuiSelect__title",
         selectType: selectType
     }, title)));

package/dist/cjs/components/NativeSelect/NativeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n none: styles['Select--sizeY-none'],\n [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n extends React.SelectHTMLAttributes<HTMLSelectElement>,\n HasRef<HTMLSelectElement>,\n HasRootRef<HTMLLabelElement>,\n HasAlign,\n Pick<FormFieldProps, 'before' \| 'status'> {\n placeholder?: string;\n multiline?: boolean;\n selectType?: SelectType;\n /*\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n title?: string;\n notSelected?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n style,\n defaultValue = '',\n align,\n placeholder,\n children,\n className,\n getRef,\n getRootRef,\n disabled,\n multiline,\n selectType = 'default',\n status,\n icon = <DropdownIcon />,\n before,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: NativeSelectProps) => {\n const [title, setTitle] = React.useState('');\n const [empty, setEmpty] = React.useState(false);\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n disabled,\n onChange: onChangeProp,\n value: valueProp,\n });\n const selectRef = useExternRef(getRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n useIsomorphicLayoutEffect(() => {\n const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n if (selectedOption) {\n setTitle(selectedOption.text);\n setEmpty(selectedOption.value === '' && placeholder != null);\n }\n }, [value, children]);\n\n return (\n <FormField\n Component=\"label\"\n className={classNames(\n styles['Select'],\n 'vkuiInternalNativeSelect',\n before && styles['Select--hasBefore'],\n empty && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align === 'center' && styles['Select--align-center'],\n align === 'right' && styles['Select--align-right'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={disabled}\n before={before}\n after={icon}\n status={status}\n >\n <select\n {...restProps}\n disabled={disabled}\n className={styles['Select__el']}\n onChange={onChange}\n value={value}\n ref={selectRef}\n >\n {placeholder && <option value=\"\">{placeholder}</option>}\n {children}\n </select>\n <div className={styles['Select__container']} aria-hidden>\n <SelectTypography className={styles['Select__title']} selectType={selectType}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n\nexport { NativeSelect };\n"],"names":["NativeSelect","sizeYClassNames","none","SizeType","COMPACT","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","DropdownIcon","before","onChange","onChangeProp","value","valueProp","restProps","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","FormField","Component","classNames","REGULAR","after","select","ref","option","div","aria-hidden","SelectTypography"],"mappings":";;;;+BA0HSA;;;eAAAA~~;;;;;;;;;2DA1Hc~~;oBACI;6BACG;iCACI;4BACL;0BACJ;yCACiB;4BAEb;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,~~oBAAQ,CAACC,OAAO~~;~~AAwBnB~~;;CAEC,GACD,IAAMJ,eAAe~~,iBAkBI~~;~~QAjBvBK~~,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,qBAACC,~~0BAAY~~,~~uBACpBC,~~gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;;IAGA,IAA0BG,~~iCAAAA~~,OAAMC,~~QAAQ~~,~~CAAC,~~SAAlCC,QAAmBF,oBAAZG,WAAYH;IAC1B,IAA0BA,~~kCAAAA~~,OAAMC,~~QAAQ~~,~~CAAC~~,~~KAAK,OAAvCG,~~QAAmBJ,qBAAZK,WAAYL;IAC1B,IAA0BM,~~qCAAAA~~,IAAAA,~~oCAAiB,EAAC~~;QAC1CzB,cAAAA;QACAO,UAAAA;QACAO,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBS,wBAAZX,WAAYW;IAM1B,IAAMC,YAAYC,IAAAA,~~0BAAY,EAACtB~~;IAC/B,IAA2BuB,kBAAAA,IAAAA,~~4BAAa~~,~~4BAAbA,~~gBAAnBC,OAAAA,0CAAQ;IAEhBC,IAAAA,~~oDAAyB,EAAC,WAAM~~;~~YACPJ~~;QAAvB,IAAMK,iBAAiBL,CAAAA,qBAAAA,UAAUM,~~OAAO~~,~~cAAjBN,~~gCAAAA,KAAAA,IAAAA,mBAAmBO,OAAO,CAACP,UAAUM,~~OAAO~~,~~CAACE,aAAa,CAAC~~;QAClF,IAAIH,gBAAgB;YAClBT,SAASS,eAAeI~~,IAAI~~;~~YAC5BX~~,SAASO,eAAef,~~KAAK~~,~~KAAK,~~MAAMd,eAAe~~,IAAI~~;~~QAC7D,CAAC~~;~~IACH~~,GAAG;QAACc;QAAOb;KAAS;IAEpB,qBACE,qBAACiC~~,oBAAS~~;~~QACRC~~,WAAU;QACVjC,WAAWkC,IAAAA,~~gBAAU~~,~~gBAEnB,~~4BACAzB,mCACAU,8BACAf,sCACAP,UAAU,wCACVA,UAAU,sCACV4B,UAAUhC,~~oBAAQ~~,~~CAAC0C~~,~~OAAO,IAAI5C,~~eAAe,CAACkC,MAAM,EACpDzB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVM,QAAQA;QACR2B,OAAO7B;QACPD,QAAQA;qBAER,qBAAC+B~~,+CACKvB~~;QACJX,UAAUA;QACVH,SAAS;QACTU,UAAUA;QACVE,OAAOA;QACP0B,KAAKhB;QAEJxB,6BAAe,qBAACyC;QAAO3B,OAAM;OAAId,cACjCC,yBAEH,qBAACyC;QAAIxC,SAAS;QAA+ByC,eAAAA~~,IAAW~~;~~qBACtD~~,qBAACC~~,kCAAgB~~;~~QAAC1C~~,SAAS;QAA2BK,YAAYA;OAC/DY;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n none: styles['Select--sizeY-none'],\n [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n HasRef<HTMLSelectElement>,\n HasRootRef<HTMLLabelElement>,\n HasAlign,\n Pick<FormFieldProps, 'before' \| 'status'> {\n placeholder?: string;\n multiline?: boolean;\n selectType?: SelectType;\n /*\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n title?: string;\n notSelected?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n style,\n defaultValue = '',\n align,\n placeholder,\n children,\n className,\n getRef,\n getRootRef,\n disabled,\n multiline,\n selectType = 'default',\n status,\n icon = <DropdownIcon />,\n before,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: NativeSelectProps) => {\n const [title, setTitle] = React.useState('');\n const [empty, setEmpty] = React.useState(false);\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n disabled,\n onChange: onChangeProp,\n value: valueProp,\n });\n const selectRef = useExternRef(getRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n useIsomorphicLayoutEffect(() => {\n const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n if (selectedOption) {\n setTitle(selectedOption.text);\n setEmpty(selectedOption.value === '' && placeholder != null);\n }\n }, [value, children]);\n\n return (\n <FormField\n Component=\"label\"\n className={classNames(\n styles['Select'],\n 'vkuiInternalNativeSelect',\n before && styles['Select--hasBefore'],\n empty && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align === 'center' && styles['Select--align-center'],\n align === 'right' && styles['Select--align-right'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={disabled}\n before={before}\n after={icon}\n status={status}\n >\n <select\n {...restProps}\n disabled={disabled}\n className={styles['Select__el']}\n onChange={onChange}\n value={value}\n ref={selectRef}\n >\n {placeholder && <option value=\"\">{placeholder}</option>}\n {children}\n </select>\n <div className={styles['Select__container']} aria-hidden>\n <SelectTypography className={styles['Select__title']} selectType={selectType}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n\nexport { NativeSelect };\n"],"names":["NativeSelect","sizeYClassNames","none","SizeType","COMPACT","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","DropdownIcon","before","onChange","onChangeProp","value","valueProp","restProps","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","FormField","Component","classNames","REGULAR","after","select","ref","option","div","aria-hidden","SelectTypography"],"mappings":";;;;+BA0HSA;;;eAAAA;;;;;;;;;+DA1Hc;oBACI;6BACG;iCACI;4BACL;0BACJ;yCACiB;4BAEb;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAwBZ;;CAEC,GACD,IAAMJ,eAAe;QACnBK,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,qBAACC,iDACRC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;;IAGA,IAA0BG,qCAAAA,OAAMC,SAAS,SAAlCC,QAAmBF,oBAAZG,WAAYH;IAC1B,IAA0BA,sCAAAA,OAAMC,SAAS,YAAlCG,QAAmBJ,qBAAZK,WAAYL;IAC1B,IAA0BM,yCAAAA,IAAAA,sCAAkB;QAC1CzB,cAAAA;QACAO,UAAAA;QACAO,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBS,wBAAZX,WAAYW;IAM1B,IAAMC,YAAYC,IAAAA,4BAAatB;IAC/B,IAA2BuB,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhBC,IAAAA,sDAA0B;YACDJ;QAAvB,IAAMK,iBAAiBL,CAAAA,qBAAAA,UAAUM,qBAAVN,gCAAAA,KAAAA,IAAAA,mBAAmBO,OAAO,CAACP,UAAUM,QAAQE,cAAc;QAClF,IAAIH,gBAAgB;YAClBT,SAASS,eAAeI;YACxBX,SAASO,eAAef,UAAU,MAAMd,eAAe;QACzD;IACF,GAAG;QAACc;QAAOb;KAAS;IAEpB,qBACE,qBAACiC;QACCC,WAAU;QACVjC,WAAWkC,IAAAA,gCAET,4BACAzB,mCACAU,8BACAf,sCACAP,UAAU,wCACVA,UAAU,sCACV4B,UAAUhC,qBAAS0C,WAAW5C,eAAe,CAACkC,MAAM,EACpDzB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVM,QAAQA;QACR2B,OAAO7B;QACPD,QAAQA;qBAER,qBAAC+B,sDACKvB;QACJX,UAAUA;QACVH,SAAS;QACTU,UAAUA;QACVE,OAAOA;QACP0B,KAAKhB;QAEJxB,6BAAe,qBAACyC;QAAO3B,OAAM;OAAId,cACjCC,yBAEH,qBAACyC;QAAIxC,SAAS;QAA+ByC,eAAAA;qBAC3C,qBAACC;QAAiB1C,SAAS;QAA2BK,YAAYA;OAC/DY;AAKX"}

package/dist/cjs/components/NavTransitionContext/NavTransitionContext.d.ts CHANGED Viewed

@@ -3,4 +3,4 @@ export interface TransitionContextProps {
     entering: boolean;
 }
 export declare const useNavTransition: () => TransitionContextProps;
-export declare const NavTransitionProvider: ({ children, entering, }: React.PropsWithChildren<TransitionContextProps>) => JSX.Element;
+export declare const NavTransitionProvider: ({ children, entering, }: React.PropsWithChildren<TransitionContextProps>) => React.JSX.Element;

package/dist/cjs/components/NavTransitionContext/NavTransitionContext.js CHANGED Viewed

@@ -16,8 +16,8 @@ _export(exports, {
         return NavTransitionProvider;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _useObjectMemo = require("../../hooks/useObjectMemo");
 var TransitionContext = /*#__PURE__*/ _react.createContext({
     entering: false

package/dist/cjs/components/NavTransitionContext/NavTransitionContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\n\nexport interface TransitionContextProps {\n entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n entering: false,\n});\nexport const useNavTransition = () => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n children,\n entering,\n}: React.PropsWithChildren<TransitionContextProps>) => {\n const parentContext = useNavTransition();\n const contextValue = useObjectMemo({\n entering: parentContext.entering \|\| entering,\n });\n return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["useNavTransition","NavTransitionProvider","TransitionContext","React","createContext","entering","useContext","children","parentContext","contextValue","useObjectMemo","Provider","value"],"mappings":";;;;;;;;;;;IASaA,gBAAgB;eAAhBA;;IAEAC,qBAAqB;eAArBA~~;;;;2DAXU~~;6BACO;AAK9B,IAAMC,kCAAoBC,OAAMC,~~aAAa,CAAyB~~;IACpEC,UAAU~~,KAAK~~;~~AACjB~~;AACO,IAAML,mBAAmB;WAAMG,OAAMG,~~UAAU,CAACJ~~;;AAEhD,IAAMD,wBAAwB~~,gBAGkB~~;~~QAFrDM~~,iBAAAA,UACAF,iBAAAA;IAEA,IAAMG,gBAAgBR;IACtB,IAAMS,eAAeC,IAAAA,~~4BAAa,EAAC~~;QACjCL,UAAUG,cAAcH,~~QAAQ,IAAIA~~;IACtC;IACA,qBAAO,qBAACH,kBAAkBS~~,QAAQ~~;~~QAACC~~,OAAOH;OAAeF;AAC3D"}
1	+ {"version":3,"sources":["../../../../src/components/NavTransitionContext/NavTransitionContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\n\nexport interface TransitionContextProps {\n entering: boolean;\n}\nconst TransitionContext = React.createContext<TransitionContextProps>({\n entering: false,\n});\nexport const useNavTransition = () => React.useContext(TransitionContext);\n\nexport const NavTransitionProvider = ({\n children,\n entering,\n}: React.PropsWithChildren<TransitionContextProps>) => {\n const parentContext = useNavTransition();\n const contextValue = useObjectMemo({\n entering: parentContext.entering \|\| entering,\n });\n return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;\n};\n"],"names":["useNavTransition","NavTransitionProvider","TransitionContext","React","createContext","entering","useContext","children","parentContext","contextValue","useObjectMemo","Provider","value"],"mappings":";;;;;;;;;;;IASaA,gBAAgB;eAAhBA;;IAEAC,qBAAqB;eAArBA;;;;+DAXU;6BACO;AAK9B,IAAMC,kCAAoBC,OAAMC,cAAsC;IACpEC,UAAU;AACZ;AACO,IAAML,mBAAmB;WAAMG,OAAMG,WAAWJ;;AAEhD,IAAMD,wBAAwB;QACnCM,iBAAAA,UACAF,iBAAAA;IAEA,IAAMG,gBAAgBR;IACtB,IAAMS,eAAeC,IAAAA,8BAAc;QACjCL,UAAUG,cAAcH,YAAYA;IACtC;IACA,qBAAO,qBAACH,kBAAkBS;QAASC,OAAOH;OAAeF;AAC3D"}

package/dist/cjs/components/Pagination/Pagination.d.ts CHANGED Viewed

@@ -41,4 +41,4 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
  */
-export declare const Pagination: ({ currentPage, siblingCount, boundaryCount, totalPages, disabled, getPageAriaLabel, prevButtonAriaLabel, nextButtonAriaLabel, getRootRef, onChange, className, ...resetProps }: PaginationProps) => JSX.Element;
+export declare const Pagination: ({ currentPage, siblingCount, boundaryCount, totalPages, disabled, getPageAriaLabel, prevButtonAriaLabel, nextButtonAriaLabel, getRootRef, onChange, ...resetProps }: PaginationProps) => React.JSX.Element;

package/dist/cjs/components/Pagination/Pagination.js CHANGED Viewed

@@ -8,27 +8,23 @@ Object.defineProperty(exports, "Pagination", {
         return Pagination;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _usePagination = require("../../hooks/usePagination");
 var _adaptivity = require("../../lib/adaptivity");
-var _button = require("../Button/Button");
-var _tappable = require("../Tappable/Tappable");
-var _obj;
-var pageSizeYClassNames = (_obj = {
-    none: "vkuiPagination__page--sizeY-none"
-}, _defineProperty(_obj, _adaptivity.SizeType.COMPACT, "vkuiPagination__page--sizeY-compact"), _defineProperty(_obj, _adaptivity.SizeType.REGULAR, "vkuiPagination__page--sizeY-regular"), _obj);
+var _Button = require("../Button/Button");
+var _Tappable = require("../Tappable/Tappable");
+var _Text = require("../Typography/Text/Text");
 function getPageAriaLabelDefault(page, isCurrent) {
     return isCurrent ? "".concat(page, " страница") : "Перейти на ".concat(page, " страницу");
 }
 var Pagination = function(_param) {
-    var _param_currentPage = _param.currentPage, currentPage = _param_currentPage === void 0 ? 1 : _param_currentPage, _param_siblingCount = _param.siblingCount, siblingCount = _param_siblingCount === void 0 ? 1 : _param_siblingCount, _param_boundaryCount = _param.boundaryCount, boundaryCount = _param_boundaryCount === void 0 ? 1 : _param_boundaryCount, _param_totalPages = _param.totalPages, totalPages = _param_totalPages === void 0 ? 1 : _param_totalPages, disabled = _param.disabled, _param_getPageAriaLabel = _param.getPageAriaLabel, getPageAriaLabel = _param_getPageAriaLabel === void 0 ? getPageAriaLabelDefault : _param_getPageAriaLabel, _param_prevButtonAriaLabel = _param.prevButtonAriaLabel, prevButtonAriaLabel = _param_prevButtonAriaLabel === void 0 ? "Перейти на предыдущую страницу" : _param_prevButtonAriaLabel, _param_nextButtonAriaLabel = _param.nextButtonAriaLabel, nextButtonAriaLabel = _param_nextButtonAriaLabel === void 0 ? "Перейти на следующую страницу" : _param_nextButtonAriaLabel, getRootRef = _param.getRootRef, onChange = _param.onChange, className = _param.className, resetProps = _objectWithoutProperties(_param, [
+    var _param_currentPage = _param.currentPage, currentPage = _param_currentPage === void 0 ? 1 : _param_currentPage, _param_siblingCount = _param.siblingCount, siblingCount = _param_siblingCount === void 0 ? 1 : _param_siblingCount, _param_boundaryCount = _param.boundaryCount, boundaryCount = _param_boundaryCount === void 0 ? 1 : _param_boundaryCount, _param_totalPages = _param.totalPages, totalPages = _param_totalPages === void 0 ? 1 : _param_totalPages, disabled = _param.disabled, _param_getPageAriaLabel = _param.getPageAriaLabel, getPageAriaLabel = _param_getPageAriaLabel === void 0 ? getPageAriaLabelDefault : _param_getPageAriaLabel, _param_prevButtonAriaLabel = _param.prevButtonAriaLabel, prevButtonAriaLabel = _param_prevButtonAriaLabel === void 0 ? "Перейти на предыдущую страницу" : _param_prevButtonAriaLabel, _param_nextButtonAriaLabel = _param.nextButtonAriaLabel, nextButtonAriaLabel = _param_nextButtonAriaLabel === void 0 ? "Перейти на следующую страницу" : _param_nextButtonAriaLabel, getRootRef = _param.getRootRef, onChange = _param.onChange, resetProps = _object_without_properties._(_param, [
         "currentPage",
         "siblingCount",
         "boundaryCount",
@@ -38,8 +34,7 @@ var Pagination = function(_param) {
         "prevButtonAriaLabel",
         "nextButtonAriaLabel",
         "getRootRef",
-        "onChange",
-        "className"
+        "onChange"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var pages = (0, _usePagination.usePagination)({
@@ -80,16 +75,16 @@ var Pagination = function(_param) {
             case "end-ellipsis":
                 return /*#__PURE__*/ _react.createElement("li", {
                     key: page
-                }, /*#__PURE__*/ _react.createElement("div", {
-                    className: (0, _vkjs.classNames)("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", pageSizeYClassNames[sizeY], disabled && "vkuiPagination__page--disabled")
+                }, /*#__PURE__*/ _react.createElement(_Text.Text, {
+                    className: (0, _vkjs.classNames)("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", sizeY === "none" && "vkuiPagination__page--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiPagination__page--sizeY-compact", disabled && "vkuiPagination__page--disabled")
                 }, "…"));
             default:
                 {
                     var isCurrent = page === currentPage;
                     return /*#__PURE__*/ _react.createElement("li", {
                         key: page
-                    }, /*#__PURE__*/ _react.createElement(_tappable.Tappable, {
-                        className: (0, _vkjs.classNames)("vkuiPagination__page", pageSizeYClassNames[sizeY], isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
+                    }, /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
+                        className: (0, _vkjs.classNames)("vkuiPagination__page", sizeY === "none" && "vkuiPagination__page--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiPagination__page--sizeY-compact", isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
                         activeMode: "vkuiPagination__page--state-active",
                         hoverMode: "vkuiPagination__page--state-hover",
                         hasActive: !isCurrent,
@@ -100,7 +95,9 @@ var Pagination = function(_param) {
                         "aria-current": isCurrent ? true : undefined,
                         "aria-label": getPageAriaLabel(page, isCurrent),
                         onClick: handleClick
-                    }, page));
+                    }, /*#__PURE__*/ _react.createElement(_Text.Text, {
+                        normalize: false
+                    }, page)));
                 }
         }
     }, [
@@ -110,8 +107,7 @@ var Pagination = function(_param) {
         getPageAriaLabel,
         handleClick
     ]);
-    return /*#__PURE__*/ _react.createElement("nav", _objectSpread({
-        className: (0, _vkjs.classNames)("vkuiPagination", className),
+    return /*#__PURE__*/ _react.createElement("nav", _object_spread._({
         role: "navigation",
         "aria-label": "Навигация по страницам",
         ref: getRootRef
@@ -119,7 +115,7 @@ var Pagination = function(_param) {
         className: "vkuiPagination__list"
     }, /*#__PURE__*/ _react.createElement("li", {
         className: "vkuiPagination__prevButtonContainer"
-    }, /*#__PURE__*/ _react.createElement(_button.Button, {
+    }, /*#__PURE__*/ _react.createElement(_Button.Button, {
         size: "l",
         before: /*#__PURE__*/ _react.createElement(_icons.Icon24ChevronCompactLeft, {
             width: 24
@@ -131,7 +127,7 @@ var Pagination = function(_param) {
         onClick: handlePrevClick
     })), pages.map(renderPages), /*#__PURE__*/ _react.createElement("li", {
         className: "vkuiPagination__nextButtonContainer"
-    }, /*#__PURE__*/ _react.createElement(_button.Button, {
+    }, /*#__PURE__*/ _react.createElement(_Button.Button, {
         size: "l",
         after: /*#__PURE__*/ _react.createElement(_icons.Icon24ChevronCompactRight, {
             width: 24