@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/context/CalendarDirectionContext.d.ts

@@ -1,4 +1,4 @@
-import { type Direction } from '../hooks/useDirection';
+import { type Direction } from '../lib/direction';
 export interface CalendarDirectionContextProps {
     direction: Direction;
 }

package/dist/context/CalendarDirectionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDirectionContext.d.ts","sourceRoot":"","sources":["../../src/context/CalendarDirectionContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,WAAW,6BAA6B;IAC5C,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,wDAEnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,qCAA6C,CAAC"}
+{"version":3,"file":"CalendarDirectionContext.d.ts","sourceRoot":"","sources":["../../src/context/CalendarDirectionContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,6BAA6B;IAC5C,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,wDAEnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,qCAA6C,CAAC"}

package/dist/context/CalendarDirectionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../hooks/useDirection';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}
+{"version":3,"sources":["../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../lib/direction';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport type { HasChildren } from '../../types';\nimport { AccordionContent } from './AccordionContent';\nimport { AccordionContext } from './AccordionContext';\nimport { AccordionSummary } from './AccordionSummary';\n\nfunction useAccordionId(id: AccordionProps['id']) {\n  const generatedId = React.useId();\n  const labelId = id ?? `Accordion${generatedId}`;\n  const contentId = `AccordionContent${id ?? generatedId}`;\n\n  return { labelId, contentId };\n}\n\nexport interface AccordionProps extends HasChildren {\n  id?: string;\n  /**\n   * Управляет раскрытием и скрытием контента.\n   */\n  expanded?: boolean;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Функция изменения\n   */\n  onChange?: (e: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Accordion: React.FC<AccordionProps> & {\n  Summary: typeof AccordionSummary;\n  Content: typeof AccordionContent;\n} = ({\n  id,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onChange: onChangeProp,\n  children,\n  ...restProps\n}: AccordionProps) => {\n  const { labelId, contentId } = useAccordionId(id);\n\n  const [expanded, onChange] = useCustomEnsuredControl({\n    value: expandedProp,\n    defaultValue: defaultExpanded,\n    onChange: onChangeProp,\n    disabled: restProps.disabled,\n  });\n\n  const context = React.useMemo(\n    () => ({\n      labelId,\n      contentId,\n      expanded: expanded || false,\n      onChange,\n    }),\n    [contentId, expanded, labelId, onChange],\n  );\n\n  return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;\n};\n\nAccordion.displayName = 'Accordion';\n\nAccordion.Summary = AccordionSummary;\nAccordion.Summary.displayName = 'Accordion.Summary';\n\nAccordion.Content = AccordionContent;\nAccordion.Content.displayName = 'Accordion.Content';\n"],"names":["React","useCustomEnsuredControl","AccordionContent","AccordionContext","AccordionSummary","useAccordionId","id","generatedId","useId","labelId","contentId","Accordion","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","value","defaultValue","disabled","context","useMemo","Provider","displayName","Summary","Content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mCAAgC;AAExE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AAEtD,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcP,MAAMQ,KAAK;IAC/B,MAAMC,UAAUH,MAAM,CAAC,SAAS,EAAEC,aAAa;IAC/C,MAAMG,YAAY,CAAC,gBAAgB,EAAEJ,MAAMC,aAAa;IAExD,OAAO;QAAEE;QAASC;IAAU;AAC9B;AAmBA,OAAO,MAAMC,YAGT,CAAC,EACHL,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACY;IACf,MAAM,EAAET,OAAO,EAAEC,SAAS,EAAE,GAAGL,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGd,wBAAwB;QACnDkB,OAAON;QACPO,cAAcN;QACdC,UAAUC;QACVK,UAAUH,UAAUG,QAAQ;IAC9B;IAEA,MAAMC,UAAUtB,MAAMuB,OAAO,CAC3B,IAAO,CAAA;YACLd;YACAC;YACAE,UAAUA,YAAY;YACtBG;QACF,CAAA,GACA;QAACL;QAAWE;QAAUH;QAASM;KAAS;IAG1C,qBAAO,KAACZ,iBAAiBqB,QAAQ;QAACL,OAAOG;kBAAUL;;AACrD,EAAE;AAEFN,UAAUc,WAAW,GAAG;AAExBd,UAAUe,OAAO,GAAGtB;AACpBO,UAAUe,OAAO,CAACD,WAAW,GAAG;AAEhCd,UAAUgB,OAAO,GAAGzB;AACpBS,UAAUgB,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport type { HasChildren } from '../../types';\nimport { AccordionContent } from './AccordionContent';\nimport { AccordionContext } from './AccordionContext';\nimport { AccordionSummary } from './AccordionSummary';\n\nfunction useAccordionId(id: AccordionProps['id']) {\n  const generatedId = React.useId();\n  const labelId = id ?? `Accordion${generatedId}`;\n  const contentId = `AccordionContent${id ?? generatedId}`;\n\n  return { labelId, contentId };\n}\n\nexport interface AccordionProps extends HasChildren {\n  id?: string;\n  /**\n   * Управляет раскрытием и скрытием контента.\n   */\n  expanded?: boolean;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Возвращает новое значение при изменении раскрытия/сворачивания контента.\n   */\n  onChange?: (newValue: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Accordion: React.FC<AccordionProps> & {\n  Summary: typeof AccordionSummary;\n  Content: typeof AccordionContent;\n} = ({\n  id,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onChange: onChangeProp,\n  children,\n  ...restProps\n}: AccordionProps) => {\n  const { labelId, contentId } = useAccordionId(id);\n\n  const [expanded, onChange] = useCustomEnsuredControl({\n    value: expandedProp,\n    defaultValue: defaultExpanded,\n    onChange: onChangeProp,\n    disabled: restProps.disabled,\n  });\n\n  const context = React.useMemo(\n    () => ({\n      labelId,\n      contentId,\n      expanded: expanded || false,\n      onChange,\n    }),\n    [contentId, expanded, labelId, onChange],\n  );\n\n  return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;\n};\n\nAccordion.displayName = 'Accordion';\n\nAccordion.Summary = AccordionSummary;\nAccordion.Summary.displayName = 'Accordion.Summary';\n\nAccordion.Content = AccordionContent;\nAccordion.Content.displayName = 'Accordion.Content';\n"],"names":["React","useCustomEnsuredControl","AccordionContent","AccordionContext","AccordionSummary","useAccordionId","id","generatedId","useId","labelId","contentId","Accordion","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","value","defaultValue","disabled","context","useMemo","Provider","displayName","Summary","Content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mCAAgC;AAExE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AAEtD,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcP,MAAMQ,KAAK;IAC/B,MAAMC,UAAUH,MAAM,CAAC,SAAS,EAAEC,aAAa;IAC/C,MAAMG,YAAY,CAAC,gBAAgB,EAAEJ,MAAMC,aAAa;IAExD,OAAO;QAAEE;QAASC;IAAU;AAC9B;AAmBA,OAAO,MAAMC,YAGT,CAAC,EACHL,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EACR,GAAGC,WACY;IACf,MAAM,EAAET,OAAO,EAAEC,SAAS,EAAE,GAAGL,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGd,wBAAwB;QACnDkB,OAAON;QACPO,cAAcN;QACdC,UAAUC;QACVK,UAAUH,UAAUG,QAAQ;IAC9B;IAEA,MAAMC,UAAUtB,MAAMuB,OAAO,CAC3B,IAAO,CAAA;YACLd;YACAC;YACAE,UAAUA,YAAY;YACtBG;QACF,CAAA,GACA;QAACL;QAAWE;QAAUH;QAASM;KAAS;IAG1C,qBAAO,KAACZ,iBAAiBqB,QAAQ;QAACL,OAAOG;kBAAUL;;AACrD,EAAE;AAEFN,UAAUc,WAAW,GAAG;AAExBd,UAAUe,OAAO,GAAGtB;AACpBO,UAAUe,OAAO,CAACD,WAAW,GAAG;AAEhCd,UAAUgB,OAAO,GAAGzB;AACpBS,UAAUgB,OAAO,CAACF,WAAW,GAAG"}

package/dist/cssm/components/Accordion/Accordion.module.css

@@ -71,34 +71,34 @@
 
 @keyframes animation-accordion-fade-in {
   0% {
-    opacity: 0;
     block-size: var(--vkui_internal--AccordionContent_height);
+    opacity: 0;
   }
 
   50% {
-    opacity: 0;
     block-size: var(--vkui_internal--AccordionContent_height);
+    opacity: 0;
   }
 
   100% {
-    opacity: 1;
     block-size: var(--vkui_internal--AccordionContent_height);
+    opacity: 1;
   }
 }
 
 @keyframes animation-accordion-fade-out {
   0% {
-    opacity: 1;
     block-size: var(--vkui_internal--AccordionContent_height);
+    opacity: 1;
   }
 
   50% {
-    opacity: 0;
     block-size: var(--vkui_internal--AccordionContent_height);
+    opacity: 0;
   }
 
   100% {
-    opacity: 0;
     block-size: var(--vkui_internal--AccordionContent_height);
+    opacity: 0;
   }
 }

package/dist/cssm/components/ActionSheet/ActionSheet.js

@@ -107,7 +107,7 @@ import styles from "./ActionSheet.module.css";
             className: className,
             style: style,
             onClick: onCloseWithOther,
-            fixed: true,
+            strategy: "fixed",
             children: actionSheet
         })
     });

package/dist/cssm/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 { 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","styles","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","contentWrapper","header","weight","closeItemWrapperIos","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<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'allowClickPropagation'\n    >,\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        strategy=\"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","styles","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","contentWrapper","header","weight","closeItemWrapperIos","noBackground","alignY","onClick","strategy"],"mappings":"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"}

package/dist/cssm/components/ActionSheet/ActionSheet.module.css

@@ -2,10 +2,10 @@
   --vkui_internal--actionsheet_animation_opacity_initial: 1;
   --vkui_internal--actionsheet_animation_translateY_initial: 100%;
 
+  box-sizing: border-box;
   inline-size: 100%;
   max-inline-size: var(--vkui--size_popup_small--regular);
   padding: 10px;
-  box-sizing: border-box;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -19,15 +19,15 @@
   padding-block: 8px;
   padding-inline: 0;
   overflow: hidden;
+  background: var(--vkui--color_background_modal);
   border-radius: 12px;
   box-shadow: var(--vkui--elevation3);
-  background: var(--vkui--color_background_modal);
 }
 
 .header {
-  color: var(--vkui--color_text_subhead);
   padding-block: 16px;
   padding-inline: 16px;
+  color: var(--vkui--color_text_subhead);
 }
 
 .opening {
@@ -56,16 +56,16 @@
 }
 
 .ios .contentWrapper {
-  border-radius: 14px;
   padding: 0;
+  border-radius: 14px;
 }
 
 .closeItemWrapperIos {
   margin-block: 8px var(--vkui_internal--safe_area_inset_bottom);
   overflow: hidden;
+  background: var(--vkui--color_background_modal);
   border-radius: 14px;
   box-shadow: var(--vkui--elevation3);
-  background: var(--vkui--color_background_modal);
 }
 
 .ios.closing {
@@ -87,12 +87,12 @@
 
 .ios .header::before {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  background-color: var(--vkui--color_background_modal);
   content: '';
+  background-color: var(--vkui--color_background_modal);
 }
 
 /**
@@ -112,14 +112,14 @@
   --vkui_internal--actionsheet_animation_translateY_initial: 5%;
 
   inline-size: auto;
+  max-inline-size: 100%;
   block-size: auto;
   padding: 0;
-  max-inline-size: 100%;
 }
 
 .menu.ios .contentWrapper {
-  border-radius: 14px;
   padding: 0;
+  border-radius: 14px;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

package/dist/cssm/components/ActionSheet/ActionSheetDropdownMenu.js

@@ -8,6 +8,7 @@ import { useEventListener } from "../../hooks/useEventListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useDOM } from "../../lib/dom.js";
 import { isRefObject } from "../../lib/isRefObject.js";
+import { stopPropagation } from "../../lib/utils.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { Popper } from "../Popper/Popper.js";
@@ -16,7 +17,7 @@ const warn = warnOnce('ActionSheet');
 function getEl(ref) {
     return ref && 'current' in ref ? ref.current : ref;
 }
-export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose, className, style, popupOffsetDistance = 0, placement, onAnimationStart, onAnimationEnd, ...restProps })=>{
+export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose, className, style, popupOffsetDistance = 0, placement, onAnimationStart, onAnimationEnd, allowClickPropagation = false, onClick, ...restProps })=>{
     const { document } = useDOM();
     const platform = usePlatform();
     const { sizeY } = useAdaptivityWithJSMediaQueries();
@@ -43,7 +44,6 @@ export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose,
         bodyClickListener,
         document
     ]);
-    const onClick = React.useCallback((e)=>e.stopPropagation(), []);
     const targetRef = React.useMemo(()=>{
         if (isRefObject(toggleRef)) {
             return toggleRef;
@@ -54,6 +54,10 @@ export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose,
     }, [
         toggleRef
     ]);
+    const handleClick = allowClickPropagation ? onClick : (event)=>{
+        stopPropagation(event);
+        onClick?.(event);
+    };
     return /*#__PURE__*/ _jsx(Popper, {
         targetRef: targetRef,
         offsetByMainAxis: popupOffsetDistance,
@@ -67,7 +71,7 @@ export const ActionSheetDropdownMenu = ({ children, toggleRef, closing, onClose,
         children: /*#__PURE__*/ _jsx(FocusTrap, {
             onClose: onClose,
             ...restProps,
-            onClick: onClick,
+            onClick: handleClick,
             children: children
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownMenu = ({\n  children,\n  toggleRef,\n  closing,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  placement,\n  onAnimationStart,\n  onAnimationEnd,\n  ...restProps\n}: SharedDropdownProps): React.ReactNode => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={popupOffsetDistance}\n      placement={placement}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        styles.menu,\n        closing ? styles.closing : styles.opening,\n        sizeY === 'compact' && styles.sizeYCompact,\n        className,\n      )}\n      style={style}\n      getRootRef={elementRef}\n      usePortal={false}\n      onAnimationStart={onAnimationStart}\n      onAnimationEnd={onAnimationEnd}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","useDOM","isRefObject","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownMenu","children","toggleRef","closing","onClose","className","style","popupOffsetDistance","placement","onAnimationStart","onAnimationEnd","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","useMemo","offsetByMainAxis","host","ios","menu","opening","sizeYCompact","getRootRef","usePortal"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AACpD,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,MAAM,QAAQ,sBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEA,OAAO,MAAME,0BAA0B,CAAC,EACtCC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,sBAAsB,CAAC,EACvBC,SAAS,EACTC,gBAAgB,EAChBC,cAAc,EACd,GAAGC,WACiB;IACpB,MAAM,EAAEC,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,WAAWxB;IACjB,MAAM,EAAEyB,KAAK,EAAE,GAAG5B;IAClB,MAAM6B,aAAa/B,MAAMgC,MAAM,CAAwB;IAEvD7B,aAAa;QACX,MAAM8B,WAAWpB,MAAMK;QACvB,IAAI,CAACe,UAAU;YACbrB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMgB,oBAAoB9B,iBAAiB,SAAS,CAAC+B;QACnD,MAAMC,kBAAkBL,YAAYhB;QACpC,IAAIqB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClElB;QACF;IACF;IAEApB,MAAMuC,SAAS,CAAC;QACdC,WAAW;YACTN,kBAAkBO,GAAG,CAACb,SAAUc,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBN;KAAS;IAEhC,MAAMe,UAAU3C,MAAM4C,WAAW,CAAC,CAACT,IAAqCA,EAAEU,eAAe,IAAI,EAAE;IAE/F,MAAMC,YAAY9C,MAAM+C,OAAO,CAAC;QAC9B,IAAIxC,YAA2DW,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,KAACR;QACCoC,WAAWA;QACXE,kBAAkBzB;QAClBC,WAAWA;QACXH,WAAWpB,WACTU,OAAOsC,IAAI,EACXpB,aAAa,SAASlB,OAAOuC,GAAG,EAChCvC,OAAOwC,IAAI,EACXhC,UAAUR,OAAOQ,OAAO,GAAGR,OAAOyC,OAAO,EACzCtB,UAAU,aAAanB,OAAO0C,YAAY,EAC1ChC;QAEFC,OAAOA;QACPgC,YAAYvB;QACZwB,WAAW;QACX9B,kBAAkBA;QAClBC,gBAAgBA;kBAEhB,cAAA,KAACjB;YAAUW,SAASA;YAAU,GAAGO,SAAS;YAAEgB,SAASA;sBAClD1B;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { stopPropagation } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownMenu = ({\n  children,\n  toggleRef,\n  closing,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  placement,\n  onAnimationStart,\n  onAnimationEnd,\n  allowClickPropagation = false,\n  onClick,\n  ...restProps\n}: SharedDropdownProps): React.ReactNode => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  const handleClick = allowClickPropagation\n    ? onClick\n    : (event: React.MouseEvent<HTMLElement>) => {\n        stopPropagation(event);\n        onClick?.(event);\n      };\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={popupOffsetDistance}\n      placement={placement}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        styles.menu,\n        closing ? styles.closing : styles.opening,\n        sizeY === 'compact' && styles.sizeYCompact,\n        className,\n      )}\n      style={style}\n      getRootRef={elementRef}\n      usePortal={false}\n      onAnimationStart={onAnimationStart}\n      onAnimationEnd={onAnimationEnd}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={handleClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","useDOM","isRefObject","stopPropagation","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownMenu","children","toggleRef","closing","onClose","className","style","popupOffsetDistance","placement","onAnimationStart","onAnimationEnd","allowClickPropagation","onClick","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","targetRef","useMemo","handleClick","event","offsetByMainAxis","host","ios","menu","opening","sizeYCompact","getRootRef","usePortal"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AACpD,SAASC,eAAe,QAAQ,qBAAkB;AAClD,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,MAAM,QAAQ,sBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEA,OAAO,MAAME,0BAA0B,CAAC,EACtCC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,sBAAsB,CAAC,EACvBC,SAAS,EACTC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,KAAK,EAC7BC,OAAO,EACP,GAAGC,WACiB;IACpB,MAAM,EAAEC,QAAQ,EAAE,GAAGzB;IACrB,MAAM0B,WAAW3B;IACjB,MAAM,EAAE4B,KAAK,EAAE,GAAG/B;IAClB,MAAMgC,aAAalC,MAAMmC,MAAM,CAAwB;IAEvDhC,aAAa;QACX,MAAMiC,WAAWtB,MAAMK;QACvB,IAAI,CAACiB,UAAU;YACbvB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMkB,oBAAoBjC,iBAAiB,SAAS,CAACkC;QACnD,MAAMC,kBAAkBL,YAAYlB;QACpC,IAAIuB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClEpB;QACF;IACF;IAEArB,MAAM0C,SAAS,CAAC;QACdC,WAAW;YACTN,kBAAkBO,GAAG,CAACb,SAAUc,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBN;KAAS;IAEhC,MAAMe,YAAY9C,MAAM+C,OAAO,CAAC;QAC9B,IAAIxC,YAA2DY,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,MAAM6B,cAAcpB,wBAChBC,UACA,CAACoB;QACCzC,gBAAgByC;QAChBpB,UAAUoB;IACZ;IAEJ,qBACE,KAACtC;QACCmC,WAAWA;QACXI,kBAAkB1B;QAClBC,WAAWA;QACXH,WAAWrB,WACTW,OAAOuC,IAAI,EACXnB,aAAa,SAASpB,OAAOwC,GAAG,EAChCxC,OAAOyC,IAAI,EACXjC,UAAUR,OAAOQ,OAAO,GAAGR,OAAO0C,OAAO,EACzCrB,UAAU,aAAarB,OAAO2C,YAAY,EAC1CjC;QAEFC,OAAOA;QACPiC,YAAYtB;QACZuB,WAAW;QACX/B,kBAAkBA;QAClBC,gBAAgBA;kBAEhB,cAAA,KAACjB;YAAUW,SAASA;YAAU,GAAGS,SAAS;YAAED,SAASmB;sBAClD9B;;;AAIT,EAAE"}

package/dist/cssm/components/ActionSheet/ActionSheetDropdownSheet.js

@@ -4,16 +4,20 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
+import { stopPropagation } from "../../lib/utils.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import styles from "./ActionSheet.module.css";
-const stopPropagation = (e)=>e.stopPropagation();
 export const ActionSheetDropdownSheet = ({ children, closing, // these 2 props are only omitted - ActionSheetDesktop compat
-toggleRef, className, ...restProps })=>{
+toggleRef, className, onClick, allowClickPropagation = false, ...restProps })=>{
     const { sizeY } = useAdaptivityWithJSMediaQueries();
     const platform = usePlatform();
+    const handleClick = allowClickPropagation ? onClick : (event)=>{
+        stopPropagation(event);
+        onClick?.(event);
+    };
     return /*#__PURE__*/ _jsx(FocusTrap, {
         ...restProps,
-        onClick: stopPropagation,
+        onClick: handleClick,
         className: classNames(styles.host, platform === 'ios' && styles.ios, closing ? styles.closing : styles.opening, sizeY === 'compact' && styles.sizeYCompact, className),
         children: children
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport type ActionSheetDropdownProps = Omit<\n  SharedDropdownProps,\n  'popupDirection' | 'popupOffsetDistance' | 'placement'\n>;\n\nexport const ActionSheetDropdownSheet = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  className,\n  ...restProps\n}: SharedDropdownProps): React.ReactNode => {\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        closing ? styles.closing : styles.opening,\n        sizeY === 'compact' && styles.sizeYCompact,\n        className,\n      )}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","FocusTrap","styles","stopPropagation","e","ActionSheetDropdownSheet","children","closing","toggleRef","className","restProps","sizeY","platform","onClick","host","ios","opening","sizeYCompact"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,SAAS,QAAQ,4BAAyB;AAEnD,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,kBAA2C,CAACC,IAAMA,EAAED,eAAe;AAOzE,OAAO,MAAME,2BAA2B,CAAC,EACvCC,QAAQ,EACRC,OAAO,EACP,6DAA6D;AAC7DC,SAAS,EACTC,SAAS,EACT,GAAGC,WACiB;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGZ;IAClB,MAAMa,WAAWZ;IAEjB,qBACE,KAACC;QACE,GAAGS,SAAS;QACbG,SAASV;QACTM,WAAWX,WACTI,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCR,UAAUL,OAAOK,OAAO,GAAGL,OAAOc,OAAO,EACzCL,UAAU,aAAaT,OAAOe,YAAY,EAC1CR;kBAGDH;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { stopPropagation } from '../../lib/utils';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nexport type ActionSheetDropdownProps = Omit<\n  SharedDropdownProps,\n  'popupDirection' | 'popupOffsetDistance' | 'placement'\n>;\n\nexport const ActionSheetDropdownSheet = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  className,\n  onClick,\n  allowClickPropagation = false,\n  ...restProps\n}: SharedDropdownProps): React.ReactNode => {\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const handleClick = allowClickPropagation\n    ? onClick\n    : (event: React.MouseEvent<HTMLElement>) => {\n        stopPropagation(event);\n        onClick?.(event);\n      };\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={handleClick}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        closing ? styles.closing : styles.opening,\n        sizeY === 'compact' && styles.sizeYCompact,\n        className,\n      )}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","stopPropagation","FocusTrap","styles","ActionSheetDropdownSheet","children","closing","toggleRef","className","onClick","allowClickPropagation","restProps","sizeY","platform","handleClick","event","host","ios","opening","sizeYCompact"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,eAAe,QAAQ,qBAAkB;AAClD,SAASC,SAAS,QAAQ,4BAAyB;AAEnD,OAAOC,YAAY,2BAA2B;AAO9C,OAAO,MAAMC,2BAA2B,CAAC,EACvCC,QAAQ,EACRC,OAAO,EACP,6DAA6D;AAC7DC,SAAS,EACTC,SAAS,EACTC,OAAO,EACPC,wBAAwB,KAAK,EAC7B,GAAGC,WACiB;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGb;IAClB,MAAMc,WAAWb;IAEjB,MAAMc,cAAcJ,wBAChBD,UACA,CAACM;QACCd,gBAAgBc;QAChBN,UAAUM;IACZ;IAEJ,qBACE,KAACb;QACE,GAAGS,SAAS;QACbF,SAASK;QACTN,WAAWV,WACTK,OAAOa,IAAI,EACXH,aAAa,SAASV,OAAOc,GAAG,EAChCX,UAAUH,OAAOG,OAAO,GAAGH,OAAOe,OAAO,EACzCN,UAAU,aAAaT,OAAOgB,YAAY,EAC1CX;kBAGDH;;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PlacementWithAuto } from '../../lib/floating/types/common';\nimport { type FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element | null>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   */\n  toggleRef: ToggleRef;\n  /**\n   * Позиционирование всплывающего окна для десктопа.\n   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":[],"mappings":"AAMA,WAgBC"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PlacementWithAuto } from '../../lib/floating/types/common';\nimport { type FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element | null>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   */\n  toggleRef: ToggleRef;\n  /**\n   * Позиционирование всплывающего окна для десктопа.\n   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n  /**\n   * По умолчанию событие onClick не всплывает\n   */\n  allowClickPropagation?: boolean;\n}\n"],"names":[],"mappings":"AAMA,WAoBC"}

package/dist/cssm/components/ActionSheetItem/ActionSheetItem.module.css

@@ -1,14 +1,14 @@
 .host {
   position: relative;
-  overflow: hidden;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  text-decoration: none;
-  color: var(--vkui--color_text_primary);
+  min-block-size: 48px;
   padding-block: 0;
   padding-inline: 16px;
-  min-block-size: 48px;
-  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--vkui--color_text_primary);
+  text-decoration: none;
 }
 
 .container,
@@ -23,8 +23,8 @@
 }
 
 .container {
-  max-inline-size: 100%;
   flex-grow: 1;
+  max-inline-size: 100%;
   padding-block: 10px;
   padding-inline: 0;
 }
@@ -37,8 +37,8 @@
 .content {
   display: flex;
   align-items: baseline;
-  overflow: hidden;
   justify-content: space-between;
+  overflow: hidden;
 }
 
 .ellipsis .content {
@@ -52,24 +52,24 @@
 }
 
 .subtitle {
-  color: var(--vkui--color_text_secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
   -webkit-margin-before: 2px;
           margin-block-start: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_secondary);
 }
 
 .meta {
-  color: var(--vkui--color_text_secondary);
+  flex-shrink: 0;
   -webkit-margin-start: 6px;
           margin-inline-start: 6px;
-  flex-shrink: 0;
+  color: var(--vkui--color_text_secondary);
 }
 
 .before {
-  color: var(--vkui--color_icon_accent);
   -webkit-margin-end: 16px;
           margin-inline-end: 16px;
+  color: var(--vkui--color_icon_accent);
 }
 
 .menu .before {
@@ -78,9 +78,9 @@
 }
 
 .ios .before {
-  color: var(--vkui--color_icon_accent_themed);
   -webkit-margin-end: 18px;
           margin-inline-end: 18px;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .modeDestructive .container:first-child {
@@ -111,9 +111,9 @@
  */
 
 .ios {
+  min-block-size: 56px;
   padding-block: 14px;
   padding-inline: 18px;
-  min-block-size: 56px;
   color: var(--vkui--color_text_accent_themed);
   background: var(--vkui--color_background_modal);
 }
@@ -128,12 +128,12 @@
 
 .ios::before {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  background-color: var(--vkui--color_background_modal);
   content: '';
+  background-color: var(--vkui--color_background_modal);
   transition:
     opacity 0.15s ease-out,
     background-color 0.15s ease-out;
@@ -141,10 +141,10 @@
 
 .ios::after {
   position: absolute;
+  inset-block-start: 0;
   inset-inline: 0;
   block-size: 1px;
   content: '';
-  inset-block-start: 0;
   background: var(--vkui--color_separator_primary_alpha);
   transform-origin: center bottom;
 }

package/dist/cssm/components/Alert/Alert.js

@@ -1,59 +1,23 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { Icon20Cancel } from "@vkontakte/icons";
-import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { usePlatform } from "../../hooks/usePlatform.js";
-import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
-import { stopPropagation } from "../../lib/utils.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
-import { FocusTrap } from "../FocusTrap/FocusTrap.js";
-import { IconButton } from "../IconButton/IconButton.js";
-import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper.js";
-import { AlertActions } from "./AlertActions.js";
-import { AlertDescription, AlertTitle } from "./AlertTypography.js";
-import styles from "./Alert.module.css";
+import { AlertBase } from "./AlertBase.js";
+const warn = warnOnce('Alert');
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
- */ export const Alert = ({ actions, actionsLayout = 'horizontal', children, className, style, title, description, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, dismissButtonMode = 'outside', dismissButtonTestId, getRootRef, usePortal, ...restProps })=>{
-    const generatedId = React.useId();
-    const titleId = `vkui-alert-${generatedId}-title`;
-    const descriptionId = `vkui-alert-${generatedId}-description`;
-    const platform = usePlatform();
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
+ */ export const Alert = ({ usePortal, style, className, getRootRef, ...restProps })=>{
     const [closing, setClosing] = React.useState(false);
-    const itemActionCallbackRef = React.useRef(noop);
-    const [animationState, animationHandlers] = useCSSKeyframesAnimationController(closing ? 'exit' : 'enter', {
-        onExited () {
-            itemActionCallbackRef.current();
-            itemActionCallbackRef.current = noop;
-            onClose();
-        }
-    });
-    const isDismissButtonVisible = isDesktop && platform !== 'ios';
-    const elementRef = React.useRef(null);
     const close = React.useCallback(()=>{
         setClosing(true);
     }, []);
-    const onItemClick = React.useCallback((item)=>{
-        const { action: itemAction, autoCloseDisabled = false } = item;
-        if (autoCloseDisabled) {
-            itemAction && itemAction({
-                close
-            });
-        } else {
-            if (itemAction) {
-                itemActionCallbackRef.current = itemAction;
-            }
-            setClosing(true);
-        }
-    }, [
-        close
-    ]);
     useScrollLock();
+    if (process.env.NODE_ENV === 'development' && !restProps.title && !restProps['aria-label'] && !restProps['aria-labelledby']) {
+        warn('Если "title" не используется, то необходимо задать либо "aria-label", либо "aria-labelledby" (см. правило axe aria-dialog-name)');
+    }
     return /*#__PURE__*/ _jsx(AppRootPortal, {
         usePortal: usePortal,
         children: /*#__PURE__*/ _jsx(PopoutWrapper, {
@@ -62,55 +26,11 @@ import styles from "./Alert.module.css";
             style: style,
             onClick: close,
             getRootRef: getRootRef,
-            children: /*#__PURE__*/ _jsxs(FocusTrap, {
+            strategy: "fixed",
+            children: /*#__PURE__*/ _jsx(AlertBase, {
                 ...restProps,
-                ...animationHandlers,
-                getRootRef: elementRef,
-                onClick: stopPropagation,
-                onClose: close,
-                autoFocus: animationState === 'entered',
-                className: classNames(styles.host, platform === 'ios' && styles.ios, platform === 'vkcom' && styles.vkcom, closing ? styles.closing : styles.opening, isDesktop && styles.desktop),
-                role: "alertdialog",
-                "aria-modal": true,
-                "aria-labelledby": titleId,
-                "aria-describedby": descriptionId,
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: classNames(styles.content, dismissButtonMode === 'inside' && styles.contentWithButton),
-                        children: [
-                            hasReactNode(title) && /*#__PURE__*/ _jsx(AlertTitle, {
-                                id: titleId,
-                                children: title
-                            }),
-                            hasReactNode(description) && /*#__PURE__*/ _jsx(AlertDescription, {
-                                id: descriptionId,
-                                children: description
-                            }),
-                            children,
-                            isDismissButtonVisible && dismissButtonMode === 'inside' && /*#__PURE__*/ _jsx(IconButton, {
-                                label: dismissLabel,
-                                className: classNames(styles.dismiss, 'vkuiInternalAlert__dismiss'),
-                                onClick: close,
-                                hoverMode: "opacity",
-                                activeMode: "opacity",
-                                "data-testid": dismissButtonTestId,
-                                children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
-                            })
-                        ]
-                    }),
-                    isDismissButtonVisible && dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalDismissButton, {
-                        onClick: close,
-                        "data-testid": dismissButtonTestId,
-                        children: dismissLabel
-                    }),
-                    /*#__PURE__*/ _jsx(AlertActions, {
-                        actions: actions,
-                        actionsAlign: actionsAlign,
-                        actionsLayout: actionsLayout,
-                        renderAction: renderAction,
-                        onItemClick: onItemClick
-                    })
-                ]
+                closing: closing,
+                setClosing: setClosing
             })
         })
     });