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

package/dist/components/ActionSheet/ActionSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,EACnB,WAAW,GAAG,qBAAqB,GAAG,WAAW,GAAG,WAAW,CAChE,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,4IAYrB,gBAAgB,KAAG,KAAK,CAAC,SAqG3B,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,EACnB,WAAW,GAAG,qBAAqB,GAAG,WAAW,GAAG,WAAW,CAChE,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,4IAYrB,gBAAgB,KAAG,KAAK,CAAC,SAkG3B,CAAC"}

package/dist/components/ActionSheet/ActionSheet.js

@@ -112,11 +112,9 @@ import { ActionSheetDropdownSheet } from "./ActionSheetDropdownSheet.js";
             ]
         }))
     });
-    if (mode === 'menu') {
-        return actionSheet;
-    }
     return /*#__PURE__*/ _jsx(AppRootPortal, {
         children: /*#__PURE__*/ _jsx(PopoutWrapper, {
+            noBackground: mode === 'menu',
             closing: Boolean(closingBy),
             alignY: "bottom",
             className: className,

package/dist/components/ActionSheet/ActionSheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  title,\n  description,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps): React.ReactNode => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = React.useCallback(() => setClosingBy('other'), []);\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = React.useMemo(\n    () => ({ onItemClick, mode, onClose: onCloseWithOther }),\n    [mode, onCloseWithOther, onItemClick],\n  );\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles.contentWrapper}>\n          {(title || description) && (\n            <div className={styles.header}>\n              {title && (\n                <Footnote weight=\"2\" className={styles.title}>\n                  {title}\n                </Footnote>\n              )}\n              {description && <Footnote className={styles.description}>{description}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles.closeItemWrapperIos}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <AppRootPortal>\n      <PopoutWrapper\n        closing={Boolean(closingBy)}\n        alignY=\"bottom\"\n        className={className}\n        style={style}\n        onClick={onCloseWithOther}\n        fixed\n      >\n        {actionSheet}\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","AppRootPortal","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","ActionSheet","children","className","title","description","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","useCallback","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useMemo","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","weight","alignY","onClick","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  title,\n  description,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps): React.ReactNode => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = React.useCallback(() => setClosingBy('other'), []);\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = React.useMemo(\n    () => ({ onItemClick, mode, onClose: onCloseWithOther }),\n    [mode, onCloseWithOther, onItemClick],\n  );\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles.contentWrapper}>\n          {(title || description) && (\n            <div className={styles.header}>\n              {title && (\n                <Footnote weight=\"2\" className={styles.title}>\n                  {title}\n                </Footnote>\n              )}\n              {description && <Footnote className={styles.description}>{description}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles.closeItemWrapperIos}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  return (\n    <AppRootPortal>\n      <PopoutWrapper\n        noBackground={mode === 'menu'}\n        closing={Boolean(closingBy)}\n        alignY=\"bottom\"\n        className={className}\n        style={style}\n        onClick={onCloseWithOther}\n        fixed\n      >\n        {actionSheet}\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","AppRootPortal","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","ActionSheet","children","className","title","description","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","useCallback","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useMemo","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","weight","noBackground","alignY","onClick","fixed"],"mappings":"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"}

package/dist/components/AppRoot/AppRoot.d.ts

@@ -51,5 +51,5 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot, disablePortal, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, ...props }: AppRootProps) => React.ReactNode;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot, disablePortal, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, className, ...props }: AppRootProps) => React.ReactNode;
 //# sourceMappingURL=AppRoot.d.ts.map

package/dist/components/AppRoot/AppRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,cAAc,EACf,MAAM,SAAS,CAAC;AAGjB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IAUvC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,oNAYjB,YAAY,KAAG,KAAK,CAAC,SAyEvB,CAAC"}
+{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,cAAc,EACf,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IAUvC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,+NAajB,YAAY,KAAG,KAAK,CAAC,SA8EvB,CAAC"}

package/dist/components/AppRoot/AppRoot.js

@@ -4,16 +4,22 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker.js";
 import { useSyncHTMLWithBaseVKUIClasses } from "../../hooks/useSyncHTMLWithBaseVKUIClasses.js";
 import { useSyncHTMLWithTokens } from "../../hooks/useSyncHTMLWithTokens.js";
 import { AppRootContext } from "./AppRootContext.js";
-import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
+import { AppRootStyleContainer } from "./AppRootStyleContainer/AppRootStyleContainer.js";
 import { ElementScrollController, GlobalScrollController } from "./ScrollContext.js";
+import { useSafeAreaInsetsMemo } from "./helpers.js";
+const layoutClassNames = {
+    card: "vkuiAppRoot__layoutCard",
+    plain: "vkuiAppRoot__layoutPlain"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */ export const AppRoot = (_param)=>{
-    var { children, mode = 'full', scroll = 'global', portalRoot, disablePortal = false, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime } = _param, props = _object_without_properties(_param, [
+    var { children, mode = 'full', scroll = 'global', portalRoot, disablePortal = false, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, className } = _param, props = _object_without_properties(_param, [
         "children",
         "mode",
         "scroll",
@@ -23,16 +29,12 @@ import { ElementScrollController, GlobalScrollController } from "./ScrollContext
         "safeAreaInsets",
         "layout",
         "userSelectMode",
-        "disableSettingVKUIClassesInRuntime"
+        "disableSettingVKUIClassesInRuntime",
+        "className"
     ]);
     const appRootRef = React.useRef(null);
-    const ScrollController = React.useMemo(()=>scroll === 'contain' ? ElementScrollController : GlobalScrollController, [
-        scroll
-    ]);
     const isKeyboardInputActiveRef = useKeyboardInputTracker();
-    const safeAreaInsets = React.useMemo(()=>safeAreaInsetsProp, [
-        safeAreaInsetsProp
-    ]);
+    const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);
     const contextValue = React.useMemo(()=>({
             appRoot: appRootRef,
             portalRoot,
@@ -71,8 +73,12 @@ import { ElementScrollController, GlobalScrollController } from "./ScrollContext
    */ useSyncHTMLWithBaseVKUIClasses({
         appRootRef,
         mode,
+        layout,
         enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime
     });
+    const ScrollController = React.useMemo(()=>scroll === 'contain' ? ElementScrollController : GlobalScrollController, [
+        scroll
+    ]);
     return mode === 'partial' ? /*#__PURE__*/ _jsx(AppRootContext.Provider, {
         value: contextValue,
         children: /*#__PURE__*/ _jsx(ScrollController, {
@@ -83,7 +89,7 @@ import { ElementScrollController, GlobalScrollController } from "./ScrollContext
         value: contextValue,
         children: /*#__PURE__*/ _jsx(AppRootStyleContainer, _object_spread_props(_object_spread({
             getRootRef: appRootRef,
-            className: mode === 'embedded' && !disableParentTransformForPositionFixedElements ? "vkuiAppRoot__transformForPositionFixedElements" : undefined
+            className: classNames(className, "vkuiAppRoot__host", layout && layoutClassNames[layout], mode === 'embedded' && !disableParentTransformForPositionFixedElements ? "vkuiAppRoot__transformForPositionFixedElements" : undefined)
         }, props), {
             children: /*#__PURE__*/ _jsx(ScrollController, {
                 elRef: appRootRef,

package/dist/components/AppRoot/AppRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n  /*\n   * По умолчанию в режиме `mode=\"full\"` VKUI в рантайме выставляет:\n   * - класс .vkui на html элемент\n   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI\n   * С помощью этой опции такое поведение можно отключить.\n   *\n   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно\n   * и отключить это поводение.\n   */\n  disableSettingVKUIClassesInRuntime?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = React.useMemo(() => safeAreaInsetsProp, [safeAreaInsetsProp]);\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\n      safeAreaInsets,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n      userSelectMode,\n    }),\n    [\n      portalRoot,\n      disablePortal,\n      isKeyboardInputActiveRef,\n      layout,\n      mode,\n      safeAreaInsets,\n      userSelectMode,\n    ],\n  );\n\n  /*\n   * Вешаем класс токенов на html в режиме full.\n   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:\n   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.\n   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.\n   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.\n   */\n  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });\n  /*\n   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.\n   * В режиме embedded будет выставлять только .vkui__root и .vkui__root--embedded на контейнере.\n   * В режиме partial мы классы не выставляем.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  return mode === 'partial' ? (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  ) : (\n    <AppRootContext.Provider value={contextValue}>\n      <AppRootStyleContainer\n        getRootRef={appRootRef}\n        className={\n          mode === 'embedded' && !disableParentTransformForPositionFixedElements\n            ? styles.transformForPositionFixedElements\n            : undefined\n        }\n        {...props}\n      >\n        <ScrollController elRef={appRootRef}>{children}</ScrollController>\n      </AppRootStyleContainer>\n    </AppRootContext.Provider>\n  );\n};\n"],"names":["React","useKeyboardInputTracker","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","AppRoot","children","mode","scroll","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","props","appRootRef","useRef","ScrollController","useMemo","isKeyboardInputActiveRef","contextValue","appRoot","embedded","keyboardInput","current","enable","Provider","value","elRef","getRootRef","className","undefined"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAoElF;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,UAAU,EACVC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAErB,WADVC;QAVHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,aAAarB,MAAMsB,MAAM,CAAwB;IAEvD,MAAMC,mBAAmBvB,MAAMwB,OAAO,CACpC,IAAOb,WAAW,YAAYL,0BAA0BC,wBACxD;QAACI;KAAO;IAGV,MAAMc,2BAA2BxB;IACjC,MAAMc,iBAAiBf,MAAMwB,OAAO,CAAC,IAAMR,oBAAoB;QAACA;KAAmB;IACnF,MAAMU,eAAe1B,MAAMwB,OAAO,CAChC,IAAO,CAAA;YACLG,SAASN;YACTT;YACAG;YACAa,UAAUlB,SAAS;YACnBA;YACAG;YACAI;YACA,IAAIY,iBAAgB;gBAClB,OAAOJ,yBAAyBK,OAAO;YACzC;YACAZ;QACF,CAAA,GACA;QACEN;QACAC;QACAY;QACAR;QACAP;QACAK;QACAG;KACD;IAGH;;;;;;GAMC,GACDf,sBAAsB;QAAEkB;QAAYU,QAAQrB,SAAS;IAAO;IAC5D;;;;GAIC,GACDR,+BAA+B;QAC7BmB;QACAX;QACAqB,QAAQrB,SAAS,aAAa,CAACS;IACjC;IAEA,OAAOT,SAAS,0BACd,KAACN,eAAe4B,QAAQ;QAACC,OAAOP;kBAC9B,cAAA,KAACH;YAAiBW,OAAOb;sBAAaZ;;uBAGxC,KAACL,eAAe4B,QAAQ;QAACC,OAAOP;kBAC9B,cAAA,KAACrB;YACC8B,YAAYd;YACZe,WACE1B,SAAS,cAAc,CAACI,oGAEpBuB;WAEFjB;sBAEJ,cAAA,KAACG;gBAAiBW,OAAOb;0BAAaZ;;;;AAI9C,EAAE"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { useSafeAreaInsetsMemo } from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n  /*\n   * По умолчанию в режиме `mode=\"full\"` VKUI в рантайме выставляет:\n   * - класс .vkui на html элемент\n   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI\n   * С помощью этой опции такое поведение можно отключить.\n   *\n   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно\n   * и отключить это поведение.\n   */\n  disableSettingVKUIClassesInRuntime?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  className,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\n      safeAreaInsets,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n      userSelectMode,\n    }),\n    [\n      portalRoot,\n      disablePortal,\n      isKeyboardInputActiveRef,\n      layout,\n      mode,\n      safeAreaInsets,\n      userSelectMode,\n    ],\n  );\n\n  /*\n   * Вешаем класс токенов на html в режиме full.\n   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:\n   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.\n   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.\n   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.\n   */\n  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });\n  /*\n   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.\n   * В режиме embedded будет выставлять только .vkui__root и .vkui__root--embedded на контейнере.\n   * В режиме partial мы классы не выставляем.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    layout,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  return mode === 'partial' ? (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  ) : (\n    <AppRootContext.Provider value={contextValue}>\n      <AppRootStyleContainer\n        getRootRef={appRootRef}\n        className={classNames(\n          className,\n          styles.host,\n          layout && layoutClassNames[layout],\n          mode === 'embedded' && !disableParentTransformForPositionFixedElements\n            ? styles.transformForPositionFixedElements\n            : undefined,\n        )}\n        {...props}\n      >\n        <ScrollController elRef={appRootRef}>{children}</ScrollController>\n      </AppRootStyleContainer>\n    </AppRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","useKeyboardInputTracker","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","useSafeAreaInsetsMemo","layoutClassNames","card","plain","AppRoot","children","mode","scroll","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","className","props","appRootRef","useRef","isKeyboardInputActiveRef","contextValue","useMemo","appRoot","embedded","keyboardInput","current","enable","ScrollController","Provider","value","elRef","getRootRef","undefined"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAClF,SAASC,qBAAqB,QAAQ,eAAY;AAUlD,MAAMC,mBAAmB;IACvBC,IAAI;IACJC,KAAK;AACP;AA4DA;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,UAAU,EACVC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAClCC,SAAS,EAEI,WADVC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAME,aAAa3B,MAAM4B,MAAM,CAAwB;IAEvD,MAAMC,2BAA2B3B;IACjC,MAAMkB,iBAAiBX,sBAAsBY;IAE7C,MAAMS,eAAe9B,MAAM+B,OAAO,CAChC,IAAO,CAAA;YACLC,SAASL;YACTV;YACAG;YACAa,UAAUlB,SAAS;YACnBA;YACAG;YACAI;YACA,IAAIY,iBAAgB;gBAClB,OAAOL,yBAAyBM,OAAO;YACzC;YACAZ;QACF,CAAA,GACA;QACEN;QACAC;QACAW;QACAP;QACAP;QACAK;QACAG;KACD;IAGH;;;;;;GAMC,GACDnB,sBAAsB;QAAEuB;QAAYS,QAAQrB,SAAS;IAAO;IAC5D;;;;GAIC,GACDZ,+BAA+B;QAC7BwB;QACAZ;QACAO;QACAc,QAAQrB,SAAS,aAAa,CAACS;IACjC;IAEA,MAAMa,mBAAmBrC,MAAM+B,OAAO,CACpC,IAAOf,WAAW,YAAYT,0BAA0BC,wBACxD;QAACQ;KAAO;IAGV,OAAOD,SAAS,0BACd,KAACV,eAAeiC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAACO;YAAiBG,OAAOb;sBAAab;;uBAGxC,KAACT,eAAeiC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAACxB;YACCmC,YAAYd;YACZF,WAAWxB,WACTwB,gCAEAH,UAAUZ,gBAAgB,CAACY,OAAO,EAClCP,SAAS,cAAc,CAACI,oGAEpBuB;WAEFhB;sBAEJ,cAAA,KAACW;gBAAiBG,OAAOb;0BAAab;;;;AAI9C,EAAE"}

package/dist/components/AppRoot/AppRootPortal.js

@@ -7,7 +7,7 @@ import { useDOM } from "../../lib/dom.js";
 import { isRefObject } from "../../lib/isRefObject.js";
 import { ColorSchemeProvider } from "../ColorSchemeProvider/ColorSchemeProvider.js";
 import { AppRootContext } from "./AppRootContext.js";
-import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
+import { AppRootStyleContainer } from "./AppRootStyleContainer/AppRootStyleContainer.js";
 export const AppRootPortal = ({ children, usePortal, className })=>{
     const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
     const colorScheme = useColorScheme();

package/dist/components/AppRoot/AppRootPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,6BAA0B;AAchE,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,8BAA6BF,qBAAAA,+BAAAA,SAAUG,IAAI,KAAI;IAClE,OAAOL;AACT"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,mDAAgD;AActF,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,8BAA6BF,qBAAAA,+BAAAA,SAAUG,IAAI,KAAI;IAClE,OAAOL;AACT"}

package/dist/components/AppRoot/{AppRootStyleContainer.d.ts → AppRootStyleContainer/AppRootStyleContainer.d.ts}

@@ -1,4 +1,4 @@
-import { type RootComponentProps } from '../RootComponent/RootComponent';
+import { type RootComponentProps } from '../../RootComponent/RootComponent';
 export declare function useAppRootStyles(): {
     style: Record<string, string> | undefined;
     className: string;
@@ -7,10 +7,10 @@ type AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;
 /**
  * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:
  * - точке монтирования приложения – `AppRoot`;
- * - точке монтирования порталов для модальных окон – `PortalRoot`.
+ * - точке монтирования порталов для модальных окон – `AppRootPortal`.
  *
  * @private
  */
-export declare function AppRootStyleContainer({ style, ...props }: AppRootStyleContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppRootStyleContainer(props: AppRootStyleContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AppRootStyleContainer.d.ts.map

package/dist/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppRootStyleContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAU3F,wBAAgB,gBAAgB;;;EAqB/B;AAED,KAAK,0BAA0B,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;AAErE;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAItE"}

package/dist/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.js

@@ -0,0 +1,45 @@
+'use client';
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../../hooks/useAdaptivity.js";
+import { useTokensClassName } from "../../../lib/tokens/index.js";
+import { useConfigProvider } from "../../ConfigProvider/ConfigProviderContext.js";
+import { RootComponent } from "../../RootComponent/RootComponent.js";
+import { AppRootContext } from "../AppRootContext.js";
+import { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from "../helpers.js";
+const sizeYClassNames = {
+    none: "vkuiAppRootStyleContainer__sizeYNone",
+    compact: "vkuiAppRootStyleContainer__sizeYCompact"
+};
+export function useAppRootStyles() {
+    const { safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);
+    const { hasPointer, sizeY = 'none' } = useAdaptivity();
+    const { isWebView } = useConfigProvider();
+    const userSelectModeClassName = getUserSelectModeClassName({
+        userSelectMode,
+        isWebView,
+        hasPointer
+    });
+    const tokensClassName = useTokensClassName();
+    return {
+        style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,
+        className: classNames("vkuiAppRootStyleContainer__host", mode === 'embedded' && "vkuiAppRootStyleContainer__embedded", sizeY !== 'regular' && sizeYClassNames[sizeY], userSelectModeClassName, tokensClassName)
+    };
+}
+/**
+ * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:
+ * - точке монтирования приложения – `AppRoot`;
+ * - точке монтирования порталов для модальных окон – `AppRootPortal`.
+ *
+ * @private
+ */ export function AppRootStyleContainer(props) {
+    const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread({
+        baseClassName: appRootClassName,
+        baseStyle: appRootStyle
+    }, props));
+}
+
+//# sourceMappingURL=AppRootStyleContainer.js.map

package/dist/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useTokensClassName } from '../../../lib/tokens';\nimport { useConfigProvider } from '../../ConfigProvider/ConfigProviderContext';\nimport { RootComponent, type RootComponentProps } from '../../RootComponent/RootComponent';\nimport { AppRootContext } from '../AppRootContext';\nimport { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from '../helpers';\nimport styles from './AppRootStyleContainer.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function useAppRootStyles() {\n  const { safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);\n  const { hasPointer, sizeY = 'none' } = useAdaptivity();\n  const { isWebView } = useConfigProvider();\n  const userSelectModeClassName = getUserSelectModeClassName({\n    userSelectMode,\n    isWebView,\n    hasPointer,\n  });\n  const tokensClassName = useTokensClassName();\n\n  return {\n    style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,\n    className: classNames(\n      styles.host,\n      mode === 'embedded' && styles.embedded,\n      sizeY !== 'regular' && sizeYClassNames[sizeY],\n      userSelectModeClassName,\n      tokensClassName,\n    ),\n  };\n}\n\ntype AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;\n\n/**\n * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:\n * - точке монтирования приложения – `AppRoot`;\n * - точке монтирования порталов для модальных окон – `AppRootPortal`.\n *\n * @private\n */\nexport function AppRootStyleContainer(props: AppRootStyleContainerProps) {\n  const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();\n\n  return <RootComponent baseClassName={appRootClassName} baseStyle={appRootStyle} {...props} />;\n}\n"],"names":["React","classNames","useAdaptivity","useTokensClassName","useConfigProvider","RootComponent","AppRootContext","getSafeAreaInsetsAsCssVariables","getUserSelectModeClassName","sizeYClassNames","none","compact","useAppRootStyles","safeAreaInsets","mode","userSelectMode","useContext","hasPointer","sizeY","isWebView","userSelectModeClassName","tokensClassName","style","undefined","className","AppRootStyleContainer","props","appRootStyle","appRootClassName","baseClassName","baseStyle"],"mappings":"AAAA;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,kBAAkB,QAAQ,+BAAsB;AACzD,SAASC,iBAAiB,QAAQ,gDAA6C;AAC/E,SAASC,aAAa,QAAiC,uCAAoC;AAC3F,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,+BAA+B,EAAEC,0BAA0B,QAAQ,gBAAa;AAGzF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGf,MAAMgB,UAAU,CAACV;IAClE,MAAM,EAAEW,UAAU,EAAEC,QAAQ,MAAM,EAAE,GAAGhB;IACvC,MAAM,EAAEiB,SAAS,EAAE,GAAGf;IACtB,MAAMgB,0BAA0BZ,2BAA2B;QACzDO;QACAI;QACAF;IACF;IACA,MAAMI,kBAAkBlB;IAExB,OAAO;QACLmB,OAAOT,iBAAiBN,gCAAgCM,kBAAkBU;QAC1EC,WAAWvB,8CAETa,SAAS,qDACTI,UAAU,aAAaT,eAAe,CAACS,MAAM,EAC7CE,yBACAC;IAEJ;AACF;AAIA;;;;;;CAMC,GACD,OAAO,SAASI,sBAAsBC,KAAiC;IACrE,MAAM,EAAEJ,OAAOK,YAAY,EAAEH,WAAWI,gBAAgB,EAAE,GAAGhB;IAE7D,qBAAO,KAACP;QAAcwB,eAAeD;QAAkBE,WAAWH;OAAkBD;AACtF"}

package/dist/components/AppRoot/helpers.d.ts

@@ -1,6 +1,13 @@
+import * as React from 'react';
 import type { AppRootUserSelectMode, SafeAreaInsets } from './types';
 export declare const extractPortalRootByProp: (portalRootProp: HTMLElement | React.RefObject<HTMLElement>) => HTMLElement | null;
 export declare const CUSTOM_PROPERTY_INSET_PREFIX = "--vkui_internal--safe_area_inset_";
+export declare function useSafeAreaInsetsMemo(safeAreaInsetsProp: SafeAreaInsets | undefined): {
+    top: number | undefined;
+    right: number | undefined;
+    bottom: number | undefined;
+    left: number | undefined;
+};
 export declare function getSafeAreaInsetsAsCssVariables(safeAreaInsets: SafeAreaInsets | undefined): Record<string, string>;
 export declare function getUserSelectModeClassName({ userSelectMode, isWebView, hasPointer, }: {
     userSelectMode: AppRootUserSelectMode | undefined;

package/dist/components/AppRoot/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGrE,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KACzD,WAAW,GAAG,IAA+E,CAAC;AAEjG,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,wBAAgB,+BAA+B,CAC7C,cAAc,EAAE,cAAc,GAAG,SAAS,GACzC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBxB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,cAAc,EACd,SAAS,EACT,UAAU,GACX,EAAE;IACD,cAAc,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC,GAAG,MAAM,GAAG,IAAI,CAqBhB"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGrE,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KACzD,WAAW,GAAG,IAA+E,CAAC;AAEjG,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,wBAAgB,qBAAqB,CAAC,kBAAkB,EAAE,cAAc,GAAG,SAAS;;;;;EAanF;AAED,wBAAgB,+BAA+B,CAC7C,cAAc,EAAE,cAAc,GAAG,SAAS,GACzC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBxB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,cAAc,EACd,SAAS,EACT,UAAU,GACX,EAAE;IACD,cAAc,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC,GAAG,MAAM,GAAG,IAAI,CAqBhB"}

package/dist/components/AppRoot/helpers.js

@@ -1,6 +1,22 @@
+import * as React from "react";
 import { isRefObject } from "../../lib/isRefObject.js";
 export const extractPortalRootByProp = (portalRootProp)=>isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;
 export const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;
+export function useSafeAreaInsetsMemo(safeAreaInsetsProp) {
+    const { top, right, bottom, left } = safeAreaInsetsProp !== null && safeAreaInsetsProp !== void 0 ? safeAreaInsetsProp : {};
+    const safeAreaInsets = React.useMemo(()=>({
+            top,
+            right,
+            bottom,
+            left
+        }), [
+        top,
+        right,
+        bottom,
+        left
+    ]);
+    return safeAreaInsets;
+}
 export function getSafeAreaInsetsAsCssVariables(safeAreaInsets) {
     if (!safeAreaInsets) {
         return {};
@@ -24,16 +40,16 @@ export function getUserSelectModeClassName({ userSelectMode, isWebView, hasPoint
                 }
                 const enableByHasPointerMediaQuery = hasPointer === undefined;
                 if (enableByHasPointerMediaQuery) {
-                    return "vkuiAppRoot__pointerNone";
+                    return "vkuiAppRootStyleContainer__pointerNone";
                 }
-                return "vkuiAppRoot__userSelectNone";
+                return "vkuiAppRootStyleContainer__userSelectNone";
             }
         case 'disabled':
-            return "vkuiAppRoot__userSelectNone";
+            return "vkuiAppRootStyleContainer__userSelectNone";
         case 'enabled':
             return null;
         default:
-            return isWebView ? "vkuiAppRoot__userSelectNone" : null;
+            return isWebView ? "vkuiAppRootStyleContainer__userSelectNone" : null;
     }
 }
 

package/dist/components/AppRoot/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootUserSelectMode, SafeAreaInsets } from './types';\nimport styles from './AppRoot.module.css';\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport function getSafeAreaInsetsAsCssVariables(\n  safeAreaInsets: SafeAreaInsets | undefined,\n): Record<string, string> {\n  if (!safeAreaInsets) {\n    return {};\n  }\n\n  const cssVariables: Record<string, string> = {};\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n\n      cssVariables[propertyKey] = `${propertyValue}px`;\n    }\n  }\n\n  return cssVariables;\n}\n\nexport function getUserSelectModeClassName({\n  userSelectMode,\n  isWebView,\n  hasPointer,\n}: {\n  userSelectMode: AppRootUserSelectMode | undefined;\n  isWebView: boolean;\n  hasPointer: boolean | undefined;\n}): string | null {\n  switch (userSelectMode) {\n    case 'enabled-with-pointer': {\n      if (hasPointer) {\n        return null;\n      }\n\n      const enableByHasPointerMediaQuery = hasPointer === undefined;\n      if (enableByHasPointerMediaQuery) {\n        return styles.pointerNone;\n      }\n\n      return styles.userSelectNone;\n    }\n    case 'disabled':\n      return styles.userSelectNone;\n    case 'enabled':\n      return null;\n    default:\n      return isWebView ? styles.userSelectNone : null;\n  }\n}\n"],"names":["isRefObject","extractPortalRootByProp","portalRootProp","current","CUSTOM_PROPERTY_INSET_PREFIX","getSafeAreaInsetsAsCssVariables","safeAreaInsets","cssVariables","key","hasOwnProperty","propertyKey","propertyValue","getUserSelectModeClassName","userSelectMode","isWebView","hasPointer","enableByHasPointerMediaQuery","undefined"],"mappings":"AAAA,SAASA,WAAW,QAAQ,2BAAwB;AAIpD,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBF,YAAYE,kBAAkBA,eAAeC,OAAO,GAAGD,eAAgB;AAEjG,OAAO,MAAME,+BAA+B,CAAC,iCAAiC,CAAC,CAAC;AAEhF,OAAO,SAASC,gCACdC,cAA0C;IAE1C,IAAI,CAACA,gBAAgB;QACnB,OAAO,CAAC;IACV;IAEA,MAAMC,eAAuC,CAAC;IAE9C,IAAK,MAAMC,OAAOF,eAAgB;QAChC,IAAIA,eAAeG,cAAc,CAACD,QAAQ,OAAOF,cAAc,CAACE,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,GAAGN,+BAA+BI,KAAK;YAC3D,MAAMG,gBAAgBL,cAAc,CAACE,IAAI;YAEzCD,YAAY,CAACG,YAAY,GAAG,GAAGC,cAAc,EAAE,CAAC;QAClD;IACF;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASK,2BAA2B,EACzCC,cAAc,EACdC,SAAS,EACTC,UAAU,EAKX;IACC,OAAQF;QACN,KAAK;YAAwB;gBAC3B,IAAIE,YAAY;oBACd,OAAO;gBACT;gBAEA,MAAMC,+BAA+BD,eAAeE;gBACpD,IAAID,8BAA8B;oBAChC;gBACF;gBAEA;YACF;QACA,KAAK;YACH;QACF,KAAK;YACH,OAAO;QACT;YACE,OAAOF,4CAAoC;IAC/C;AACF"}
+{"version":3,"sources":["../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootUserSelectMode, SafeAreaInsets } from './types';\nimport styles from './AppRootStyleContainer/AppRootStyleContainer.module.css';\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport function useSafeAreaInsetsMemo(safeAreaInsetsProp: SafeAreaInsets | undefined) {\n  const { top, right, bottom, left } = safeAreaInsetsProp ?? {};\n  const safeAreaInsets = React.useMemo(\n    () => ({\n      top,\n      right,\n      bottom,\n      left,\n    }),\n    [top, right, bottom, left],\n  );\n\n  return safeAreaInsets;\n}\n\nexport function getSafeAreaInsetsAsCssVariables(\n  safeAreaInsets: SafeAreaInsets | undefined,\n): Record<string, string> {\n  if (!safeAreaInsets) {\n    return {};\n  }\n\n  const cssVariables: Record<string, string> = {};\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n\n      cssVariables[propertyKey] = `${propertyValue}px`;\n    }\n  }\n\n  return cssVariables;\n}\n\nexport function getUserSelectModeClassName({\n  userSelectMode,\n  isWebView,\n  hasPointer,\n}: {\n  userSelectMode: AppRootUserSelectMode | undefined;\n  isWebView: boolean;\n  hasPointer: boolean | undefined;\n}): string | null {\n  switch (userSelectMode) {\n    case 'enabled-with-pointer': {\n      if (hasPointer) {\n        return null;\n      }\n\n      const enableByHasPointerMediaQuery = hasPointer === undefined;\n      if (enableByHasPointerMediaQuery) {\n        return styles.pointerNone;\n      }\n\n      return styles.userSelectNone;\n    }\n    case 'disabled':\n      return styles.userSelectNone;\n    case 'enabled':\n      return null;\n    default:\n      return isWebView ? styles.userSelectNone : null;\n  }\n}\n"],"names":["React","isRefObject","extractPortalRootByProp","portalRootProp","current","CUSTOM_PROPERTY_INSET_PREFIX","useSafeAreaInsetsMemo","safeAreaInsetsProp","top","right","bottom","left","safeAreaInsets","useMemo","getSafeAreaInsetsAsCssVariables","cssVariables","key","hasOwnProperty","propertyKey","propertyValue","getUserSelectModeClassName","userSelectMode","isWebView","hasPointer","enableByHasPointerMediaQuery","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,2BAAwB;AAIpD,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBF,YAAYE,kBAAkBA,eAAeC,OAAO,GAAGD,eAAgB;AAEjG,OAAO,MAAME,+BAA+B,CAAC,iCAAiC,CAAC,CAAC;AAEhF,OAAO,SAASC,sBAAsBC,kBAA8C;IAClF,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGJ,+BAAAA,gCAAAA,qBAAsB,CAAC;IAC5D,MAAMK,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAKC;QAAOC;QAAQC;KAAK;IAG5B,OAAOC;AACT;AAEA,OAAO,SAASE,gCACdF,cAA0C;IAE1C,IAAI,CAACA,gBAAgB;QACnB,OAAO,CAAC;IACV;IAEA,MAAMG,eAAuC,CAAC;IAE9C,IAAK,MAAMC,OAAOJ,eAAgB;QAChC,IAAIA,eAAeK,cAAc,CAACD,QAAQ,OAAOJ,cAAc,CAACI,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,GAAGb,+BAA+BW,KAAK;YAC3D,MAAMG,gBAAgBP,cAAc,CAACI,IAAI;YAEzCD,YAAY,CAACG,YAAY,GAAG,GAAGC,cAAc,EAAE,CAAC;QAClD;IACF;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASK,2BAA2B,EACzCC,cAAc,EACdC,SAAS,EACTC,UAAU,EAKX;IACC,OAAQF;QACN,KAAK;YAAwB;gBAC3B,IAAIE,YAAY;oBACd,OAAO;gBACT;gBAEA,MAAMC,+BAA+BD,eAAeE;gBACpD,IAAID,8BAA8B;oBAChC;gBACF;gBAEA;YACF;QACA,KAAK;YACH;QACF,KAAK;YACH,OAAO;QACT;YACE,OAAOF,0DAAoC;IAC/C;AACF"}

package/dist/components/Clickable/Clickable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACxF,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AA2GjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AAiCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAiB5B,CAAC"}
+{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AAoBjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AAiCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,wEAIxB,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAiB5B,CAAC"}

package/dist/components/Clickable/Clickable.js

@@ -1,16 +1,10 @@
-'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames, noop } from "@vkontakte/vkjs";
-import { useFocusVisible } from "../../hooks/useFocusVisible.js";
-import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
-import { mergeCalls } from "../../lib/mergeCalls.js";
-import { clickByKeyboardHandler } from "../../lib/utils.js";
+import { classNames } from "@vkontakte/vkjs";
 import { RootComponent } from "../RootComponent/RootComponent.js";
-import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from "./useState.js";
+import { RealClickable } from "./RealClickable.js";
 /**
  * Некликабельный компонент. Отключаем возможность нажимать на компонент.
  */ const NonClickable = (_param)=>{
@@ -29,81 +23,6 @@ import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from
     ]);
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread({}, restProps));
 };
-/**
- * Кликабельный компонент. Добавляем кучу обвесов
- */ const RealClickable = (_param)=>{
-    var { baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown } = _param, restProps = _object_without_properties(_param, [
-        "baseClassName",
-        "children",
-        "focusVisibleMode",
-        "activeClassName",
-        "hoverClassName",
-        "activeEffectDelay",
-        "hasHover",
-        "hasActive",
-        "hovered",
-        "activated",
-        "hasHoverWithChildren",
-        "unlockParentHover",
-        "onPointerEnter",
-        "onPointerLeave",
-        "onPointerDown",
-        "onPointerCancel",
-        "onPointerUp",
-        "onBlur",
-        "onFocus",
-        "onKeyDown"
-    ]);
-    const _useFocusVisible = useFocusVisible(), { focusVisible } = _useFocusVisible, focusEvents = _object_without_properties(_useFocusVisible, [
-        "focusVisible"
-    ]);
-    const focusVisibleClassNames = useFocusVisibleClassName({
-        focusVisible,
-        mode: focusVisibleMode
-    });
-    const _useState = useState({
-        activeClassName,
-        hoverClassName,
-        activeEffectDelay,
-        hasHover,
-        hasActive,
-        hovered,
-        activated,
-        unlockParentHover
-    }), { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate } = _useState, stateEvents = _object_without_properties(_useState, [
-        "stateClassName",
-        "setLockHoverBubblingImmediate",
-        "setLockActiveBubblingImmediate"
-    ]);
-    const handlers = mergeCalls(focusEvents, stateEvents, {
-        onKeyDown: clickByKeyboardHandler
-    }, {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown,
-        onPointerCancel,
-        onPointerUp,
-        onBlur,
-        onFocus,
-        onKeyDown
-    });
-    const lockStateContextValue = React.useMemo(()=>({
-            lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
-            lockActiveStateBubbling: setLockActiveBubblingImmediate
-        }), [
-        setLockHoverBubblingImmediate,
-        setLockActiveBubblingImmediate,
-        hasHoverWithChildren
-    ]);
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
-        baseClassName: classNames(baseClassName, "vkuiClickable__realClickable", focusVisibleClassNames, stateClassName)
-    }, handlers, restProps), {
-        children: /*#__PURE__*/ _jsx(ClickableLockStateContext.Provider, {
-            value: lockStateContextValue,
-            children: children
-        })
-    }));
-};
 /**
  * Проверяем, является ли компонент кликабельным
  */ export function checkClickable(props) {

package/dist/components/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport {\n  type FocusVisibleModeProps,\n  useFocusVisibleClassName,\n} from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport {\n  ClickableLockStateContext,\n  DEFAULT_ACTIVE_EFFECT_DELAY,\n  type StateProps,\n  useState,\n} from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Кликабельный компонент. Добавляем кучу обвесов\n */\nconst RealClickable = <T,>({\n  baseClassName,\n  children,\n  focusVisibleMode = 'inside',\n  activeClassName,\n  hoverClassName,\n  activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY,\n  hasHover = true,\n  hasActive = true,\n  hovered,\n  activated,\n  hasHoverWithChildren,\n  unlockParentHover,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onPointerCancel,\n  onPointerUp,\n  onBlur,\n  onFocus,\n  onKeyDown,\n  ...restProps\n}: ClickableProps<T>) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: focusVisibleMode });\n\n  const {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...stateEvents\n  } = useState({\n    activeClassName,\n    hoverClassName,\n    activeEffectDelay,\n    hasHover,\n    hasActive,\n    hovered,\n    activated,\n    unlockParentHover,\n  });\n\n  const handlers = mergeCalls(\n    focusEvents,\n    stateEvents,\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onPointerEnter,\n      onPointerLeave,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  );\n\n  const lockStateContextValue = React.useMemo(\n    () => ({\n      lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,\n      lockActiveStateBubbling: setLockActiveBubblingImmediate,\n    }),\n    [setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, hasHoverWithChildren],\n  );\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        baseClassName,\n        styles.realClickable,\n        focusVisibleClassNames,\n        stateClassName,\n      )}\n      {...handlers}\n      {...restProps}\n    >\n      <ClickableLockStateContext.Provider value={lockStateContextValue}>\n        {children}\n      </ClickableLockStateContext.Provider>\n    </RootComponent>\n  );\n};\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(baseClassNameProp, styles.host);\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","noop","useFocusVisible","useFocusVisibleClassName","mergeCalls","clickByKeyboardHandler","RootComponent","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","RealClickable","baseClassName","children","focusVisibleMode","hasHoverWithChildren","onPointerEnter","onPointerLeave","onPointerDown","onPointerCancel","onPointerUp","onBlur","onFocus","onKeyDown","focusVisible","focusEvents","focusVisibleClassNames","mode","stateClassName","setLockHoverBubblingImmediate","setLockActiveBubblingImmediate","stateEvents","handlers","lockStateContextValue","useMemo","lockHoverStateBubbling","lockActiveStateBubbling","Provider","value","checkClickable","props","undefined","Component","disabled","component","Clickable","baseClassNameProp","commonProps","isClickable"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component };\n  } else if (href !== undefined) {\n    return { 'Component': 'a', 'aria-disabled': disabled };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      'Component': 'div',\n      'role': 'button',\n      'tabIndex': disabled ? undefined : 0,\n      'aria-disabled': disabled,\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>({\n  focusVisibleMode = 'inside',\n  baseClassName: baseClassNameProp,\n  ...restProps\n}: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(restProps);\n  const isClickable = checkClickable(restProps);\n  const baseClassName = classNames(baseClassNameProp, styles.host);\n\n  if (isClickable) {\n    return (\n      <RealClickable\n        baseClassName={baseClassName}\n        focusVisibleMode={focusVisibleMode}\n        {...commonProps}\n        {...restProps}\n      />\n    );\n  }\n\n  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n};\n"],"names":["React","classNames","RootComponent","RealClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","checkClickable","props","undefined","Component","disabled","component","Clickable","focusVisibleMode","baseClassName","baseClassNameProp","commonProps","isClickable"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAShD;;CAEC,GACD,MAAMC,eAAe;QAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EAEC,WADfC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAEuB,KAACb,kCAAkBc;;AAE5C;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMb,IAAI,KAAKc,aACdD,MAAMZ,OAAO,KAAKa,aAClBD,MAAMX,cAAc,KAAKY,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTd,OAAO,EACPC,cAAc,EACdF,IAAI,EACJgB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;QAAU;IACrB,OAAO,IAAIf,SAASc,WAAW;QAC7B,OAAO;YAAE,aAAa;YAAK,iBAAiBE;QAAS;IACvD,OAAO,IAAIf,YAAYa,aAAaZ,mBAAmBY,WAAW;QAChE,OAAO;YACL,aAAa;YACb,QAAQ;YACR,YAAYE,WAAWF,YAAY;YACnC,iBAAiBE;QACnB;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAME,YAAY;QAAK,EAC5BC,mBAAmB,QAAQ,EAC3BC,eAAeC,iBAAiB,EAEd,WADfV;QAFHQ;QACAC;;IAGA,MAAME,cAAcL,UAAUN;IAC9B,MAAMY,cAAcX,eAAeD;IACnC,MAAMS,gBAAgBxB,WAAWyB;IAEjC,IAAIE,aAAa;QACf,qBACE,KAACzB;YACCsB,eAAeA;YACfD,kBAAkBA;WACdG,aACAX;IAGV;IAEA,qBAAO,KAACZ;QAAaqB,eAAeA;OAAmBE,aAAiBX;AAC1E,EAAE"}

package/dist/components/Clickable/RealClickable.d.ts

@@ -0,0 +1,6 @@
+import { type ClickableProps } from './Clickable';
+/**
+ * Кликабельный компонент. Добавляем кучу обвесов
+ */
+export declare const RealClickable: <T>({ baseClassName, children, focusVisibleMode, activeClassName, hoverClassName, activeEffectDelay, hasHover, hasActive, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, ...restProps }: ClickableProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RealClickable.d.ts.map

package/dist/components/Clickable/RealClickable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RealClickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/RealClickable.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAIlD;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,8SAsB5B,cAAc,CAAC,CAAC,CAAC,4CA4DnB,CAAC"}