npm - @vkontakte/vkui - Versions diffs - 7.0.0-dev-efd91c.3 → 7.0.0 - Mend

@vkontakte/vkui 7.0.0-dev-efd91c.3 → 7.0.0

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

package/dist/cssm/components/ModalPage/ModalPageInternal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, useCallback } from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, useBottomSheet } from '../../lib/sheet';\nimport type { CSSCustomProperties } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n ModalOverlay as ModalOverlayDefault,\n type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport { ModalPageContent } from '../ModalPageContent/ModalPageContent';\nimport type { ModalPageProps } from './types';\nimport styles from './ModalPage.module.css';\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n appear: styles['documentStateEnter'],\n appearing: styles['documentStateEntering'],\n\n enter: styles['documentStateEnter'],\n entering: styles['documentStateEntering'],\n\n exiting: styles['documentStateExiting'],\n exited: styles['documentStateExited'],\n};\n\nexport interface ModalPageInternalProps extends Omit<ModalPageProps, 'nav' \| 'keepMounted'> {\n ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/*\n В компоненте заложена вся логика модального окна.\n \n @private\n */\nexport const ModalPageInternal = ({\n open,\n header,\n footer,\n size: desktopMaxWidth,\n height,\n children,\n className,\n style,\n dynamicContentHeight,\n settlingHeight,\n getModalContentRef,\n ModalOverlay = ModalOverlayDefault,\n modalOverlayTestId,\n modalContentTestId,\n modalDismissButtonTestId,\n noFocusToDialog,\n hideCloseButton,\n preventClose,\n disableContentPanningGesture,\n onOpen,\n onOpened,\n onClose = noop,\n onClosed,\n ...restProps\n}: ModalPageInternalProps) => {\n const { hasCustomPanelHeaderAfter } = useConfigProvider();\n const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n enableAppear: true,\n onEnter() {\n onOpen?.();\n },\n onEntered() {\n onOpened?.();\n },\n onExited() {\n onClosed?.();\n },\n });\n const opened = transitionState === 'appeared' \|\| transitionState === 'entered';\n const hidden = transitionState === 'exited';\n const closable = !preventClose && opened;\n\n const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n\n const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =\n useBottomSheet(bottomSheetEnabled, {\n blocked: keyboardOpened,\n initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,\n sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n onDismiss() {\n onClose('swipe-down');\n },\n });\n const documentStyle = keyboardOpened\n ? {\n '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px',\n ...initialStyle,\n }\n : initialStyle;\n const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);\n const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);\n\n const disableContentPanningGestureProp = disableContentPanningGesture\n ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE\n : undefined;\n const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);\n\n const modalOverlay = (\n <ModalOverlay\n getRootRef={setBackdropEl}\n data-testid={modalOverlayTestId}\n visible={open}\n onClick={\n closable\n ? function handleBackdropClick(event) {\n onClose('click-overlay', event);\n }\n : undefined\n }\n />\n );\n const closeButton =\n hideCloseButton \|\| !isDesktop ? null : (\n <ModalDismissButton\n data-testid={modalDismissButtonTestId}\n onClick={\n closable\n ? function handleDismissButtonClick(event) {\n onClose('click-close-button', event);\n }\n : undefined\n }\n />\n );\n const handleEscKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (closable && pressedKey(event) === Keys.ESCAPE) {\n onClose('escape-key');\n }\n },\n [closable, onClose],\n );\n\n useScrollLock(!hidden);\n\n return (\n <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n {modalOverlay}\n <FocusTrap\n {...restProps}\n autoFocus={!noFocusToDialog}\n role=\"dialog\"\n aria-modal=\"true\"\n disabled={!opened \|\| hidden}\n className={classNames(\n className,\n styles.host,\n sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n hasCustomPanelHeaderAfter\n ? styles.hostSafeAreaInsetTopWithCustomOffset\n : styles.hostSafeAreaInsetTop,\n desktopMaxWidthClassName,\n )}\n style={{\n ...style,\n ...desktopMaxWidthStyle,\n ...getHeightCSSVariable(height),\n }}\n >\n <div\n {...bottomSheetEventHandlers}\n ref={handleSheetRef}\n role=\"document\"\n style={documentStyle}\n className={classNames(styles.document, transitionStateClassNames[transitionState])}\n onTransitionEnd={onTransitionEnd}\n >\n <div className={styles.children}>\n {hasReactNode(header) && header}\n <ModalPageContent\n getRootRef={handleSheetScrollRef}\n data-testid={modalContentTestId}\n {...disableContentPanningGestureProp}\n >\n {children}\n </ModalPageContent>\n {hasReactNode(footer) && footer}\n </div>\n {closeButton}\n </div>\n </FocusTrap>\n </ModalOutlet>\n );\n};\n\nconst desktopMaxWidthClassNames = {\n s: styles['hostMaxWidthS'],\n m: styles['hostMaxWidthM'],\n l: styles['hostMaxWidthL'],\n};\n\nfunction resolveDesktopMaxWidth(\n desktopMaxWidth: ModalPageInternalProps['size'] = 's',\n): [string \| undefined, CSSCustomProperties \| undefined] {\n if (typeof desktopMaxWidth === 'string') {\n return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];\n }\n\n return [\n undefined,\n typeof desktopMaxWidth === 'number'\n ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }\n : undefined,\n ];\n}\n\nfunction getHeightCSSVariable(height?: number \| string): CSSCustomProperties \| undefined {\n return height !== undefined\n ? { '--vkui_internal_ModalPage--userHeight': `${height}` }\n : undefined;\n}\n"],"names":["useCallback","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","useExternRef","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","useBottomSheet","useScrollLock","useConfigProvider","FocusTrap","ModalDismissButton","ModalOutlet","ModalOverlay","ModalOverlayDefault","ModalPageContent","styles","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalPageInternal","open","header","footer","size","desktopMaxWidth","height","children","className","style","dynamicContentHeight","settlingHeight","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","onOpen","onOpened","onClose","onClosed","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","initialSnapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","documentStyle","handleSheetRef","handleSheetScrollRef","disableContentPanningGestureProp","undefined","desktopMaxWidthClassName","desktopMaxWidthStyle","resolveDesktopMaxWidth","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","closeButton","handleDismissButtonClick","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","host","hostSafeAreaInsetTopWithCustomOffset","hostSafeAreaInsetTop","getHeightCSSVariable","div","document","desktopMaxWidthClassNames","s","m","l"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, useCallback } from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport {\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,\n type SnapPoint,\n type SnapPointChange,\n useBottomSheet,\n} from '../../lib/sheet';\nimport type { CSSCustomProperties } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n ModalOverlay as ModalOverlayDefault,\n type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport { ModalPageContent } from '../ModalPageContent/ModalPageContent';\nimport type { ModalPageProps } from './types';\nimport styles from './ModalPage.module.css';\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n appear: styles['documentStateEnter'],\n appearing: styles['documentStateEntering'],\n\n enter: styles['documentStateEnter'],\n entering: styles['documentStateEntering'],\n\n exiting: styles['documentStateExiting'],\n exited: styles['documentStateExited'],\n};\n\nexport interface ModalPageInternalProps\n extends Omit<ModalPageProps, 'nav' \| 'keepMounted' \| 'settlingHeight' \| 'dynamicContentHeight'> {\n snapPoint: SnapPoint;\n ModalOverlay?: ComponentType<ModalOverlayProps>;\n onSnapPointChange?: SnapPointChange;\n}\n\n/*\n В компоненте заложена вся логика модального окна.\n \n @private\n */\nexport const ModalPageInternal = ({\n open,\n header,\n footer,\n size: desktopMaxWidth,\n height,\n children,\n className,\n style,\n snapPoint,\n onSnapPointChange,\n getModalContentRef,\n ModalOverlay = ModalOverlayDefault,\n modalOverlayTestId,\n modalContentTestId,\n modalDismissButtonTestId,\n noFocusToDialog,\n hideCloseButton,\n preventClose,\n disableContentPanningGesture,\n onOpen,\n onOpened,\n onClose = noop,\n onClosed,\n ...restProps\n}: ModalPageInternalProps) => {\n const { hasCustomPanelHeaderAfter } = useConfigProvider();\n const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n enableAppear: true,\n onEnter() {\n onOpen?.();\n },\n onEntered() {\n onOpened?.();\n },\n onExited() {\n onClosed?.();\n },\n });\n const opened = transitionState === 'appeared' \|\| transitionState === 'entered';\n const hidden = transitionState === 'exited';\n const closable = !preventClose && opened;\n\n const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n\n const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =\n useBottomSheet(bottomSheetEnabled, {\n blocked: keyboardOpened,\n snapPoint,\n sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n onSnapPointChange,\n onDismiss() {\n onClose('swipe-down');\n },\n });\n const documentStyle = keyboardOpened\n ? {\n '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px',\n ...initialStyle,\n }\n : initialStyle;\n const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);\n const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);\n\n const disableContentPanningGestureProp = disableContentPanningGesture\n ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE\n : undefined;\n const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);\n\n const modalOverlay = (\n <ModalOverlay\n getRootRef={setBackdropEl}\n data-testid={modalOverlayTestId}\n visible={open}\n onClick={\n closable\n ? function handleBackdropClick(event) {\n onClose('click-overlay', event);\n }\n : undefined\n }\n />\n );\n const closeButton =\n hideCloseButton \|\| !isDesktop ? null : (\n <ModalDismissButton\n data-testid={modalDismissButtonTestId}\n onClick={\n closable\n ? function handleDismissButtonClick(event) {\n onClose('click-close-button', event);\n }\n : undefined\n }\n />\n );\n const handleEscKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (closable && pressedKey(event) === Keys.ESCAPE) {\n onClose('escape-key');\n }\n },\n [closable, onClose],\n );\n\n useScrollLock(!hidden);\n\n return (\n <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n {modalOverlay}\n <FocusTrap\n {...restProps}\n autoFocus={!noFocusToDialog}\n role=\"dialog\"\n aria-modal=\"true\"\n disabled={!opened \|\| hidden}\n className={classNames(\n className,\n styles.host,\n sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n hasCustomPanelHeaderAfter\n ? styles.hostSafeAreaInsetTopWithCustomOffset\n : styles.hostSafeAreaInsetTop,\n desktopMaxWidthClassName,\n )}\n style={{\n ...style,\n ...desktopMaxWidthStyle,\n ...getHeightCSSVariable(height),\n }}\n >\n <div\n {...bottomSheetEventHandlers}\n ref={handleSheetRef}\n role=\"document\"\n style={documentStyle}\n className={classNames(styles.document, transitionStateClassNames[transitionState])}\n onTransitionEnd={onTransitionEnd}\n >\n <div className={styles.children}>\n {hasReactNode(header) && header}\n <ModalPageContent\n getRootRef={handleSheetScrollRef}\n data-testid={modalContentTestId}\n {...disableContentPanningGestureProp}\n >\n {children}\n </ModalPageContent>\n {hasReactNode(footer) && footer}\n </div>\n {closeButton}\n </div>\n </FocusTrap>\n </ModalOutlet>\n );\n};\n\nconst desktopMaxWidthClassNames = {\n s: styles['hostMaxWidthS'],\n m: styles['hostMaxWidthM'],\n l: styles['hostMaxWidthL'],\n};\n\nfunction resolveDesktopMaxWidth(\n desktopMaxWidth: ModalPageInternalProps['size'] = 's',\n): [string \| undefined, CSSCustomProperties \| undefined] {\n if (typeof desktopMaxWidth === 'string') {\n return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];\n }\n\n return [\n undefined,\n typeof desktopMaxWidth === 'number'\n ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }\n : undefined,\n ];\n}\n\nfunction getHeightCSSVariable(height?: number \| string): CSSCustomProperties \| undefined {\n return height !== undefined\n ? { '--vkui_internal_ModalPage--userHeight': `${height}` }\n : undefined;\n}\n"],"names":["useCallback","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","useExternRef","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","useBottomSheet","useScrollLock","useConfigProvider","FocusTrap","ModalDismissButton","ModalOutlet","ModalOverlay","ModalOverlayDefault","ModalPageContent","styles","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalPageInternal","open","header","footer","size","desktopMaxWidth","height","children","className","style","snapPoint","onSnapPointChange","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","onOpen","onOpened","onClose","onClosed","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","sheetCSSProperty","backdropCSSProperty","onDismiss","documentStyle","handleSheetRef","handleSheetScrollRef","disableContentPanningGestureProp","undefined","desktopMaxWidthClassName","desktopMaxWidthStyle","resolveDesktopMaxWidth","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","closeButton","handleDismissButtonClick","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","host","hostSafeAreaInsetTopWithCustomOffset","hostSafeAreaInsetTop","getHeightCSSVariable","div","document","desktopMaxWidthClassNames","s","m","l"],"mappings":"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"}

package/dist/cssm/components/ModalPageHeader/ModalPageHeader.module.css CHANGED Viewed

@@ -19,6 +19,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--dismiss_24), /* Note: <Icon24Dismiss /> по документации используется только для iOS  */
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--cancel_24) {
   color: var(--vkui--color_icon_secondary);
 }

package/dist/cssm/components/ModalRoot/ModalRoot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ModalOverlay } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';\nimport type { ModalRootProps } from './types';\n\nconst warn = warnOnce('ModalRoot');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalRoot\n /\nexport const ModalRoot = ({\n activeModal,\n children,\n modalOverlayTestId,\n noFocusToDialog,\n usePortal,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootProps): React.ReactNode => {\n const contextValue = React.useMemo(\n () => ({\n isInsideModal: true,\n\n // base props\n activeModal,\n modalOverlayTestId,\n noFocusToDialog,\n\n // callbacks\n onOpen,\n onOpened,\n onClose,\n onClosed,\n\n // TODO [>=8] Удалить метод\n updateModalHeight:\n / istanbul ignore next: deprecated /\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод updateModalHeight() устарел и будет удалён в VKUI v8');\n }\n : noop,\n\n // TODO [>=8] Удалить метод\n registerModal:\n / istanbul ignore next: deprecated */\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод registerModal() устарел и будет удалён в VKUI v8');\n }\n : noop,\n }),\n [activeModal, modalOverlayTestId, noFocusToDialog, onClose, onClosed, onOpen, onOpened],\n );\n const modalOverlayRef = React.useRef<HTMLDivElement>(null);\n return (\n <AppRootPortal usePortal={usePortal}>\n <ModalRootContext.Provider value={contextValue}>\n <ModalRootOverlayContext.Provider value={modalOverlayRef}>\n <ModalOverlay\n position=\"fixed\"\n visible={typeof activeModal === 'string'}\n getRootRef={modalOverlayRef}\n />\n {children}\n </ModalRootOverlayContext.Provider>\n </ModalRootContext.Provider>\n </AppRootPortal>\n );\n};\n"],"names":["React","noop","warnOnce","AppRootPortal","ModalOverlay","ModalRootContext","ModalRootOverlayContext","warn","ModalRoot","activeModal","children","modalOverlayTestId","noFocusToDialog","usePortal","onOpen","onOpened","onClose","onClosed","contextValue","useMemo","isInsideModal","updateModalHeight","process","env","NODE_ENV","registerModal","modalOverlayRef","useRef","Provider","value","position","visible","getRootRef"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,wBAAqB;AAG/E,MAAMC,OAAOL,SAAS;~~AAEtB~~;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,EAClBC,eAAe,EACfC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACO;IACf,MAAMC,eAAelB,MAAMmB,OAAO,CAChC,IAAO,CAAA;YACLC,eAAe;YAEf,aAAa;YACbX;YACAE;YACAC;YAEA,YAAY;YACZE;YACAC;YACAC;YACAC;YAEA,2BAA2B;YAC3BI,mBACE,oCAAoC,GACpCC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;YAEN,2BAA2B;YAC3BwB,eACE,oCAAoC,GACpCH,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;QACR,CAAA,GACA;QAACQ;QAAaE;QAAoBC;QAAiBI;QAASC;QAAUH;QAAQC;KAAS;IAEzF,MAAMW,kBAAkB1B,MAAM2B,MAAM,CAAiB;IACrD,qBACE,KAACxB;QAAcU,WAAWA;kBACxB,cAAA,KAACR,iBAAiBuB,QAAQ;YAACC,OAAOX;sBAChC,cAAA,MAACZ,wBAAwBsB,QAAQ;gBAACC,OAAOH;;kCACvC,KAACtB;wBACC0B,UAAS;wBACTC,SAAS,OAAOtB,gBAAgB;wBAChCuB,YAAYN;;oBAEbhB;;;;;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ModalOverlay } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';\nimport type { ModalRootProps } from './types';\n\nconst warn = warnOnce('ModalRoot');\n/*\n @see https://vkcom.github.io/VKUI/#/ModalRoot\n /\nexport const ModalRoot = ({\n activeModal,\n children,\n modalOverlayTestId,\n noFocusToDialog,\n usePortal,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootProps): React.ReactNode => {\n const contextValue = React.useMemo(\n () => ({\n isInsideModal: true,\n\n // base props\n activeModal,\n modalOverlayTestId,\n noFocusToDialog,\n\n // callbacks\n onOpen,\n onOpened,\n onClose,\n onClosed,\n\n // TODO [>=8] Удалить метод\n updateModalHeight:\n / istanbul ignore next: deprecated /\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод updateModalHeight() устарел и будет удалён в VKUI v8');\n }\n : noop,\n\n // TODO [>=8] Удалить метод\n registerModal:\n / istanbul ignore next: deprecated */\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод registerModal() устарел и будет удалён в VKUI v8');\n }\n : noop,\n }),\n [activeModal, modalOverlayTestId, noFocusToDialog, onClose, onClosed, onOpen, onOpened],\n );\n const modalOverlayRef = React.useRef<HTMLDivElement>(null);\n return (\n <AppRootPortal usePortal={usePortal}>\n <ModalRootContext.Provider value={contextValue}>\n <ModalRootOverlayContext.Provider value={modalOverlayRef}>\n <ModalOverlay\n position=\"fixed\"\n visible={typeof activeModal === 'string'}\n getRootRef={modalOverlayRef}\n />\n {children}\n </ModalRootOverlayContext.Provider>\n </ModalRootContext.Provider>\n </AppRootPortal>\n );\n};\n"],"names":["React","noop","warnOnce","AppRootPortal","ModalOverlay","ModalRootContext","ModalRootOverlayContext","warn","ModalRoot","activeModal","children","modalOverlayTestId","noFocusToDialog","usePortal","onOpen","onOpened","onClose","onClosed","contextValue","useMemo","isInsideModal","updateModalHeight","process","env","NODE_ENV","registerModal","modalOverlayRef","useRef","Provider","value","position","visible","getRootRef"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,wBAAqB;AAG/E,MAAMC,OAAOL,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,EAClBC,eAAe,EACfC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACO;IACf,MAAMC,eAAelB,MAAMmB,OAAO,CAChC,IAAO,CAAA;YACLC,eAAe;YAEf,aAAa;YACbX;YACAE;YACAC;YAEA,YAAY;YACZE;YACAC;YACAC;YACAC;YAEA,2BAA2B;YAC3BI,mBACE,oCAAoC,GACpCC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;YAEN,2BAA2B;YAC3BwB,eACE,oCAAoC,GACpCH,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;QACR,CAAA,GACA;QAACQ;QAAaE;QAAoBC;QAAiBI;QAASC;QAAUH;QAAQC;KAAS;IAEzF,MAAMW,kBAAkB1B,MAAM2B,MAAM,CAAiB;IACrD,qBACE,KAACxB;QAAcU,WAAWA;kBACxB,cAAA,KAACR,iBAAiBuB,QAAQ;YAACC,OAAOX;sBAChC,cAAA,MAACZ,wBAAwBsB,QAAQ;gBAACC,OAAOH;;kCACvC,KAACtB;wBACC0B,UAAS;wBACTC,SAAS,OAAOtB,gBAAgB;wBAChCuB,YAAYN;;oBAEbhB;;;;;AAKX,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["/** TODO [>=8] Удалить deprecated типы /\n\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type ModalType = 'page' \| 'card';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type TranslateRange = [number, number];\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport interface ModalElements {\n modalElement?: HTMLElement \| null;\n innerElement?: HTMLElement \| null;\n headerElement?: HTMLElement \| null;\n contentElement?: HTMLElement \| null;\n bottomInset?: HTMLElement \| null;\n}\n\n/\n @deprecated будет удалён в VKUI v8\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 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 Отключает возможность закрыть модалку стандартными способами\n /\n preventClose?: boolean;\n}\n\nexport type ModalRootActiveModal = string \| null;\n\nexport type ModalRootCallbackFunction = (modalId: string) => void;\n\ntype ModalRootBaseProps = {\n activeModal?: ModalRootActiveModal;\n\n /\n `data-testid` для маски\n /\n modalOverlayTestId?: string;\n\n /\n Отключает фокус на контейнер диалогового окна при открытии.\n /\n noFocusToDialog?: boolean;\n\n usePortal?: AppRootPortalProps['usePortal'];\n\n /\n Будет вызвано при начале открытия активной модалки с её id\n /\n onOpen?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном открытии активной модалки с её id\n /\n onOpened?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при начале закрытия активной модалки с её id\n /\n onClose?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном закрытии активной модалки с её id\n /\n onClosed?: ModalRootCallbackFunction;\n};\n\nexport interface ModalRootProps extends ModalRootBaseProps {\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\ntype ModalRootContextBaseInterface = {\n /\n Обозначает, в контексте ли модального окна мы сейчас.\n /\n isInsideModal: boolean;\n\n /\n С VKUI v7 задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.\n \n @deprecated будет удалён в VKUI v8\n /\n updateModalHeight: VoidFunction;\n\n /\n С VKUI v7 регистрация модальных окон больше не требуется.\n \n @deprecated будет удалён в VKUI v8\n */\n registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' \| 'id'>>) => void;\n};\n\nexport interface ModalRootContextInterface\n extends ModalRootContextBaseInterface,\n ModalRootBaseProps {}\n\nexport interface UseModalRootContext extends ModalRootContextBaseInterface {\n onClose?: VoidFunction;\n}\n"],"names":[],"mappings":"AAAA,uCAAuC,~~GAyJvC~~,WAEC"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["/** TODO [>=8] Удалить deprecated типы /\n\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type ModalType = 'page' \| 'card';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type TranslateRange = [number, number];\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport interface ModalElements {\n modalElement?: HTMLElement \| null;\n innerElement?: HTMLElement \| null;\n headerElement?: HTMLElement \| null;\n contentElement?: HTMLElement \| null;\n bottomInset?: HTMLElement \| null;\n}\n\n/\n @deprecated будет удалён в VKUI v8\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 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 Отключает возможность закрыть модалку стандартными способами\n /\n preventClose?: boolean;\n}\n\nexport type ModalRootActiveModal = string \| null;\n\nexport type ModalRootCallbackFunction = (modalId: string) => void;\n\ntype ModalRootBaseProps = {\n activeModal?: ModalRootActiveModal;\n\n /\n `data-testid` для маски\n /\n modalOverlayTestId?: string;\n\n /\n Отключает фокус на контейнер диалогового окна при открытии.\n /\n noFocusToDialog?: boolean;\n\n usePortal?: AppRootPortalProps['usePortal'];\n /\n Будет вызвано при начале открытия активной модалки с её id\n /\n onOpen?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном открытии активной модалки с её id\n /\n onOpened?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при начале закрытия активной модалки с её id\n /\n onClose?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном закрытии активной модалки с её id\n /\n onClosed?: ModalRootCallbackFunction;\n};\n\nexport interface ModalRootProps extends ModalRootBaseProps {\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\ntype ModalRootContextBaseInterface = {\n /\n Обозначает, в контексте ли модального окна мы сейчас.\n /\n isInsideModal: boolean;\n\n /\n С VKUI v7 задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.\n \n @deprecated будет удалён в VKUI v8\n /\n updateModalHeight: VoidFunction;\n\n /\n С VKUI v7 регистрация модальных окон больше не требуется.\n \n @deprecated будет удалён в VKUI v8\n */\n registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' \| 'id'>>) => void;\n};\n\nexport interface ModalRootContextInterface\n extends ModalRootContextBaseInterface,\n ModalRootBaseProps {}\n\nexport interface UseModalRootContext extends ModalRootContextBaseInterface {\n onClose?: VoidFunction;\n}\n"],"names":[],"mappings":"AAAA,uCAAuC,GAwJvC,WAEC"}

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

@@ -6,6 +6,7 @@ import { VisuallyHiddenModalOverlay } from "./VisuallyHiddenModalOverlay/Visuall
 export const useModalManager = ({ id, open, keepMounted, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed })=>{
     const context = useContext(ModalRootContext);
     const opened = context.isInsideModal ? context.activeModal === id : open;
+    const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;
     const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);
     useIsomorphicLayoutEffect(function unsetUnmounted() {
         if (!keepMounted && opened) {
@@ -17,12 +18,14 @@ export const useModalManager = ({ id, open, keepMounted, modalOverlayTestId, noF
     ]);
     if (unmounted) {
         return {
-            mounted: false
+            mounted: false,
+            shouldPreserveSnapPoint
         };
     }
     return {
         mounted: true,
         open: opened,
+        shouldPreserveSnapPoint,
         noFocusToDialog: noFocusToDialog || context.noFocusToDialog,
         modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
         ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction } from '../../types';\nimport { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext } from './ModalRootContext';\nimport { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';\nimport type { ModalRootCallbackFunction } from './types';\n\nexport interface UseModalManager {\n id: string;\n open: boolean;\n keepMounted: boolean;\n modalOverlayTestId?: string;\n noFocusToDialog?: boolean;\n onOpen?: AnyFunction;\n onOpened?: AnyFunction;\n onClose?: AnyFunction;\n onClosed?: AnyFunction;\n}\n\nexport interface UseModalManagerResolvedProps {\n open: boolean;\n noFocusToDialog?: boolean;\n modalOverlayTestId?: string;\n ModalOverlay: React.ComponentType<ModalOverlayProps>;\n onOpen?: AnyFunction;\n onOpened?: AnyFunction;\n onClose?: AnyFunction;\n onClosed?: AnyFunction;\n}\n\nexport type UseModalManagerResult =\n \| { mounted: false }\n \| ({ mounted: true } & UseModalManagerResolvedProps);\n\nexport const useModalManager = ({\n id,\n open,\n keepMounted,\n modalOverlayTestId,\n noFocusToDialog,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: UseModalManager): UseModalManagerResult => {\n const context = useContext(ModalRootContext);\n const opened = context.isInsideModal ? context.activeModal === id : open;\n\n const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);\n\n useIsomorphicLayoutEffect(\n function unsetUnmounted() {\n if (!keepMounted && opened) {\n setUnmounted((prev) => (prev ? false : prev));\n }\n },\n [opened, keepMounted],\n );\n\n if (unmounted) {\n return { mounted: false };\n }\n\n return {\n mounted: true,\n open: opened,\n noFocusToDialog: noFocusToDialog \|\| context.noFocusToDialog,\n modalOverlayTestId: modalOverlayTestId \|\| context.modalOverlayTestId,\n ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,\n onOpen: onOpen \|\| getContextCallback(id, context.onOpen),\n onOpened: onOpened \|\| getContextCallback(id, context.onOpened),\n onClose: onClose \|\| getContextCallback(id, context.onClose),\n onClosed: function handleClosed(...args: any[]) {\n if (!keepMounted) {\n setUnmounted(true);\n }\n\n if (onClosed) {\n onClosed(...args);\n } else {\n context.onClosed?.(id);\n }\n },\n };\n};\n\nfunction getContextCallback(id: string, fn: ModalRootCallbackFunction \| undefined) {\n return fn ? () => fn(id) : undefined;\n}\n"],"names":["useContext","useState","useIsomorphicLayoutEffect","ModalOverlay","ModalRootContext","VisuallyHiddenModalOverlay","useModalManager","id","open","keepMounted","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","context","opened","isInsideModal","activeModal","unmounted","setUnmounted","unsetUnmounted","prev","mounted","getContextCallback","handleClosed","args","fn","undefined"],"mappings":"AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAgC,kCAA+B;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,0BAA0B,QAAQ,6DAA0D;AA8BrG,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,EAAE,EACFC,IAAI,EACJC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACQ;IAChB,MAAMC,UAAUhB,WAAWI;IAC3B,MAAMa,SAASD,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAKZ,KAAKC;~~IAEpE~~,MAAM,~~CAACY~~,WAAWC,aAAa,~~GAAGpB~~,SAASQ,cAAc,QAAQ,CAACQ;IAElEf,0BACE,~~SAASoB~~;QACP,IAAI,~~CAACb~~,eAAeQ,QAAQ;~~YAC1BI~~,aAAa,CAACE,OAAUA,OAAO,QAAQA;QACzC;IACF,GACA;~~QAACN~~;QAAQR;KAAY;IAGvB,~~IAAIW~~,WAAW;QACb,OAAO;YAAEI,SAAS;~~QAAM~~;~~IAC1B~~;IAEA,OAAO;~~QACLA~~,SAAS;~~QACThB~~,MAAMS;~~QACNN~~,iBAAiBA,mBAAmBK,QAAQL,eAAe;QAC3DD,oBAAoBA,sBAAsBM,QAAQN,kBAAkB;QACpEP,cAAca,QAAQE,aAAa,GAAGb,6BAA6BF;QACnES,QAAQA,~~UAAUa~~,~~mBAAmBlB~~,IAAIS,QAAQJ,MAAM;QACvDC,UAAUA,~~YAAYY~~,~~mBAAmBlB~~,IAAIS,QAAQH,QAAQ;QAC7DC,SAASA,~~WAAWW~~,~~mBAAmBlB~~,IAAIS,QAAQF,OAAO;QAC1DC,UAAU,~~SAASW~~,aAAa,GAAGC,IAAW;YAC5C,IAAI,~~CAAClB~~,aAAa;~~gBAChBY~~,aAAa;YACf;YAEA,~~IAAIN~~,UAAU;gBACZA,~~YAAYY~~;YACd,OAAO;~~gBACLX~~,QAAQD,QAAQ,GAAGR;YACrB;QACF;IACF;AACF,EAAE;AAEF,~~SAASkB~~,~~mBAAmBlB~~,EAAU,~~EAAEqB~~,EAAyC;IAC/E,OAAOA,KAAK,IAAMA,~~GAAGrB~~,~~MAAMsB~~;AAC7B"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction } from '../../types';\nimport { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext } from './ModalRootContext';\nimport { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';\nimport type { ModalRootCallbackFunction } from './types';\n\nexport interface UseModalManager {\n id: string;\n open: boolean;\n keepMounted: boolean;\n modalOverlayTestId?: string;\n noFocusToDialog?: boolean;\n onOpen?: AnyFunction;\n onOpened?: AnyFunction;\n onClose?: AnyFunction;\n onClosed?: AnyFunction;\n}\n\nexport interface UseModalManagerResolvedProps {\n open: boolean;\n noFocusToDialog?: boolean;\n modalOverlayTestId?: string;\n ModalOverlay: React.ComponentType<ModalOverlayProps>;\n onOpen?: AnyFunction;\n onOpened?: AnyFunction;\n onClose?: AnyFunction;\n onClosed?: AnyFunction;\n}\n\nexport type UseModalManagerResult =\n \| { mounted: false; shouldPreserveSnapPoint: boolean }\n \| ({ mounted: true; shouldPreserveSnapPoint: boolean } & UseModalManagerResolvedProps);\n\nexport const useModalManager = ({\n id,\n open,\n keepMounted,\n modalOverlayTestId,\n noFocusToDialog,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: UseModalManager): UseModalManagerResult => {\n const context = useContext(ModalRootContext);\n const opened = context.isInsideModal ? context.activeModal === id : open;\n const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;\n\n const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);\n\n useIsomorphicLayoutEffect(\n function unsetUnmounted() {\n if (!keepMounted && opened) {\n setUnmounted((prev) => (prev ? false : prev));\n }\n },\n [opened, keepMounted],\n );\n\n if (unmounted) {\n return { mounted: false, shouldPreserveSnapPoint };\n }\n\n return {\n mounted: true,\n open: opened,\n shouldPreserveSnapPoint,\n noFocusToDialog: noFocusToDialog \|\| context.noFocusToDialog,\n modalOverlayTestId: modalOverlayTestId \|\| context.modalOverlayTestId,\n ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,\n onOpen: onOpen \|\| getContextCallback(id, context.onOpen),\n onOpened: onOpened \|\| getContextCallback(id, context.onOpened),\n onClose: onClose \|\| getContextCallback(id, context.onClose),\n onClosed: function handleClosed(...args: any[]) {\n if (!keepMounted) {\n setUnmounted(true);\n }\n\n if (onClosed) {\n onClosed(...args);\n } else {\n context.onClosed?.(id);\n }\n },\n };\n};\n\nfunction getContextCallback(id: string, fn: ModalRootCallbackFunction \| undefined) {\n return fn ? () => fn(id) : undefined;\n}\n"],"names":["useContext","useState","useIsomorphicLayoutEffect","ModalOverlay","ModalRootContext","VisuallyHiddenModalOverlay","useModalManager","id","open","keepMounted","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","context","opened","isInsideModal","activeModal","shouldPreserveSnapPoint","unmounted","setUnmounted","unsetUnmounted","prev","mounted","getContextCallback","handleClosed","args","fn","undefined"],"mappings":"AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAgC,kCAA+B;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,0BAA0B,QAAQ,6DAA0D;AA8BrG,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,EAAE,EACFC,IAAI,EACJC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACQ;IAChB,MAAMC,UAAUhB,WAAWI;IAC3B,MAAMa,SAASD,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAKZ,KAAKC;IACpE,MAAMY,0BAA0BJ,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAK,OAAO;IAEvF,MAAM,CAACE,WAAWC,aAAa,GAAGrB,SAASQ,cAAc,QAAQ,CAACQ;IAElEf,0BACE,SAASqB;QACP,IAAI,CAACd,eAAeQ,QAAQ;YAC1BK,aAAa,CAACE,OAAUA,OAAO,QAAQA;QACzC;IACF,GACA;QAACP;QAAQR;KAAY;IAGvB,IAAIY,WAAW;QACb,OAAO;YAAEI,SAAS;YAAOL;QAAwB;IACnD;IAEA,OAAO;QACLK,SAAS;QACTjB,MAAMS;QACNG;QACAT,iBAAiBA,mBAAmBK,QAAQL,eAAe;QAC3DD,oBAAoBA,sBAAsBM,QAAQN,kBAAkB;QACpEP,cAAca,QAAQE,aAAa,GAAGb,6BAA6BF;QACnES,QAAQA,UAAUc,mBAAmBnB,IAAIS,QAAQJ,MAAM;QACvDC,UAAUA,YAAYa,mBAAmBnB,IAAIS,QAAQH,QAAQ;QAC7DC,SAASA,WAAWY,mBAAmBnB,IAAIS,QAAQF,OAAO;QAC1DC,UAAU,SAASY,aAAa,GAAGC,IAAW;YAC5C,IAAI,CAACnB,aAAa;gBAChBa,aAAa;YACf;YAEA,IAAIP,UAAU;gBACZA,YAAYa;YACd,OAAO;gBACLZ,QAAQD,QAAQ,GAAGR;YACrB;QACF;IACF;AACF,EAAE;AAEF,SAASmB,mBAAmBnB,EAAU,EAAEsB,EAAyC;IAC/E,OAAOA,KAAK,IAAMA,GAAGtB,MAAMuB;AAC7B"}

package/dist/cssm/components/PanelHeader/PanelHeader.module.css CHANGED Viewed

@@ -199,7 +199,7 @@
  * SplitCol
  */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
   .android.noBefore:not(:global(.vkuiInternalModalPageHeader__in))
@@ -208,14 +208,17 @@
           padding-inline-start: 0;
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 @media (min-width: 768px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
     .android.noBefore:not(:global(.vkuiInternalModalPageHeader__in))
     .content {
     -webkit-padding-start: 0;
             padding-inline-start: 0;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 /* stylelint-disable selector-max-universal */
@@ -238,7 +241,7 @@
           padding-inline-start: 16px;
 }
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
   .android.noAfter:not(:global(.vkuiInternalModalPageHeader__in))
@@ -247,14 +250,17 @@
           padding-inline-end: 0;
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 @media (min-width: 768px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
     .android.noAfter:not(:global(.vkuiInternalModalPageHeader__in))
     .content {
     -webkit-padding-end: 0;
             padding-inline-end: 0;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 .android .after:not(:empty),

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n ios: styles.ios,\n android: styles.android,\n vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n primary?: boolean;\n // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n const platform = usePlatform();\n\n if (platform === 'ios') {\n return (\n <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n {children}\n </Title>\n );\n }\n\n return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/*\n @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n /\nexport const PanelHeaderButton = ({\n children,\n primary = false,\n label,\n ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n const isPrimitive = isPrimitiveReactNode(children);\n const isPrimitiveLabel = isPrimitiveReactNode(label);\n const platform = usePlatform();\n\n let hoverMode;\n let activeMode;\n\n switch (platform) {\n case 'ios':\n hoverMode = 'background';\n activeMode = 'opacity';\n break;\n case 'vkcom':\n hoverMode = styles.hover;\n activeMode = styles.active;\n break;\n default:\n hoverMode = 'background';\n activeMode = 'background';\n }\n\n if (process.env.NODE_ENV === 'development') {\n / istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n const elements = [label, children].filter((item) => !!item);\n\n const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n hoverMode={hoverMode}\n activeEffectDelay={200}\n activeMode={activeMode}\n baseClassName={classNames(\n styles.host,\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n onlyPrimitive && styles.primitive,\n !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n )}\n >\n {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n {isPrimitiveLabel ? (\n <ButtonTypography primary={primary} className={styles.label}>\n {label}\n </ButtonTypography>\n ) : (\n label\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","host","hasOwnProperty","primitive","notPrimitive","className"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACL,GAAGC,WACoB;IACvB,MAAMC,cAAczB,qBAAqBe;IACzC,MAAMW,mBAAmB1B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYnB,OAAOqB,KAAK;YACxBD,aAAapB,OAAOsB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAehC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGC,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBb,KAAKlB,gBAAgBgC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACd;QAAOR;KAAS,CAACuB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKzC,qBAAqBqC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAChC;QACCY,WAAWO,UAAUY,IAAI,GAAG,MAAM;QACjC,GAAGZ,SAAS;QACbG,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;QACZe,eAAe5C,WACbS,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B6B,iBAAiBhC,OAAOsC,SAAS,EACjC,CAACrB,eAAe,CAACC,oBAAoBlB,OAAOuC,YAAY;;YAGzDtB,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAASkC,WAAWxC,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n ios: styles.ios,\n android: styles.android,\n vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n primary?: boolean;\n // TODO [>=8]: добавить св-во `indicator`, чтобы разграничить кейсы\n label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n const platform = usePlatform();\n\n if (platform === 'ios') {\n return (\n <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n {children}\n </Title>\n );\n }\n\n return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/*\n @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n /\nexport const PanelHeaderButton = ({\n children,\n primary = false,\n label,\n ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n const isPrimitive = isPrimitiveReactNode(children);\n const isPrimitiveLabel = isPrimitiveReactNode(label);\n const platform = usePlatform();\n\n let hoverMode;\n let activeMode;\n\n switch (platform) {\n case 'ios':\n hoverMode = 'background';\n activeMode = 'opacity';\n break;\n case 'vkcom':\n hoverMode = styles.hover;\n activeMode = styles.active;\n break;\n default:\n hoverMode = 'background';\n activeMode = 'background';\n }\n\n if (process.env.NODE_ENV === 'development') {\n / istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n const elements = [label, children].filter((item) => !!item);\n\n const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n hoverMode={hoverMode}\n activeEffectDelay={200}\n activeMode={activeMode}\n baseClassName={classNames(\n styles.host,\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n onlyPrimitive && styles.primitive,\n !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n )}\n >\n {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n {isPrimitiveLabel ? (\n <ButtonTypography primary={primary} className={styles.label}>\n {label}\n </ButtonTypography>\n ) : (\n label\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","host","hasOwnProperty","primitive","notPrimitive","className"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACL,GAAGC,WACoB;IACvB,MAAMC,cAAczB,qBAAqBe;IACzC,MAAMW,mBAAmB1B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYnB,OAAOqB,KAAK;YACxBD,aAAapB,OAAOsB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAehC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGC,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBb,KAAKlB,gBAAgBgC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACd;QAAOR;KAAS,CAACuB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKzC,qBAAqBqC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAChC;QACCY,WAAWO,UAAUY,IAAI,GAAG,MAAM;QACjC,GAAGZ,SAAS;QACbG,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;QACZe,eAAe5C,WACbS,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B6B,iBAAiBhC,OAAOsC,SAAS,EACjC,CAACrB,eAAe,CAACC,oBAAoBlB,OAAOuC,YAAY;;YAGzDtB,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAASkC,WAAWxC,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css CHANGED Viewed

@@ -69,6 +69,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .android :global(.vkuiIcon--24),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .android :global(.vkuiIcon--28) {
   padding: 10px;
 }
@@ -97,6 +98,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .vkcom.hover > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .vkcom.active > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)) {
   opacity: 1;
 }
@@ -150,6 +152,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--24) ~ :global(.vkuiInternalCounter),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .ios :global(.vkuiInternalCounter) {
   inset-block-start: 2px;
   inset-inline-end: 2px;
@@ -171,6 +174,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--24) ~ :global(.vkuiInternalBadge),
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .ios :global(.vkuiInternalBadge) {
   inset-block-start: 6px;
   inset-inline-end: 6px;

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js CHANGED Viewed

@@ -20,9 +20,8 @@ const stylesAlignY = {
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles.host, stylesAlignY[alignY], stylesAlignX[alignX], closing ? styles.closing : styles.opened, fixed && styles.fixed, !noBackground && styles.masked),
-        style: {
-            zIndex,
-            ...restProps.style
+        baseStyle: {
+            zIndex
         },
         children: /*#__PURE__*/ _jsxs("div", {
             className: styles.container,

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n center: styles.alignXCenter,\n left: styles.alignXLeft,\n right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n center: styles.alignYCenter,\n top: styles.alignYTop,\n bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Позволяет сделать прозрачную подложку\n /\n noBackground?: boolean;\n /\n Включает фиксированное позиционирование.\n \n По умолчанию у компонента не задан никакой `position`.\n /\n fixed?: boolean;\n /\n Выравнивает контент по горизонтали.\n /\n alignX?: 'left' \| 'center' \| 'right';\n /\n Выравнивает контент по вертикали.\n /\n alignY?: 'top' \| 'center' \| 'bottom';\n /\n Спрячет компонент через fade-out анимацию.\n /\n closing?: boolean;\n /\n Позволяет задать z-index через токен или числом\n /\n zIndex?: number \| string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n alignY = 'center',\n alignX = 'center',\n closing = false,\n noBackground = false,\n fixed = true,\n children,\n onClick,\n zIndex = 'var(--vkui--z_index_popout)',\n ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n stylesAlignY[alignY],\n stylesAlignX[alignX],\n closing ? styles.closing : styles.opened,\n fixed && styles.fixed,\n !noBackground && styles.masked,\n )}\n ~~style~~={{\n zIndex~~,\n ...restProps.style,\n~~ }}\n >\n <div className={styles.container}>\n <div className={styles.overlay} onClick={onClick} />\n <div className={styles.content}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesAlignX","center","alignXCenter","left","alignXLeft","right","alignXRight","stylesAlignY","alignYCenter","top","alignYTop","bottom","alignYBottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","zIndex","restProps","baseClassName","host","opened","masked","~~style~~","div","className","container","overlay","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,OAAOG,YAAY;IAC3BC,MAAMJ,OAAOK,UAAU;IACvBC,OAAON,OAAOO,WAAW;AAC3B;AAEA,MAAMC,eAAe;IACnBN,QAAQF,OAAOS,YAAY;IAC3BC,KAAKV,OAAOW,SAAS;IACrBC,QAAQZ,OAAOa,YAAY;AAC7B;AA+BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EACtC,GAAGC,WACgB;IACnB,qBACE,KAACxB;QACE,GAAGwB,SAAS;QACbC,eAAe1B,WACbE,OAAOyB,IAAI,EACXjB,YAAY,CAACO,OAAO,EACpBd,YAAY,CAACe,OAAO,EACpBC,UAAUjB,OAAOiB,OAAO,GAAGjB,OAAO0B,MAAM,EACxCP,SAASnB,OAAOmB,KAAK,EACrB,CAACD,gBAAgBlB,OAAO2B,MAAM;QAEhCC,~~OAAO~~;~~YACLN~~;~~YACA,GAAGC,UAAUK,KAAK~~;~~QACpB;kBAEA~~,cAAA,~~MAACC~~;YAAIC,WAAW9B,OAAO+B,SAAS;;8BAC9B,KAACF;oBAAIC,WAAW9B,OAAOgC,OAAO;oBAAEX,SAASA;;8BACzC,KAACQ;oBAAIC,WAAW9B,OAAOiC,OAAO;8BAAGb;;;;;AAIzC,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n center: styles.alignXCenter,\n left: styles.alignXLeft,\n right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n center: styles.alignYCenter,\n top: styles.alignYTop,\n bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Позволяет сделать прозрачную подложку\n /\n noBackground?: boolean;\n /\n Включает фиксированное позиционирование.\n \n По умолчанию у компонента не задан никакой `position`.\n /\n fixed?: boolean;\n /\n Выравнивает контент по горизонтали.\n /\n alignX?: 'left' \| 'center' \| 'right';\n /\n Выравнивает контент по вертикали.\n /\n alignY?: 'top' \| 'center' \| 'bottom';\n /\n Спрячет компонент через fade-out анимацию.\n /\n closing?: boolean;\n /\n Позволяет задать z-index через токен или числом\n /\n zIndex?: number \| string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n alignY = 'center',\n alignX = 'center',\n closing = false,\n noBackground = false,\n fixed = true,\n children,\n onClick,\n zIndex = 'var(--vkui--z_index_popout)',\n ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n stylesAlignY[alignY],\n stylesAlignX[alignX],\n closing ? styles.closing : styles.opened,\n fixed && styles.fixed,\n !noBackground && styles.masked,\n )}\n baseStyle={{ zIndex }}\n >\n <div className={styles.container}>\n <div className={styles.overlay} onClick={onClick} />\n <div className={styles.content}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesAlignX","center","alignXCenter","left","alignXLeft","right","alignXRight","stylesAlignY","alignYCenter","top","alignYTop","bottom","alignYBottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","zIndex","restProps","baseClassName","host","opened","masked","baseStyle","div","className","container","overlay","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,OAAOG,YAAY;IAC3BC,MAAMJ,OAAOK,UAAU;IACvBC,OAAON,OAAOO,WAAW;AAC3B;AAEA,MAAMC,eAAe;IACnBN,QAAQF,OAAOS,YAAY;IAC3BC,KAAKV,OAAOW,SAAS;IACrBC,QAAQZ,OAAOa,YAAY;AAC7B;AA+BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EACtC,GAAGC,WACgB;IACnB,qBACE,KAACxB;QACE,GAAGwB,SAAS;QACbC,eAAe1B,WACbE,OAAOyB,IAAI,EACXjB,YAAY,CAACO,OAAO,EACpBd,YAAY,CAACe,OAAO,EACpBC,UAAUjB,OAAOiB,OAAO,GAAGjB,OAAO0B,MAAM,EACxCP,SAASnB,OAAOmB,KAAK,EACrB,CAACD,gBAAgBlB,OAAO2B,MAAM;QAEhCC,WAAW;YAAEN;QAAO;kBAEpB,cAAA,MAACO;YAAIC,WAAW9B,OAAO+B,SAAS;;8BAC9B,KAACF;oBAAIC,WAAW9B,OAAOgC,OAAO;oBAAEX,SAASA;;8BACzC,KAACQ;oBAAIC,WAAW9B,OAAOiC,OAAO;8BAAGb;;;;;AAIzC,EAAE"}

package/dist/cssm/components/Removable/Removable.module.css CHANGED Viewed

@@ -109,6 +109,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--removable) .content,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) .content {
   flex-wrap: wrap;
   align-items: flex-start;
@@ -121,6 +122,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--withTop) :global(.vkuiInternalFormItem__removable) ~ .offset,
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalFormItem--withTop) ~ .offset {
   order: -1;
   display: block;
@@ -128,7 +130,7 @@
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem--sizeY-compact):global(.vkuiInternalFormItem--withTop)
   :global(.vkuiInternalFormItem__removable)
@@ -139,8 +141,10 @@
   block-size: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
 }
+/* stylelint-enable selector-pseudo-class-disallowed-list */
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalFormItem--sizeY-none):global(.vkuiInternalFormItem--withTop)
     :global(.vkuiInternalFormItem__removable)
     ~ .offset,
@@ -149,4 +153,5 @@
     ~ .offset {
     block-size: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }

package/dist/cssm/components/Spinner/Spinner.js CHANGED Viewed

@@ -1,55 +1,21 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
-import { useReducedMotion } from "../../lib/animation/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { SpinnerAnimation } from "./SpinnerAnimation.js";
 import styles from "./Spinner.module.css";
+const spinnerIconMap = {
+    s: Icon16Spinner,
+    m: Icon24Spinner,
+    l: Icon32Spinner,
+    xl: Icon44Spinner
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ export const Spinner = /*#__PURE__*/ React.memo(({ size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, ...restProps })=>{
-    const isReducedMotion = useReducedMotion();
-    const SpinnerIcon = {
-        s: Icon16Spinner,
-        m: Icon24Spinner,
-        l: Icon32Spinner,
-        xl: Icon44Spinner
-    }[size];
-    let svgAnimateElement = null;
-    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(disableAnimation ? true : false);
-    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {
-        setIsReadyForSetSVGAnimateElement(true);
-    }, []);
-    if (isReadyForSetSVGAnimateElement && !disableAnimation) {
-        if (isReducedMotion) {
-            svgAnimateElement = /*#__PURE__*/ _jsx("animate", {
-                attributeName: "opacity",
-                keyTimes: "0; 0.5; 1",
-                values: "1; 0.1; 1",
-                begin: "0s",
-                dur: "2s",
-                repeatCount: "indefinite"
-            });
-        } else {
-            const center = {
-                s: 8,
-                m: 12,
-                l: 16,
-                xl: 22
-            }[size];
-            svgAnimateElement = /*#__PURE__*/ _jsx("animateTransform", {
-                attributeType: "XML",
-                attributeName: "transform",
-                type: "rotate",
-                from: `0 ${center} ${center}`,
-                to: `360 ${center} ${center}`,
-                dur: "0.7s",
-                repeatCount: "indefinite"
-            });
-        }
-    }
+    const SpinnerIcon = spinnerIconMap[size];
     return /*#__PURE__*/ _jsxs(RootComponent, {
         Component: "span",
         role: "status",
@@ -57,7 +23,9 @@ import styles from "./Spinner.module.css";
         baseClassName: classNames(styles.host, noColor && styles.noColor),
         children: [
             /*#__PURE__*/ _jsx(SpinnerIcon, {
-                children: svgAnimateElement
+                children: disableAnimation ? null : /*#__PURE__*/ _jsx(SpinnerAnimation, {
+                    size: size
+                })
             }),
             hasReactNode(children) && /*#__PURE__*/ _jsx(VisuallyHidden, {
                 children: children

package/dist/cssm/components/Spinner/Spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport ~~{ useReducedMotion } from '../../lib/animation';\nimport~~ type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n size?: 's' \| 'm' \| 'l' \| 'xl';\n disableAnimation?: boolean;\n /*\n Задать цвет можно будет через свойство color родителя\n /\n noColor?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner: React.FC<SpinnerProps> = React.memo(\n ({\n size = 'm',\n children = 'Загружается...',\n disableAnimation = false,\n noColor = false,\n ...restProps\n }: SpinnerProps) => {\n const ~~isReducedMotion = useReducedMotion();\n const~~ SpinnerIcon = ~~{\n s: Icon16Spinner,\n m: Icon24Spinner,\n l: Icon32Spinner,\n xl: Icon44Spinner,\n }~~[size];\n ~~let svgAnimateElement: React.ReactNode = null;\n~~\n const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(\n disableAnimation ? true : false,\n );\n\n React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {\n setIsReadyForSetSVGAnimateElement(true);\n }, []);\n\n if (isReadyForSetSVGAnimateElement && !disableAnimation) {\n if (isReducedMotion) {\n svgAnimateElement = (\n <animate\n attributeName=\"opacity\"\n keyTimes=\"0; 0.5; 1\"\n values=\"1; 0.1; 1\"\n begin=\"0s\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n />\n );\n } else {\n const center = { s: 8, m: 12, l: 16, xl: 22 }[size];\n svgAnimateElement = (\n <animateTransform\n attributeType=\"XML\"\n attributeName=\"transform\"\n type=\"rotate\"\n from={`0 ${center} ${center}`}\n to={`360 ${center} ${center}`}\n dur=\"0.7s\"\n repeatCount=\"indefinite\"\n />\n );\n }\n }\n\n return (\n <RootComponent\n Component=\"span\"\n role=\"status\"\n {...restProps}\n baseClassName={classNames(styles.host, noColor && styles.noColor)}\n >\n <SpinnerIcon>{~~svgAnimateElement~~}</SpinnerIcon>\n {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n </RootComponent>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","hasReactNode","~~useReducedMotion","~~RootComponent","VisuallyHidden","~~styles~~","~~Spinner~~","~~memo~~","~~size","children","disableAnimation","noColor","restProps","isReducedMotion","SpinnerIcon","~~s","m","l","xl","~~svgAnimateElement~~","~~isReadyForSetSVGAnimateElement~~","~~setIsReadyForSetSVGAnimateElement~~","~~useState~~","~~useEffect~~","~~waitReactHydrationBeforeSetSVGAnimateElement~~","~~animate~~","~~attributeName~~","~~keyTimes","values","begin","dur","repeatCount","center","animateTransform","attributeType","type","from","to","~~Component","role","baseClassName","host","displayName"],"mappings":"AAAA~~;;AAEA~~,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;~~AAC3D~~,SAASC,~~gBAAgB,QAAQ,+BAAsB;AAEvD,SAASC,~~aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,uBAAuB;~~AAW1C~~;;CAEC,GACD,OAAO,~~MAAMC~~,~~wBAAkCX~~,~~MAAMY~~,IAAI,CACvD,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACf,GAAGC,WACU;IACb,MAAMC,~~kBAAkBX;IACxB~~,~~MAAMY,~~cAAc~~;QAClBC~~,~~GAAGnB;QACHoB~~,~~GAAGnB;QACHoB,GAAGnB;QACHoB,IAAInB;IACN,CAAC,CAACS,~~KAAK;~~IACP~~,IAAIW,oBAAqC;IAEzC,MAAM,CAACC,gCAAgCC,kCAAkC,GAAG1B,MAAM2B,QAAQ,CACxFZ,mBAAmB,OAAO;IAG5Bf,MAAM4B,SAAS,CAAC,SAASC;QACvBH,kCAAkC;IACpC,GAAG,EAAE;IAEL,IAAID,kCAAkC,CAACV,kBAAkB;QACvD,IAAIG,iBAAiB;YACnBM,kCACE,KAACM;gBACCC,eAAc;gBACdC,UAAS;gBACTC,QAAO;gBACPC,OAAM;gBACNC,KAAI;gBACJC,aAAY;;QAGlB,OAAO;YACL,MAAMC,SAAS;gBAAEjB,GAAG;gBAAGC,GAAG;gBAAIC,GAAG;gBAAIC,IAAI;YAAG,CAAC,CAACV,KAAK;YACnDW,kCACE,KAACc;gBACCC,eAAc;gBACdR,eAAc;gBACdS,MAAK;gBACLC,MAAM,CAAC,EAAE,EAAEJ,OAAO,CAAC,EAAEA,QAAQ;gBAC7BK,IAAI,CAAC,IAAI,EAAEL,OAAO,CAAC,EAAEA,QAAQ;gBAC7BF,KAAI;gBACJC,aAAY;;QAGlB;IACF;IAEA,qBACE,~~MAAC5B~~;~~QACCmC~~,WAAU;QACVC,MAAK;QACJ,~~GAAG3B~~,SAAS;~~QACb4B~~,~~eAAexC~~,WAAWK,~~OAAOoC~~,IAAI,~~EAAE9B~~,~~WAAWN~~,~~OAAOM~~,OAAO;;0BAEhE,~~KAACG~~;~~0BAAaK;;YACblB~~,~~aAAaQ~~,2BAAa,~~KAACL~~;~~0BAAgBK~~;;;;AAGlD,GACA;AAEFH,~~QAAQoC~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport styles from './Spinner.module.css';\n\nconst spinnerIconMap = {\n s: Icon16Spinner,\n m: Icon24Spinner,\n l: Icon32Spinner,\n xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n size?: 's' \| 'm' \| 'l' \| 'xl';\n disableAnimation?: boolean;\n /*\n Задать цвет можно будет через свойство color родителя\n /\n noColor?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner: React.FC<SpinnerProps> = React.memo(\n ({\n size = 'm',\n children = 'Загружается...',\n disableAnimation = false,\n noColor = false,\n ...restProps\n }: SpinnerProps) => {\n const SpinnerIcon = spinnerIconMap[size];\n\n return (\n <RootComponent\n Component=\"span\"\n role=\"status\"\n {...restProps}\n baseClassName={classNames(styles.host, noColor && styles.noColor)}\n >\n <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n </RootComponent>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","hasReactNode","RootComponent","VisuallyHidden","SpinnerAnimation","styles","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","restProps","SpinnerIcon","Component","role","baseClassName","host","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,GAAGX;IACHY,GAAGX;IACHY,GAAGX;IACHY,IAAIX;AACN;AAWA;;CAEC,GACD,OAAO,MAAMY,wBAAkChB,MAAMiB,IAAI,CACvD,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACf,GAAGC,WACU;IACb,MAAMC,cAAcZ,cAAc,CAACO,KAAK;IAExC,qBACE,MAACX;QACCiB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAerB,WAAWK,OAAOiB,IAAI,EAAEN,WAAWX,OAAOW,OAAO;;0BAEhE,KAACE;0BAAaH,mBAAmB,qBAAO,KAACX;oBAAiBS,MAAMA;;;YAC/DZ,aAAaa,2BAAa,KAACX;0BAAgBW;;;;AAGlD,GACA;AAEFH,QAAQY,WAAW,GAAG"}

package/dist/cssm/components/Spinner/SpinnerAnimation.js ADDED Viewed

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReducedMotion } from "../../lib/animation/index.js";
+export function SpinnerAnimation({ size = 'm' }) {
+    const isReducedMotion = useReducedMotion();
+    if (isReducedMotion === undefined) {
+        return null;
+    }
+    if (isReducedMotion) {
+        return /*#__PURE__*/ _jsx("animate", {
+            attributeName: "opacity",
+            keyTimes: "0; 0.5; 1",
+            values: "1; 0.1; 1",
+            begin: "0s",
+            dur: "2s",
+            repeatCount: "indefinite"
+        });
+    }
+    const center = {
+        s: 8,
+        m: 12,
+        l: 16,
+        xl: 22
+    }[size];
+    return /*#__PURE__*/ _jsx("animateTransform", {
+        attributeType: "XML",
+        attributeName: "transform",
+        type: "rotate",
+        from: `0 ${center} ${center}`,
+        to: `360 ${center} ${center}`,
+        dur: "0.7s",
+        repeatCount: "indefinite"
+    });
+}
+//# sourceMappingURL=SpinnerAnimation.js.map

package/dist/cssm/components/Spinner/SpinnerAnimation.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/Spinner/SpinnerAnimation.tsx"],"sourcesContent":["'use client';\n\nimport { useReducedMotion } from '../../lib/animation';\nimport { type SpinnerProps } from './Spinner';\n\ninterface SpinnerAnimationProps {\n size: SpinnerProps['size'];\n}\n\nexport function SpinnerAnimation({ size = 'm' }: SpinnerAnimationProps) {\n const isReducedMotion = useReducedMotion();\n\n if (isReducedMotion === undefined) {\n return null;\n }\n\n if (isReducedMotion) {\n return (\n <animate\n attributeName=\"opacity\"\n keyTimes=\"0; 0.5; 1\"\n values=\"1; 0.1; 1\"\n begin=\"0s\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n />\n );\n }\n\n const center = { s: 8, m: 12, l: 16, xl: 22 }[size];\n return (\n <animateTransform\n attributeType=\"XML\"\n attributeName=\"transform\"\n type=\"rotate\"\n from={`0 ${center} ${center}`}\n to={`360 ${center} ${center}`}\n dur=\"0.7s\"\n repeatCount=\"indefinite\"\n />\n );\n}\n"],"names":["useReducedMotion","SpinnerAnimation","size","isReducedMotion","undefined","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","s","m","l","xl","animateTransform","attributeType","type","from","to"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,QAAQ,+BAAsB;AAOvD,OAAO,SAASC,iBAAiB,EAAEC,OAAO,GAAG,EAAyB;IACpE,MAAMC,kBAAkBH;IAExB,IAAIG,oBAAoBC,WAAW;QACjC,OAAO;IACT;IAEA,IAAID,iBAAiB;QACnB,qBACE,KAACE;YACCC,eAAc;YACdC,UAAS;YACTC,QAAO;YACPC,OAAM;YACNC,KAAI;YACJC,aAAY;;IAGlB;IAEA,MAAMC,SAAS;QAAEC,GAAG;QAAGC,GAAG;QAAIC,GAAG;QAAIC,IAAI;IAAG,CAAC,CAACd,KAAK;IACnD,qBACE,KAACe;QACCC,eAAc;QACdZ,eAAc;QACda,MAAK;QACLC,MAAM,CAAC,EAAE,EAAER,OAAO,CAAC,EAAEA,QAAQ;QAC7BS,IAAI,CAAC,IAAI,EAAET,OAAO,CAAC,EAAEA,QAAQ;QAC7BF,KAAI;QACJC,aAAY;;AAGlB"}

package/dist/cssm/components/SplitLayout/SplitLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /*\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n \n @deprecated будет ~~удалёно~~ в VKUI v8\n * Начиная с VKUI v7 компоненты можно располагать в любом\n * месте приложения в пределах `AppRoot`\n /\n popout?: React.ReactNode;\n /\n Свойство для отрисовки `ModalRoot`.\n \n @deprecated будет ~~удалёно~~ в VKUI v8\n * Начиная с VKUI v7 `ModalRoot` можно располагать в любом\n * месте приложения в пределах `AppRoot`\n /\n modal?: React.ReactNode;\n header?: React.ReactNode;\n /\n Центрирует контент.\n /\n center?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n header,\n children,\n getRootRef,\n getRef,\n className,\n center,\n modal,\n popout,\n ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n const platform = usePlatform();\n\n return (\n <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n {header}\n <div\n {...restProps}\n ref={getRef}\n className={classNames(\n styles.inner,\n !!header && styles.innerHeader,\n center && styles.innerCenter,\n className,\n )}\n >\n {children}\n {modal}\n {popout}\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA4B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /*\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n \n @deprecated будет удалeно в VKUI v8.\n * Начиная с VKUI v7 компоненты можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n popout?: React.ReactNode;\n /\n Свойство для отрисовки `ModalRoot`.\n \n @deprecated будет удалeно в VKUI v8.\n * Начиная с VKUI v7 `ModalRoot` можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n modal?: React.ReactNode;\n header?: React.ReactNode;\n /\n Центрирует контент.\n /\n center?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n header,\n children,\n getRootRef,\n getRef,\n className,\n center,\n modal,\n popout,\n ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n const platform = usePlatform();\n\n return (\n <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n {header}\n <div\n {...restProps}\n ref={getRef}\n className={classNames(\n styles.inner,\n !!header && styles.innerHeader,\n center && styles.innerCenter,\n className,\n )}\n >\n {children}\n {modal}\n {popout}\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA4B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}

package/dist/cssm/components/View/View.module.css CHANGED Viewed

@@ -168,9 +168,9 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.ios.noMotion .panel :global(.vkuiInternalPanel__in),
 .noMotion .panel,
-.ios.noMotion .panel,
-.ios.noMotion .panel :global(.vkuiInternalPanel__in) {
+.ios.noMotion .panel {
   animation: none;
 }

package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js CHANGED Viewed

@@ -1,11 +1,18 @@
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect.js";
-export function useSyncHTMLWithBaseVKUIClasses({ appRootRef, mode, enable }) {
+const layoutClassNames = {
+    card: 'vkui--layout-card',
+    plain: 'vkui--layout-plain'
+};
+export function useSyncHTMLWithBaseVKUIClasses({ appRootRef, mode, enable, layout }) {
     useIsomorphicLayoutEffect(()=>{
         if (!enable) {
             return;
         }
         const htmlElement = appRootRef.current?.ownerDocument.documentElement;
         const parentElement = appRootRef.current?.parentElement ?? null;
+        const htmlElementClasses = [
+            'vkui'
+        ];
         const parentElementClasses = [
             'vkui__root'
         ];
@@ -13,18 +20,22 @@ export function useSyncHTMLWithBaseVKUIClasses({ appRootRef, mode, enable }) {
             parentElementClasses.push('vkui__root--embedded');
         }
         if (mode === 'full') {
-            /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.add('vkui');
+            if (layout) {
+                htmlElementClasses.push(layoutClassNames[layout]);
+            }
+            /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.add(...htmlElementClasses);
         }
         /* eslint-disable-next-line no-restricted-properties */ parentElement?.classList.add(...parentElementClasses);
         return ()=>{
             if (mode === 'full') {
-                /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.remove('vkui');
+                /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.remove(...htmlElementClasses);
             }
             /* eslint-disable-next-line no-restricted-properties */ parentElement?.classList.remove(...parentElementClasses);
         };
     }, [
         mode,
-        enable
+        enable,
+        layout
     ]);
 }