@vkontakte/vkui 7.1.3 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.1.3",
+  "version": "7.2.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -81,6 +81,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
+    "@date-fns/tz": "^1.2.0",
     "@swc/helpers": "^0.5.15",
     "@vkontakte/icons": "^2.115.0",
     "@vkontakte/vkjs": "^2.0.1",
@@ -88,12 +89,12 @@
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "8.4.7",
-    "@storybook/react-webpack5": "8.4.7",
+    "@storybook/react": "8.6.6",
+    "@storybook/react-webpack5": "8.6.6",
     "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.4.7",
+    "storybook": "8.6.6",
     "ts-node": "*"
   },
   "size-limit": [

package/src/components/Accordion/Accordion.module.css

@@ -69,33 +69,33 @@
 }
 @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/src/components/Accordion/Accordion.tsx

@@ -26,9 +26,9 @@ export interface AccordionProps extends HasChildren {
    */
   defaultExpanded?: boolean;
   /**
-   * Функция изменения
+   * Возвращает новое значение при изменении раскрытия/сворачивания контента.
    */
-  onChange?: (e: boolean) => void;
+  onChange?: (newValue: boolean) => void;
   disabled?: boolean;
 }
 

package/src/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 (--reduce-motion) {
@@ -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 {
@@ -54,16 +54,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 {
@@ -85,12 +85,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);
 }
 
 /**
@@ -110,14 +110,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 (--reduce-motion) {

package/src/components/ActionSheet/ActionSheet.tsx

@@ -23,7 +23,10 @@ export interface ActionSheetOnCloseOptions {
 }
 
 export interface ActionSheetProps
-  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,
+  extends Pick<
+      SharedDropdownProps,
+      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'allowClickPropagation'
+    >,
     Omit<UseFocusTrapProps, 'onClose'>,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
   title?: React.ReactNode;
@@ -146,7 +149,7 @@ export const ActionSheet = ({
         className={className}
         style={style}
         onClick={onCloseWithOther}
-        fixed
+        strategy="fixed"
       >
         {actionSheet}
       </PopoutWrapper>

package/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -8,6 +8,7 @@ import { useEventListener } from '../../hooks/useEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useDOM } from '../../lib/dom';
 import { isRefObject } from '../../lib/isRefObject';
+import { stopPropagation } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { Popper } from '../Popper/Popper';
@@ -30,6 +31,8 @@ export const ActionSheetDropdownMenu = ({
   placement,
   onAnimationStart,
   onAnimationEnd,
+  allowClickPropagation = false,
+  onClick,
   ...restProps
 }: SharedDropdownProps): React.ReactNode => {
   const { document } = useDOM();
@@ -57,8 +60,6 @@ export const ActionSheetDropdownMenu = ({
     });
   }, [bodyClickListener, document]);
 
-  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);
-
   const targetRef = React.useMemo(() => {
     if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {
       return toggleRef;
@@ -67,6 +68,13 @@ export const ActionSheetDropdownMenu = ({
     return { current: toggleRef as HTMLElement };
   }, [toggleRef]);
 
+  const handleClick = allowClickPropagation
+    ? onClick
+    : (event: React.MouseEvent<HTMLElement>) => {
+        stopPropagation(event);
+        onClick?.(event);
+      };
+
   return (
     <Popper
       targetRef={targetRef}
@@ -86,7 +94,7 @@ export const ActionSheetDropdownMenu = ({
       onAnimationStart={onAnimationStart}
       onAnimationEnd={onAnimationEnd}
     >
-      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>
+      <FocusTrap onClose={onClose} {...restProps} onClick={handleClick}>
         {children}
       </FocusTrap>
     </Popper>

package/src/components/ActionSheet/ActionSheetDropdownSheet.tsx

@@ -4,12 +4,11 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
+import { stopPropagation } from '../../lib/utils';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import type { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
 
-const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
-
 export type ActionSheetDropdownProps = Omit<
   SharedDropdownProps,
   'popupDirection' | 'popupOffsetDistance' | 'placement'
@@ -21,15 +20,24 @@ export const ActionSheetDropdownSheet = ({
   // these 2 props are only omitted - ActionSheetDesktop compat
   toggleRef,
   className,
+  onClick,
+  allowClickPropagation = false,
   ...restProps
 }: SharedDropdownProps): React.ReactNode => {
   const { sizeY } = useAdaptivityWithJSMediaQueries();
   const platform = usePlatform();
 
+  const handleClick = allowClickPropagation
+    ? onClick
+    : (event: React.MouseEvent<HTMLElement>) => {
+        stopPropagation(event);
+        onClick?.(event);
+      };
+
   return (
     <FocusTrap
       {...restProps}
-      onClick={stopPropagation}
+      onClick={handleClick}
       className={classNames(
         styles.host,
         platform === 'ios' && styles.ios,

package/src/components/ActionSheet/types.ts

@@ -20,4 +20,8 @@ export interface SharedDropdownProps extends FocusTrapProps {
    * Отступ, где заданное кол-во единиц равняется пикселям
    * */
   popupOffsetDistance?: number;
+  /**
+   * По умолчанию событие onClick не всплывает
+   */
+  allowClickPropagation?: boolean;
 }

package/src/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,21 +52,21 @@
 }
 
 .subtitle {
-  color: var(--vkui--color_text_secondary);
+  margin-block-start: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-block-start: 2px;
+  color: var(--vkui--color_text_secondary);
 }
 
 .meta {
-  color: var(--vkui--color_text_secondary);
-  margin-inline-start: 6px;
   flex-shrink: 0;
+  margin-inline-start: 6px;
+  color: var(--vkui--color_text_secondary);
 }
 
 .before {
-  color: var(--vkui--color_icon_accent);
   margin-inline-end: 16px;
+  color: var(--vkui--color_icon_accent);
 }
 
 .menu .before {
@@ -74,8 +74,8 @@
 }
 
 .ios .before {
-  color: var(--vkui--color_icon_accent_themed);
   margin-inline-end: 18px;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .modeDestructive .container:first-child {
@@ -103,9 +103,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);
 }
@@ -120,12 +120,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;
@@ -133,10 +133,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/src/components/Alert/Alert.module.css

@@ -1,15 +1,15 @@
 .host {
   --vkui_internal--alert_animation_scale_initial: 0.95;
 
-  user-select: none;
-  color: var(--vkui--color_text_primary);
   position: relative;
   min-inline-size: 280px;
   max-inline-size: 416px;
   margin-block: auto;
   margin-inline: 24px;
-  box-shadow: var(--vkui--elevation4);
+  color: var(--vkui--color_text_primary);
+  user-select: none;
   border-radius: var(--vkui--size_border_radius_paper--regular);
+  box-shadow: var(--vkui--elevation4);
 }
 
 .desktop {
@@ -29,12 +29,12 @@
 
 .host::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);
   border-radius: inherit;
 }
 
@@ -54,9 +54,9 @@
 }
 
 .actions {
+  position: relative;
   display: flex;
   max-inline-size: 100%;
-  position: relative;
   padding-block: 0 12px;
   padding-inline: 12px;
 }
@@ -89,18 +89,18 @@
 }
 
 .actionsAlignLeft {
-  justify-content: flex-start;
   align-items: flex-start;
+  justify-content: flex-start;
 }
 
 .actionsAlignCenter {
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 .actionsAlignRight {
-  justify-content: flex-end;
   align-items: flex-end;
+  justify-content: flex-end;
 }
 
 /**
@@ -134,11 +134,11 @@
 }
 
 .ios .content::after {
-  content: '';
   position: absolute;
   inset-block-end: 0;
-  block-size: 1px;
   inset-inline: 0;
+  block-size: 1px;
+  content: '';
   background: var(--vkui--color_separator_primary_alpha);
   transform-origin: center bottom;
 }
@@ -153,27 +153,27 @@
 }
 
 .ios .action {
-  font-family: var(--vkui--font_family_base);
   position: relative;
-  font-size: 17px;
-  line-height: 44px;
-  color: var(--vkui--color_text_accent);
-  border: 0;
+  display: block;
+  block-size: 44px;
   padding-block: 0;
   padding-inline: 6px;
   margin: 0;
-  block-size: 44px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: var(--vkui--font_family_base);
+  font-size: 17px;
+  line-height: 44px;
+  color: var(--vkui--color_text_accent);
+  text-align: center;
+  text-decoration: none;
+  border: 0;
   border-radius: 0;
 }
 
 .ios .action::after {
-  content: '';
   position: absolute;
+  content: '';
   background: var(--vkui--color_separator_primary_alpha);
 }
 
@@ -204,8 +204,8 @@
 }
 
 .ios .actionsDirectionVertical .action::after {
-  inset-inline-start: 0;
   inset-block-end: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 1px;
   transform-origin: center bottom;
@@ -218,8 +218,8 @@
 .ios .actionsDirectionVertical .action:last-child {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border-end-end-radius: 12px;
   border-end-start-radius: 12px;
+  border-end-end-radius: 12px;
 }
 
 @media (min-resolution: 2dppx) {
@@ -256,10 +256,10 @@
  */
 
 .vkcom {
+  inline-size: 400px;
   box-shadow:
     0 0 2px rgba(0, 0, 0, 0.12),
     0 0 96px rgba(0, 0, 0, 0.16);
-  inline-size: 400px;
 }
 
 .vkcom .content {
@@ -281,9 +281,9 @@
 
 .dismiss {
   position: absolute;
-  color: var(--vkui--color_icon_secondary);
   inset-block-start: 8px;
   inset-inline-end: 8px;
+  color: var(--vkui--color_icon_secondary);
 }
 
 @media (--reduce-motion) {