@vkontakte/vkui 8.1.3 → 8.2.0

package/src/components/CalendarTime/CalendarTimePicker.tsx

@@ -1,31 +1,62 @@
 'use client';
 
-import { type ChangeEvent, useState } from 'react';
 import * as React from 'react';
-import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
-import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
-import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
+import { clamp, overflow } from '../../helpers/math';
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { useExternRef } from '../../hooks/useExternRef';
+import { Keys } from '../../lib/accessibility';
+import { isActiveElement } from '../../lib/dom';
+import { ComboBox } from './ComboBox';
 import styles from './CalendarTime.module.css';
 
-const selectFilterFn = () => true;
+function validateValueInput(event: React.ChangeEvent<HTMLInputElement>, maxValue: number) {
+  if (event.target.value === '') {
+    return event.target.value;
+  }
 
-const validateValue = (
-  value: string,
-  validValues: Array<{
-    value: number;
-    label: string;
-  }>,
-): boolean => {
-  const numValue = Number(value);
-  return !isNaN(numValue) && validValues.some((v) => v.value === numValue);
-};
+  const inputValue = /\d\d?/.exec(event.target.value)?.[0] || '';
+  if (event.target.value !== inputValue) {
+    return inputValue;
+  }
+
+  const inputValueNumber = Number(inputValue);
+  if (isNaN(inputValueNumber)) {
+    return '';
+  }
+
+  const resultValueNumber = clamp(inputValueNumber, 0, maxValue);
+
+  if (inputValueNumber === resultValueNumber) {
+    return inputValue;
+  }
+
+  return resultValueNumber.toString();
+}
+
+export function padStartTimeValue(value: Pick<string, 'toString'>): string {
+  return value.toString().padStart(2, '0');
+}
+
+function newValueOnInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>, maxValue: number) {
+  if (!(event.target instanceof HTMLInputElement)) {
+    return '';
+  }
+
+  switch (event.key) {
+    case Keys.ARROW_UP:
+      return padStartTimeValue(overflow(Number(event.target.value) + 1, 0, maxValue));
+    case Keys.ARROW_DOWN:
+      return padStartTimeValue(overflow(Number(event.target.value) - 1, 0, maxValue));
+  }
+
+  return event.target.value;
+}
 
 /* eslint-disable jsdoc/require-jsdoc */
-interface CalendarTimePickerProps extends Pick<SelectProps, 'onInputKeyDown'> {
-  value: Date;
-  getNumericValue: (date: Date) => number;
-  options: Array<{
-    value: number;
+interface CalendarTimePickerProps {
+  valueDate: Date;
+  options: ReadonlyArray<{
+    value: string;
     label: string;
   }>;
   onChange?: ((value: Date) => void) | undefined;
@@ -33,68 +64,123 @@ interface CalendarTimePickerProps extends Pick<SelectProps, 'onInputKeyDown'> {
   inputRef: React.Ref<HTMLInputElement>;
   inputLabel?: string | undefined;
   inputTestId?: string | undefined;
+  value: number;
+  maxValue: number;
+  onInputEnd?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;
 }
 /* eslint-enable jsdoc/require-jsdoc */
 
 export const CalendarTimePicker = ({
+  valueDate,
   value,
-  getNumericValue,
   options,
   onChange,
   setTime,
   inputRef,
   inputLabel,
   inputTestId,
-  onInputKeyDown,
+  maxValue,
+  onInputEnd,
+  onKeyDown: onKeyDownProp,
+  isDayDisabled,
 }: CalendarTimePickerProps) => {
-  const [inputValue, setInputValue] = useState<string | undefined>(undefined);
+  const ref = useExternRef(inputRef);
 
-  const onBlur = React.useCallback(() => {
-    setInputValue(undefined);
-  }, []);
+  const [isInputFocused, onFocus, setInputBlur] = useBooleanState(false);
 
-  const _onChange = React.useCallback(
-    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
-      onChange?.(setTime(value, Number(newValue))),
-    [onChange, setTime, value],
-  );
+  const [editableValue, setEditableValue] = React.useState(padStartTimeValue(value));
+
+  const updateValue = (newValue: string) => {
+    const newDate = setTime(valueDate, Number(newValue));
+    if (isDayDisabled?.(newDate, true)) {
+      return;
+    }
+    setEditableValue(newValue);
+    onChange?.(newDate);
+  };
+
+  // Обработка ввода
 
-  const onPickerValueChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const numericValue = e.target.value.replace(/\D/g, '');
-    setInputValue(numericValue);
-    if (validateValue(numericValue, options)) {
-      onChange?.(setTime(value, Number(numericValue)));
+  const onInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const validateValue = validateValueInput(event, maxValue);
+    updateValue(validateValue);
+
+    if (validateValue.length > 1 && event.target.selectionStart) {
+      onInputEnd?.();
     }
   };
 
+  // Управление числом с клавиатуры стрелками вниз/вверх.
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const validateValue = newValueOnInputKeyDown(event, maxValue);
+    updateValue(validateValue);
+  };
+
+  // Обработка каретки если время уже задано
+
+  const onSelectionChange = React.useCallback((event: Event) => {
+    if (event.target instanceof HTMLInputElement) {
+      if (event.target.value.length > 1 && isActiveElement(event.target)) {
+        event.target.select();
+      }
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    el?.addEventListener('selectionchange', onSelectionChange);
+
+    return () => {
+      el?.removeEventListener('selectionchange', onSelectionChange);
+    };
+  }, [onSelectionChange, ref]);
+
+  // Обработка ухода с поля ввода
+
+  const onBlur = () => {
+    setInputBlur();
+    setEditableValue((value) => {
+      const newValue = padStartTimeValue(value);
+
+      return newValue;
+    });
+  };
+
+  // Обработка значения при нажатии в барабане
+
+  const onClickOption = (newValue: string) => {
+    updateValue(newValue);
+  };
+
+  const valueAsString = padStartTimeValue(value);
+
+  const viewValue =
+    isInputFocused || padStartTimeValue(editableValue) !== valueAsString
+      ? editableValue
+      : valueAsString;
+
   return (
     <div className={styles.picker}>
-      <AdaptivityProvider density="compact">
-        <CustomSelect
-          value={getNumericValue(value)}
-          options={options}
-          onChange={_onChange}
-          forceDropdownPortal={false}
-          searchable
-          filterFn={selectFilterFn}
-          onInputChange={onPickerValueChange}
-          onInputKeyDown={onInputKeyDown}
-          renderOption={({ children: optionChildren, ...optionProps }) => (
-            <CustomSelectOption {...optionProps} textNoWrap>
-              {optionChildren}
-            </CustomSelectOption>
-          )}
-          slotProps={{
-            input: {
-              'aria-label': inputLabel,
-              'data-testid': inputTestId,
-              'value': inputValue,
-              'getRootRef': inputRef,
-              onBlur,
-            },
-          }}
-        />
-      </AdaptivityProvider>
+      <ComboBox
+        value={viewValue}
+        slotProps={{
+          input: {
+            'getRootRef': ref,
+            'aria-label': inputLabel,
+            'data-testid': inputTestId,
+            'onKeyDown': onKeyDownProp,
+          },
+        }}
+        labels={options}
+        onChange={onInput}
+        onKeyDown={onKeyDown}
+        onClickOption={onClickOption}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
     </div>
   );
 };

package/src/components/CalendarTime/ComboBox.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { type Placement } from '@vkontakte/vkui-floating-ui/core';
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { useExternRef } from '../../hooks/useExternRef';
+import { callMultiple } from '../../lib/callMultiple';
+import { CustomScrollView } from '../CustomScrollView/CustomScrollView';
+import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
+import { Input, type InputProps } from '../Input/Input';
+import { Popper } from '../Popper/Popper';
+import styles from './CalendarTime.module.css';
+
+type Label = {
+  /**
+   * Значение.
+   */
+  value: string;
+  /**
+   * Лейбл.
+   */
+  label: string;
+  /**
+   * Disabled состояние.
+   */
+  disabled?: boolean;
+};
+
+type OptionProps = {
+  /**
+   * Выбранное значение.
+   */
+  selectedValue: string | number | readonly string[] | undefined;
+  /**
+   * Опция.
+   */
+  option: Label;
+  /**
+   * Нажатие на элемент.
+   */
+  onClickOption?: ((value: string) => void) | undefined;
+};
+
+function getScrollParent(node: Node | null): HTMLElement | null {
+  if (!(node instanceof HTMLElement)) {
+    return null;
+  }
+
+  if (node.scrollHeight > node.clientHeight) {
+    return node;
+  } else {
+    return getScrollParent(node.parentNode);
+  }
+}
+
+function Option({ option, onClickOption, selectedValue }: OptionProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const selected = selectedValue === option.value;
+
+  React.useEffect(() => {
+    if (!selected) {
+      return;
+    }
+
+    const element = ref.current;
+    const scrollElement = getScrollParent(ref.current);
+
+    if (!element || !scrollElement) {
+      return;
+    }
+
+    scrollElement.scrollTo({
+      top: element.offsetTop - scrollElement.offsetHeight / 2 + element.offsetHeight / 2,
+    });
+  }, [selected]);
+
+  return (
+    <CustomSelectOption
+      getRootRef={ref}
+      key={option.value}
+      onMouseDown={(event) => {
+        event.preventDefault();
+      }}
+      onClick={() => {
+        onClickOption?.(option.value);
+      }}
+      selected={selected}
+      disabled={option.disabled}
+      textNoWrap
+    >
+      {option.label}
+    </CustomSelectOption>
+  );
+}
+
+type ComboBoxProps = InputProps & {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  readonly labels?: readonly Label[] | undefined;
+
+  /**
+   * Нажатие на элемент.
+   */
+  onClickOption?: ((value: string) => void) | undefined;
+};
+
+export function ComboBox({
+  getRootRef,
+  onBlur,
+  onFocus,
+  after,
+  labels = [],
+  defaultValue,
+  slotProps,
+  onClickOption,
+  ...restProps
+}: ComboBoxProps) {
+  const ref = useExternRef(getRootRef);
+  const inputRef = useExternRef(slotProps?.input?.getRootRef);
+
+  const [focus, setFocus, setBlur] = useBooleanState(false);
+
+  const [popperPlacement, setPopperPlacement] = React.useState<Placement>('bottom');
+
+  const labelsElements = focus
+    ? labels.map((option) => {
+        return (
+          <Option
+            key={option.value}
+            onClickOption={onClickOption}
+            selectedValue={restProps.value}
+            option={option}
+          />
+        );
+      })
+    : undefined;
+
+  /**
+   * При управлении стрелками необходима правильная очередность элементов в списке.
+   */
+  if (popperPlacement.includes('top')) {
+    labelsElements?.reverse();
+  }
+
+  return (
+    <>
+      <Input
+        getRootRef={ref}
+        className={
+          focus ? (popperPlacement.includes('top') ? styles.inputPopUp : styles.inputPopDown) : ''
+        }
+        type="text"
+        onFocus={callMultiple(setFocus, onFocus)}
+        onBlur={callMultiple(setBlur, onBlur)}
+        onClick={() => inputRef.current?.focus()}
+        after={after || (labels && <DropdownIcon opened={focus} />)}
+        slotProps={{
+          ...slotProps,
+          input: {
+            ...slotProps?.input,
+            getRootRef: inputRef,
+          },
+        }}
+        {...restProps}
+      />
+
+      {focus && labels && (
+        <Popper
+          targetRef={ref}
+          placement={popperPlacement}
+          onPlacementChange={setPopperPlacement}
+          className={classNames(
+            styles.popper,
+            popperPlacement.includes('top') ? styles.popperTop : styles.popperBottom,
+          )}
+          sameWidth
+          autoUpdateOnTargetResize
+          flipMiddlewareFallbackAxisSideDirection="none"
+          offsetByMainAxis={0}
+        >
+          <CustomScrollView tabIndex={-1} className={styles.customScroll}>
+            {labelsElements}
+          </CustomScrollView>
+        </Popper>
+      )}
+    </>
+  );
+}

package/src/components/CardScroll/CardScroll.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
-import { useDOM } from '../../lib/dom';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -49,11 +48,11 @@ export const CardScroll = ({
   const refContainer = React.useRef<HTMLDivElement>(null);
   const direction = useConfigDirection();
 
-  const { window } = useDOM();
-
   const getPadding = (container: HTMLElement) => {
+    const window = container.ownerDocument.defaultView!;
+
     return parseFloat(
-      window!
+      window
         .getComputedStyle(container)
         .getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'),
     );
@@ -73,7 +72,9 @@ export const CardScroll = ({
     const containerWidth = refContainer.current.offsetWidth;
 
     const getMarginEnd = (el: HTMLElement) => {
-      const computedStyles = window!.getComputedStyle(el);
+      const window = el.ownerDocument.defaultView!;
+
+      const computedStyles = window.getComputedStyle(el);
       return (
         parseInt(computedStyles.marginInlineEnd) ||
         (direction === 'rtl'

package/src/components/CarouselBase/CarouselBase.tsx

@@ -449,6 +449,7 @@ export const CarouselBase = ({
         canSlideRight: calculateCanSlideRight(),
       }));
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [slideIndex],
   );
 
@@ -463,7 +464,7 @@ export const CarouselBase = ({
   );
 
   useMutationObserver(layerRef, initializeSlides);
-
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth, looped, isRtl]);
 
   const calculateMinDeltaXToSlide = () => {

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -210,6 +210,7 @@ export const useChipsSelect = <O extends ChipOption>({
       selectedBehavior,
       filterFn,
       sortFn,
+      emptyText,
     ],
   );
 

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -13,6 +13,7 @@ import {
   useConfigProvider,
   useConfigProviderContextMemo,
 } from './ConfigProviderContext';
+import { ConfigProviderSubContexts } from './ConfigProviderSubContexts';
 
 export interface ConfigProviderProps extends PartialWithUndefined<ConfigProviderContextInterface> {
   /**
@@ -44,9 +45,11 @@ export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode =
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
-      <IconAppearanceProvider value={colorScheme}>
-        <TokensClassProvider>{mergeProps.children}</TokensClassProvider>
-      </IconAppearanceProvider>
+      <ConfigProviderSubContexts value={configContext}>
+        <IconAppearanceProvider value={colorScheme}>
+          <TokensClassProvider>{mergeProps.children}</TokensClassProvider>
+        </IconAppearanceProvider>
+      </ConfigProviderSubContexts>
     </ConfigProviderContext.Provider>
   );
 };

package/src/components/ConfigProvider/ConfigProviderOverride.tsx

@@ -7,6 +7,7 @@ import {
   useConfigProvider,
   useConfigProviderContextMemo,
 } from './ConfigProviderContext';
+import { ConfigProviderSubContexts } from './ConfigProviderSubContexts';
 
 export interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {
   /**
@@ -28,7 +29,7 @@ export function ConfigProviderOverride({
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
-      {children}
+      <ConfigProviderSubContexts value={configContext}>{children}</ConfigProviderSubContexts>
     </ConfigProviderContext.Provider>
   );
 }

package/src/components/ConfigProvider/ConfigProviderSubContexts.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+import type { ColorSchemeType } from '../../lib/colorScheme';
+import type { Direction } from '../../lib/direction';
+import { platform, type PlatformType } from '../../lib/platform';
+import type { ConfigProviderContextInterface } from './ConfigProviderContext';
+
+export const PlatformContext: React.Context<PlatformType> = React.createContext<PlatformType>(
+  platform(),
+);
+
+export const ColorSchemeContext: React.Context<ColorSchemeType | undefined> = React.createContext<
+  ColorSchemeType | undefined
+>(undefined);
+
+export const LocaleContext: React.Context<string> = React.createContext<string>('ru');
+
+export const DirectionContext: React.Context<Direction | undefined> = React.createContext<
+  Direction | undefined
+>(undefined);
+
+/* eslint-disable jsdoc/require-jsdoc */
+export interface ConfigProviderSubContextsProps {
+  value: Pick<ConfigProviderContextInterface, 'platform' | 'colorScheme' | 'locale' | 'direction'>;
+  children: React.ReactNode;
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+export function ConfigProviderSubContexts({
+  value,
+  children,
+}: ConfigProviderSubContextsProps): React.ReactNode {
+  return (
+    <PlatformContext.Provider value={value.platform}>
+      <ColorSchemeContext.Provider value={value.colorScheme}>
+        <LocaleContext.Provider value={value.locale}>
+          <DirectionContext.Provider value={value.direction}>{children}</DirectionContext.Provider>
+        </LocaleContext.Provider>
+      </ColorSchemeContext.Provider>
+    </PlatformContext.Provider>
+  );
+}