@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/src/components/Counter/Counter.tsx

@@ -1,18 +1,27 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import { type HTMLAttributesWithRootRef } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';
 import { Headline } from '../Typography/Headline/Headline';
 import styles from './Counter.module.css';
 
 const modeClassNames = {
-  secondary: styles.modeSecondary,
   primary: styles.modePrimary,
-  prominent: styles.modeProminent,
   contrast: styles.modeContrast,
+  tertiary: styles.modeTertiary,
   inherit: styles.modeInherit,
 };
 
+const appearanceClassNames: Record<string, string> = {
+  'custom': styles.appearanceCustom,
+  'accent': styles.appearanceAccent,
+  'neutral': styles.appearanceNeutral,
+  'accent-green': styles.appearanceAccentGreen,
+  'accent-red': styles.appearanceAccentRed,
+};
+
 const sizeClassNames = {
   s: styles.sizeS,
   m: styles.sizeM,
@@ -20,11 +29,24 @@ const sizeClassNames = {
 
 export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
   /**
-   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то
-   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется
-   * режим `secondary`
+   * Режим отображения счетчика
+   */
+  mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit';
+
+  /**
+   * Внешний вид счетчика
    */
-  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';
+  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom';
+
+  /**
+   * Пользовательский цвет (работает только при appearance="custom")
+   * - При mode="primary" - изменяет фон
+   * - При mode="contrast" - изменяет цвет текста
+   * - При mode="tertiary" - изменяет цвет текста
+   * - При mode="inherit" - не работает
+   */
+  color?: string;
+
   size?: 's' | 'm';
 }
 
@@ -33,11 +55,44 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
  */
 export const Counter = ({
   mode = 'inherit',
+  appearance: appearanceProp,
+  color,
   size = 'm',
   children,
   className,
+  style: styleProp,
   ...restProps
 }: CounterProps): React.ReactNode => {
+  const appearance = React.useMemo<CounterProps['appearance']>(() => {
+    if (mode === 'inherit') {
+      return undefined;
+    }
+    if (appearanceProp) {
+      return appearanceProp;
+    }
+    return 'accent';
+  }, [appearanceProp, mode]);
+
+  const style = React.useMemo(() => {
+    if (mode === 'inherit' || appearance !== 'custom' || !color) {
+      return styleProp;
+    }
+    switch (mode) {
+      case 'primary':
+        return {
+          ...styleProp,
+          '--vkui_internal--counter_background': color,
+        };
+      case 'contrast':
+      case 'tertiary':
+        return {
+          ...styleProp,
+          '--vkui_internal--counter_foreground': color,
+        };
+    }
+    return styleProp;
+  }, [appearance, color, mode, styleProp]);
+
   if (React.Children.count(children) === 0) {
     return null;
   }
@@ -48,11 +103,13 @@ export const Counter = ({
   return (
     <CounterTypography
       {...restProps}
+      style={style}
       Component="span"
       className={classNames(
         'vkuiInternalCounter',
         styles.host,
         modeClassNames[mode],
+        !!appearance && appearanceClassNames[appearance],
         sizeClassNames[size],
         className,
       )}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -568,7 +568,13 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       if (!isControlledOutside) {
         setSelectedOptionIndex(newSelectedOptionIndex);
       }
-      onChange?.(remappedNativeValue);
+      if (e.target.value === NOT_SELECTED.NATIVE) {
+        e.target.value = '';
+      }
+      if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+        e.currentTarget.value = '';
+      }
+      onChange?.(e, remappedNativeValue);
     }
   };
 

package/src/components/FormItem/FormItem.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import type { HasComponent, HasRootRef } from '../../types';
 import { Removable, type RemovableProps } from '../Removable/Removable';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -119,7 +118,7 @@ export const FormItem: React.FC<FormItemProps> & {
     </React.Fragment>
   );
 
-  const context = useObjectMemo({ required, topMultiline });
+  const context = React.useMemo(() => ({ required, topMultiline }), [required, topMultiline]);
 
   return (
     <RootComponent

package/src/components/Gallery/Gallery.tsx

@@ -32,7 +32,7 @@ export const Gallery = ({
 }: GalleryProps): React.ReactNode => {
   const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
   const isControlled = typeof props.slideIndex === 'number';
-  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;
+  const slideIndex = isControlled ? (props.slideIndex ?? 0) : localSlideIndex;
   const slides = React.useMemo(
     () => React.Children.toArray(children).filter((item) => Boolean(item)),
     [children],

package/src/components/Group/GroupContainer.tsx

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import type { SizeTypeValues } from '../../lib/adaptivity';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Group.module.css';
 
@@ -90,7 +90,7 @@ export const GroupContainer: React.FC<GroupContainerProps> = ({
   tabIndex: tabIndexProp,
   ...restProps
 }: GroupContainerProps) => {
-  const { isInsideModal } = React.useContext(ModalRootContext);
+  const isInsideModal = useModalContext().id !== null;
   const { sizeX = 'none' } = useAdaptivity();
 
   const mode = useGroupMode(modeProps, sizeX, isInsideModal);

package/src/components/Link/Link.module.css

@@ -14,7 +14,7 @@
 }
 
 @media (--hover-has) {
-  .host:hover {
+  .withUnderline:hover {
     text-decoration: underline;
   }
 }
@@ -23,8 +23,16 @@
   color: var(--vkui--color_text_link_visited);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.host :global(.vkuiIcon) {
+.before,
+.after {
   display: inline-block;
   vertical-align: middle;
 }
+
+.before {
+  margin-inline-end: var(--vkui--spacing_size_xs);
+}
+
+.after {
+  margin-inline-start: var(--vkui--spacing_size_xs);
+}

package/src/components/Link/Link.tsx

@@ -1,10 +1,23 @@
+import type { ReactElement } from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import styles from './Link.module.css';
 
 export interface LinkProps extends TappableProps {
   /**
-   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет
+   * Иконка слева.
+   */
+  before?: ReactElement;
+  /**
+   * Иконка справа.
+   */
+  after?: ReactElement;
+  /**
+   * Выключает появления нижнего подчеркивания при наведении.
+   */
+  noUnderline?: boolean;
+  /**
+   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.
    */
   hasVisited?: boolean;
 }
@@ -13,22 +26,35 @@ export interface LinkProps extends TappableProps {
  * @see https://vkcom.github.io/VKUI/#/Link
  */
 export const Link = ({
+  before: beforeProp,
+  after: afterProp,
+  noUnderline,
   hasVisited,
   children,
   className,
   ...restProps
 }: LinkProps): React.ReactNode => {
+  const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;
+  const after = afterProp ? <span className={styles.after}>{afterProp}</span> : null;
+
   return (
     <Tappable
       Component={restProps.href ? 'a' : 'button'}
       {...restProps}
-      className={classNames(styles.host, hasVisited && styles.hasVisited, className)}
+      className={classNames(
+        styles.host,
+        hasVisited && styles.hasVisited,
+        noUnderline ? undefined : styles.withUnderline,
+        className,
+      )}
       hasHover={false}
       activeMode="opacity"
       hoverMode="none"
       focusVisibleMode="outside"
     >
+      {before}
       {children}
+      {after}
     </Tappable>
   );
 };

package/src/components/ModalCard/ModalCard.module.css

@@ -1,65 +1,81 @@
 .host {
-  box-sizing: border-box;
-  position: absolute;
-  inset-block-start: 0;
-  padding: 8px;
-  inset-inline-start: 0;
+  padding: var(--vkui--spacing_size_m);
+  margin-inline: auto;
   inline-size: 100%;
-  block-size: 100%;
-  display: flex;
-  align-items: flex-end;
+  box-sizing: border-box;
 }
 
 .host:focus {
   outline: none;
 }
 
-.in {
-  inline-size: 100%;
-  margin-inline: auto;
-  transform: translateY(calc(100% + 16px));
-  transition: transform 340ms var(--vkui--animation_easing_platform);
+.hostMaxWidthS {
+  max-inline-size: calc(400px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * iOS
- */
+.hostMaxWidthM {
+  max-inline-size: calc(414px + var(--vkui--spacing_size_2xl));
+}
 
-.ios .in {
-  max-inline-size: 414px;
+.hostMaxWidthL {
+  max-inline-size: calc(440px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * Android + vkcom
- */
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .host {
+    --vkui_internal_ModalCard--translateY: 100%;
+    --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
-.android .in {
-  max-inline-size: 440px;
-}
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+    transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
+    transition: transform 0.4s var(--vkui_internal--spring-easing);
+  }
 
-.vkcom .in {
-  max-inline-size: 400px;
-}
+  .hostStateEnter {
+    transform: translate3d(0, 100%, 0);
+    transition: none;
+  }
 
-/**
- * Desktop
- */
+  .hostStateEntering {
+    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
+  }
 
-.desktop {
-  align-items: center;
-}
+  .hostStateExiting {
+    transform: translate3d(0, 100%, 0);
+    transition: transform 0.2s ease;
+  }
 
-.desktop .in {
-  transform: unset;
-  opacity: 0;
-  transition: opacity 340ms var(--vkui--animation_easing_platform);
+  .hostStateExited {
+    transform: translate3d(0, 100%, 0);
+    transition: none;
+  }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host {
+    margin-block: auto;
+    opacity: 1;
+    transition: opacity 340ms var(--vkui--animation_easing_platform);
+  }
+
+  .hostStateEnter {
+    opacity: 0;
+    transition-property: none;
+  }
+
+  .hostStateEntering {
+    opacity: 1;
+  }
+
+  .hostStateExiting {
+    opacity: 0;
+  }
 
-/**
- * CMP:
- * ModalRoot
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--touched) .in {
-  transition: none;
+  .hostStateExited {
+    opacity: 0;
+  }
 }

package/src/components/ModalCard/ModalCard.tsx

@@ -1,24 +1,12 @@
 'use client';
 
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getNavId, type NavIdProps } from '../../lib/getNavId';
+import { useId } from 'react';
+import { ModalContext } from '../../context/ModalContext';
+import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
-import { ModalCardBase, type ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { RootComponent } from '../RootComponent/RootComponent';
-import styles from './ModalCard.module.css';
-
-const platformClassNames = {
-  ios: styles.ios,
-  android: styles.android,
-  vkcom: styles.vkcom,
-};
-
-export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}
+import { useModalManager } from '../ModalRoot/useModalManager';
+import { ModalCardInternal } from './ModalCardInternal';
+import type { ModalCardProps } from './types';
 
 const warn = warnOnce('ModalCard');
 
@@ -26,66 +14,45 @@ const warn = warnOnce('ModalCard');
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
 export const ModalCard = ({
-  icon,
-  title,
-  titleComponent,
-  description,
-  descriptionComponent,
-  children,
-  actions,
-  onClose,
+  id: idProp,
   nav,
-  id,
-  size,
-  modalDismissButtonTestId,
-  getRootRef,
-  dismissButtonMode,
-  dismissLabel,
+  open = false,
+  modalOverlayTestId,
+  noFocusToDialog,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+  keepMounted = false,
   ...restProps
 }: ModalCardProps): React.ReactNode => {
-  const { isDesktop } = useAdaptivityWithJSMediaQueries();
-  const platform = usePlatform();
-
-  const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), 'card');
-  const rootRef = useExternRef(getRootRef, refs.modalElement);
-
-  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);
+  const generatingId = useId();
+  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
+
+  const { mounted, ...resolvedProps } = useModalManager({
+    id,
+    open,
+    keepMounted,
+    modalOverlayTestId,
+    noFocusToDialog,
+    onOpen,
+    onOpened,
+    onClose,
+    onClosed,
+  });
+
+  if (mounted === false) {
+    return null;
+  }
 
   return (
-    <RootComponent
-      {...restProps}
-      getRootRef={rootRef}
-      tabIndex={-1}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={contextValue.labelId}
-      id={id}
-      baseClassName={classNames(
-        styles.host,
-        platformClassNames.hasOwnProperty(platform)
-          ? platformClassNames[platform]
-          : platformClassNames.android,
-        isDesktop && styles.desktop,
-      )}
-    >
-      <ModalCardBase
-        className={styles.in}
-        getRootRef={refs.innerElement}
-        icon={icon}
-        title={title}
-        titleComponent={titleComponent}
-        description={description}
-        descriptionComponent={descriptionComponent}
-        actions={actions}
-        onClose={onClose || modalContext.onClose}
-        size={size}
-        modalDismissButtonTestId={modalDismissButtonTestId}
-        dismissButtonMode={dismissButtonMode}
-        dismissLabel={dismissLabel}
-      >
-        {children}
-      </ModalCardBase>
-    </RootComponent>
+    <ModalContext.Provider value={id}>
+      <ModalCardInternal
+        id={id}
+        aria-labelledby={`${id}-label`}
+        {...resolvedProps}
+        {...restProps}
+      />
+    </ModalContext.Provider>
   );
 };