@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/CalendarDays/CalendarDays.module.css

@@ -1,14 +1,14 @@
 .host {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   justify-content: space-around;
-  flex-grow: 1;
 }
 
 .row {
   display: flex;
-  justify-content: center;
   flex-grow: 1;
+  justify-content: center;
 }
 
 .row:first-child:not(.rowSizeS) {
@@ -24,12 +24,12 @@
 }
 
 .weekday {
-  text-transform: capitalize;
-  color: var(--vkui--color_text_subhead);
-  block-size: 32px;
-  flex-basis: calc(100% / 7);
-  flex-grow: 0;
   display: flex;
+  flex-grow: 0;
+  flex-basis: calc(100% / 7);
   align-items: center;
   justify-content: center;
+  block-size: 32px;
+  color: var(--vkui--color_text_subhead);
+  text-transform: capitalize;
 }

package/src/components/CalendarDays/CalendarDays.tsx

@@ -29,7 +29,7 @@ export interface CalendarDaysProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
     Pick<CalendarDayProps, 'renderDayContent'>,
     CalendarDaysTestsProps {
-  value?: Date | Array<Date | null>;
+  value?: Date | Array<Date | null> | null;
   viewDate: Date;
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;

package/src/components/CalendarHeader/CalendarHeader.module.css

@@ -1,14 +1,14 @@
 .host {
+  position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
-  position: relative;
+  justify-content: center;
   min-block-size: 36px;
 }
 
 .pickers {
-  display: flex;
   position: absolute;
+  display: flex;
   color: var(--vkui--color_text_primary);
 }
 
@@ -19,8 +19,8 @@
 .navIcon {
   position: absolute;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding: 3px;
 }
 

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -9,7 +9,6 @@ import {
 } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { addMonths, setMonth, setYear, subMonths } from 'date-fns';
-import { useCalendarDirectionContext } from '../../context/CalendarDirectionContext';
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
@@ -104,8 +103,7 @@ export const CalendarHeader = ({
   nextMonthButtonTestId,
   ...restProps
 }: CalendarHeaderProps): React.ReactNode => {
-  const { locale } = useConfigProvider();
-  const { direction } = useCalendarDirectionContext();
+  const { locale, direction } = useConfigProvider();
 
   const onMonthsChange = React.useCallback(
     (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>

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

@@ -1,20 +1,20 @@
 .host {
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-around;
   flex-wrap: wrap;
+  justify-content: space-around;
   inline-size: 610px;
+  padding: 12px;
   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);
   border-radius: 8px;
-  padding: 12px;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .inner {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .inner:not(:last-child) {

package/src/components/CalendarRange/CalendarRange.tsx

@@ -12,13 +12,8 @@ import {
   startOfDay,
   subMonths,
 } from 'date-fns';
-import {
-  CalendarDirectionContext,
-  type CalendarDirectionContextProps,
-} from '../../context/CalendarDirectionContext';
 import { useCalendar } from '../../hooks/useCalendar';
-import { useDirection } from '../../hooks/useDirection';
-import { useExternRef } from '../../hooks/useExternRef';
+import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import {
@@ -48,7 +43,7 @@ export type CalendarRangeTestsProps = CalendarDaysTestsProps & {
 };
 
 export interface CalendarRangeProps
-  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,
     Pick<
       CalendarHeaderProps,
       | 'prevMonthLabel'
@@ -60,18 +55,19 @@ export interface CalendarRangeProps
     >,
     Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,
     CalendarRangeTestsProps {
-  value?: DateRangeType;
+  value?: DateRangeType | null;
+  defaultValue?: DateRangeType | null;
   disablePast?: boolean;
   disableFuture?: boolean;
   disablePickers?: boolean;
   changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  onChange?: (value: DateRangeType | undefined) => void;
+  onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`
   shouldDisableDate?: (value: Date) => boolean;
   onClose?: () => void;
 }
 
-const getIsDaySelected = (day: Date, value?: DateRangeType) => {
+const getIsDaySelected = (day: Date, value?: DateRangeType | null) => {
   if (!value?.[0] || !value[1]) {
     return false;
   }
@@ -83,7 +79,8 @@ const getIsDaySelected = (day: Date, value?: DateRangeType) => {
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
 export const CalendarRange = ({
-  value,
+  value: valueProp,
+  defaultValue,
   onChange,
   disablePast,
   disableFuture,
@@ -106,6 +103,17 @@ export const CalendarRange = ({
   getRootRef,
   ...props
 }: CalendarRangeProps): React.ReactNode => {
+  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 {
     viewDate,
     setViewDate,
@@ -120,9 +128,6 @@ export const CalendarRange = ({
     isYearDisabled,
   } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
 
-  const [directionRef, textDirection = 'ltr'] = useDirection();
-  const rootRef = useExternRef(directionRef, getRootRef);
-
   const [hintedDate, setHintedDate] = React.useState<DateRangeType>();
   const secondViewDate = addMonths(viewDate, 1);
 
@@ -169,10 +174,10 @@ export const CalendarRange = ({
 
   const onDayChange = React.useCallback(
     (date: Date) => {
-      onChange?.(getNewValue(date));
+      updateValue(getNewValue(date));
       setHintedDate(undefined);
     },
-    [onChange, getNewValue],
+    [updateValue, getNewValue],
   );
 
   const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);
@@ -224,99 +229,90 @@ export const CalendarRange = ({
     [setViewDate],
   );
 
-  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(
-    () => ({
-      direction: textDirection,
-    }),
-    [textDirection],
-  );
-
   return (
-    <CalendarDirectionContext.Provider value={directionContextValue}>
-      <RootComponent {...props} baseClassName={styles.host} getRootRef={rootRef}>
-        <div className={styles.inner}>
-          <CalendarHeader
-            viewDate={viewDate}
-            onChange={setViewDate}
-            nextMonthHidden
-            onPrevMonth={setPrevMonth}
-            disablePickers={disablePickers}
-            className={styles.header}
-            prevMonthLabel={prevMonthLabel}
-            nextMonthLabel={nextMonthLabel}
-            changeMonthLabel={changeMonthLabel}
-            changeYearLabel={changeYearLabel}
-            prevMonthIcon={prevMonthIcon}
-            isMonthDisabled={isMonthDisabled}
-            isYearDisabled={isYearDisabled}
-            {...leftPartHeaderTestsData}
-          />
-          <CalendarDays
-            viewDate={viewDate}
-            value={value}
-            weekStartsOn={weekStartsOn}
-            onKeyDown={handleKeyDown}
-            isDayFocused={isDayFocused}
-            onDayChange={onDayChange}
-            isDaySelected={isDaySelected}
-            isDayActive={isDayActive}
-            isDaySelectionEnd={isDaySelectionEnd}
-            isDaySelectionStart={isDaySelectionStart}
-            isDayHinted={isDayHinted}
-            onDayEnter={onDayEnter}
-            onDayLeave={onDayLeave}
-            isHintedDaySelectionEnd={isHintedDaySelectionEnd}
-            isHintedDaySelectionStart={isHintedDaySelectionStart}
-            isDayDisabled={isDayDisabled}
-            listenDayChangesForUpdate={listenDayChangesForUpdate}
-            renderDayContent={renderDayContent}
-            aria-label={changeDayLabel}
-            dayTestId={dayTestId}
-          />
-        </div>
-        <div className={styles.inner}>
-          <CalendarHeader
-            viewDate={secondViewDate}
-            onChange={onRightPartViewDateChange}
-            prevMonthHidden
-            onNextMonth={setNextMonth}
-            disablePickers={disablePickers}
-            className={styles.header}
-            prevMonthLabel={prevMonthLabel}
-            nextMonthLabel={nextMonthLabel}
-            changeMonthLabel={changeMonthLabel}
-            changeYearLabel={changeYearLabel}
-            nextMonthIcon={nextMonthIcon}
-            isMonthDisabled={isMonthDisabled}
-            isYearDisabled={isYearDisabled}
-            {...rightPartHeaderTestsData}
-          />
-          <CalendarDays
-            viewDate={secondViewDate}
-            value={value}
-            weekStartsOn={weekStartsOn}
-            aria-label={changeDayLabel}
-            onKeyDown={handleKeyDown}
-            isDayFocused={isDayFocused}
-            onDayChange={onDayChange}
-            isDaySelected={isDaySelected}
-            isDayActive={isDayActive}
-            isDaySelectionEnd={isDaySelectionEnd}
-            isDaySelectionStart={isDaySelectionStart}
-            isDayHinted={isDayHinted}
-            onDayEnter={onDayEnter}
-            onDayLeave={onDayLeave}
-            isHintedDaySelectionEnd={isHintedDaySelectionEnd}
-            isHintedDaySelectionStart={isHintedDaySelectionStart}
-            isDayDisabled={isDayDisabled}
-            listenDayChangesForUpdate={listenDayChangesForUpdate}
-            renderDayContent={renderDayContent}
-            tabIndex={0}
-            onBlur={resetSelectedDay}
-            dayTestId={dayTestId}
-          />
-        </div>
-      </RootComponent>
-    </CalendarDirectionContext.Provider>
+    <RootComponent {...props} baseClassName={styles.host} getRootRef={getRootRef}>
+      <div className={styles.inner}>
+        <CalendarHeader
+          viewDate={viewDate}
+          onChange={setViewDate}
+          nextMonthHidden
+          onPrevMonth={setPrevMonth}
+          disablePickers={disablePickers}
+          className={styles.header}
+          prevMonthLabel={prevMonthLabel}
+          nextMonthLabel={nextMonthLabel}
+          changeMonthLabel={changeMonthLabel}
+          changeYearLabel={changeYearLabel}
+          prevMonthIcon={prevMonthIcon}
+          isMonthDisabled={isMonthDisabled}
+          isYearDisabled={isYearDisabled}
+          {...leftPartHeaderTestsData}
+        />
+        <CalendarDays
+          viewDate={viewDate}
+          value={value}
+          weekStartsOn={weekStartsOn}
+          onKeyDown={handleKeyDown}
+          isDayFocused={isDayFocused}
+          onDayChange={onDayChange}
+          isDaySelected={isDaySelected}
+          isDayActive={isDayActive}
+          isDaySelectionEnd={isDaySelectionEnd}
+          isDaySelectionStart={isDaySelectionStart}
+          isDayHinted={isDayHinted}
+          onDayEnter={onDayEnter}
+          onDayLeave={onDayLeave}
+          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+          isHintedDaySelectionStart={isHintedDaySelectionStart}
+          isDayDisabled={isDayDisabled}
+          listenDayChangesForUpdate={listenDayChangesForUpdate}
+          renderDayContent={renderDayContent}
+          aria-label={changeDayLabel}
+          dayTestId={dayTestId}
+        />
+      </div>
+      <div className={styles.inner}>
+        <CalendarHeader
+          viewDate={secondViewDate}
+          onChange={onRightPartViewDateChange}
+          prevMonthHidden
+          onNextMonth={setNextMonth}
+          disablePickers={disablePickers}
+          className={styles.header}
+          prevMonthLabel={prevMonthLabel}
+          nextMonthLabel={nextMonthLabel}
+          changeMonthLabel={changeMonthLabel}
+          changeYearLabel={changeYearLabel}
+          nextMonthIcon={nextMonthIcon}
+          isMonthDisabled={isMonthDisabled}
+          isYearDisabled={isYearDisabled}
+          {...rightPartHeaderTestsData}
+        />
+        <CalendarDays
+          viewDate={secondViewDate}
+          value={value}
+          weekStartsOn={weekStartsOn}
+          aria-label={changeDayLabel}
+          onKeyDown={handleKeyDown}
+          isDayFocused={isDayFocused}
+          onDayChange={onDayChange}
+          isDaySelected={isDaySelected}
+          isDayActive={isDayActive}
+          isDaySelectionEnd={isDaySelectionEnd}
+          isDaySelectionStart={isDaySelectionStart}
+          isDayHinted={isDayHinted}
+          onDayEnter={onDayEnter}
+          onDayLeave={onDayLeave}
+          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+          isHintedDaySelectionStart={isHintedDaySelectionStart}
+          isDayDisabled={isDayDisabled}
+          listenDayChangesForUpdate={listenDayChangesForUpdate}
+          renderDayContent={renderDayContent}
+          tabIndex={0}
+          onBlur={resetSelectedDay}
+          dayTestId={dayTestId}
+        />
+      </div>
+    </RootComponent>
   );
 };

package/src/components/CalendarTime/CalendarTime.module.css

@@ -13,8 +13,8 @@
 
 .divider {
   margin-inline: 6px;
-  color: var(--vkui--color_text_primary);
   font-family: var(--vkui--font_family_base);
+  color: var(--vkui--color_text_primary);
 }
 
 .button {

package/src/components/CalendarTime/CalendarTime.tsx

@@ -137,16 +137,24 @@ export const CalendarTime = ({
 
   const onPickerKeyDown = (e: React.KeyboardEvent) => {
     const key = pressedKey(e);
-    if (key === Keys.ENTER || key === Keys.TAB) {
-      const steps = [hoursInputRef, minutesInputRef, doneButtonRef];
-      const currentStepIndex = steps.findIndex((step) => step.current === e.target);
-      const diff = e.key === 'Tab' && e.shiftKey ? -1 : 1;
-      const nextStepIndex = currentStepIndex + diff;
-      if (nextStepIndex < 0 || nextStepIndex >= steps.length) {
-        return;
-      }
+    /* Мы хотим иметь возможность быстро, по Enter перемещаться между
+     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */
+    if (key !== Keys.ENTER) {
+      return;
+    }
+
+    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>
+      Boolean(ref.current),
+    );
+    const currentStepIndex = steps.findIndex((step) => step.current === e.target);
+    const nextStepIndex = currentStepIndex + 1;
+    if (nextStepIndex >= steps.length) {
+      return;
+    }
+    const nextStep = steps[nextStepIndex];
+
+    if (nextStep.current) {
       e.preventDefault();
-      const nextStep = steps[nextStepIndex];
       nextStep.current?.focus();
     }
   };

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

@@ -1,9 +1,9 @@
 .host {
   position: relative;
+  display: block;
+  list-style-type: none;
   background: var(--vkui--color_background_secondary);
   border-radius: var(--vkui--size_card_border_radius--regular);
-  list-style-type: none;
-  display: block;
 }
 
 .modeShadow {
@@ -22,15 +22,15 @@
 
 .withBorder::after {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  display: block;
   inline-size: 100%;
   block-size: 100%;
+  pointer-events: none;
   content: '';
-  display: block;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
-  pointer-events: none;
-  box-sizing: border-box;
   border-radius: inherit;
 }
 
@@ -40,8 +40,8 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalCardScroll) .host {
-  margin-inline-end: var(--vkui--size_cardgrid_padding--regular);
   flex-shrink: 0;
+  margin-inline-end: var(--vkui--size_cardgrid_padding--regular);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/src/components/CardGrid/CardGrid.module.css

@@ -1,11 +1,11 @@
 .host {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
-  flex-wrap: wrap;
-  list-style-type: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style-type: none;
 }
 
 .padding {

package/src/components/CardScroll/CardScroll.module.css

@@ -1,26 +1,28 @@
 .host {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
+  --vkui_internal--CardScroll_horizontal_padding: 0;
 }
 
 .in {
-  display: flex;
-  align-items: stretch;
   inline-size: 100%;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
 }
 
-.gap {
-  display: block;
-  flex-shrink: 0;
+.in::after,
+.in::before {
+  padding-inline: calc(var(--vkui_internal--CardScroll_horizontal_padding) / 2);
+  content: '';
 }
 
 .host + .host {
   margin-block-start: 16px;
 }
 
-.withPaddings .gap {
-  inline-size: var(--vkui--size_base_padding_horizontal--regular);
+.withPaddings {
+  --vkui_internal--CardScroll_horizontal_padding: var(
+    --vkui--size_base_padding_horizontal--regular
+  );
 }
 
 /**
@@ -29,17 +31,15 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
-  .withPaddings
-  .gap {
-  inline-size: 16px;
+  .withPaddings {
+  --vkui_internal--CardScroll_horizontal_padding: 16px;
 }
 
 @media (--viewWidth-smallTabletPlus) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
-    .withPaddings
-    .gap {
-    inline-size: 16px;
+    .withPaddings {
+    --vkui_internal--CardScroll_horizontal_padding: 16px;
   }
 }