@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -6,6 +6,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { isAfter } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
+import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { callMultiple } from '../../lib/callMultiple';
 import { format, isMatch, parse } from '../../lib/date';
@@ -56,10 +57,18 @@ export type DateRangeInputTestsProps = {
    * Передает атрибуты `data-testid` для полей ввода конечной даты
    */
   endDateTestsProps?: DateTestsProps;
+  /**
+   * Передает атрибут `data-testid` для кнопки показа календаря.
+   */
+  showCalendarButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки очистки даты.
+   */
+  clearButtonTestId?: string;
 };
 
 export interface DateRangeInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,
+  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>,
     Pick<
       CalendarRangeProps,
       | 'disablePast'
@@ -67,6 +76,7 @@ export interface DateRangeInputProps
       | 'shouldDisableDate'
       | 'onChange'
       | 'value'
+      | 'defaultValue'
       | 'weekStartsOn'
       | 'disablePickers'
       | 'prevMonthLabel'
@@ -146,9 +156,10 @@ export const DateRangeInput = ({
   shouldDisableDate,
   disableFuture,
   disablePast,
-  value,
+  value: valueProp,
+  defaultValue,
   onChange,
-  calendarPlacement = 'bottom-start',
+  calendarPlacement: calendarPlacementProp = 'bottom-start',
   style,
   className,
   closeOnChange = true,
@@ -180,6 +191,8 @@ export const DateRangeInput = ({
   calendarTestsProps,
   startDateTestsProps,
   endDateTestsProps,
+  clearButtonTestId,
+  showCalendarButtonTestId,
   id,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
@@ -190,6 +203,17 @@ export const DateRangeInput = ({
   const monthsEndRef = React.useRef<HTMLSpanElement>(null);
   const yearsEndRef = React.useRef<HTMLSpanElement>(null);
 
+  const _onChange = React.useCallback(
+    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),
+    [onChange],
+  );
+
+  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange: _onChange,
+  });
+
   const onInternalValueChange = React.useCallback(
     (internalValue: string[]) => {
       let isStartValid = true;
@@ -228,10 +252,10 @@ export const DateRangeInput = ({
         ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)
         : null;
       if (start && end && isAfter(end, start)) {
-        onChange?.([start, end]);
+        updateValue([start, end]);
       }
     },
-    [onChange, value],
+    [updateValue, value],
   );
 
   const refs = React.useMemo(
@@ -239,6 +263,8 @@ export const DateRangeInput = ({
     [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],
   );
 
+  const onClear = React.useCallback(() => updateValue(undefined), [updateValue]);
+
   const {
     rootRef,
     calendarRef,
@@ -257,7 +283,7 @@ export const DateRangeInput = ({
     autoFocus,
     disabled,
     elementsConfig,
-    onChange,
+    onClear,
     onInternalValueChange,
     getInternalValue,
     value,
@@ -270,14 +296,21 @@ export const DateRangeInput = ({
 
   const onCalendarChange = React.useCallback(
     (newValue: DateRangeType | undefined) => {
-      onChange?.(newValue);
+      updateValue(newValue);
       if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {
         removeFocusFromField();
       }
     },
-    [onChange, closeOnChange, value, removeFocusFromField],
+    [updateValue, closeOnChange, value, removeFocusFromField],
   );
 
+  // при переключении месяцев высота календаря может меняться,
+  // чтобы календарь не прыгал при переключении месяцев каждый раз на
+  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
+  // на ней, пока помещается.
+  const [calendarPlacement, setCalendarPlacement] =
+    React.useState<PlacementWithAuto>(calendarPlacementProp);
+
   return (
     <FormField
       style={style}
@@ -285,12 +318,16 @@ export const DateRangeInput = ({
       getRootRef={handleRootRef}
       after={
         value ? (
-          <IconButton hoverMode="opacity" onClick={clear}>
+          <IconButton hoverMode="opacity" onClick={clear} data-testid={clearButtonTestId}>
             <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>
             <Icon16Clear />
           </IconButton>
         ) : (
-          <IconButton hoverMode="opacity" onClick={openCalendar}>
+          <IconButton
+            hoverMode="opacity"
+            onClick={openCalendar}
+            data-testid={showCalendarButtonTestId}
+          >
             <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>
             <Icon20CalendarOutline />
           </IconButton>
@@ -301,81 +338,88 @@ export const DateRangeInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <VisuallyHidden
-        id={id}
-        Component="input"
-        name={name}
-        value={
-          value
-            ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${
-                value[1] ? format(value[1], 'dd.MM.yyyy') : ''
-              }`
-            : ''
-        }
-      />
-      <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>
-        <InputLike
-          length={2}
-          getRootRef={daysStartRef}
-          index={0}
-          onElementSelect={setFocusedElement}
-          value={internalValue[0]}
-          label={changeStartDayLabel}
-          data-testid={startDateTestsProps?.day}
+      <div className={dateInputStyles.wrapper}>
+        <VisuallyHidden
+          id={id}
+          Component="input"
+          name={name}
+          value={
+            value
+              ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${
+                  value[1] ? format(value[1], 'dd.MM.yyyy') : ''
+                }`
+              : ''
+          }
         />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={monthsStartRef}
-          index={1}
-          onElementSelect={setFocusedElement}
-          value={internalValue[1]}
-          label={changeStartMonthLabel}
-          data-testid={startDateTestsProps?.month}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={4}
-          getRootRef={yearsStartRef}
-          index={2}
-          onElementSelect={setFocusedElement}
-          value={internalValue[2]}
-          label={changeStartYearLabel}
-          data-testid={startDateTestsProps?.year}
-        />
-        <InputLikeDivider>{' — '}</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={daysEndRef}
-          index={3}
-          onElementSelect={setFocusedElement}
-          value={internalValue[3]}
-          label={changeEndDayLabel}
-          data-testid={endDateTestsProps?.day}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={2}
-          getRootRef={monthsEndRef}
-          index={4}
-          onElementSelect={setFocusedElement}
-          value={internalValue[4]}
-          label={changeEndMonthLabel}
-          data-testid={endDateTestsProps?.month}
-        />
-        <InputLikeDivider>.</InputLikeDivider>
-        <InputLike
-          length={4}
-          getRootRef={yearsEndRef}
-          index={5}
-          onElementSelect={setFocusedElement}
-          value={internalValue[5]}
-          label={changeEndYearLabel}
-          data-testid={endDateTestsProps?.year}
-        />
-      </Text>
+        <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>
+          <InputLike
+            length={2}
+            getRootRef={daysStartRef}
+            index={0}
+            onElementSelect={setFocusedElement}
+            value={internalValue[0]}
+            label={changeStartDayLabel}
+            data-testid={startDateTestsProps?.day}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={monthsStartRef}
+            index={1}
+            onElementSelect={setFocusedElement}
+            value={internalValue[1]}
+            label={changeStartMonthLabel}
+            data-testid={startDateTestsProps?.month}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={4}
+            getRootRef={yearsStartRef}
+            index={2}
+            onElementSelect={setFocusedElement}
+            value={internalValue[2]}
+            label={changeStartYearLabel}
+            data-testid={startDateTestsProps?.year}
+          />
+          <InputLikeDivider>{' — '}</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={daysEndRef}
+            index={3}
+            onElementSelect={setFocusedElement}
+            value={internalValue[3]}
+            label={changeEndDayLabel}
+            data-testid={endDateTestsProps?.day}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={2}
+            getRootRef={monthsEndRef}
+            index={4}
+            onElementSelect={setFocusedElement}
+            value={internalValue[4]}
+            label={changeEndMonthLabel}
+            data-testid={endDateTestsProps?.month}
+          />
+          <InputLikeDivider>.</InputLikeDivider>
+          <InputLike
+            length={4}
+            getRootRef={yearsEndRef}
+            index={5}
+            onElementSelect={setFocusedElement}
+            value={internalValue[5]}
+            label={changeEndYearLabel}
+            data-testid={endDateTestsProps?.year}
+          />
+        </Text>
+      </div>
       {open && !disableCalendar && (
-        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>
+        <Popper
+          targetRef={rootRef}
+          offsetByMainAxis={8}
+          placement={calendarPlacement}
+          onPlacementChange={setCalendarPlacement}
+        >
           <CalendarRange
             value={value}
             onChange={onCalendarChange}

package/src/components/DirectionProvider/DirectionProvider.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
+
+export interface DirectionProviderProps {
+  value: ConfigProviderContextInterface['direction'];
+  children: React.ReactNode;
+}
+
+/**
+ * Компонент, прокидывающий направление контента
+ * @see https://vkcom.github.io/VKUI/#/DirectionProvider
+ * @since 7.2.0
+ */
+export function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode {
+  return <ConfigProviderOverride direction={value}>{children}</ConfigProviderOverride>;
+}

package/src/components/DropZone/DropZone.module.css

@@ -3,11 +3,11 @@
 }
 
 .host::before {
-  content: '';
   position: absolute;
   inset: 0;
-  border-radius: var(--vkui--size_border_radius--regular);
+  content: '';
   border: 1px dashed var(--vkui--color_separator_primary);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .active::before {

package/src/components/FixedLayout/FixedLayout.module.css

@@ -1,6 +1,5 @@
 .host {
   position: fixed;
-  box-sizing: border-box;
   /**
    * ⚠️ WARNING ⚠️
    * `left: auto` решает следующие задачи:
@@ -13,6 +12,7 @@
    */
   inset-inline-start: auto;
   z-index: var(--vkui_internal--z_index_fixed_layout);
+  box-sizing: border-box;
   padding-inline: var(--vkui_internal--safe_area_inset_left)
     var(--vkui_internal--safe_area_inset_right);
 }
@@ -22,13 +22,13 @@
 }
 
 .verticalTop {
-  inline-size: 100%;
   inset-block-start: 0;
+  inline-size: 100%;
 }
 
 .verticalBottom {
-  inline-size: 100%;
   inset-block-end: 0;
+  inline-size: 100%;
   padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
 }
 

package/src/components/Flex/Flex.module.css

@@ -9,17 +9,35 @@
   --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
   --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
 
-  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin-block: var(--vkui--size_base_padding_vertical--regular);
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-.withGaps {
-  margin-block-start: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-  margin-inline-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
+/*TODO [>=8]: Проверить браузерную поддержку gap*/
+/*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/
+/*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/
+/*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/
+/*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/
+@supports (inset: 0) {
+  .host {
+    gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
+  }
+}
+@supports not (inset: 0) {
+  .host {
+    margin-block-start: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+    margin-inline-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+  }
+
+  /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+  .host.host > * {
+    margin-block-start: var(--vkui_internal--row_gap);
+    margin-inline-start: var(--vkui_internal--column_gap);
+  }
 }
 
 .host > .marginAuto {
@@ -90,9 +108,3 @@
 .alignBaseline {
   align-items: baseline;
 }
-
-/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-.withGaps.withGaps > * {
-  margin-block-start: var(--vkui_internal--row_gap);
-  margin-inline-start: var(--vkui_internal--column_gap);
-}

package/src/components/Flex/Flex.tsx

@@ -1,4 +1,3 @@
-import { Children } from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import {
   calculateGap,
@@ -76,7 +75,7 @@ export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseCl
 export const Flex: React.FC<FlexProps> & {
   Item: typeof FlexItem;
 } = ({
-  gap,
+  gap = 0,
   align,
   justify,
   margin = 'none',
@@ -86,8 +85,7 @@ export const Flex: React.FC<FlexProps> & {
   children,
   ...props
 }: FlexProps) => {
-  const withGaps = Children.count(children) > 1 && gap;
-  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);
+  const [rowGap, columnGap] = calculateGap(gap);
 
   return (
     <RootComponent
@@ -100,8 +98,7 @@ export const Flex: React.FC<FlexProps> & {
         margin !== 'none' && styles.marginAuto,
         align && alignClassNames[align],
         justify && justifyClassNames[justify],
-        withGaps && styles.withGaps,
-        withGaps && getGapsPresets(rowGap, columnGap),
+        getGapsPresets(rowGap, columnGap),
       )}
       baseStyle={getGapsByUser(rowGap, columnGap)}
     >

package/src/components/FloatingArrow/FloatingArrow.module.css

@@ -3,8 +3,8 @@
 }
 
 .in {
-  content: '';
   display: block;
+  content: '';
 
   /* см. "Примечание" в DefaultIcon.tsx. */
   transform: translateY(1px);

package/src/components/Footer/Footer.module.css

@@ -2,6 +2,6 @@
   display: block;
   padding-block: 24px;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }

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

@@ -1,29 +1,29 @@
 .host {
   position: relative;
-  display: flex;
   box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
   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%;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .scrollContainer {
   display: flex;
-  inline-size: 100%;
   align-items: flex-start;
   justify-content: flex-start;
-  overflow-y: auto;
+  inline-size: 100%;
   min-block-size: inherit;
+  overflow-y: auto;
 }
 
 .content {
-  min-block-size: inherit;
   display: flex;
   flex-grow: 1;
   min-inline-size: 0;
+  min-block-size: inherit;
 }
 
 .sizeYCompact {
@@ -38,25 +38,25 @@
 
 /* stylelint-disable-next-line selector-max-universal */
 .host > * {
-  border-radius: inherit;
   z-index: var(--vkui_internal--z_index_form_field_element);
+  border-radius: inherit;
 }
 
 .iconWrapper {
-  flex-shrink: 0;
-  block-size: 100%;
-  display: flex;
   position: sticky;
   inset-block-start: 0;
+  display: flex;
+  flex-shrink: 0;
+  block-size: 100%;
 }
 
 .before,
 .after {
   display: flex;
-  align-items: center;
   align-content: center;
-  justify-content: center;
+  align-items: center;
   align-self: center;
+  justify-content: center;
   min-inline-size: var(--vkui--size_field_height--regular);
   color: var(--vkui--color_icon_secondary);
 }
@@ -90,17 +90,17 @@
 }
 
 .border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_form_field_border);
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_border);
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
-  transform-origin: left top;
+  pointer-events: none;
   border: var(--vkui--size_border--regular) solid transparent;
   border-radius: inherit;
+  transform-origin: left top;
 }
 
 .modeDefault > .border {
@@ -116,8 +116,8 @@
 }
 
 .modeDefault.hover > .border {
-  border-color: var(--vkui--color_field_border_alpha--hover);
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
+  border-color: var(--vkui--color_field_border_alpha--hover);
 }
 
 /**
@@ -139,8 +139,8 @@
 :global(.vkuiInternalFormItem--status-error) .focusVisible > .border,
 .statusError.modeDefault > .border,
 .statusError.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_negative);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -156,8 +156,8 @@
 :global(.vkuiInternalFormItem--status-valid) .focusVisible > .border,
 .statusValid.modeDefault > .border,
 .statusValid.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_positive);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -168,9 +168,9 @@
 /* [end] */
 
 .disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
-  cursor: default;
   pointer-events: none;
+  cursor: default;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
@@ -199,8 +199,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--segmented) .host {
   z-index: auto;
-  isolation: auto;
   border-radius: 0;
+  isolation: auto;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */