@vkontakte/vkui 6.3.1 → 6.4.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.3.1",
+  "version": "6.4.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -68,13 +68,13 @@
   "dependencies": {
     "@swc/helpers": "^0.5.12",
     "@vkontakte/icons": "^2.115.0",
-    "@vkontakte/vkjs": "^1.2.1",
+    "@vkontakte/vkjs": "^1.3.0",
     "@vkontakte/vkui-floating-ui": "^0.2.1",
     "dayjs": "^1.11.12",
     "mitt": "^3.0.1"
   },
   "devDependencies": {
-    "storybook": "8.2.5"
+    "storybook": "8.2.6"
   },
   "size-limit": [
     {

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -37,6 +37,7 @@ export const ChipsInputBase = <O extends ChipOption>({
   after,
   status,
   mode,
+  maxHeight,
 
   // option
   value = DEFAULT_VALUE,
@@ -223,6 +224,7 @@ export const ChipsInputBase = <O extends ChipOption>({
       status={status}
       mode={mode}
       className={className}
+      maxHeight={maxHeight}
       onClick={disabled ? undefined : handleRootClick}
     >
       <div
@@ -240,7 +242,7 @@ export const ChipsInputBase = <O extends ChipOption>({
         onKeyDown={disabled ? undefined : handleListboxKeyDown}
       >
         {value.map((option, index) => (
-          <React.Fragment key={`${typeof option.value}-${option.label}`}>
+          <React.Fragment key={`${typeof option.value}-${option.value}`}>
             {renderChip(
               {
                 'Component': 'div',

package/src/components/ChipsInputBase/types.ts

@@ -123,7 +123,7 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
  */
 export interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>
   extends ChipsInputBaseProps<O>,
-    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {
+    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {
   onClear: () => void;
   onAddChipOption: (value: string) => void;
   onRemoveChipOption: (value: O | ChipOptionValue) => void;

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -522,7 +522,7 @@ export const ChipsSelect = <Option extends ChipOption>({
               );
             }
             return (
-              <React.Fragment key={`${typeof option.value}-${option.label}`}>
+              <React.Fragment key={`${typeof option.value}-${option.value}`}>
                 {renderOption(
                   {
                     id: dropdownItemId,

package/src/components/Clickable/Clickable.tsx

@@ -5,8 +5,8 @@ import {
   useFocusVisibleClassName,
 } from '../../hooks/useFocusVisibleClassName';
 import { mergeCalls } from '../../lib/mergeCalls';
+import { clickByKeyboardHandler } from '../../lib/utils';
 import { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';
-import { useKeyboard } from './useKeyboard';
 import {
   ClickableLockStateContext,
   DEFAULT_ACTIVE_EFFECT_DELAY,
@@ -74,18 +74,21 @@ const RealClickable = <T,>({
     activated,
   });
 
-  const keyboardHandlers = useKeyboard();
-
-  const handlers = mergeCalls(focusEvents, stateEvents, keyboardHandlers, {
-    onPointerEnter,
-    onPointerLeave,
-    onPointerDown,
-    onPointerCancel,
-    onPointerUp,
-    onBlur,
-    onFocus,
-    onKeyDown,
-  });
+  const handlers = mergeCalls(
+    focusEvents,
+    stateEvents,
+    { onKeyDown: clickByKeyboardHandler },
+    {
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown,
+      onPointerCancel,
+      onPointerUp,
+      onBlur,
+      onFocus,
+      onKeyDown,
+    },
+  );
 
   return (
     <RootComponent

package/src/components/CustomSelect/CustomSelect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
@@ -7,7 +7,6 @@ import { useDOM } from '../../lib/dom';
 import type { PlacementWithAuto } from '../../lib/floating';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { debounce } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
 import {
@@ -669,7 +668,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       const selected = index === selectedOptionIndex;
 
       return (
-        <React.Fragment key={`${option.value}`}>
+        <React.Fragment key={`${typeof option.value}-${option.value}`}>
           {renderOptionProp({
             option,
             hovered,

package/src/components/DateInput/DateInput.module.css

@@ -1,6 +1,7 @@
 .DateInput__input {
   display: block;
   flex-grow: 1;
+  align-self: center;
   margin-inline: 10px 14px;
   z-index: var(--vkui_internal--z_index_form_field_element);
   cursor: text;

package/src/components/DateRangeInput/DateRangeInput.module.css

@@ -1,5 +1,6 @@
 .DateRangeInput__input {
   flex-grow: 1;
+  align-self: center;
   margin-inline: 10px 14px;
   z-index: var(--vkui_internal--z_index_form_field_element);
   cursor: text;

package/src/components/FormField/FormField.module.css

@@ -1,13 +1,29 @@
 .FormField {
   position: relative;
   display: flex;
-  align-items: center;
   box-sizing: border-box;
   min-block-size: var(--vkui--size_field_height--regular);
   font-family: var(--vkui--font_family_base);
   -webkit-tap-highlight-color: transparent;
   isolation: isolate;
   border-radius: var(--vkui--size_border_radius--regular);
+  inline-size: 100%;
+}
+
+.FormField_scrollContainer {
+  display: flex;
+  inline-size: 100%;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow-y: auto;
+  min-block-size: inherit;
+}
+
+.FormField__content {
+  min-block-size: inherit;
+  display: flex;
+  flex-grow: 1;
+  min-inline-size: 0;
 }
 
 .FormField--sizeY-compact {
@@ -26,15 +42,21 @@
   z-index: var(--vkui_internal--z_index_form_field_element);
 }
 
+.FormField__iconWrapper {
+  flex-shrink: 0;
+  block-size: 100%;
+  display: flex;
+  position: sticky;
+  inset-block-start: 0;
+}
+
 .FormField__before,
 .FormField__after {
-  position: relative;
-  z-index: var(--vkui_internal--z_index_form_field_side);
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
-  flex-shrink: 0;
+  align-self: center;
   min-inline-size: var(--vkui--size_field_height--regular);
   block-size: 100%;
   color: var(--vkui--color_icon_secondary);

package/src/components/FormField/FormField.tsx

@@ -23,6 +23,14 @@ const iconAlignClassNames = {
   end: styles['FormField__icon--align-end'],
 };
 
+const renderIcon = (icon: React.ReactNode, align: FieldIconsAlign, className: string) => {
+  return (
+    <div className={styles['FormField__iconWrapper']}>
+      <span className={classNames(iconAlignClassNames[align], className)}>{icon}</span>
+    </div>
+  );
+};
+
 export type FieldIconsAlign = 'start' | 'center' | 'end';
 
 export interface FormFieldProps {
@@ -60,6 +68,10 @@ export interface FormFieldProps {
    * - `plain` — показывает только текст-подсказку.
    */
   mode?: 'default' | 'plain';
+  /**
+   * Максимальная высота поля
+   */
+  maxHeight?: number;
 }
 
 interface FormFieldOwnProps
@@ -85,6 +97,8 @@ export const FormField = ({
   disabled,
   mode = 'default',
   className,
+  maxHeight,
+  style,
   ...restProps
 }: FormFieldOwnProps): React.ReactNode => {
   const elRef = useExternRef(getRootRef);
@@ -111,6 +125,14 @@ export const FormField = ({
     <Component
       {...restProps}
       ref={elRef}
+      style={
+        maxHeight !== undefined
+          ? {
+              ...style,
+              maxHeight,
+            }
+          : style
+      }
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={classNames(
@@ -124,23 +146,16 @@ export const FormField = ({
         className,
       )}
     >
-      {before && (
-        <span className={classNames(styles['FormField__before'], iconAlignClassNames[beforeAlign])}>
-          {before}
-        </span>
-      )}
-      {children}
-      {after && (
-        <span
-          className={classNames(
-            styles['FormField__after'],
-            iconAlignClassNames[afterAlign],
-            'vkuiInternalFormField__after',
+      <div className={styles['FormField_scrollContainer']}>
+        {before && renderIcon(before, beforeAlign, styles['FormField__before'])}
+        <div className={styles['FormField__content']}>{children}</div>
+        {after &&
+          renderIcon(
+            after,
+            afterAlign,
+            classNames(styles['FormField__after'], 'vkuiInternalFormField__after'),
           )}
-        >
-          {after}
-        </span>
-      )}
+      </div>
       <span aria-hidden className={styles['FormField__border']} />
     </Component>
   );

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useKeyboard } from '../../../components/Clickable/useKeyboard';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
 import { useAppearance } from '../../../hooks/useAppearance';
 import { useExternRef } from '../../../hooks/useExternRef';
 import { useFocusVisible } from '../../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';
+import { clickByKeyboardHandler } from '../../../lib/utils';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
 import { useNonInteractiveOverlayProps } from './hooks';
@@ -41,7 +41,6 @@ const ImageBaseOverlayInteractive = ({
 }: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {
   const { focusVisible, ...focusEvents } = useFocusVisible();
   const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });
-  const keyboardHandlers = useKeyboard();
 
   return (
     <>
@@ -56,8 +55,8 @@ const ImageBaseOverlayInteractive = ({
           className,
         )}
         ref={getRootRef}
+        onKeyDown={clickByKeyboardHandler}
         {...focusEvents}
-        {...keyboardHandlers}
       >
         {children}
       </div>

package/src/components/Input/Input.tsx

@@ -16,7 +16,7 @@ export interface InputProps
     HasRef<HTMLInputElement>,
     HasRootRef<HTMLDivElement>,
     HasAlign,
-    FormFieldProps {}
+    Omit<FormFieldProps, 'maxHeight'> {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Input

package/src/components/List/List.module.css

@@ -1,5 +1,6 @@
 .List {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .List__placeholder {

package/src/components/ScreenSpinner/ScreenSpinner.module.css

@@ -1,30 +1,24 @@
 .ScreenSpinner {
+  position: relative;
+  inline-size: 88px;
+  block-size: 88px;
+  background: var(--vkui--color_background_contrast_themed);
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius--regular);
+  color: var(--vkui--color_icon_medium);
   animation: screen-spinner-intro 0.3s ease;
 }
 
-.ScreenSpinner--clickable {
-  cursor: pointer;
-}
-
 .ScreenSpinner__spinner {
   opacity: 1;
   transition: opacity 0.1s ease;
 }
 
-.ScreenSpinner__spinner--hidden {
+.ScreenSpinner--state-done .ScreenSpinner__spinner,
+.ScreenSpinner--state-error .ScreenSpinner__spinner {
   opacity: 0;
 }
 
-.ScreenSpinner__container {
-  position: relative;
-  inline-size: 88px;
-  block-size: 88px;
-  background: var(--vkui--color_background_contrast_themed);
-  box-shadow: var(--vkui--elevation4);
-  border-radius: var(--vkui--size_border_radius--regular);
-  color: var(--vkui--color_icon_medium);
-}
-
 .ScreenSpinner__icon {
   position: absolute;
   inset-block-start: 0;
@@ -35,13 +29,17 @@
   justify-content: center;
 }
 
+.ScreenSpinner--state-cancelable .ScreenSpinner__icon {
+  cursor: pointer;
+}
+
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .ScreenSpinner__icon :global(.vkuiIcon) {
   animation: screen-spinner-intro 0.2s ease;
 }
 
 /* stylelint-disable-next-line selector-max-type, selector-pseudo-class-disallowed-list */
-.ScreenSpinner__icon--state-done :global(.vkuiIcon) path {
+.ScreenSpinner--state-done :global(.vkuiIcon) path {
   stroke-dasharray: 50;
   stroke-dashoffset: 50;
   animation: screen-spinner-icon-done 0.6s 0.3s var(--vkui--animation_easing_platform) forwards;

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -1,7 +1,12 @@
+import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { mergeCalls } from '../../lib/mergeCalls';
+import { clickByKeyboardHandler } from '../../lib/utils';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Spinner, SpinnerProps } from '../Spinner/Spinner';
 import { Icon48CancelCircle } from './Icon48CancelCircle';
 import { Icon48DoneOutline } from './Icon48DoneOutline';
@@ -9,61 +14,148 @@ import styles from './ScreenSpinner.module.css';
 
 export interface ScreenSpinnerProps extends SpinnerProps {
   state?: 'loading' | 'cancelable' | 'done' | 'error';
+  cancelLabel?: string;
 }
 
-/**
- * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
- */
-export const ScreenSpinner = ({
-  style,
-  className,
-  state = 'loading',
+export interface ScreenSpinnerContextProps {
+  state: NonNullable<ScreenSpinnerProps['state']>;
+}
+
+export const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =
+  React.createContext<ScreenSpinnerContextProps>({
+    state: 'loading',
+  });
+
+const stateClassNames = {
+  cancelable: styles['ScreenSpinner--state-cancelable'],
+  done: styles['ScreenSpinner--state-done'],
+  error: styles['ScreenSpinner--state-error'],
+};
+
+const ScreenSpinnerLoader: React.FC<SpinnerProps> = ({
   size = 'large',
-  onClick,
   children = 'Пожалуйста, подождите...',
   ...restProps
-}: ScreenSpinnerProps): React.ReactNode => {
-  const hideSpinner = state === 'done' || state === 'error';
+}: SpinnerProps) => {
+  return (
+    <Spinner className={styles['ScreenSpinner__spinner']} size={size} {...restProps}>
+      {children}
+    </Spinner>
+  );
+};
+
+ScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';
+
+type ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {
+  cancelLabel?: ScreenSpinnerProps['cancelLabel'];
+};
+
+const ScreenSpinnerCancelIcon: React.FC<ScreenSpinnerSwapIconProps> = ({
+  onKeyDown,
+  'aria-label': ariaLabel = 'Отменить',
+  ...restProps
+}: ScreenSpinnerSwapIconProps) => {
+  const handlers = mergeCalls(
+    { onKeyDown: clickByKeyboardHandler },
+    {
+      onKeyDown,
+    },
+  );
+  let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {
+    ...handlers,
+    'tabIndex': 0,
+    'role': 'button',
+    'aria-label': ariaLabel,
+  };
+
+  return (
+    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...clickableProps} {...restProps}>
+      <Icon24Cancel />
+    </RootComponent>
+  );
+};
+
+const ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps> = ({
+  cancelLabel,
+  ...restProps
+}: ScreenSpinnerSwapIconProps) => {
+  const { state } = React.useContext(ScreenSpinnerContext);
+
+  if (state === 'cancelable') {
+    return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;
+  }
 
   const Icon = {
     loading: () => null,
-    cancelable: Icon24Cancel,
     done: Icon48DoneOutline,
     error: Icon48CancelCircle,
   }[state];
 
+  return (
+    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...restProps}>
+      <Icon />
+    </RootComponent>
+  );
+};
+
+ScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';
+
+type ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &
+  Pick<ScreenSpinnerProps, 'state'>;
+
+const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({
+  state = 'loading',
+  ...restProps
+}: ScreenSpinnerContainerProps) => {
+  return (
+    <ScreenSpinnerContext.Provider value={{ state }}>
+      <RootComponent
+        baseClassName={classNames(
+          styles['ScreenSpinner'],
+          state !== 'loading' && stateClassNames[state],
+        )}
+        {...restProps}
+      />
+    </ScreenSpinnerContext.Provider>
+  );
+};
+
+ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
+ */
+export const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
+  Container: typeof ScreenSpinnerContainer;
+  Loader: typeof ScreenSpinnerLoader;
+  SwapIcon: typeof ScreenSpinnerSwapIcon;
+} = ({
+  style,
+  className,
+  state = 'loading',
+  onClick,
+  cancelLabel,
+  ...restProps
+}: ScreenSpinnerProps): React.ReactNode => {
   useScrollLock();
 
   return (
-    <PopoutWrapper
-      noBackground
-      className={classNames(
-        styles['ScreenSpinner'],
-        state === 'cancelable' && styles['ScreenSpinner--clickable'],
-        className,
-      )}
-      style={style}
-    >
-      <div className={styles['ScreenSpinner__container']} onClick={onClick}>
-        <Spinner
-          className={classNames(
-            styles['ScreenSpinner__spinner'],
-            hideSpinner && styles['ScreenSpinner__spinner--hidden'],
-          )}
-          size={size}
-          {...restProps}
-        >
-          {children}
-        </Spinner>
-        <div
-          className={classNames(
-            styles['ScreenSpinner__icon'],
-            state === 'done' && styles['ScreenSpinner__icon--state-done'],
-          )}
-        >
-          <Icon />
-        </div>
-      </div>
+    <PopoutWrapper className={className} style={style} noBackground>
+      <ScreenSpinnerContainer state={state}>
+        <ScreenSpinnerLoader {...restProps} />
+        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />
+      </ScreenSpinnerContainer>
     </PopoutWrapper>
   );
 };
+
+ScreenSpinner.displayName = 'ScreenSpinner';
+
+ScreenSpinner.Container = ScreenSpinnerContainer;
+ScreenSpinner.Container.displayName = 'ScreenSpinner.Container';
+
+ScreenSpinner.Loader = ScreenSpinnerLoader;
+ScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';
+
+ScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;
+ScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';

package/src/components/Select/Select.module.css

@@ -21,6 +21,7 @@
 }
 
 .Select__container {
+  align-self: center;
   flex-grow: 1;
   flex-shrink: 1;
   padding-inline: 12px 0;

package/src/components/Select/Select.tsx

@@ -44,6 +44,7 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
     nativeSelectTestId,
     after,
     mode,
+    maxHeight,
     getSelectInputRef,
     overscrollBehavior,
     beforeAlign,

package/src/components/Snackbar/Snackbar.module.css

@@ -3,6 +3,7 @@
   --vkui_internal--snackbar_in_padding: 8px;
   --vkui_internal--snackbar_shift_x: 0;
   --vkui_internal--snackbar_shift_y: 0;
+  --vkui_internal--snackbar_direction: 0;
   --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_to: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_duration: 340ms;
@@ -27,10 +28,22 @@
   inset-block-start: var(--vkui_internal--safe_area_inset_top);
 }
 
+.Snackbar--placement-bottom-start {
+  --vkui_internal--snackbar_direction: -1;
+}
+
+.Snackbar--placement-bottom-end {
+  --vkui_internal--snackbar_direction: 1;
+}
+
 .Snackbar--placement-bottom-start,
 .Snackbar--placement-bottom,
 .Snackbar--placement-bottom-end {
-  --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+  --vkui_internal--snackbar_animation_from: translate3d(
+    calc(var(--vkui_internal--snackbar_direction) * 100%),
+    0,
+    0
+  );
   --vkui_internal--snackbar_animation_to: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
 
   inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);