@vkontakte/vkui 4.35.4 → 4.37.0

package/src/components/BaseGallery/BaseGallery.tsx

@@ -137,26 +137,30 @@ export const BaseGallery = ({
       ) ?? [];
 
     const localContainerWidth = rootRef.current?.offsetWidth ?? 0;
-    const localviewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;
+    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;
     const localLayerWidth = localSlides.reduce(
       (val: number, slide: GallerySlidesState) => slide.width + val,
       0
     );
+    const adjustShiftX =
+      localSlides.length <= layoutState.current.slides.length ||
+      layoutState.current.slides[slideIndex]?.coordX !==
+        localSlides[slideIndex]?.coordX;
 
     layoutState.current = {
       containerWidth: localContainerWidth,
-      viewportOffsetWidth: localviewportOffsetWidth,
+      viewportOffsetWidth: localViewportOffsetWidth,
       layerWidth: localLayerWidth,
       max: calcMax({
         slides: localSlides,
-        viewportOffsetWidth: localviewportOffsetWidth,
+        viewportOffsetWidth: localViewportOffsetWidth,
         isCenterWithCustomWidth,
       }),
       min: calcMin({
         containerWidth: localContainerWidth,
         layerWidth: localLayerWidth,
         slides: localSlides,
-        viewportOffsetWidth: localviewportOffsetWidth,
+        viewportOffsetWidth: localViewportOffsetWidth,
         isCenterWithCustomWidth,
         align,
       }),
@@ -166,7 +170,7 @@ export const BaseGallery = ({
 
     setShiftState((prevState) => ({
       ...prevState,
-      shiftX: calculateIndent(slideIndex),
+      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,
       animation:
         options.animation ??
         prevState.shiftX === validateIndent(prevState.shiftX),

package/src/components/Calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import {
   CalendarHeader,
   CalendarHeaderProps,
 } from "../CalendarHeader/CalendarHeader";
-import { CalendarDays } from "../CalendarDays/CalendarDays";
+import { CalendarDays, CalendarDaysProps } from "../CalendarDays/CalendarDays";
 import { CalendarTime, CalendarTimeProps } from "../CalendarTime/CalendarTime";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import {
@@ -32,7 +32,10 @@ export interface CalendarProps
       | "onPrevMonth"
       | "prevMonthIcon"
       | "nextMonthIcon"
+      | "prevMonthProps"
+      | "nextMonthProps"
     >,
+    Pick<CalendarDaysProps, "dayProps">,
     HasRootRef<HTMLDivElement> {
   value?: Date;
   disablePast?: boolean;
@@ -90,6 +93,9 @@ export const Calendar = ({
   onPrevMonth,
   prevMonthIcon,
   nextMonthIcon,
+  prevMonthProps,
+  nextMonthProps,
+  dayProps,
   ...props
 }: CalendarProps) => {
   const {
@@ -182,6 +188,8 @@ export const Calendar = ({
         changeYearAriaLabel={changeYearAriaLabel}
         prevMonthIcon={prevMonthIcon}
         nextMonthIcon={nextMonthIcon}
+        prevMonthProps={prevMonthProps}
+        nextMonthProps={nextMonthProps}
       />
       <CalendarDays
         viewDate={externalViewDate || viewDate}
@@ -199,6 +207,7 @@ export const Calendar = ({
         onBlur={resetSelectedDay}
         showNeighboringMonth={showNeighboringMonth}
         size={size}
+        dayProps={dayProps}
       />
       {enableTime && value && size !== "s" && (
         <div vkuiClass="Calendar__time">

package/src/components/Calendar/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора даты.
 
+- Если нужно поле ввода с выпадающим календарем, используйте [DateInput](#!/DateInput).
+- Если нужен выбор диапазона дат, используйте [CalendarRange](#!/CalendarRange).
+
 ```jsx { "props": { "layout": false, "iframe": false } }
 import { format } from "../../lib/date";
 

package/src/components/CalendarDay/CalendarDay.tsx

@@ -1,11 +1,16 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { Tappable } from "../Tappable/Tappable";
+import { Tappable, TappableElementProps } from "../Tappable/Tappable";
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import "./CalendarDay.css";
 
-export interface CalendarDayProps {
+export type CalendarDayElementProps = Omit<
+  TappableElementProps,
+  "onChange" | "size" | "disabled" | "selected"
+>;
+
+export interface CalendarDayProps extends CalendarDayElementProps {
   day: Date;
   today?: boolean;
   selected?: boolean;
@@ -44,6 +49,7 @@ export const CalendarDay = React.memo(
     hintedSelectionEnd,
     sameMonth,
     size,
+    ...props
   }: CalendarDayProps) => {
     const locale = React.useContext(LocaleProviderContext);
     const ref = React.useRef<HTMLElement>(null);
@@ -66,16 +72,17 @@ export const CalendarDay = React.memo(
 
     return (
       <Tappable
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames("CalendarDay", `CalendarDay--size-${size}`, {
-          "CalendarDay--today": today,
-          "CalendarDay--selected": selected && !disabled,
-          "CalendarDay--active": active && !disabled,
-          "CalendarDay--selection-start": selectionStart,
-          "CalendarDay--selection-end": selectionEnd,
-          "CalendarDay--disabled": disabled,
-          "CalendarDay--not-same-month": !sameMonth,
-        })}
+        vkuiClass={classNames(
+          "CalendarDay",
+          `CalendarDay--size-${size}`,
+          today && "CalendarDay--today",
+          selected && !disabled && "CalendarDay--selected",
+          active && !disabled && "CalendarDay--active",
+          selectionStart && "CalendarDay--selection-start",
+          selectionEnd && "CalendarDay--selection-end",
+          disabled && "CalendarDay--disabled",
+          !sameMonth && "CalendarDay--not-same-month"
+        )}
         hoverMode={active ? "CalendarDay--active-hover" : "CalendarDay--hover"}
         hasActive={false}
         onClick={onClick}
@@ -91,20 +98,21 @@ export const CalendarDay = React.memo(
         focusVisibleMode={active ? "outside" : "inside"}
         onEnter={handleEnter}
         onLeave={handleLeave}
+        {...props}
       >
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("CalendarDay__hinted", {
-            "CalendarDay__hinted--active": hinted,
-            "CalendarDay__hinted--selection-start": hintedSelectionStart,
-            "CalendarDay__hinted--selection-end": hintedSelectionEnd,
-          })}
+          vkuiClass={classNames(
+            "CalendarDay__hinted",
+            hinted && "CalendarDay__hinted--active",
+            hintedSelectionStart && "CalendarDay__hinted--selection-start",
+            hintedSelectionEnd && "CalendarDay__hinted--selection-end"
+          )}
         >
           <div
-            // eslint-disable-next-line vkui/no-object-expression-in-arguments
-            vkuiClass={classNames("CalendarDay__inner", {
-              "CalendarDay__inner--active": active && !disabled,
-            })}
+            vkuiClass={classNames(
+              "CalendarDay__inner",
+              active && !disabled && "CalendarDay__inner--active"
+            )}
           >
             <div vkuiClass="CalendarDay__day-number">{day.getDate()}</div>
           </div>

package/src/components/CalendarDays/CalendarDays.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { isSameDay, isSameMonth } from "../../lib/date";
-import { CalendarDay } from "../CalendarDay/CalendarDay";
+import {
+  CalendarDay,
+  CalendarDayElementProps,
+} from "../CalendarDay/CalendarDay";
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import { classNames } from "../../lib/classNames";
@@ -14,6 +17,7 @@ export interface CalendarDaysProps
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: "s" | "m";
+  dayProps?: CalendarDayElementProps;
   onDayChange(value: Date): void;
   isDayDisabled(value: Date): boolean;
   isDaySelectionStart(value: Date, dayOfWeek: number): boolean;
@@ -46,6 +50,7 @@ export const CalendarDays = ({
   isDayDisabled,
   size,
   showNeighboringMonth = false,
+  dayProps,
   ...props
 }: CalendarDaysProps) => {
   const locale = React.useContext(LocaleProviderContext);
@@ -116,6 +121,7 @@ export const CalendarDays = ({
                 hinted={isDayHinted?.(day)}
                 sameMonth={sameMonth}
                 size={size}
+                {...dayProps}
               />
             );
           })}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -5,7 +5,7 @@ import {
   Icon20ChevronRightOutline,
   Icon12Dropdown,
 } from "@vkontakte/icons";
-import { Tappable } from "../Tappable/Tappable";
+import { Tappable, TappableElementProps } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { SelectType } from "../Select/Select";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
@@ -16,6 +16,8 @@ import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 import "./CalendarHeader.css";
 
+type ArrowMonthProps = Omit<TappableElementProps, "onClick" | "aria-label">;
+
 export interface CalendarHeaderProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, "className"> {
   viewDate: Date;
@@ -28,6 +30,8 @@ export interface CalendarHeaderProps
   changeYearAriaLabel?: string;
   prevMonthIcon?: React.ReactNode;
   nextMonthIcon?: React.ReactNode;
+  prevMonthProps?: ArrowMonthProps;
+  nextMonthProps?: ArrowMonthProps;
   onChange(viewDate: Date): void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
@@ -48,6 +52,8 @@ export const CalendarHeader = ({
   onNextMonth,
   onPrevMonth,
   className,
+  prevMonthProps,
+  nextMonthProps,
   prevMonthAriaLabel = "Предыдущий месяц",
   nextMonthAriaLabel = "Следующий месяц",
   changeMonthAriaLabel = "Изменить месяц",
@@ -110,6 +116,7 @@ export const CalendarHeader = ({
             aria-label={`${prevMonthAriaLabel}, ${formatter.format(
               subMonths(viewDate, 1)
             )}`}
+            {...prevMonthProps}
           >
             {prevMonthIcon}
           </Tappable>
@@ -168,6 +175,7 @@ export const CalendarHeader = ({
             aria-label={`${nextMonthAriaLabel}, ${formatter.format(
               addMonths(viewDate, 1)
             )}`}
+            {...nextMonthProps}
           >
             {nextMonthIcon}
           </Tappable>

package/src/components/CalendarRange/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора диапазона дат.
 
+- Если нужно поле ввода с выпадающим календарем, используйте [DateRangeInput](#!/DateRangeInput).
+- Если нужен выбор одной даты, используйте [Calendar](#!/Calendar).
+
 ```jsx { "props": { "layout": false, "iframe": false } }
 import { addDays, format } from "../../lib/date";
 

package/src/components/CardScroll/CardScroll.tsx

@@ -97,12 +97,11 @@ export const CardScroll = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
         `CardScroll--sizeX-${sizeX}`,
         `CardScroll--${size}`,
-        { ["CardScroll--withSpaces"]: withSpaces }
+        withSpaces && "CardScroll--withSpaces"
       )}
     >
       <HorizontalScroll

package/src/components/Cell/CellCheckbox/CellCheckbox.css

@@ -1,5 +1,5 @@
 .CellCheckbox__icon {
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
 }
 
 .CellCheckbox__input,
@@ -8,7 +8,7 @@
 }
 
 .CellCheckbox__icon--on {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .CellCheckbox__input:not(:checked) ~ .CellCheckbox__icon--off,

package/src/components/Cell/CellDragger/CellDragger.css

@@ -1,4 +1,4 @@
 .CellDragger {
   cursor: ns-resize;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }

package/src/components/Chip/Chip.css

@@ -46,6 +46,7 @@
   border-radius: 2px;
   background: transparent;
   box-sizing: border-box;
+  cursor: pointer;
 }
 
 .Chip__before {

package/src/components/Chip/Chip.tsx

@@ -7,11 +7,17 @@ import { Tappable } from "../Tappable/Tappable";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Chip.css";
 
-type ChipValue = string | number;
+export type ChipValue = string | number;
+
+export interface ChipOption {
+  value?: ChipValue;
+  label?: string;
+  [otherProp: string]: any;
+}
 
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   value: ChipValue;
-  option?: { value?: ChipValue };
+  option?: ChipOption;
   onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;
   removable?: boolean;
   removeAriaLabel?: string;
@@ -19,6 +25,12 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   after?: React.ReactNode;
 }
 
+export interface RenderChip<T> extends ChipProps {
+  label: string;
+  option: T;
+  disabled: boolean;
+}
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */

package/src/components/ChipsInput/ChipsInput.css

@@ -1,74 +1,3 @@
 .ChipsInput {
   max-width: 100%;
 }
-
-.ChipsInput__container {
-  flex-grow: 1;
-  flex-shrink: 1;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 100%;
-  padding: 3px;
-  z-index: 2;
-  overflow: hidden;
-}
-
-.ChipsInput__chip {
-  max-width: 100%;
-  margin: 2px;
-}
-
-.ChipsInput__input-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  margin: 2px;
-  margin-left: 10px;
-}
-
-.ChipsInput__el {
-  position: relative;
-  width: 100%;
-  margin-bottom: 2px;
-  padding: 0;
-  /* Визуальная компенсация - центрируем строчные буквы */
-  font-size: 15px;
-  line-height: 26px;
-  color: var(--text_primary, var(--vkui--color_text_primary));
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  appearance: none;
-  z-index: 2;
-}
-
-.ChipsInput__el:focus {
-  min-width: 64px;
-}
-
-.ChipsInput__el::-ms-clear {
-  display: none;
-}
-
-.ChipsInput__el:disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-.ChipsInput__el::placeholder {
-  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
-  /* Для Firefox */
-  opacity: 1;
-}
-
-.ChipsInput__el:disabled::placeholder {
-  color: var(--text_secondary, var(--vkui--color_text_secondary));
-}
-
-/**
- * sizeY COMPACT
- */
-
-.ChipsInput--sizeY-compact .ChipsInput__container {
-  padding: 1px;
-}