@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -5,18 +5,15 @@ import {
   Icon20ChevronRightOutline,
   Icon12Dropdown,
 } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import {
-  CustomSelect,
-  CustomSelectProps,
-  SelectType,
-} from "../CustomSelect/CustomSelect";
-import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption";
+import { SelectType } from "../Select/Select";
+import { CustomSelect } from "../CustomSelect/CustomSelect";
 import { SizeType } from "../../hoc/withAdaptivity";
 import { getMonths, getYears } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
+import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 import "./CalendarHeader.css";
 
 export interface CalendarHeaderProps
@@ -29,6 +26,8 @@ export interface CalendarHeaderProps
   nextMonthAriaLabel?: string;
   changeMonthAriaLabel?: string;
   changeYearAriaLabel?: string;
+  prevMonthIcon?: React.ReactNode;
+  nextMonthIcon?: React.ReactNode;
   onChange(viewDate: Date): void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
@@ -40,18 +39,6 @@ export interface CalendarHeaderProps
   onPrevMonth?(): void;
 }
 
-const renderOption: CustomSelectProps["renderOption"] = ({
-  option,
-  children,
-  ...props
-}) => {
-  return (
-    <CustomSelectOption {...props}>
-      <span vkuiClass="CalendarHeader__month_name">{children}</span>
-    </CustomSelectOption>
-  );
-};
-
 export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   viewDate,
   onChange,
@@ -65,6 +52,20 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   nextMonthAriaLabel = "Следующий месяц",
   changeMonthAriaLabel = "Изменить месяц",
   changeYearAriaLabel = "Изменить год",
+  prevMonthIcon = (
+    <Icon20ChevronLeftOutline
+      vkuiClass="CalendarHeader__nav-icon--accent"
+      width={30}
+      height={30}
+    />
+  ),
+  nextMonthIcon = (
+    <Icon20ChevronRightOutline
+      vkuiClass="CalendarHeader__nav-icon--accent"
+      width={30}
+      height={30}
+    />
+  ),
 }) => {
   const locale = React.useContext(LocaleProviderContext);
   const onMonthsChange = React.useCallback(
@@ -78,7 +79,14 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
     [onChange, viewDate]
   );
 
-  const months = React.useMemo(() => getMonths(locale), [locale]);
+  const months = React.useMemo(
+    () =>
+      getMonths(locale).map(({ value, label }) => ({
+        value,
+        label: <span vkuiClass="CalendarHeader__month">{label}</span>,
+      })),
+    [locale]
+  );
 
   const currentYear = viewDate.getFullYear();
 
@@ -92,82 +100,78 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   return (
     <div vkuiClass="CalendarHeader" className={className}>
       {prevMonth && (
-        <Tappable
-          vkuiClass={classNames(
-            "CalendarHeader__nav-icon",
-            "CalendarHeader__nav-icon-prev"
-          )}
-          onClick={onPrevMonth}
-          aria-label={`${prevMonthAriaLabel}, ${formatter.format(
-            subMonths(viewDate, 1)
-          )}`}
-        >
-          <Icon20ChevronLeftOutline width={30} height={30} />
-        </Tappable>
+        <AdaptivityProvider sizeX={SizeType.REGULAR}>
+          <Tappable
+            vkuiClass={classNames(
+              "CalendarHeader__nav-icon",
+              "CalendarHeader__nav-icon-prev"
+            )}
+            onClick={onPrevMonth}
+            aria-label={`${prevMonthAriaLabel}, ${formatter.format(
+              subMonths(viewDate, 1)
+            )}`}
+          >
+            {prevMonthIcon}
+          </Tappable>
+        </AdaptivityProvider>
+      )}
+      {disablePickers ? (
+        <Paragraph vkuiClass="CalendarHeader__pickers" weight="2">
+          <span vkuiClass="CalendarHeader__month">
+            {new Intl.DateTimeFormat(locale, {
+              month: "long",
+            }).format(viewDate)}
+          </span>
+          &nbsp;
+          {new Intl.DateTimeFormat(locale, {
+            year: "numeric",
+          }).format(viewDate)}
+        </Paragraph>
+      ) : (
+        <div vkuiClass="CalendarHeader__pickers">
+          <CustomSelect
+            vkuiClass="CalendarHeader__picker"
+            value={viewDate.getMonth()}
+            options={months}
+            dropdownOffsetDistance={4}
+            fixDropdownWidth={false}
+            sizeY={SizeType.COMPACT}
+            icon={<Icon12Dropdown />}
+            onChange={onMonthsChange}
+            forceDropdownPortal={false}
+            selectType={SelectType.accent}
+            aria-label={changeMonthAriaLabel}
+          />
+          <CustomSelect
+            vkuiClass="CalendarHeader__picker"
+            value={viewDate.getFullYear()}
+            options={years}
+            dropdownOffsetDistance={4}
+            fixDropdownWidth={false}
+            sizeY={SizeType.COMPACT}
+            icon={<Icon12Dropdown />}
+            onChange={onYearChange}
+            forceDropdownPortal={false}
+            selectType={SelectType.accent}
+            aria-label={changeYearAriaLabel}
+          />
+        </div>
       )}
-      <div vkuiClass="CalendarHeader__pickers">
-        {disablePickers ? (
-          <React.Fragment>
-            <Paragraph
-              weight="2"
-              vkuiClass="CalendarHeader__pickers-placeholder"
-            >
-              {new Intl.DateTimeFormat(locale, {
-                month: "long",
-              }).format(viewDate)}
-            </Paragraph>
-            <Paragraph
-              weight="2"
-              vkuiClass="CalendarHeader__pickers-placeholder"
-            >
-              {new Intl.DateTimeFormat(locale, {
-                year: "numeric",
-              }).format(viewDate)}
-            </Paragraph>
-          </React.Fragment>
-        ) : (
-          <React.Fragment>
-            <CustomSelect
-              value={viewDate.getMonth()}
-              options={months}
-              renderOption={renderOption}
-              dropdownOffsetDistance={4}
-              fixDropdownWidth={false}
-              sizeY={SizeType.COMPACT}
-              icon={<Icon12Dropdown />}
-              onChange={onMonthsChange}
-              forceDropdownPortal={false}
-              selectType={SelectType.Plain}
-              aria-label={changeMonthAriaLabel}
-            />
-            <CustomSelect
-              value={viewDate.getFullYear()}
-              options={years}
-              dropdownOffsetDistance={4}
-              fixDropdownWidth={false}
-              sizeY={SizeType.COMPACT}
-              icon={<Icon12Dropdown />}
-              onChange={onYearChange}
-              forceDropdownPortal={false}
-              selectType={SelectType.Plain}
-              aria-label={changeYearAriaLabel}
-            />
-          </React.Fragment>
-        )}
-      </div>
       {nextMonth && (
-        <Tappable
-          vkuiClass={classNames(
-            "CalendarHeader__nav-icon",
-            "CalendarHeader__nav-icon-next"
-          )}
-          onClick={onNextMonth}
-          aria-label={`${nextMonthAriaLabel}, ${formatter.format(
-            addMonths(viewDate, 1)
-          )}`}
-        >
-          <Icon20ChevronRightOutline width={30} height={30} />
-        </Tappable>
+        <AdaptivityProvider sizeX={SizeType.REGULAR}>
+          <Tappable
+            vkuiClass={classNames(
+              "CalendarHeader__nav-icon",
+              "CalendarHeader__nav-icon-next"
+            )}
+            onClick={onNextMonth}
+            aria-label={`${nextMonthAriaLabel}, ${formatter.format(
+              addMonths(viewDate, 1)
+            )}`}
+          >
+            {nextMonthIcon}
+          </Tappable>
+        </AdaptivityProvider>
       )}
     </div>
   );

package/src/components/CalendarRange/CalendarRange.tsx

@@ -32,6 +32,8 @@ export interface CalendarRangeProps
       | "nextMonthAriaLabel"
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   value?: Array<Date | null>;
@@ -55,6 +57,9 @@ const getIsDaySelected = (day: Date, value?: Array<Date | null>) => {
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CalendarRange
+ */
 export const CalendarRange: React.FC<CalendarRangeProps> = ({
   value,
   onChange,
@@ -70,6 +75,8 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
   changeMonthAriaLabel,
   changeYearAriaLabel,
   changeDayAriaLabel = "Изменить день",
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const {
@@ -214,6 +221,7 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
           nextMonthAriaLabel={nextMonthAriaLabel}
           changeMonthAriaLabel={changeMonthAriaLabel}
           changeYearAriaLabel={changeYearAriaLabel}
+          prevMonthIcon={prevMonthIcon}
         />
         <CalendarDays
           viewDate={viewDate}
@@ -247,6 +255,7 @@ export const CalendarRange: React.FC<CalendarRangeProps> = ({
           nextMonthAriaLabel={nextMonthAriaLabel}
           changeMonthAriaLabel={changeMonthAriaLabel}
           changeYearAriaLabel={changeYearAriaLabel}
+          nextMonthIcon={nextMonthIcon}
         />
         <CalendarDays
           viewDate={secondViewDate}

package/src/components/Card/Card.tsx

@@ -11,6 +11,9 @@ export interface CardProps
   mode?: "tint" | "shadow" | "outline";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Card
+ */
 export const Card: React.FC<CardProps> = ({
   mode = "tint",
   children,

package/src/components/CardGrid/CardGrid.tsx

@@ -11,6 +11,9 @@ export interface CardGridProps
   size: "s" | "m" | "l";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CardGrid
+ */
 const CardGrid: React.FunctionComponent<CardGridProps> = ({
   children,
   size,

package/src/components/CardGrid/Readme.md

@@ -35,7 +35,7 @@
         <div style={{ paddingBottom: "30%" }} />
       </Card>
     </CardGrid>
-    <Separator expanded />
+    <Spacing size={16} />
   </Panel>
 </View>
 ```

package/src/components/CardScroll/CardScroll.tsx

@@ -19,6 +19,9 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
   withSpaces?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CardScroll
+ */
 export const CardScroll: React.FC<CardScrollProps> = ({
   children,
   size = "s",

package/src/components/Cell/Cell.css

@@ -52,5 +52,5 @@
  * FormItem
  */
 .FormItem > .Cell {
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }

package/src/components/Cell/Cell.tsx

@@ -4,10 +4,11 @@ import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { getClassName } from "../../helpers/getClassName";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
-import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
-import { HasPlatform } from "../../types";
+import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { HasPlatform, HasRootRef } from "../../types";
 import { Removable, RemovableProps } from "../Removable/Removable";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useDraggable } from "./useDraggable";
 import { ListContext } from "../List/ListContext";
 import { CellDragger } from "./CellDragger/CellDragger";
@@ -15,9 +16,10 @@ import { CellCheckbox, CellCheckboxProps } from "./CellCheckbox/CellCheckbox";
 import "./Cell.css";
 
 export interface CellProps
-  extends SimpleCellProps,
+  extends Omit<SimpleCellProps, "getRootRef">,
     HasPlatform,
-    RemovableProps {
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
   mode?: "removable" | "selectable";
   /**
    * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
@@ -57,6 +59,10 @@ export interface CellProps
 }
 
 const warn = warnOnce("Cell");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Cell
+ */
 export const Cell: React.FC<CellProps> = ({
   mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
   onRemove = noop,
@@ -104,7 +110,10 @@ export const Cell: React.FC<CellProps> = ({
 
   const platform = usePlatform();
 
-  const { dragging, rootElRef, ...draggableProps } = useDraggable({
+  const rootElRef = useExternRef(getRootRef);
+
+  const { dragging, ...draggableProps } = useDraggable({
+    rootElRef,
     onDragFinish,
   });
 
@@ -185,7 +194,7 @@ export const Cell: React.FC<CellProps> = ({
         style={style}
         getRootRef={rootElRef}
         removePlaceholder={removePlaceholder}
-        onRemove={(e) => onRemove(e, rootElRef?.current)}
+        onRemove={(e) => onRemove(e, rootElRef.current)}
       >
         {simpleCell}
       </Removable>

package/src/components/Cell/useDraggable.tsx

@@ -10,14 +10,15 @@ export interface DraggableProps {
 
 interface UseDraggableProps extends DraggableProps {
   dragging: boolean;
-  rootElRef: any;
 }
 
-export const useDraggable = ({
+export const useDraggable = <T extends HTMLElement>({
+  rootElRef,
   onDragFinish,
-}: Pick<CellProps, "onDragFinish">) => {
+}: Pick<CellProps, "onDragFinish"> & {
+  rootElRef: React.MutableRefObject<T | null>;
+}) => {
   const [dragging, setDragging] = React.useState<boolean>(false);
-  const rootElRef = React.useRef<HTMLElement>(null);
 
   const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);
   const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);
@@ -119,7 +120,6 @@ export const useDraggable = ({
     onDragMove,
     onDragEnd,
     dragging,
-    rootElRef,
   };
 
   return useDraggableProps;

package/src/components/CellButton/CellButton.css

@@ -14,7 +14,7 @@
 .FormItem .CellButton {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
 .CellButton[disabled] {
@@ -35,12 +35,18 @@
   padding-right: 8px;
 }
 
-.CellButton,
+.CellButton {
+  color: var(--accent, var(--vkui--color_text_accent));
+}
+
 .CellButton > .Icon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
+}
+
+.CellButton--danger {
+  color: var(--destructive, var(--vkui--color_text_negative));
 }
 
-.CellButton--danger,
 .CellButton--danger > .Icon {
-  color: var(--destructive);
+  color: var(--destructive, var(--vkui--color_icon_negative));
 }

package/src/components/CellButton/CellButton.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
 import "./CellButton.css";
 
 export interface CellButtonProps extends SimpleCellProps {
@@ -10,27 +8,23 @@ export interface CellButtonProps extends SimpleCellProps {
   centered?: boolean;
 }
 
-const CellButton: React.FC<CellButtonProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/CellButton
+ */
+export const CellButton: React.FC<CellButtonProps> = ({
   centered = false,
   mode = "primary",
   ...restProps
 }: CellButtonProps) => {
-  const platform = usePlatform();
-
   return (
     <SimpleCell
       stopPropagation={true}
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("CellButton", platform),
+        "CellButton",
         `CellButton--${mode}`,
-        {
-          ["CellButton--centered"]: centered,
-        }
+        centered && "CellButton--centered"
       )}
     />
   );
 };
-
-export { CellButton };

package/src/components/Checkbox/Checkbox.css

@@ -1,21 +1,16 @@
 .Checkbox {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
+  min-width: var(--vkui--size_field_height--regular);
+  min-height: var(--vkui--size_field_height--regular);
 }
 
 .FormItem .Checkbox {
   width: 100%;
   box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
-.Checkbox__input {
-  display: none;
-}
-
-.Checkbox__container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
 .Checkbox__icon {
@@ -24,22 +19,27 @@
 }
 
 .Checkbox__icon--on {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
+  display: none;
+}
+
+.Checkbox__icon--indeterminate {
+  color: var(--accent, var(--vkui--color_icon_accent));
   display: none;
 }
 
 .Checkbox__icon--off {
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
 }
 
 .Checkbox__content {
   flex-grow: 1;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   word-break: break-word;
 }
 
 .Checkbox__description {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   display: block;
   margin-bottom: 12px;
   margin-top: 2px;
@@ -53,38 +53,37 @@
   margin-bottom: 12px;
 }
 
-.Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--on {
-  display: block;
+.Checkbox__input:checked ~ .Checkbox__icon--on {
+  display: flex;
 }
 
-.Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--off {
+.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate,
+.Checkbox__input:checked ~ .Checkbox__icon--off {
   display: none;
 }
 
-.Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: 0.6;
+.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate {
+  display: flex;
 }
 
-/**
- * iOS
- */
-
-.Checkbox--ios {
-  padding: 0 12px;
+.Checkbox__input:indeterminate ~ .Checkbox__icon--on,
+.Checkbox__input:indeterminate ~ .Checkbox__icon--off {
+  display: none;
 }
 
-/**
- * Android
- */
-
-.Checkbox--android {
-  padding: 0 16px;
+.Checkbox__input[disabled] ~ * {
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
  * sizeY COMPACT
  */
 
+.Checkbox--sizeY-compact {
+  min-width: var(--vkui--size_field_height--compact);
+  min-height: var(--vkui--size_field_height--compact);
+}
+
 .Checkbox--sizeY-compact .Checkbox__children {
   margin-top: 8px;
 }
@@ -97,31 +96,18 @@
   margin-bottom: 8px;
 }
 
-/**
- * VKCOM
- */
-
-.Checkbox--vkcom {
-  padding: 0 16px;
-}
-
-.Checkbox--vkcom .Checkbox__icon {
-  margin-right: 10px;
-}
-
-.Checkbox--vkcom .Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: 0.4;
-}
-
-.Checkbox--vkcom .Checkbox__children {
-  margin-top: 8px;
+.Checkbox--simple {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border-radius: 50%;
 }
 
-.Checkbox--vkcom .Checkbox__children:last-child {
-  margin-bottom: 8px;
+.Checkbox--simple .Checkbox__content {
+  display: none;
 }
 
-.Checkbox--vkcom .Checkbox__description {
-  margin-top: 1px;
-  margin-bottom: 8px;
+.Checkbox--simple .Checkbox__icon {
+  margin: 0;
 }