@vkontakte/vkui 7.0.0 → 7.0.1

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import type { SharedDropdownProps } from './types';
 type CloseInitiators = 'action-item' | 'cancel-item' | 'other';
 export interface ActionSheetOnCloseOptions {
     closedBy: CloseInitiators;
 }
-export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
+export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>, Omit<UseFocusTrapProps, 'onClose'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
     title?: React.ReactNode;
     description?: React.ReactNode;
     /**

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,SAkG3B,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAWlE,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,CAAC,mBAAmB,EAAE,WAAW,GAAG,qBAAqB,GAAG,WAAW,CAAC,EAClF,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAClC,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.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  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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"}
+{"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 { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\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<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,\n    Omit<UseFocusTrapProps, 'onClose'>,\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/ModalCard/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C;;GAEG;AACH,eAAO,MAAM,SAAS,mIAYnB,cAAc,KAAG,KAAK,CAAC,SA8BzB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C;;GAEG;AACH,eAAO,MAAM,SAAS,mIAYnB,cAAc,KAAG,KAAK,CAAC,SAkCzB,CAAC"}

package/dist/components/ModalCard/ModalCard.js

@@ -39,8 +39,9 @@ const warn = warnOnce('ModalCard');
         onOpened,
         onClose,
         onClosed
-    }), { mounted } = _useModalManager, resolvedProps = _object_without_properties(_useModalManager, [
-        "mounted"
+    }), { mounted, shouldPreserveSnapPoint: excludedProp } = _useModalManager, resolvedProps = _object_without_properties(_useModalManager, [
+        "mounted",
+        "shouldPreserveSnapPoint"
     ]);
     if (mounted === false) {
         return null;

package/dist/components/ModalCard/ModalCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalCardInternal } from './ModalCardInternal';\nimport type { ModalCardProps } from './types';\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  keepMounted = false,\n  ...restProps\n}: ModalCardProps): React.ReactNode => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const { mounted, ...resolvedProps } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  if (mounted === false) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalCardInternal\n        id={id}\n        aria-labelledby={`${id}-label`}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalCardInternal","warn","ModalCard","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","keepMounted","restProps","generatingId","mounted","resolvedProps","Provider","value","aria-labelledby"],"mappings":"AAAA;;;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,YAAY;QAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,KAAK,EAEJ,WADZC;QAVHX;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAepB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASc;IAElD,MAAsChB,mBAAAA,gBAAgB;QACpDI;QACAG;QACAO;QACAN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,IAVM,EAAEI,OAAO,EAAoB,GAAGjB,kBAAlBkB,2CAAkBlB;QAA9BiB;;IAYR,IAAIA,YAAY,OAAO;QACrB,OAAO;IACT;IAEA,qBACE,KAACpB,aAAasB,QAAQ;QAACC,OAAOhB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJiB,mBAAiB,GAAGjB,GAAG,MAAM,CAAC;WAC1Bc,eACAH;;AAIZ,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalCardInternal } from './ModalCardInternal';\nimport type { ModalCardProps } from './types';\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  keepMounted = false,\n  ...restProps\n}: ModalCardProps): React.ReactNode => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const {\n    mounted,\n    shouldPreserveSnapPoint: excludedProp,\n    ...resolvedProps\n  } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  if (mounted === false) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalCardInternal\n        id={id}\n        aria-labelledby={`${id}-label`}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalCardInternal","warn","ModalCard","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","keepMounted","restProps","generatingId","mounted","shouldPreserveSnapPoint","excludedProp","resolvedProps","Provider","value","aria-labelledby"],"mappings":"AAAA;;;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,YAAY;QAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,KAAK,EAEJ,WADZC;QAVHX;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAepB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASc;IAElD,MAIIhB,mBAAAA,gBAAgB;QAClBI;QACAG;QACAO;QACAN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,IAdM,EACJI,OAAO,EACPC,yBAAyBC,YAAY,EAEtC,GAAGnB,kBADCoB,2CACDpB;QAHFiB;QACAC;;IAcF,IAAID,YAAY,OAAO;QACrB,OAAO;IACT;IAEA,qBACE,KAACpB,aAAawB,QAAQ;QAACC,OAAOlB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJmB,mBAAiB,GAAGnB,GAAG,MAAM,CAAC;WAC1BgB,eACAL;;AAIZ,EAAE"}

package/dist/components/NativeSelect/NativeSelect.d.ts

@@ -9,6 +9,9 @@ export declare const NOT_SELECTED: {
     NATIVE: string;
     CUSTOM: null;
 };
+/**
+ * @visibleName NativeSelect
+ */
 export declare const remapFromSelectValueToNativeValue: (value: SelectValue) => NativeSelectValue;
 export declare const remapFromNativeValueToSelectValue: (value: NativeSelectValue) => SelectValue;
 export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'value' | 'defaultValue' | 'onChange'>, HasRef<HTMLSelectElement>, HasRootRef<HTMLDivElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
@@ -42,6 +45,5 @@ export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLS
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
-declare const NativeSelect: ({ style, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange, value, defaultValue, ...restProps }: NativeSelectProps) => React.ReactNode;
-export { NativeSelect };
+export declare const NativeSelect: ({ style, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange, value, defaultValue, ...restProps }: NativeSelectProps) => React.ReactNode;
 //# sourceMappingURL=NativeSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF,eAAO,MAAM,iCAAiC,UAAW,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,UAAW,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,EACD,MAAM,CAAC,iBAAiB,CAAC,EACzB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,+KAkBf,iBAAiB,KAAG,KAAK,CAAC,SAuE5B,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAA2B,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EACtD,SAAS,CACV,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iCAAiC,UAAW,WAAW,KAAG,iBACV,CAAC;AAE9D,eAAO,MAAM,iCAAiC,UAAW,iBAAiB,KAAG,WAChB,CAAC;AAE9D,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CACnD,EACD,MAAM,CAAC,iBAAiB,CAAC,EACzB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,+KAkBtB,iBAAiB,KAAG,KAAK,CAAC,SAuE5B,CAAC"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -21,11 +21,13 @@ export const NOT_SELECTED = {
     NATIVE: '__vkui_internal_Select_not_selected__',
     CUSTOM: null
 };
-export const remapFromSelectValueToNativeValue = (value)=>value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;
+/**
+ * @visibleName NativeSelect
+ */ export const remapFromSelectValueToNativeValue = (value)=>value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;
 export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
- */ const NativeSelect = (_param)=>{
+ */ export const NativeSelect = (_param)=>{
     var { style, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType = 'default', status, icon = /*#__PURE__*/ _jsx(DropdownIcon, {}), before, onChange, value, defaultValue } = _param, restProps = _object_without_properties(_param, [
         "style",
         "align",
@@ -107,6 +109,5 @@ export const remapFromNativeValueToSelectValue = (value)=>value === NOT_SELECTED
         ]
     });
 };
-export { NativeSelect };
 
 //# sourceMappingURL=NativeSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`\n   */\n  value?: SelectValue;\n  /**\n   * см. `value`\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Коллбэк срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом\n   */\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","after","mode","select","undefined","ref","option","div","aria-hidden"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, type ChangeEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type SelectValue = Exclude<\n  React.SelectHTMLAttributes<HTMLSelectElement>['value'],\n  undefined\n> | null;\n\nexport type NativeSelectValue = Exclude<SelectValue, null>;\n\nexport const NOT_SELECTED = {\n  NATIVE: '__vkui_internal_Select_not_selected__',\n  CUSTOM: null,\n};\n\n/**\n * @visibleName NativeSelect\n */\nexport const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>\n  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;\n\nexport const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>\n  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;\n\nexport interface NativeSelectProps\n  extends Omit<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'multiple' | 'value' | 'defaultValue' | 'onChange'\n    >,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  /**\n   * Выбранное значение.\n   *\n   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.\n   * >\n   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`\n   */\n  value?: SelectValue;\n  /**\n   * см. `value`\n   */\n  defaultValue?: SelectValue;\n  /**\n   * Коллбэк срабатывающий при изменении выбранного значения.\n   * Вторым параметром прокидывается новое значение\n   *\n   * > ⚠️ Лучше использовать второй параметр при работе с компонентом\n   */\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nexport const NativeSelect = ({\n  style,\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange,\n  value,\n  defaultValue,\n  ...restProps\n}: NativeSelectProps): React.ReactNode => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const checkSelectedOption = () => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);\n    }\n  };\n\n  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const newValue = remapFromNativeValueToSelectValue(e.target.value);\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n    onChange?.(e, newValue);\n  };\n  useIsomorphicLayoutEffect(checkSelectedOption, [children]);\n\n  return (\n    <FormField\n      Component=\"div\"\n      className={classNames(\n        styles.host,\n        'vkuiInternalNativeSelect',\n        before && styles.hasBefore,\n        empty && styles.empty,\n        multiline && styles.multiline,\n        align === 'center' && styles.alignCenter,\n        align === 'right' && styles.alignRight,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}\n        defaultValue={\n          defaultValue !== undefined\n            ? remapFromSelectValueToNativeValue(defaultValue)\n            : defaultValue\n        }\n        disabled={disabled}\n        className={styles.el}\n        onChange={callMultiple(_onChange, checkSelectedOption)}\n        ref={selectRef}\n      >\n        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles.container} aria-hidden>\n        <SelectTypography className={styles.title} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","callMultiple","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","compact","NOT_SELECTED","NATIVE","CUSTOM","remapFromSelectValueToNativeValue","value","remapFromNativeValueToSelectValue","NativeSelect","style","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","defaultValue","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","checkSelectedOption","selectedOption","current","options","selectedIndex","text","_onChange","e","newValue","target","currentTarget","Component","after","mode","select","undefined","ref","option","div","aria-hidden"],"mappings":"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"}

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

@@ -34,6 +34,6 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ placement: placementProp, sameWidth, hideWhenReferenceHidden, offsetByMainAxis, offsetByCrossAxis, arrow, arrowHeight, arrowPadding, customMiddlewares, disableFlipMiddleware, autoUpdateOnTargetResize, arrowProps, ArrowIcon, targetRef, getRootRef, children, usePortal, onPlacementChange, ...restProps }: PopperProps) => React.ReactNode;
+export declare const Popper: ({ placement: placementProp, sameWidth, hideWhenReferenceHidden, offsetByMainAxis, offsetByCrossAxis, arrow, arrowHeight, arrowPadding, customMiddlewares, disableFlipMiddleware, autoUpdateOnTargetResize, arrowProps, ArrowIcon, targetRef, getRootRef, children, usePortal, onPlacementChange, zIndex, style, ...restProps }: PopperProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=Popper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,sBAAsB,EAI3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,UAAU,GACV,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,eAAe,GACf,cAAc,GACd,yBAAyB,GACzB,WAAW,GACX,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,6BAA6B,CAAC;IACtF;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,oTA2BhB,WAAW,KAAG,KAAK,CAAC,SAwEtB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,sBAAsB,EAI3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,UAAU,GACV,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,eAAe,GACf,cAAc,GACd,yBAAyB,GACzB,WAAW,GACX,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,6BAA6B,CAAC;IACtF;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,mUA6BhB,WAAW,KAAG,KAAK,CAAC,SAgFtB,CAAC"}

package/dist/components/Popper/Popper.js

@@ -4,6 +4,7 @@ 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, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
@@ -18,7 +19,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
     placement: placementProp = 'bottom-start', sameWidth, hideWhenReferenceHidden, offsetByMainAxis = 8, offsetByCrossAxis = 0, arrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, customMiddlewares, disableFlipMiddleware = false, // UseFloatingProps
     autoUpdateOnTargetResize = false, // ArrowProps
     arrowProps, ArrowIcon = DefaultIcon, // rest
-    targetRef, getRootRef, children, usePortal = true, onPlacementChange } = _param, restProps = _object_without_properties(_param, [
+    targetRef, getRootRef, children, usePortal = true, onPlacementChange, zIndex, style } = _param, restProps = _object_without_properties(_param, [
         "placement",
         "sameWidth",
         "hideWhenReferenceHidden",
@@ -36,7 +37,9 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         "getRootRef",
         "children",
         "usePortal",
-        "onPlacementChange"
+        "onPlacementChange",
+        "zIndex",
+        "style"
     ]);
     const [arrowRef, setArrowRef] = React.useState(null);
     const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({
@@ -70,7 +73,11 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         refs.setReference,
         targetRef
     ]);
+    const dropdownStyle = typeof zIndex !== 'undefined' ? {
+        zIndex
+    } : undefined;
     const dropdown = /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        style: mergeStyle(dropdownStyle, style),
         baseClassName: "vkuiPopper__host",
         getRootRef: handleRootRef,
         baseStyle: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined, middlewareData),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties(\n        floatingPositionStrategy,\n        floatingDataX,\n        floatingDataY,\n        sameWidth ? null : undefined,\n        middlewareData,\n      )}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdown","baseClassName","baseStyle","undefined","coords","Icon"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,8BAAqB;AAC5B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,kCAA+B;AACtC,SACEC,aAAa,QAER,oCAAiC;AACxC,SAASC,aAAa,QAAQ,oCAAiC;AA6D/D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrB,uCAAuC;IACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcb,oBAAoB,EAClCc,eAAeb,qBAAqB,EACpCc,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;IACnBC,2BAA2B,KAAK,EAEhC,aAAa;IACbC,UAAU,EACVC,YAAYjB,WAAW,EAEvB,OAAO;IACPkB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,iBAAiB,EAEL,WADTC;QAxBHnB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAGAC;QAGAC;QACAC;QAGAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGpC,MAAMqC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGlC,gCAAgC;QACvEU,WAAWC;QACXC;QACAI;QACAc;QACAb;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJe,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClC9B,WAAW+B,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG5C,YAAY;QACdW,WAAWuB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOjD,6BAA6BiD,MAAM;gBACxCC,eAAe1B;YACjB;QACF;IACF;IAEApB,2BAA2BU,eAAe8B,mBAAmBb;IAE7D,MAAM,EAAEZ,OAAOgC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBrD,aAA6B8C,KAAKQ,WAAW,EAAEzB;IAErEvB,0BAA0B;QACxBwC,KAAKS,YAAY,CAAC,aAAa3B,YAAYA,UAAU4B,OAAO,GAAG5B;IACjE,GAAG;QAACkB,KAAKS,YAAY;QAAE3B;KAAU;IAEjC,MAAM6B,yBACJ,MAAC7C,uDACKqB;QACJyB,aAAa;QACb7B,YAAYwB;QACZM,WAAWzD,wCACT0C,0BACAJ,eACAE,eACA1B,YAAY,OAAO4C,WACnBb;;YAGD3B,uBACC,KAACT,uDACKe;gBACJmC,QAAQT;gBACRtC,WAAW+B;gBACXhB,YAAYM;gBACZ2B,MAAMnC;;YAGTG;;;IAIL,qBAAO,KAACvB;QAAcwB,WAAWA;kBAAY0B;;AAC/C,EAAE"}
+{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  zIndex,\n  style,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdownStyle =\n    typeof zIndex !== 'undefined'\n      ? {\n          zIndex,\n        }\n      : undefined;\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      style={mergeStyle(dropdownStyle, style)}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties(\n        floatingPositionStrategy,\n        floatingDataX,\n        floatingDataY,\n        sameWidth ? null : undefined,\n        middlewareData,\n      )}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","undefined","dropdown","baseClassName","baseStyle","coords","Icon"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,8BAAqB;AAC5B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,kCAA+B;AACtC,SACEC,aAAa,QAER,oCAAiC;AACxC,SAASC,aAAa,QAAQ,oCAAiC;AA6D/D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrB,uCAAuC;IACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcb,oBAAoB,EAClCc,eAAeb,qBAAqB,EACpCc,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;IACnBC,2BAA2B,KAAK,EAEhC,aAAa;IACbC,UAAU,EACVC,YAAYjB,WAAW,EAEvB,OAAO;IACPkB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,iBAAiB,EACjBC,MAAM,EACNC,KAAK,EAEO,WADTC;QA1BHrB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAGAC;QAGAC;QACAC;QAGAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGvC,MAAMwC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGpC,gCAAgC;QACvEU,WAAWC;QACXC;QACAI;QACAgB;QACAf;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJiB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClChC,WAAWiC,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG9C,YAAY;QACdW,WAAWyB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOnD,6BAA6BmD,MAAM;gBACxCC,eAAe5B;YACjB;QACF;IACF;IAEApB,2BAA2BU,eAAegC,mBAAmBf;IAE7D,MAAM,EAAEZ,OAAOkC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBvD,aAA6BgD,KAAKQ,WAAW,EAAE3B;IAErEvB,0BAA0B;QACxB0C,KAAKS,YAAY,CAAC,aAAa7B,YAAYA,UAAU8B,OAAO,GAAG9B;IACjE,GAAG;QAACoB,KAAKS,YAAY;QAAE7B;KAAU;IAEjC,MAAM+B,gBACJ,OAAO1B,WAAW,cACd;QACEA;IACF,IACA2B;IAEN,MAAMC,yBACJ,MAACjD,uDACKuB;QACJD,OAAOnC,WAAW4D,eAAezB;QACjC4B,aAAa;QACbjC,YAAY0B;QACZQ,WAAW7D,wCACT4C,0BACAJ,eACAE,eACA5B,YAAY,OAAO4C,WACnBX;;YAGD7B,uBACC,KAACT,uDACKe;gBACJsC,QAAQV;gBACRxC,WAAWiC;gBACXlB,YAAYQ;gBACZ4B,MAAMtC;;YAGTG;;;IAIL,qBAAO,KAACvB;QAAcwB,WAAWA;kBAAY8B;;AAC/C,EAAE"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -17,7 +17,7 @@ export type TooltipOnShownChange = OnShownChange;
 export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {
     /**
      * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте
-     * совместно с `onShawnChange`.
+     * совместно с `onShownChange`.
      *
      * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.
      */

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  getArrowCoordsByMiddlewareData,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'onShownChange'\n  | 'hideWhenReferenceHidden'\n  | 'children'\n  | 'zIndex'\n  | 'usePortal'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n  /**\n   * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n   * совместно с `onShawnChange`.\n   *\n   * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n   */\n  shown?: boolean;\n  /**\n   * Добавляет возможность наводить на тултип.\n   */\n  enableInteractive?: boolean;\n  /**\n   * Добавляет возможность закрыть тултип через иконку-крестик.\n   *\n   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n   */\n  closable?: boolean;\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Отключает закрытие по клику.\n   */\n  disableCloseAfterClick?: boolean;\n  /**\n   * Отключает появление при фокусе.\n   */\n  disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  // UseFloatingMiddlewaresBootstrapOptions\n  placement: placementProp = 'bottom',\n  arrowPadding = 10,\n  arrowHeight = 8,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  disableTriggerOnFocus = false,\n\n  // useFloatingWithInteractions\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  hoverDelay = 150,\n\n  // инверсированные св-ва для useFloatingWithInteractions\n  enableInteractive = false,\n  disableArrow = false,\n  disableCloseAfterClick = false,\n\n  // Reference\n  children,\n\n  // AppRootProps\n  usePortal,\n\n  // TooltipBaseProps\n  id: idProp,\n  getRootRef,\n  appearance = 'neutral',\n  style: styleProp,\n  className,\n  zIndex = 'var(--vkui--z_index_popout)',\n  closable,\n  onPlacementChange,\n  ...popperProps\n}: TooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n\n    offsetByMainAxis,\n    offsetByCrossAxis,\n\n    hideWhenReferenceHidden,\n\n    arrow: !disableArrow,\n    arrowRef,\n    arrowPadding,\n    arrowHeight,\n    disableFlipMiddleware,\n  });\n  const {\n    shown,\n    willBeHide,\n    placement,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    placement: strictPlacement,\n    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n    hoverDelay,\n    closeAfterClick: !disableCloseAfterClick,\n    disableInteractive: !enableInteractive,\n    middlewares,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n\n  usePlacementChangeCallback(placementProp, placement, onPlacementChange);\n\n  let tooltip: React.ReactNode = null;\n  if (shown) {\n    tooltip = (\n      <AppRootPortal usePortal={usePortal}>\n        <TooltipBase\n          {...popperProps}\n          {...floatingProps}\n          style={{\n            ...floatingProps.style,\n            zIndex,\n            ...styleProp,\n          }}\n          id={tooltipId}\n          getRootRef={tooltipRef}\n          appearance={appearance}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  placement,\n                  coords: getArrowCoordsByMiddlewareData(middlewareData),\n                  getRootRef: setArrowRef,\n                }\n          }\n          className={classNames(\n            willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n            className,\n          )}\n          onCloseIconClick={closable ? onClose : undefined}\n        />\n      </AppRootPortal>\n    );\n  }\n  const [, child] = usePatchChildren(\n    children,\n    {\n      ...referenceProps,\n      ...(shown && { 'aria-describedby': tooltipId }),\n    },\n    refs.setReference,\n  );\n\n  useGlobalEscKeyDown(shown, onEscapeKeyDown);\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEscKeyDown","usePatchChildren","animationFadeClassNames","getArrowCoordsByMiddlewareData","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","TooltipBase","Tooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableTriggerOnFocus","defaultShown","shown","shownProp","onShownChange","hoverDelay","enableInteractive","disableArrow","disableCloseAfterClick","children","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","arrowRef","setArrowRef","useState","middlewares","strictPlacement","arrow","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onEscapeKeyDown","trigger","closeAfterClick","disableInteractive","tooltipRef","setFloating","tooltip","arrowProps","undefined","coords","out","in","onCloseIconClick","child","setReference","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  getArrowCoordsByMiddlewareData,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'onShownChange'\n  | 'hideWhenReferenceHidden'\n  | 'children'\n  | 'zIndex'\n  | 'usePortal'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type TooltipOnShownChange = OnShownChange;\n\nexport interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {\n  /**\n   * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте\n   * совместно с `onShownChange`.\n   *\n   * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.\n   */\n  shown?: boolean;\n  /**\n   * Добавляет возможность наводить на тултип.\n   */\n  enableInteractive?: boolean;\n  /**\n   * Добавляет возможность закрыть тултип через иконку-крестик.\n   *\n   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.\n   */\n  closable?: boolean;\n  /**\n   * Скрывает стрелку, указывающую на якорный элемент.\n   */\n  disableArrow?: boolean;\n  /**\n   * Отключает закрытие по клику.\n   */\n  disableCloseAfterClick?: boolean;\n  /**\n   * Отключает появление при фокусе.\n   */\n  disableTriggerOnFocus?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  // UseFloatingMiddlewaresBootstrapOptions\n  placement: placementProp = 'bottom',\n  arrowPadding = 10,\n  arrowHeight = 8,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n  disableTriggerOnFocus = false,\n\n  // useFloatingWithInteractions\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  hoverDelay = 150,\n\n  // инверсированные св-ва для useFloatingWithInteractions\n  enableInteractive = false,\n  disableArrow = false,\n  disableCloseAfterClick = false,\n\n  // Reference\n  children,\n\n  // AppRootProps\n  usePortal,\n\n  // TooltipBaseProps\n  id: idProp,\n  getRootRef,\n  appearance = 'neutral',\n  style: styleProp,\n  className,\n  zIndex = 'var(--vkui--z_index_popout)',\n  closable,\n  onPlacementChange,\n  ...popperProps\n}: TooltipProps): React.ReactNode => {\n  const generatedId = React.useId();\n  const tooltipId = idProp || generatedId;\n\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n\n    offsetByMainAxis,\n    offsetByCrossAxis,\n\n    hideWhenReferenceHidden,\n\n    arrow: !disableArrow,\n    arrowRef,\n    arrowPadding,\n    arrowHeight,\n    disableFlipMiddleware,\n  });\n  const {\n    shown,\n    willBeHide,\n    placement,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    placement: strictPlacement,\n    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n    hoverDelay,\n    closeAfterClick: !disableCloseAfterClick,\n    disableInteractive: !enableInteractive,\n    middlewares,\n  });\n  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n\n  usePlacementChangeCallback(placementProp, placement, onPlacementChange);\n\n  let tooltip: React.ReactNode = null;\n  if (shown) {\n    tooltip = (\n      <AppRootPortal usePortal={usePortal}>\n        <TooltipBase\n          {...popperProps}\n          {...floatingProps}\n          style={{\n            ...floatingProps.style,\n            zIndex,\n            ...styleProp,\n          }}\n          id={tooltipId}\n          getRootRef={tooltipRef}\n          appearance={appearance}\n          arrowProps={\n            disableArrow\n              ? undefined\n              : {\n                  placement,\n                  coords: getArrowCoordsByMiddlewareData(middlewareData),\n                  getRootRef: setArrowRef,\n                }\n          }\n          className={classNames(\n            willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n            className,\n          )}\n          onCloseIconClick={closable ? onClose : undefined}\n        />\n      </AppRootPortal>\n    );\n  }\n  const [, child] = usePatchChildren(\n    children,\n    {\n      ...referenceProps,\n      ...(shown && { 'aria-describedby': tooltipId }),\n    },\n    refs.setReference,\n  );\n\n  useGlobalEscKeyDown(shown, onEscapeKeyDown);\n\n  return (\n    <React.Fragment>\n      {child}\n      {tooltip}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEscKeyDown","usePatchChildren","animationFadeClassNames","getArrowCoordsByMiddlewareData","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","TooltipBase","Tooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableTriggerOnFocus","defaultShown","shown","shownProp","onShownChange","hoverDelay","enableInteractive","disableArrow","disableCloseAfterClick","children","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","arrowRef","setArrowRef","useState","middlewares","strictPlacement","arrow","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onEscapeKeyDown","trigger","closeAfterClick","disableInteractive","tooltipRef","setFloating","tooltip","arrowProps","undefined","coords","out","in","onCloseIconClick","child","setReference","Fragment"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAOxF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AASrC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC9C;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,mIAWrB,gBAAgB,KAAG,KAAK,CAAC,SAsC3B,CAAC"}
+{"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAOxF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AASrC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC9C;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,mIAWrB,gBAAgB,KAAG,KAAK,CAAC,SA4C3B,CAAC"}

package/dist/components/TooltipBase/TooltipBase.js

@@ -53,10 +53,12 @@ const stylesAppearance = {
                     /*#__PURE__*/ _jsxs("div", {
                         children: [
                             hasReactNode(title) && /*#__PURE__*/ _jsx(Subhead, {
+                                className: "vkuiTooltipBase__title",
                                 weight: "2",
                                 children: title
                             }),
                             hasReactNode(description) && /*#__PURE__*/ _jsx(Subhead, {
+                                className: "vkuiTooltipBase__description",
                                 children: description
                             })
                         ]

package/dist/components/TooltipBase/TooltipBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  white: styles.appearanceWhite,\n  black: styles.appearanceBlack,\n  inversion: styles.appearanceInversion,\n};\n\nexport interface TooltipBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' | 'title'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  description?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  title?: React.ReactNode;\n  /**\n   * Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n   */\n  arrowProps?: Omit<FloatingArrowProps, 'Icon'>;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n   */\n  ArrowIcon?: FloatingArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\n  /**\n   * Скрытый текст для кнопки закрытия.\n   */\n  closeIconLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n   */\n  onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n * @private\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n  description,\n  title,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  closeIconLabel = 'Закрыть',\n  onCloseIconClick,\n  className,\n  ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      role=\"tooltip\"\n    >\n      {arrowProps && (\n        <FloatingArrow\n          {...arrowProps}\n          iconClassName={classNames(styles.arrow, arrowProps.iconClassName)}\n          Icon={ArrowIcon}\n        />\n      )}\n      <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>\n        <div>\n          {hasReactNode(title) && <Subhead weight=\"2\">{title}</Subhead>}\n          {hasReactNode(description) && <Subhead>{description}</Subhead>}\n        </div>\n        {typeof onCloseIconClick === 'function' && (\n          <Tappable\n            Component=\"button\"\n            className={styles.closeButton}\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCloseIconClick}\n          >\n            <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n            <Icon16Cancel display=\"block\" />\n          </Tappable>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","role","iconClassName","Icon","div","style","undefined","weight","Component","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,kCAA+B;AAC3D,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AAsDA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYf,WAAW,EACvBgB,WAAW,EACXC,KAAK,EACLC,WAAWZ,iBAAiB,EAC5Ba,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EAEQ,WADdC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACnB,uDACKoB;QACJC,eAAezB,oCAEbe,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDQ;QAEFG,MAAK;;YAEJV,4BACC,KAACb,uDACKa;gBACJW,eAAe3B,qCAAyBgB,WAAWW,aAAa;gBAChEC,MAAMX;;0BAGV,MAACY;gBAAIN,SAAS;gBAAkBO,OAAOV,aAAa,OAAO;oBAAEA;gBAAS,IAAIW;;kCACxE,MAACF;;4BACE5B,aAAakB,wBAAU,KAACb;gCAAQ0B,QAAO;0CAAKb;;4BAC5ClB,aAAaiB,8BAAgB,KAACZ;0CAASY;;;;oBAEzC,OAAOI,qBAAqB,4BAC3B,MAACjB;wBACC4B,WAAU;wBACVV,SAAS;wBACTW,WAAU;wBACVC,YAAW;wBACXC,SAASd;;0CAET,KAACf;0CAAgBc;;0CACjB,KAACtB;gCAAasC,SAAQ;;;;;;;;AAMlC,EAAE"}
+{"version":3,"sources":["../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  white: styles.appearanceWhite,\n  black: styles.appearanceBlack,\n  inversion: styles.appearanceInversion,\n};\n\nexport interface TooltipBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' | 'title'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  description?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  title?: React.ReactNode;\n  /**\n   * Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n   */\n  arrowProps?: Omit<FloatingArrowProps, 'Icon'>;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n   */\n  ArrowIcon?: FloatingArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\n  /**\n   * Скрытый текст для кнопки закрытия.\n   */\n  closeIconLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n   */\n  onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n * @private\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n  description,\n  title,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  closeIconLabel = 'Закрыть',\n  onCloseIconClick,\n  className,\n  ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      role=\"tooltip\"\n    >\n      {arrowProps && (\n        <FloatingArrow\n          {...arrowProps}\n          iconClassName={classNames(styles.arrow, arrowProps.iconClassName)}\n          Icon={ArrowIcon}\n        />\n      )}\n      <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>\n        <div>\n          {hasReactNode(title) && (\n            <Subhead className={styles.title} weight=\"2\">\n              {title}\n            </Subhead>\n          )}\n          {hasReactNode(description) && (\n            <Subhead className={styles.description}>{description}</Subhead>\n          )}\n        </div>\n        {typeof onCloseIconClick === 'function' && (\n          <Tappable\n            Component=\"button\"\n            className={styles.closeButton}\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCloseIconClick}\n          >\n            <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n            <Icon16Cancel display=\"block\" />\n          </Tappable>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","arrowProps","ArrowIcon","description","title","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","role","iconClassName","Icon","div","style","undefined","weight","Component","hoverMode","activeMode","onClick","display"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,kCAA+B;AAC3D,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AAsDA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYf,WAAW,EACvBgB,WAAW,EACXC,KAAK,EACLC,WAAWZ,iBAAiB,EAC5Ba,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EAEQ,WADdC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACnB,uDACKoB;QACJC,eAAezB,oCAEbe,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDQ;QAEFG,MAAK;;YAEJV,4BACC,KAACb,uDACKa;gBACJW,eAAe3B,qCAAyBgB,WAAWW,aAAa;gBAChEC,MAAMX;;0BAGV,MAACY;gBAAIN,SAAS;gBAAkBO,OAAOV,aAAa,OAAO;oBAAEA;gBAAS,IAAIW;;kCACxE,MAACF;;4BACE5B,aAAakB,wBACZ,KAACb;gCAAQiB,SAAS;gCAAgBS,QAAO;0CACtCb;;4BAGJlB,aAAaiB,8BACZ,KAACZ;gCAAQiB,SAAS;0CAAuBL;;;;oBAG5C,OAAOI,qBAAqB,4BAC3B,MAACjB;wBACC4B,WAAU;wBACVV,SAAS;wBACTW,WAAU;wBACVC,YAAW;wBACXC,SAASd;;0CAET,KAACf;0CAAgBc;;0CACjB,KAACtB;gCAAasC,SAAQ;;;;;;;;AAMlC,EAAE"}