@vkontakte/vkui 6.1.1 → 6.2.0

package/src/components/AppRoot/AppRoot.module.css

@@ -3,15 +3,15 @@
   inline-size: 100%;
 }
 
-.AppRoot--pointer-has-not {
+.AppRoot--user-select-none {
   user-select: none;
 }
 
-/** 
- * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность 
- * редактировать contenteditable элементы, если выше по дереву задан user-select: none; 
+/**
+ * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность
+ * редактировать contenteditable элементы, если выше по дереву задан user-select: none;
  */
-.AppRoot--pointer-has-not [contenteditable] {
+.AppRoot--user-select-none [contenteditable] {
   user-select: text;
 }
 

package/src/components/AppRoot/AppRoot.tsx

@@ -6,15 +6,23 @@ import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { getDocumentBody } from '../../lib/dom';
 import { useTokensClassName } from '../../lib/tokens';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { AppRootContext } from './AppRootContext';
 import { ElementScrollController, GlobalScrollController } from './ScrollContext';
 import {
   extractPortalRootByProp,
   getClassNamesByMode,
   getParentElement,
+  getUserSelectModeClassName,
   setSafeAreaInsets,
 } from './helpers';
-import type { AppRootLayout, AppRootMode, AppRootScroll, SafeAreaInsets } from './types';
+import type {
+  AppRootLayout,
+  AppRootMode,
+  AppRootScroll,
+  AppRootUserSelectMode,
+  SafeAreaInsets,
+} from './types';
 import styles from './AppRoot.module.css';
 
 export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -51,6 +59,18 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
    * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).
    */
   layout?: AppRootLayout;
+  /**
+   * Задаёт режим выбора текста (выделения текста) для всего приложения.
+   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,
+   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).
+   *
+   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;
+   * - `disabled` – запрещает выбор текста;
+   * - `enabled` – разрешает выбор текста.
+   *
+   * @since 6.2.0
+   */
+  userSelectMode?: AppRootUserSelectMode;
 }
 
 /**
@@ -66,6 +86,7 @@ export const AppRoot = ({
   className,
   safeAreaInsets: safeAreaInsetsProp,
   layout,
+  userSelectMode,
   ...props
 }: AppRootProps) => {
   const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
@@ -195,18 +216,19 @@ export const AppRoot = ({
     </AppRootContext.Provider>
   );
 
+  const { isWebView } = useConfigProvider();
+  const userSelectModeClassName = getUserSelectModeClassName({
+    userSelectMode,
+    isWebView,
+    hasPointer,
+  });
+
   return mode === 'partial' ? (
     content
   ) : (
     <div
       ref={appRootRef}
-      className={classNames(
-        styles['AppRoot'],
-        hasPointer === undefined
-          ? styles['AppRoot--pointer-none']
-          : !hasPointer && styles['AppRoot--pointer-has-not'],
-        className,
-      )}
+      className={classNames(styles['AppRoot'], userSelectModeClassName, className)}
       {...props}
     >
       {content}

package/src/components/AppRoot/helpers.ts

@@ -1,6 +1,7 @@
 import type { SizeTypeValues } from '../../lib/adaptivity';
 import { isRefObject } from '../../lib/isRefObject';
-import type { AppRootLayout, AppRootMode, SafeAreaInsets } from './types';
+import type { AppRootLayout, AppRootMode, AppRootUserSelectMode, SafeAreaInsets } from './types';
+import styles from './AppRoot.module.css';
 
 type ContainerClassNamesProps = {
   mode: AppRootMode;
@@ -84,3 +85,34 @@ export const setSafeAreaInsets = (
     }
   };
 };
+
+export function getUserSelectModeClassName({
+  userSelectMode,
+  isWebView,
+  hasPointer,
+}: {
+  userSelectMode: AppRootUserSelectMode | undefined;
+  isWebView: boolean;
+  hasPointer: boolean | undefined;
+}): string | null {
+  switch (userSelectMode) {
+    case 'enabled-with-pointer': {
+      if (hasPointer) {
+        return null;
+      }
+
+      const enableByHasPointerMediaQuery = hasPointer === undefined;
+      if (enableByHasPointerMediaQuery) {
+        return styles['AppRoot--pointer-none'];
+      }
+
+      return styles['AppRoot--user-select-none'];
+    }
+    case 'disabled':
+      return styles['AppRoot--user-select-none'];
+    case 'enabled':
+      return null;
+    default:
+      return isWebView ? styles['AppRoot--user-select-none'] : null;
+  }
+}

package/src/components/AppRoot/types.ts

@@ -10,3 +10,5 @@ export type AppRootMode = 'partial' | 'embedded' | 'full';
 export type AppRootLayout = 'card' | 'plain';
 
 export type AppRootScroll = 'global' | 'contain';
+
+export type AppRootUserSelectMode = 'enabled' | 'enabled-with-pointer' | 'disabled';

package/src/components/Button/Button.module.css

@@ -9,12 +9,9 @@
   border-radius: var(--vkui--size_border_radius--regular);
   max-inline-size: 100%;
   min-inline-size: var(--vkui--size_button_minimum_width--regular);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .Button {
-    transition: background-color 0.15s ease-out, color 0.15s ease-out;
-  }
+  transition:
+    background-color 0.15s ease-out,
+    color 0.15s ease-out;
 }
 
 .Button--rounded {

package/src/components/Calendar/Calendar.module.css

@@ -1,7 +1,7 @@
 .Calendar {
   display: flex;
   flex-direction: column;
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
   border: 0.5px solid var(--vkui--color_separator_primary);
   box-sizing: border-box;
   box-shadow: var(--vkui--elevation1);

package/src/components/Calendar/Calendar.tsx

@@ -123,6 +123,8 @@ export const Calendar = ({
     isDayFocused,
     isDayDisabled,
     resetSelectedDay,
+    isMonthDisabled,
+    isYearDisabled,
   } = useCalendar({
     value,
     disableFuture,
@@ -201,6 +203,8 @@ export const Calendar = ({
         nextMonthIcon={nextMonthIcon}
         prevMonthProps={prevMonthProps}
         nextMonthProps={nextMonthProps}
+        isMonthDisabled={isMonthDisabled}
+        isYearDisabled={isYearDisabled}
       />
       <CalendarDays
         viewDate={externalViewDate || viewDate}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -39,6 +39,8 @@ export interface CalendarHeaderProps
   nextMonthIcon?: React.ReactNode;
   prevMonthProps?: ArrowMonthProps;
   nextMonthProps?: ArrowMonthProps;
+  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;
+  isYearDisabled?: (yearNumber: number) => boolean;
   onChange: (viewDate: Date) => void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
@@ -78,6 +80,8 @@ export const CalendarHeader = ({
       height={30}
     />
   ),
+  isMonthDisabled,
+  isYearDisabled,
   ...restProps
 }: CalendarHeaderProps) => {
   const { locale } = useConfigProvider();
@@ -92,19 +96,27 @@ export const CalendarHeader = ({
     [onChange, viewDate],
   );
 
+  const currentYear = viewDate.getFullYear();
+  const currentMonth = viewDate.getMonth();
+
   const months = React.useMemo(
     () =>
       getMonths(locale).map(({ value, label }) => ({
         value,
         label: <span className={styles['CalendarHeader__month']}>{label}</span>,
+        disabled: isMonthDisabled && isMonthDisabled(value),
       })),
-    [locale],
+    [locale, isMonthDisabled],
   );
 
-  const currentYear = viewDate.getFullYear();
-  const currentMonth = viewDate.getMonth();
-
-  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);
+  const years = React.useMemo(
+    () =>
+      getYears(currentYear, 100).map((year) => ({
+        ...year,
+        disabled: isYearDisabled && isYearDisabled(year.value),
+      })),
+    [currentYear, isYearDisabled],
+  );
 
   const formatter = new Intl.DateTimeFormat(locale, {
     year: 'numeric',
@@ -114,10 +126,23 @@ export const CalendarHeader = ({
   const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;
   const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;
 
-  const nextMonthHidden =
+  let nextMonthHidden =
     nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);
-  const prevMonthHidden =
+  if (isMonthDisabled && !nextMonthHidden) {
+    nextMonthHidden = isMonthDisabled(
+      currentMonth === 11 ? 0 : currentMonth + 1,
+      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,
+    );
+  }
+
+  let prevMonthHidden =
     prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);
+  if (isMonthDisabled && !prevMonthHidden) {
+    prevMonthHidden = isMonthDisabled(
+      currentMonth === 0 ? 11 : currentMonth - 1,
+      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,
+    );
+  }
 
   return (
     <RootComponent baseClassName={styles['CalendarHeader']} {...restProps}>

package/src/components/CalendarRange/CalendarRange.module.css

@@ -3,7 +3,7 @@
   justify-content: space-around;
   flex-wrap: wrap;
   inline-size: 610px;
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
   border: 0.5px solid var(--vkui--color_separator_primary);
   box-sizing: border-box;
   box-shadow: var(--vkui--elevation1);

package/src/components/CalendarRange/CalendarRange.tsx

@@ -10,6 +10,7 @@ import {
   isSameMonth,
   isWithinInterval,
   startOfDay,
+  subMonths,
 } from '../../lib/date';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';
@@ -82,6 +83,8 @@ export const CalendarRange = ({
     isDayFocused,
     isDayDisabled,
     resetSelectedDay,
+    isMonthDisabled,
+    isYearDisabled,
   } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
   const [hintedDate, setHintedDate] = React.useState<DateRangeType>();
   const secondViewDate = addMonths(viewDate, 1);
@@ -180,6 +183,11 @@ export const CalendarRange = ({
     [hintedDate],
   );
 
+  const onRightPartViewDateChange = React.useCallback(
+    (newDate: Date) => setViewDate(subMonths(newDate, 1)),
+    [setViewDate],
+  );
+
   return (
     <RootComponent {...props} baseClassName={styles['CalendarRange']}>
       <div className={styles['CalendarRange__inner']}>
@@ -195,6 +203,8 @@ export const CalendarRange = ({
           changeMonthLabel={changeMonthLabel}
           changeYearLabel={changeYearLabel}
           prevMonthIcon={prevMonthIcon}
+          isMonthDisabled={isMonthDisabled}
+          isYearDisabled={isYearDisabled}
         />
         <CalendarDays
           viewDate={viewDate}
@@ -220,7 +230,7 @@ export const CalendarRange = ({
       <div className={styles['CalendarRange__inner']}>
         <CalendarHeader
           viewDate={secondViewDate}
-          onChange={setViewDate}
+          onChange={onRightPartViewDateChange}
           prevMonthHidden
           onNextMonth={setNextMonth}
           disablePickers={disablePickers}
@@ -230,6 +240,8 @@ export const CalendarRange = ({
           changeMonthLabel={changeMonthLabel}
           changeYearLabel={changeYearLabel}
           nextMonthIcon={nextMonthIcon}
+          isMonthDisabled={isMonthDisabled}
+          isYearDisabled={isYearDisabled}
         />
         <CalendarDays
           viewDate={secondViewDate}

package/src/components/Card/Card.module.css

@@ -10,11 +10,11 @@
     0 2px 24px 0 rgba(0, 0, 0, 0.08),
     0 0 2px 0 rgba(0, 0, 0, 0.08)
   );
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
 }
 
 .Card--mode-outline {
-  background: var(--vkui--color_background_modal);
+  background: var(--vkui--color_background_contrast_themed);
 }
 
 .Card--withBorder::after {

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -35,11 +35,6 @@ import type { FocusActionType, OptionPreset } from './types';
 import { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';
 import styles from './ChipsSelect.module.css';
 
-const stylesDropdownVerticalPlacement = {
-  top: styles['ChipsSelect--pop-up'],
-  bottom: styles['ChipsSelect--pop-down'],
-} as const;
-
 const findIndexAfter = <O extends ChipOption>(
   options: Array<OptionPreset<O>> = [],
   startIndex = -1,
@@ -114,6 +109,11 @@ export interface ChipsSelectProps<O extends ChipOption>
    * Событие срабатывающее перед onChange
    */
   onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;
+
+  /**
+   * Отступ от выпадающего списка
+   */
+  dropdownOffsetDistance?: number;
 }
 
 /**
@@ -141,6 +141,8 @@ export const ChipsSelect = <Option extends ChipOption>({
   noMaxHeight = false,
   filterFn = defaultFilterFn,
   dropdownTestId,
+  onClose,
+  onOpen,
 
   // ChipsInputProps
   getRef,
@@ -160,6 +162,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   onInputChange: onInputChangeProp,
   onBlur: onBlurProp,
   onKeyDown: onKeyDownProp,
+  dropdownOffsetDistance = 0,
   ...restProps
 }: ChipsSelectProps<Option>) => {
   const {
@@ -203,6 +206,8 @@ export const ChipsSelect = <Option extends ChipOption>({
     creatable,
     filterFn,
     selectedBehavior,
+    onClose,
+    onOpen,
 
     // other
     disabled,
@@ -403,6 +408,17 @@ export const ChipsSelect = <Option extends ChipOption>({
     opened ? dropdownScrollBoxRef : null,
   );
 
+  const openedClassNames = React.useMemo(
+    () =>
+      (opened &&
+        dropdownOffsetDistance === 0 &&
+        (dropdownVerticalPlacement?.includes('top')
+          ? styles['ChipsSelect--pop-up']
+          : styles['ChipsSelect--pop-down'])) ||
+      undefined,
+    [dropdownOffsetDistance, opened, dropdownVerticalPlacement],
+  );
+
   return (
     <>
       <ChipsInputBase
@@ -412,13 +428,7 @@ export const ChipsSelect = <Option extends ChipOption>({
         // FormFieldProps
         id={labelledbyId}
         getRootRef={rootRef}
-        className={classNames(
-          styles['ChipsSelect'],
-          opened &&
-            dropdownVerticalPlacement &&
-            stylesDropdownVerticalPlacement[dropdownVerticalPlacement],
-          className,
-        )}
+        className={classNames(styles['ChipsSelect'], openedClassNames, className)}
         status={status}
         after={dropdownIconProp || <DropdownIcon opened={opened} />}
         // option
@@ -453,6 +463,7 @@ export const ChipsSelect = <Option extends ChipOption>({
           autoWidth={dropdownAutoWidth}
           forcePortal={forceDropdownPortal}
           noMaxHeight={noMaxHeight}
+          offsetDistance={dropdownOffsetDistance}
           // a11y
           id={dropdownId}
           role="listbox"

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -38,6 +38,14 @@ export interface UseChipsSelectProps<O extends ChipOption = ChipOption>
    */
   selectedBehavior?: 'hide' | 'highlight';
   filterFn?: false | FilterFn<O>;
+  /**
+   * Будет вызвано в момент скрытия выпадающего списка
+   */
+  onClose?: VoidFunction;
+  /**
+   * Будет вызвано в момент открытия выпадающего списка
+   */
+  onOpen?: VoidFunction;
 }
 
 export const useChipsSelect = <O extends ChipOption>({
@@ -63,6 +71,8 @@ export const useChipsSelect = <O extends ChipOption>({
   filterFn = defaultFilterFn,
   selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,
   options: optionsProp = DEFAULT_VALUE,
+  onClose,
+  onOpen,
 }: UseChipsSelectProps<O>) => {
   const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({
     // option
@@ -102,16 +112,24 @@ export const useChipsSelect = <O extends ChipOption>({
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | null>(0);
   const [focusedOption, setFocusedOption] = React.useState<O | null>(null);
 
+  const handleOpened = React.useCallback(
+    (isOpened: boolean) => {
+      isOpened ? onOpen?.() : onClose?.();
+      setOpened(isOpened);
+    },
+    [onOpen, onClose],
+  );
+
   const handleInputChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       onInputChange(event);
 
       if (!opened) {
-        setOpened(true);
+        handleOpened(true);
         setFocusedOptionIndex(0);
       }
     },
-    [onInputChange, opened],
+    [onInputChange, opened, handleOpened],
   );
 
   useIsomorphicLayoutEffect(
@@ -166,7 +184,7 @@ export const useChipsSelect = <O extends ChipOption>({
     // dropdown states
     options,
     opened,
-    setOpened,
+    setOpened: handleOpened,
     focusedOption,
     focusedOptionIndex,
     setFocusedOption,

package/src/components/Clickable/useState.tsx

@@ -38,6 +38,13 @@ export interface StateProps {
   hoverClassName?: string;
 }
 
+interface StateHookProps extends StateProps {
+  /**
+   * Блокирование активации состояний
+   */
+  lockState: boolean;
+}
+
 export const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 
 export const ACTIVE_DELAY = 70;
@@ -45,10 +52,10 @@ export const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
  */
-function useHover({ hovered, hoverClassName, hasHover = true }: StateProps) {
+function useHover({ hovered, hoverClassName, hasHover = true, lockState }: StateHookProps) {
   const [hoveredState, setHover] = React.useState(false);
 
-  const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;
+  const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
 
   const onPointerEnter: React.PointerEventHandler<any> = (e) => {
     if (e.pointerType === 'touch') {
@@ -77,13 +84,15 @@ function useActive({
   activeClassName,
   activeEffectDelay,
   hasActive = true,
-}: StateProps) {
+  lockState,
+}: StateHookProps) {
   const [activatedState, setActivated] = useStateWithDelay(false);
 
   // Список нажатий которые не требуется отменять
   const pointersUp = React.useMemo(() => new Set<number>(), []);
 
-  const active = hasActive && (activated || activatedState) ? activeClassName : undefined;
+  const active =
+    hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
 
   const onPointerDown = () => setActivated(true, ACTIVE_DELAY);
   const onPointerCancel: React.PointerEventHandler = (e) => {
@@ -133,8 +142,9 @@ export function useState({ hasHover, hasActive, ...restProps }: StateProps) {
   const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
 
   const props = {
-    hasHover: hasHover && !lockState,
-    hasActive: hasActive && !lockState,
+    hasHover,
+    hasActive,
+    lockState,
     ...restProps,
   };
 

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -15,6 +15,10 @@
   position: relative;
 }
 
+.CustomScrollView__box-content {
+  position: relative;
+}
+
 .CustomScrollView__barY:active + .CustomScrollView__box {
   pointer-events: none;
 }
@@ -51,7 +55,9 @@
   block-size: 100%;
   background-color: var(--vkui--color_icon_medium);
   border-radius: 12px;
-  transition: transform 200ms, opacity 200ms;
+  transition:
+    transform 200ms,
+    opacity 200ms;
 }
 
 .CustomScrollView__trackerY:hover::before,

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -3,6 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
@@ -57,6 +58,7 @@ export const CustomScrollView = ({
   const trackerTop = React.useRef(0);
 
   const boxRef = useExternRef(externalBoxRef);
+  const boxContentRef = React.useRef<HTMLDivElement>(null);
 
   const barY = React.useRef<HTMLDivElement>(null);
   const trackerY = React.useRef<HTMLDivElement>(null);
@@ -104,6 +106,8 @@ export const CustomScrollView = ({
     }
   }, [windowResize, window]);
 
+  useResizeObserver(boxContentRef, resize);
+
   useIsomorphicLayoutEffect(() => {
     let style = trackerY.current?.style;
     let prop = '';
@@ -200,7 +204,9 @@ export const CustomScrollView = ({
       {...restProps}
     >
       <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
-        {children}
+        <div ref={boxContentRef} className={styles['CustomScrollView__box-content']}>
+          {children}
+        </div>
       </div>
 
       <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>