@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/FormItem/FormItem.tsx

@@ -6,7 +6,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { hasReactNode, noop } from "../../lib/utils";
 import Subhead from "../Typography/Subhead/Subhead";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { Removable, RemovableProps } from "../Removable/Removable";
 import "./FormItem.css";
@@ -43,16 +43,10 @@ export const FormItem: React.FC<FormItemProps> = ({
 
   const wrappedChildren = (
     <React.Fragment>
-      {hasReactNode(top) && (
-        <Subhead weight="regular" vkuiClass="FormItem__top">
-          {top}
-        </Subhead>
-      )}
+      {hasReactNode(top) && <Subhead vkuiClass="FormItem__top">{top}</Subhead>}
       {children}
       {hasReactNode(bottom) && (
-        <Caption level="1" weight="regular" vkuiClass="FormItem__bottom">
-          {bottom}
-        </Caption>
+        <Caption vkuiClass="FormItem__bottom">{bottom}</Caption>
       )}
     </React.Fragment>
   );

package/src/components/FormStatus/FormStatus.tsx

@@ -3,7 +3,7 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import Headline from "../Typography/Headline/Headline";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { hasReactNode } from "../../lib/utils";
 import "./FormStatus.css";
 
@@ -35,16 +35,10 @@ export const FormStatus: React.FunctionComponent<FormStatusProps> = ({
         </Headline>
       )}
       {dangerouslySetInnerHTML && (
-        <Caption
-          level="1"
-          weight="regular"
-          dangerouslySetInnerHTML={dangerouslySetInnerHTML}
-        />
+        <Caption dangerouslySetInnerHTML={dangerouslySetInnerHTML} />
       )}
       {hasReactNode(children) && !dangerouslySetInnerHTML && (
-        <Caption level="1" weight="regular">
-          {children}
-        </Caption>
+        <Caption>{children}</Caption>
       )}
     </div>
   );

package/src/components/Gallery/Readme.md

@@ -55,7 +55,7 @@ const [showArrows, setShowArrows] = useState(true);
         <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
     </Group>
-    <Group header={<Header mode="secondary">Controled</Header>}>
+    <Group header={<Header mode="secondary">Controlled</Header>}>
       <Gallery
         slideWidth="90%"
         align="center"

package/src/components/Group/Group.tsx

@@ -5,7 +5,7 @@ import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
 import Separator from "../Separator/Separator";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import {
   withAdaptivity,
   AdaptivityProps,
@@ -70,9 +70,7 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
         {header}
         {children}
         {hasReactNode(description) && (
-          <Caption vkuiClass="Group__description" weight="regular" level="1">
-            {description}
-          </Caption>
+          <Caption vkuiClass="Group__description">{description}</Caption>
         )}
       </div>
 

package/src/components/Header/Header.tsx

@@ -6,7 +6,7 @@ import { HasComponent, HasPlatform, HasRootRef } from "../../types";
 import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
 import Headline from "../Typography/Headline/Headline";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import Subhead from "../Typography/Subhead/Subhead";
@@ -43,7 +43,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
       case "tertiary":
         return <Title weight="1" level="3" {...restProps} />;
       case "secondary":
-        return <Caption level="1" weight="semibold" caps {...restProps} />;
+        return <Caption weight="2" caps {...restProps} />;
     }
   }
 
@@ -53,7 +53,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
         return <Headline weight="regular" {...restProps} />;
       case "secondary":
       case "tertiary":
-        return <Caption level="1" weight="regular" {...restProps} />;
+        return <Caption {...restProps} />;
     }
   }
 
@@ -62,7 +62,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
     case "tertiary":
       return <Headline weight="medium" {...restProps} />;
     case "secondary":
-      return <Caption level="1" weight="medium" caps {...restProps} />;
+      return <Caption weight="1" caps {...restProps} />;
   }
 
   return null;
@@ -75,7 +75,7 @@ const HeaderAside: React.FC<HeaderAsideProps> = ({
   ...restProps
 }) => {
   return platform === Platform.VKCOM ? (
-    <Subhead weight="regular" {...restProps} />
+    <Subhead {...restProps} />
   ) : (
     <Text weight="regular" {...restProps} />
   );
@@ -89,9 +89,9 @@ const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
   ...restProps
 }) => {
   return mode === "secondary" ? (
-    <Subhead weight="regular" {...restProps} />
+    <Subhead {...restProps} />
   ) : (
-    <Caption weight="regular" level="1" {...restProps} />
+    <Caption {...restProps} />
   );
 };
 
@@ -135,11 +135,8 @@ const Header: React.FC<HeaderProps> = ({
             <Caption
               vkuiClass="Header__indicator"
               weight={
-                mode === "primary" || mode === "secondary"
-                  ? "medium"
-                  : "regular"
+                mode === "primary" || mode === "secondary" ? "1" : undefined
               }
-              level="1"
             >
               {indicator}
             </Caption>

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -3,7 +3,7 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Tappable from "../Tappable/Tappable";
 import Subhead from "../Typography/Subhead/Subhead";
 import Avatar from "../Avatar/Avatar";
@@ -20,13 +20,11 @@ const CellTypography: React.FC<CellTypographyProps> = ({
   ...restProps
 }: CellTypographyProps) => {
   return size === "s" ? (
-    <Caption level="2" weight="regular" {...restProps}>
+    <Caption level="2" {...restProps}>
       {children}
     </Caption>
   ) : (
-    <Subhead weight="regular" {...restProps}>
-      {children}
-    </Subhead>
+    <Subhead {...restProps}>{children}</Subhead>
   );
 };
 
@@ -79,13 +77,7 @@ export const HorizontalCell: React.FC<HorizontalCellProps> = ({
             </CellTypography>
           )}
           {hasReactNode(subtitle) && (
-            <Caption
-              weight="regular"
-              level="1"
-              vkuiClass="HorizontalCell__subtitle"
-            >
-              {subtitle}
-            </Caption>
+            <Caption vkuiClass="HorizontalCell__subtitle">{subtitle}</Caption>
           )}
         </div>
       </Tappable>

package/src/components/InfoRow/InfoRow.tsx

@@ -24,7 +24,7 @@ const InfoRow: React.FunctionComponent<InfoRowProps> = ({
       weight="regular"
     >
       {hasReactNode(header) && (
-        <Subhead Component="span" vkuiClass="InfoRow__header" weight="regular">
+        <Subhead Component="span" vkuiClass="InfoRow__header">
           {header}
         </Subhead>
       )}

package/src/components/InputLike/InputLike.css

@@ -0,0 +1,25 @@
+.InputLike__mask {
+  position: relative;
+}
+
+.InputLike__mask::after {
+  content: "";
+  position: absolute;
+  width: calc(100% - 0.1em);
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  border-bottom: solid 1px var(--vkui--color_text_secondary);
+}
+
+.InputLike__mask:last-child {
+  margin-right: 1px;
+}
+
+.InputLike__last_character {
+  letter-spacing: 1px;
+}
+
+.InputLike--full + .InputLikeDivider {
+  color: var(--vkui--color_text_primary);
+}

package/src/components/InputLike/InputLike.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { callMultiple } from "../../lib/callMultiple";
+import { stopPropagation } from "../../lib/utils";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import "./InputLike.css";
+
+export interface InputLikeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    HasRootRef<HTMLSpanElement> {
+  length: number;
+  index: number;
+  value?: string;
+  onElementSelect?(index: number): void;
+}
+
+const MASK_SYMBOL = String.fromCharCode(0x2007);
+
+function getMaskElements(length: number) {
+  const result = [];
+  for (let index = 0; index < length; index += 1) {
+    result.push(
+      <span key={index} vkuiClass="InputLike__mask">
+        {MASK_SYMBOL}
+      </span>
+    );
+  }
+  return result;
+}
+
+export const InputLike: React.FC<InputLikeProps> = ({
+  value,
+  length,
+  index,
+  onElementSelect,
+  onClick,
+  onFocus,
+  getRootRef,
+  ...props
+}) => {
+  const handleElementSelect = React.useCallback(
+    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      stopPropagation(event);
+      onElementSelect?.(index);
+    },
+    [index, onElementSelect]
+  );
+
+  return (
+    <span
+      vkuiClass={classNames(
+        "InputLike",
+        value?.length === length && `InputLike--full`
+      )}
+      tabIndex={0}
+      ref={getRootRef}
+      onClick={callMultiple(onClick, handleElementSelect)}
+      onFocus={callMultiple(stopPropagation, onFocus)}
+      {...props}
+    >
+      {value?.slice(0, length - 1)}
+      {value?.slice(length - 1) && (
+        <span key={index} vkuiClass="InputLike__last_character">
+          {value.slice(length - 1)}
+        </span>
+      )}
+      {getMaskElements(length - (value?.length ?? 0))}
+    </span>
+  );
+};
+
+InputLike.displayName = "InputLike";

package/src/components/InputLike/InputLikeDivider.css

@@ -0,0 +1,4 @@
+.InputLikeDivider {
+  color: var(--vkui--color_text_secondary);
+  letter-spacing: 1px;
+}

package/src/components/InputLike/InputLikeDivider.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import "./InputLikeDivider.css";
+
+export const InputLikeDivider: React.FC<
+  React.InputHTMLAttributes<HTMLSpanElement>
+> = ({ children, ...props }) => {
+  return (
+    <span vkuiClass="InputLikeDivider" {...props}>
+      {children}
+    </span>
+  );
+};

package/src/components/LocaleProviderContext/LocaleProviderContext.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export const LocaleProviderContext = React.createContext<string | undefined>(
+  undefined
+);

package/src/components/ModalPage/ModalPage.tsx

@@ -6,6 +6,7 @@ import {
   useModalRegistry,
 } from "../ModalRoot/ModalRootContext";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useOrientationChange } from "../../hooks/useOrientationChange";
 import {
   withAdaptivity,
   ViewHeight,
@@ -46,8 +47,8 @@ const warn = warnOnce("ModalPage");
 const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   props
 ) => {
-  const platform = usePlatform();
   const { updateModalHeight } = React.useContext(ModalRootContext);
+
   const {
     children,
     header,
@@ -63,9 +64,14 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
     ...restProps
   } = props;
 
-  React.useEffect(() => {
-    updateModalHeight();
-  }, [children, updateModalHeight]);
+  const platform = usePlatform();
+  const orientation = useOrientationChange();
+
+  React.useEffect(updateModalHeight, [
+    children,
+    orientation,
+    updateModalHeight,
+  ]);
 
   const isDesktop =
     viewWidth >= ViewWidth.SMALL_TABLET &&

package/src/components/Pagination/Pagination.css

@@ -0,0 +1,62 @@
+.Pagination {
+}
+
+.Pagination__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.Pagination__prevButtonContainer {
+  margin-right: 8px;
+}
+
+.Pagination__nextButtonContainer {
+  margin-left: 8px;
+}
+
+/* Page styles */
+.Pagination__page {
+  box-sizing: border-box;
+  padding-right: 8px;
+  padding-left: 8px;
+  width: 100%;
+  min-width: 40px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  text-align: center;
+  color: var(--vkui--color_text_secondary);
+  user-select: none;
+}
+
+.Pagination__page--state-hover {
+  background-color: var(--vkui--color_transparent--hover);
+}
+
+.Pagination__page--state-active,
+.Pagination__page--current {
+  color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_transparent--active);
+}
+
+.Pagination__page--disabled {
+  opacity: var(--vkui--opacity_disable);
+}
+
+.Pagination__page--sizeY-compact {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--size_button_large_height--compact);
+  height: var(--vkui--size_button_large_height--compact);
+}
+
+.Pagination__page--sizeY-regular {
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--size_button_large_height--regular);
+  height: var(--vkui--size_button_large_height--regular);
+}
+
+.Pagination__page--type-ellipsis {
+  min-width: 16px;
+  padding-right: 0;
+  padding-left: 0;
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,196 @@
+import * as React from "react";
+import {
+  Icon24ChevronCompactLeft,
+  Icon24ChevronCompactRight,
+} from "@vkontakte/icons";
+
+import type { HasRootRef } from "../../types";
+
+import { classNames } from "../../lib/classNames";
+
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { PaginationPageType, usePagination } from "../../hooks/usePagination";
+
+import Tappable from "../Tappable/Tappable";
+import Button from "../Button/Button";
+
+import "./Pagination.css";
+
+function getPageAriaLabelDefault(page: number, isCurrent: boolean): string {
+  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;
+}
+
+export interface PaginationProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onChange">,
+    HasRootRef<HTMLElement> {
+  /**
+   * Текущая страница.
+   */
+  currentPage?: number;
+  /**
+   * Кол-во всегда видимых страниц по краям текущей страницы.
+   */
+  siblingCount?: number;
+  /**
+   * Кол-во всегда видимых страниц в начале и в конце.
+   */
+  boundaryCount?: number;
+  /**
+   * Общее кол-во страниц.
+   */
+  totalPages?: number;
+  /**
+   * Блокировка всех кнопок.
+   */
+  disabled?: boolean;
+  /**
+   * Переобределение `aria-label` для кнопки навигации назад.
+   * По умолчанию используется текст на "ru_RU".
+   */
+  prevButtonAriaLabel?: string;
+  /**
+   * Переобределение `aria-label` для кнопки навигации вперёд.
+   * По умолчанию используется текст на "ru_RU".
+   */
+  nextButtonAriaLabel?: string;
+  /**
+   * Функция для переопределния и/или локализации `aria-label` атрибута.
+   * По умолчанию используется текст на "ru_RU".
+   */
+  getPageAriaLabel?(page: number, isCurrent: boolean): string;
+  onChange?(page: number): void;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage = 1,
+  siblingCount = 1,
+  boundaryCount = 1,
+  totalPages = 1,
+  disabled,
+  getPageAriaLabel = getPageAriaLabelDefault,
+  prevButtonAriaLabel = "Перейти на предыдущую страницу",
+  nextButtonAriaLabel = "Перейти на следующую страницу",
+  getRootRef,
+  onChange,
+  ...resetProps
+}) => {
+  const { sizeY } = useAdaptivity();
+
+  const pages = usePagination({
+    currentPage,
+    totalPages,
+    siblingCount,
+    boundaryCount,
+  });
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  const handlePrevClick = React.useCallback(() => {
+    if (onChange && !isFirstPage) {
+      onChange(currentPage - 1);
+    }
+  }, [currentPage, isFirstPage, onChange]);
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      const page: string = event.currentTarget.dataset.page || "1";
+      onChange?.(Number(page));
+    },
+    [onChange]
+  );
+
+  const handleNextClick = React.useCallback(() => {
+    if (onChange && !isLastPage) {
+      onChange(currentPage + 1);
+    }
+  }, [currentPage, isLastPage, onChange]);
+
+  const renderPages = React.useCallback(
+    (page: PaginationPageType) => {
+      switch (page) {
+        case "start-ellipsis":
+        case "end-ellipsis":
+          return (
+            <li key={page}>
+              <div
+                vkuiClass={classNames(
+                  "Pagination__page",
+                  "Pagination__page--type-ellipsis",
+                  `Pagination__page--sizeY-${sizeY}`,
+                  disabled && "Pagination__page--disabled"
+                )}
+              >
+                ...
+              </div>
+            </li>
+          );
+        default: {
+          const isCurrent = page === currentPage;
+          return (
+            <li key={page}>
+              <Tappable
+                vkuiClass={classNames(
+                  "Pagination__page",
+                  `Pagination__page--sizeY-${sizeY}`,
+                  isCurrent && "Pagination__page--current",
+                  disabled && "Pagination__page--disabled"
+                )}
+                activeMode="Pagination__page--state-active"
+                hoverMode="Pagination__page--state-hover"
+                hasActive={!isCurrent}
+                hasHover={!isCurrent}
+                focusVisibleMode="outside"
+                disabled={disabled}
+                data-page={page}
+                aria-current={isCurrent ? true : undefined}
+                aria-label={getPageAriaLabel(page, isCurrent)}
+                onClick={handleClick}
+              >
+                {page}
+              </Tappable>
+            </li>
+          );
+        }
+      }
+    },
+    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick]
+  );
+
+  return (
+    <nav
+      vkuiClass="Pagination"
+      role="navigation"
+      aria-label="Навигация по страницам"
+      ref={getRootRef}
+      {...resetProps}
+    >
+      <ul vkuiClass="Pagination__list">
+        <li vkuiClass="Pagination__prevButtonContainer">
+          <Button
+            size="l"
+            before={<Icon24ChevronCompactLeft width={24} />}
+            appearance="accent"
+            mode="tertiary"
+            stretched
+            disabled={isFirstPage || disabled}
+            aria-label={prevButtonAriaLabel}
+            onClick={handlePrevClick}
+          />
+        </li>
+        {pages.map(renderPages)}
+        <li vkuiClass="Pagination__nextButtonContainer">
+          <Button
+            size="l"
+            after={<Icon24ChevronCompactRight width={24} />}
+            appearance="accent"
+            mode="tertiary"
+            stretched
+            disabled={isLastPage || disabled}
+            aria-label={nextButtonAriaLabel}
+            onClick={handleNextClick}
+          />
+        </li>
+      </ul>
+    </nav>
+  );
+};