@vkontakte/vkui 4.33.3 → 4.34.1

package/src/components/BaseGallery/types.ts

@@ -16,7 +16,7 @@ export interface ShiftingState {
 
 export interface LayoutState {
   containerWidth: number;
-  viewporOffsettWidth: number;
+  viewportOffsetWidth: number;
   layerWidth: number;
   min?: number;
   max: number;

package/src/components/Button/Button.css

@@ -185,10 +185,6 @@
   padding-right: 0;
 }
 
-.Button__content--caps {
-  transform: translateY(0);
-}
-
 .Button__spinner {
   position: absolute;
   left: 0;
@@ -572,10 +568,6 @@
   justify-content: center;
 }
 
-.Button:not(.Button--sz-s) .Button__content {
-  transform: translateY(-1px);
-}
-
 /**
  * sizeY COMPACT
  */

package/src/components/Button/Button.tsx

@@ -51,10 +51,12 @@ interface ButtonTypographyProps extends HasComponent {
   children?: ButtonProps["children"];
 }
 
-const ButtonTypography: React.FC<ButtonTypographyProps> = (
-  props: ButtonTypographyProps
-) => {
-  const { size, sizeY, platform, ...restProps } = props;
+const ButtonTypography = ({
+  size,
+  sizeY,
+  platform,
+  ...restProps
+}: ButtonTypographyProps) => {
   const isCompact = sizeY === SizeType.COMPACT;
 
   switch (size) {
@@ -141,7 +143,7 @@ function resolveButtonAppearance(
   };
 }
 
-const ButtonComponent: React.FC<ButtonProps> = ({
+const ButtonComponent = ({
   size = "s",
   mode = "primary",
   appearance,
@@ -157,7 +159,7 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   onClick,
   stopPropagation = true,
   ...restProps
-}) => {
+}: ButtonProps) => {
   const platform = usePlatform();
   const hasIcons = Boolean(before || after);
   const hasIconOnly = !children && Boolean(after) !== Boolean(before);

package/src/components/ButtonGroup/ButtonGroup.css

@@ -1,6 +1,5 @@
 .ButtonGroup {
   display: inline-flex;
-  align-items: flex-start; /* [Примечание 1] Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */
   max-width: 100%; /* [Примечание 2] Чтобы блок не выходил за границы контейнера (связано с [Примечание 4]) */
 }
 
@@ -62,3 +61,15 @@
 }
 
 /* stylelint-enable vkui/atomic */
+
+.ButtonGroup--align-left {
+  align-items: flex-start;
+}
+
+.ButtonGroup--align-center {
+  align-items: center;
+}
+
+.ButtonGroup--align-right {
+  align-items: flex-end;
+}

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import type { HasRootRef } from "../../types";
+import type { HasRootRef, HasAlign } from "../../types";
 import "./ButtonGroup.css";
 
 export interface ButtonGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement> {
+    HasRootRef<HTMLDivElement>,
+    HasAlign {
   /**
    * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
    */
@@ -25,21 +26,23 @@ export interface ButtonGroupProps
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */
-export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+export const ButtonGroup = ({
   mode = "horizontal",
   gap = "m",
   stretched = false,
+  align = "left" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,
   getRootRef,
   children,
   ...restProps
-}) => {
+}: ButtonGroupProps) => {
   return (
     <div
       vkuiClass={classNames(
         "ButtonGroup",
         `ButtonGroup--mode-${mode}`,
         gap !== "none" && `ButtonGroup--gap-${gap}`,
-        stretched && "ButtonGroup--stretched"
+        stretched && "ButtonGroup--stretched",
+        `ButtonGroup--align-${align}`
       )}
       role="group"
       ref={getRootRef}

package/src/components/ButtonGroup/Readme.md

@@ -7,7 +7,7 @@
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 const ButtonGroupPropsForm = ({ caption, defaultProps, onChange }) => {
-  const [{ mode, gap }, setProps] = React.useState(() => defaultProps);
+  const [{ mode, gap, align }, setProps] = React.useState(() => defaultProps);
 
   const handleChange = React.useCallback(
     (key, value) => {
@@ -44,6 +44,17 @@ const ButtonGroupPropsForm = ({ caption, defaultProps, onChange }) => {
           ]}
         />
       </FormItem>
+      <FormItem top="align">
+        <Select
+          value={align}
+          onChange={(e) => handleChange("align", e.target.value)}
+          options={[
+            { label: "left", value: "left" },
+            { label: "center", value: "center" },
+            { label: "right", value: "right" },
+          ]}
+        />
+      </FormItem>
       <Checkbox onChange={(e) => handleChange("stretched", e.target.checked)}>
         stretched
       </Checkbox>
@@ -135,6 +146,7 @@ const ExampleBase = () => {
   const [props, setProps] = useState({
     mode: "horizontal",
     gap: "s",
+    align: "left",
     stretched: false,
   });
 
@@ -167,12 +179,14 @@ const ExampleBase = () => {
 
 const buttonGroupHighlightStyles = {
   border: "2px dotted tomato",
+  boxSizing: "border-box",
 };
 
 const ExampleNested = () => {
   const [props, setProps] = useState({
     mode: "vertical",
     gap: "s",
+    align: "left",
     stretched: false,
   });
 

package/src/components/Calendar/Calendar.css

@@ -12,8 +12,8 @@
 
 .Calendar__time {
   border-top: 1px solid var(--vkui--color_separator_primary);
-  margin: 12px -12px 0 -12px;
-  padding: 12px 12px 0 12px;
+  margin: 12px -12px 0;
+  padding: 12px 12px 0;
 }
 
 .Calendar__header {

package/src/components/Calendar/Calendar.tsx

@@ -63,7 +63,7 @@ const warn = warnOnce("Calendar");
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */
-export const Calendar: React.FC<CalendarProps> = ({
+export const Calendar = ({
   value,
   onChange,
   disablePast,
@@ -91,7 +91,7 @@ export const Calendar: React.FC<CalendarProps> = ({
   prevMonthIcon,
   nextMonthIcon,
   ...props
-}) => {
+}: CalendarProps) => {
   const {
     viewDate,
     setViewDate,

package/src/components/CalendarDay/CalendarDay.tsx

@@ -25,7 +25,7 @@ export interface CalendarDayProps {
   onLeave?(value: Date): void;
 }
 
-export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
+export const CalendarDay = React.memo(
   ({
     day,
     today,
@@ -44,7 +44,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     hintedSelectionEnd,
     sameMonth,
     size,
-  }) => {
+  }: CalendarDayProps) => {
     const locale = React.useContext(LocaleProviderContext);
     const ref = React.useRef<HTMLElement>(null);
     const onClick = React.useCallback(() => onChange(day), [day, onChange]);

package/src/components/CalendarDays/CalendarDays.tsx

@@ -28,7 +28,7 @@ export interface CalendarDaysProps
   onDayLeave?(value: Date): void;
 }
 
-export const CalendarDays: React.FC<CalendarDaysProps> = ({
+export const CalendarDays = ({
   viewDate,
   value,
   weekStartsOn,
@@ -47,7 +47,7 @@ export const CalendarDays: React.FC<CalendarDaysProps> = ({
   size,
   showNeighboringMonth = false,
   ...props
-}) => {
+}: CalendarDaysProps) => {
   const locale = React.useContext(LocaleProviderContext);
   const ref = React.useRef<HTMLDivElement>(null);
   const [now] = React.useState(new Date());

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -39,7 +39,7 @@ export interface CalendarHeaderProps
   onPrevMonth?(): void;
 }
 
-export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
+export const CalendarHeader = ({
   viewDate,
   onChange,
   prevMonth = true,
@@ -66,7 +66,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
       height={30}
     />
   ),
-}) => {
+}: CalendarHeaderProps) => {
   const locale = React.useContext(LocaleProviderContext);
   const onMonthsChange = React.useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) =>

package/src/components/CalendarRange/CalendarRange.tsx

@@ -60,7 +60,7 @@ const getIsDaySelected = (day: Date, value?: Array<Date | null>) => {
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
-export const CalendarRange: React.FC<CalendarRangeProps> = ({
+export const CalendarRange = ({
   value,
   onChange,
   disablePast,
@@ -78,7 +78,7 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
   prevMonthIcon,
   nextMonthIcon,
   ...props
-}) => {
+}: CalendarRangeProps) => {
   const {
     viewDate,
     setViewDate,

package/src/components/CalendarTime/CalendarTime.tsx

@@ -30,14 +30,14 @@ for (let i = 0; i < 60; i += 1) {
   minutes.push({ value: i, label: String(i).padStart(2, "0") });
 }
 
-export const CalendarTime: React.FC<CalendarTimeProps> = ({
+export const CalendarTime = ({
   value,
   doneButtonText = "Готово",
   onChange,
   onClose,
   changeHoursAriaLabel = "Изменить час",
   changeMinutesAriaLabel = "Изменить минуту",
-}) => {
+}: CalendarTimeProps) => {
   const onHoursChange = React.useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) =>
       onChange?.(setHours(value, Number(event.target.value))),

package/src/components/Card/Card.tsx

@@ -14,7 +14,7 @@ export interface CardProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
-export const Card: React.FC<CardProps> = ({
+export const Card = ({
   mode = "tint",
   children,
   getRootRef,

package/src/components/CardGrid/CardGrid.css

@@ -5,12 +5,13 @@
   flex-wrap: wrap;
 }
 
-.CardGrid + .CardGrid {
-  margin-top: 16px;
+.CardGrid--spaced {
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .CardGrid .Card {
-  margin-right: 8px;
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
 }
 
 .CardGrid--l .Card {
@@ -19,7 +20,7 @@
 }
 
 .CardGrid--l .Card:not(:first-child) {
-  margin-top: 8px;
+  margin-top: var(--vkui--size_cardgrid_padding--regular);
 }
 
 .CardGrid--m .Card {
@@ -27,7 +28,7 @@
 }
 
 .CardGrid--m .Card:nth-child(n + 3) {
-  margin-top: 8px;
+  margin-top: var(--vkui--size_cardgrid_padding--regular);
 }
 
 .CardGrid--m .Card:nth-child(2n) {
@@ -39,29 +40,20 @@
 }
 
 .CardGrid--s .Card:nth-child(n + 4) {
-  margin-top: 8px;
+  margin-top: var(--vkui--size_cardgrid_padding--regular);
 }
 
 .CardGrid--s .Card:nth-child(3n) {
   margin-right: 0;
 }
 
-/**
- * iOS
- */
-
-.CardGrid--ios.CardGrid--sizeX-compact {
-  padding-left: 12px;
-  padding-right: 12px;
+.CardGrid--sizeX-compact {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-/**
- * Android & VKCOM
- */
-
-.CardGrid--android.CardGrid--sizeX-compact {
-  padding-left: 16px;
-  padding-right: 16px;
+.CardGrid + .CardGrid {
+  margin-top: 16px;
 }
 
 /**

package/src/components/CardGrid/CardGrid.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./CardGrid.css";
 
@@ -9,26 +7,27 @@ export interface CardGridProps
   extends React.HTMLAttributes<HTMLDivElement>,
     AdaptivityProps {
   size: "s" | "m" | "l";
+  /**
+   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа
+   */
+  spaced?: boolean;
 }
 
-/**
- * @see https://vkcom.github.io/VKUI/#/CardGrid
- */
-const CardGrid: React.FunctionComponent<CardGridProps> = ({
+const CardGridComponent = ({
   children,
-  size,
+  size = "s",
+  spaced = false,
   sizeX,
   ...restProps
 }: CardGridProps) => {
-  const platform = usePlatform();
-
   return (
     <div
       {...restProps}
       vkuiClass={classNames(
-        getClassName("CardGrid", platform),
+        "CardGrid",
+        spaced && "CardGrid--spaced",
         `CardGrid--${size}`,
-        `CardGrid--sizeX-${sizeX}`
+        `CardGrid--sizeX-${sizeX}` // TODO: v5 новая адаптивность
       )}
     >
       {children}
@@ -36,9 +35,9 @@ const CardGrid: React.FunctionComponent<CardGridProps> = ({
   );
 };
 
-CardGrid.defaultProps = {
-  size: "s",
-};
+/**
+ * @see https://vkcom.github.io/VKUI/#/CardGrid
+ */
+export const CardGrid = withAdaptivity(CardGridComponent, { sizeX: true });
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(CardGrid, { sizeX: true });
+CardGrid.displayName = "CardGrid"; // TODO: v5 remove

package/src/components/CardGrid/Readme.md

@@ -35,6 +35,11 @@
         <div style={{ paddingBottom: "30%" }} />
       </Card>
     </CardGrid>
+    <CardGrid size="l" spaced>
+      <Card>
+        <div style={{ paddingBottom: "30%" }} />
+      </Card>
+    </CardGrid>
     <Spacing size={16} />
   </Panel>
 </View>

package/src/components/CardScroll/CardScroll.tsx

@@ -22,7 +22,7 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export const CardScroll: React.FC<CardScrollProps> = ({
+export const CardScroll = ({
   children,
   size = "s",
   showArrows = true,

package/src/components/Cell/Cell.css

@@ -1,16 +1,23 @@
+.Cell {
+  position: relative;
+}
+
 .List--dragging .Cell:not(.Cell--dragging) {
   transition: transform 0.3s ease;
   pointer-events: none;
 }
 
 .Cell--dragging {
-  background-color: var(--background_content);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_content)
+  );
+  box-shadow: var(--vkui--elevation2);
   z-index: 3;
 }
 
 .Cell--selectable.Cell--disabled {
-  opacity: 0.6;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .Cell__checkbox,

package/src/components/Cell/Cell.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
-import { getClassName } from "../../helpers/getClassName";
-import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
 import { HasPlatform, HasRootRef } from "../../types";
 import { Removable, RemovableProps } from "../Removable/Removable";
@@ -63,7 +62,7 @@ const warn = warnOnce("Cell");
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
-export const Cell: React.FC<CellProps> = ({
+export const Cell = ({
   mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
   onRemove = noop,
   removePlaceholder = "Удалить",
@@ -154,13 +153,14 @@ export const Cell: React.FC<CellProps> = ({
     (draggable && !selectable) || removable || disabled;
   const hasActive = !simpleCellDisabled && !dragging;
 
-  // eslint-disable-next-line vkui/no-object-expression-in-arguments
-  const cellClasses = classNames(getClassName("Cell", platform), {
-    "Cell--dragging": dragging,
-    "Cell--removable": removable,
-    "Cell--selectable": selectable,
-    "Cell--disabled": disabled,
-  });
+  const cellClasses = classNames(
+    "Cell",
+    platform === IOS && "Cell--ios",
+    dragging && "Cell--dragging",
+    removable && "Cell--removable",
+    selectable && "Cell--selectable",
+    disabled && "Cell--disabled"
+  );
 
   const simpleCell = (
     <SimpleCell
@@ -172,7 +172,7 @@ export const Cell: React.FC<CellProps> = ({
       Component={selectable ? "label" : Component}
       before={
         <React.Fragment>
-          {draggable && (platform === ANDROID || platform === VKCOM) && dragger}
+          {draggable && platform !== IOS && dragger}
           {selectable && checkbox}
           {before}
         </React.Fragment>

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -15,11 +15,11 @@ import "./CellCheckbox.css";
 export type CellCheckboxProps = Pick<CellProps, "defaultChecked" | "checked"> &
   React.InputHTMLAttributes<HTMLInputElement>;
 
-export const CellCheckbox: React.FC<CellCheckboxProps> = ({
+export const CellCheckbox = ({
   className,
   style,
   ...restProps
-}) => {
+}: CellCheckboxProps) => {
   const platform = usePlatform();
 
   const IconOff =

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -10,12 +10,12 @@ import "./CellDragger.css";
 
 type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
 
-export const CellDragger: React.FC<CellDraggerProps> = ({
+export const CellDragger = ({
   onDragStart,
   onDragMove,
   onDragEnd,
   ...restProps
-}) => {
+}: CellDraggerProps) => {
   const platform = usePlatform();
 
   const onClick = React.useCallback((e: React.MouseEvent) => {

package/src/components/CellButton/CellButton.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
 import "./CellButton.css";
@@ -11,7 +10,7 @@ export interface CellButtonProps extends SimpleCellProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
  */
-export const CellButton: React.FC<CellButtonProps> = ({
+export const CellButton = ({
   centered = false,
   mode = "primary",
   ...restProps

package/src/components/Checkbox/Checkbox.tsx

@@ -41,7 +41,7 @@ const warn = warnOnce("Checkbox");
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
+export const Checkbox = ({
   children,
   className,
   style,
@@ -67,7 +67,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   }, [defaultIndeterminate, indeterminate, inputRef]);
 
   const handleChange: CheckboxProps["onChange"] = React.useCallback(
-    (event) => {
+    (event: React.ChangeEvent<HTMLInputElement>) => {
       if (
         defaultIndeterminate !== undefined &&
         indeterminate === undefined &&

package/src/components/Chip/Chip.tsx

@@ -22,7 +22,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
-export const Chip: React.FC<ChipProps> = ({
+export const Chip = ({
   value = "",
   option,
   removable = true,

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -75,10 +75,10 @@ export interface ChipsSelectProps<Option extends ChipsInputOption>
   closeAfterSelect?: boolean;
 }
 
-type focusActionType = "next" | "prev";
+type FocusActionType = "next" | "prev";
 
-const FOCUS_ACTION_NEXT: focusActionType = "next";
-const FOCUS_ACTION_PREV: focusActionType = "prev";
+const FOCUS_ACTION_NEXT: FocusActionType = "next";
+const FOCUS_ACTION_PREV: FocusActionType = "prev";
 
 const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   ...chipsInputDefaultProps,
@@ -217,7 +217,7 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     setFocusedOptionIndex(index);
   };
 
-  const focusOption = (nextIndex: number | null, type: focusActionType) => {
+  const focusOption = (nextIndex: number | null, type: FocusActionType) => {
     let index = typeof nextIndex !== "number" ? -1 : nextIndex;
 
     if (type === FOCUS_ACTION_NEXT) {
@@ -350,6 +350,11 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     setFocusedOptionIndex(null);
   }, [setFocusedOptionIndex]);
 
+  const observableRefs = React.useMemo(
+    () => [scrollBoxRef, rootRef],
+    [rootRef, scrollBoxRef]
+  );
+
   return (
     <div
       vkuiClass={classNames("ChipsSelect", `ChipsSelect--sizeY-${sizeY}`)}
@@ -384,6 +389,7 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
           targetRef={rootRef}
           placement={popupDirection}
           scrollBoxRef={scrollBoxRef}
+          observableRefs={observableRefs}
           onPlacementChange={onPlacementChange}
           onMouseLeave={onDropdownMouseLeave}
           fetching={fetching}