@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/InfoRow/InfoRow.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import Headline from "../Typography/Headline/Headline";

package/src/components/Input/Input.css

@@ -24,7 +24,7 @@
   height: 42px;
   line-height: 20px;
   font-size: 16px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   padding: 11px;
   position: relative;
   z-index: 2;
@@ -40,13 +40,13 @@
 }
 
 .Input__el:disabled {
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .Input__el::placeholder {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .Input__el:disabled::placeholder {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/Input/Input.tsx

@@ -15,7 +15,8 @@ export interface InputProps
     AdaptivityProps,
     FormFieldProps {}
 
-const Input: React.FunctionComponent<InputProps> = ({
+const InputComponent: React.FunctionComponent<InputProps> = ({
+  type = "text",
   align,
   getRef,
   className,
@@ -30,7 +31,7 @@ const Input: React.FunctionComponent<InputProps> = ({
     <FormField
       vkuiClass={classNames(
         getClassName("Input", platform),
-        { [`Input--${align}`]: !!align },
+        !!align && `Input--${align}`,
         `Input--sizeY-${sizeY}`
       )}
       style={style}
@@ -39,16 +40,11 @@ const Input: React.FunctionComponent<InputProps> = ({
       after={after}
       disabled={restProps.disabled}
     >
-      <input {...restProps} vkuiClass="Input__el" ref={getRef} />
+      <input {...restProps} type={type} vkuiClass="Input__el" ref={getRef} />
     </FormField>
   );
 };
 
-Input.defaultProps = {
-  type: "text",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Input, {
+export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });

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 !important;
+}
+
+.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 !important;
+}

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/List/List.tsx

@@ -16,6 +16,7 @@ const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
     <div
       role="list"
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("List", platform), {
         "List--dragging": isDragging,
       })}

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/MiniInfoCell/MiniInfoCell.tsx

@@ -64,6 +64,7 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
       disabled={!isClickable}
       role={isClickable ? "button" : undefined}
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("MiniInfoCell", platform),
         {

package/src/components/ModalCard/ModalCard.css

@@ -18,16 +18,6 @@
   transform: translateY(100%);
 }
 
-.ModalCard__dismiss {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 48px;
-  height: 48px;
-  color: var(--placeholder_icon_foreground_primary);
-  justify-content: center;
-}
-
 /**
  * iOS
  */

package/src/components/ModalCard/ModalCard.tsx

@@ -61,6 +61,7 @@ const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ModalCard", platform), {
         "ModalCard--desktop": isDesktop,
       })}

package/src/components/ModalCardBase/ModalCardBase.css

@@ -65,6 +65,16 @@
   margin-right: 0;
 }
 
+.ModalCardBase__dismiss {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 48px;
+  height: 48px;
+  color: var(--placeholder_icon_foreground_primary);
+  justify-content: center;
+}
+
 /**
  * iOS
  */

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { hasReactNode } from "../../lib/utils";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Headline from "../Typography/Headline/Headline";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
@@ -51,6 +51,11 @@ export interface ModalCardBaseProps
    */
   actionsLayout?: "vertical" | "horizontal";
   onClose?: VoidFunction;
+
+  /**
+   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.
+   */
+  dismissLabel?: string;
 }
 
 export const ModalCardBase = withAdaptivity<
@@ -68,6 +73,7 @@ export const ModalCardBase = withAdaptivity<
     hasMouse,
     viewHeight,
     onClose,
+    dismissLabel = "Скрыть",
     ...restProps
   }) => {
     const platform = usePlatform();
@@ -82,12 +88,14 @@ export const ModalCardBase = withAdaptivity<
     return (
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(getClassName("ModalCardBase", platform), {
           "ModalCardBase--desktop": isDesktop,
         })}
         ref={getRootRef}
       >
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("ModalCardBase__container", {
             "ModalCardBase__container--softwareKeyboardOpened":
               isSoftwareKeyboardOpened,
@@ -115,6 +123,7 @@ export const ModalCardBase = withAdaptivity<
 
           {hasReactNode(actions) && (
             <div
+              // eslint-disable-next-line vkui/no-object-expression-in-arguments
               vkuiClass={classNames("ModalCardBase__actions", {
                 "ModalCardBase__actions--v": actionsLayout === "vertical",
               })}
@@ -125,7 +134,11 @@ export const ModalCardBase = withAdaptivity<
 
           {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}
           {canShowCloseBtnIos && (
-            <PanelHeaderButton vkuiClass="ModalCard__dismiss" onClick={onClose}>
+            <PanelHeaderButton
+              aria-label={dismissLabel}
+              vkuiClass="ModalCardBase__dismiss"
+              onClick={onClose}
+            >
               <Icon24Dismiss />
             </PanelHeaderButton>
           )}

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,
@@ -30,7 +31,22 @@ export interface ModalPageProps
    * Шапка модальной страницы, `<ModalPageHeader />`
    */
   header?: React.ReactNode;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при начале закрытия модалки.
+   */
   onClose?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: VoidFunction;
   /**
    * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
    */
@@ -46,8 +62,8 @@ const warn = warnOnce("ModalPage");
 const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   props
 ) => {
-  const platform = usePlatform();
   const { updateModalHeight } = React.useContext(ModalRootContext);
+
   const {
     children,
     header,
@@ -55,7 +71,10 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
     viewHeight,
     sizeX,
     hasMouse,
+    onOpen,
+    onOpened,
     onClose,
+    onClosed,
     settlingHeight,
     dynamicContentHeight,
     getModalContentRef,
@@ -63,9 +82,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 &&
@@ -78,6 +102,7 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("ModalPage", platform),
         `ModalPage--sizeX-${sizeX}`,

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -30,6 +30,7 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ModalPageHeader", platform), {
         "ModalPageHeader--desktop": isDesktop,
       })}

package/src/components/ModalRoot/ModalRoot.tsx

@@ -45,9 +45,25 @@ export interface ModalRootProps extends HasPlatform {
   activeModal?: string | null;
 
   /**
-   * Будет вызвано при закрытии активной модалки с её id
+   * Будет вызвано при начале открытия активной модалки с её id
+   */
+  onOpen?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном открытии активной модалки с её id
+   */
+  onOpened?(modalId: string): void;
+
+  /**
+   * Будет вызвано при начале закрытия активной модалки с её id
    */
   onClose?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном закрытии активной модалки с её id
+   */
+  onClosed?(modalId: string): void;
+
   /**
    * @ignore
    */
@@ -76,7 +92,7 @@ class ModalRootTouchComponent extends React.Component<
       updateModalHeight: this.updateModalHeight,
       registerModal: ({ id, ...data }) =>
         Object.assign(this.getModalState(id), data),
-      onClose: () => this.props.closeActiveModal(),
+      onClose: () => this.props.onExit(),
       isInsideModal: true,
     };
 
@@ -150,11 +166,12 @@ class ModalRootTouchComponent extends React.Component<
     ) {
       const { enteringModal } = this.props;
       const enteringState = this.getModalState(enteringModal);
+      this.props.onEnter();
       this.waitTransitionFinish(enteringState, () => {
         if (enteringState?.innerElement) {
           enteringState.innerElement.style.transitionDelay = "";
         }
-        this.props.onEnter(enteringModal);
+        this.props.onEntered(enteringModal);
       });
 
       if (enteringState?.innerElement) {
@@ -274,7 +291,11 @@ class ModalRootTouchComponent extends React.Component<
     const prevModalState = this.getModalState(id);
 
     if (!prevModalState) {
-      id && warn(`[closeActiveModal] Modal ${id} does not exist - not closing`);
+      id &&
+        warn(
+          `closeActiveModal: Modal ${id} does not exist - not closing`,
+          "error"
+        );
       return;
     }
 
@@ -284,7 +305,7 @@ class ModalRootTouchComponent extends React.Component<
 
     const prevIsPage =
       !!prevModalState && prevModalState.type === ModalType.PAGE;
-    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
+    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));
     const exitTranslate =
       prevIsPage &&
       nextIsPage &&
@@ -475,7 +496,7 @@ class ModalRootTouchComponent extends React.Component<
       modalState.hidden = translateY === 100;
 
       if (modalState.hidden) {
-        this.props.closeActiveModal();
+        this.props.onExit();
       }
 
       setStateCallback = () => {
@@ -519,7 +540,7 @@ class ModalRootTouchComponent extends React.Component<
       modalState.hidden = translateY === 100;
 
       if (modalState.hidden) {
-        this.props.closeActiveModal();
+        this.props.onExit();
       }
 
       setStateCallback = () => {
@@ -647,6 +668,7 @@ class ModalRootTouchComponent extends React.Component<
       <TouchRootContext.Provider value={true}>
         <ModalRootContext.Provider value={this.modalRootContext}>
           <Touch
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames(
               getClassName("ModalRoot", this.props.platform),
               {
@@ -662,7 +684,7 @@ class ModalRootTouchComponent extends React.Component<
           >
             <div
               vkuiClass="ModalRoot__mask"
-              onClick={this.props.closeActiveModal}
+              onClick={this.props.onExit}
               ref={this.maskElementRef}
             />
             <div vkuiClass="ModalRoot__viewport" ref={this.viewportRef}>
@@ -689,8 +711,9 @@ class ModalRootTouchComponent extends React.Component<
                         modalState.modalElement = e;
                       }
                     }}
-                    onClose={this.props.closeActiveModal}
+                    onClose={this.props.onExit}
                     timeout={this.timeout}
+                    // eslint-disable-next-line vkui/no-object-expression-in-arguments
                     vkuiClass={classNames("ModalRoot__modal", {
                       "ModalRoot__modal--active": modalId === activeModal,
                       "ModalRoot__modal--prev": modalId === exitingModal,
@@ -743,7 +766,7 @@ function initModal(modalState: ModalsStateEntry) {
     case ModalType.CARD:
       return initCardModal(modalState);
     default:
-      IS_DEV && warn("[initActiveModal] modalState.type is unknown");
+      IS_DEV && warn("initActiveModal: modalState.type is unknown", "error");
   }
 }
 

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -15,9 +15,24 @@ export interface ModalRootProps extends AdaptivityProps {
   activeModal?: string | null;
 
   /**
-   * Будет вызвано при закрытии активной модалки с её id
+   * Будет вызвано при начале открытия активной модалки с её id
    */
-  onClose?: (modalId: string) => void;
+  onOpen?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном открытии активной модалки с её id
+   */
+  onOpened?(modalId: string): void;
+
+  /**
+   * Будет вызвано при начале закрытия активной модалки с её id
+   */
+  onClose?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном закрытии активной модалки с её id
+   */
+  onClosed?(modalId: string): void;
 }
 
 const ModalRootComponent: React.FC<

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -32,9 +32,24 @@ export interface ModalRootProps extends HasPlatform {
   configProvider?: ConfigProviderContextInterface;
 
   /**
-   * Будет вызвано при закрытии активной модалки с её id
+   * Будет вызвано при начале открытия активной модалки с её id
+   */
+  onOpen?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном открытии активной модалки с её id
+   */
+  onOpened?(modalId: string): void;
+
+  /**
+   * Будет вызвано при начале закрытия активной модалки с её id
    */
   onClose?(modalId: string): void;
+
+  /**
+   * Будет вызвано при окончательном закрытии активной модалки с её id
+   */
+  onClosed?(modalId: string): void;
 }
 
 class ModalRootDesktopComponent extends React.Component<
@@ -49,7 +64,7 @@ class ModalRootDesktopComponent extends React.Component<
       updateModalHeight: () => undefined,
       registerModal: ({ id, ...data }) =>
         Object.assign(this.getModalState(id), data),
-      onClose: () => this.props.closeActiveModal(),
+      onClose: () => this.props.onExit(),
       isInsideModal: true,
     };
   }
@@ -92,10 +107,11 @@ class ModalRootDesktopComponent extends React.Component<
     ) {
       const { enteringModal } = this.props;
       const enteringState = this.getModalState(enteringModal);
+      this.props.onEnter();
       requestAnimationFrame(() => {
         if (this.props.enteringModal === enteringModal) {
           this.waitTransitionFinish(enteringState, () =>
-            this.props.onEnter(enteringModal)
+            this.props.onEntered(enteringModal)
           );
           this.animateModalOpacity(enteringState, true);
         }
@@ -123,7 +139,7 @@ class ModalRootDesktopComponent extends React.Component<
       return;
     }
 
-    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
+    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));
     this.animateModalOpacity(prevModalState, false);
     if (!this.props.activeModal) {
       this.setMaskOpacity(prevModalState, 0);
@@ -152,7 +168,7 @@ class ModalRootDesktopComponent extends React.Component<
     }
   }
 
-  /* Анимирует сдивг модалки */
+  /* Анимирует сдвиг модалки */
   animateModalOpacity(
     modalState: ModalsStateEntry | undefined,
     display: boolean
@@ -202,6 +218,7 @@ class ModalRootDesktopComponent extends React.Component<
     return (
       <ModalRootContext.Provider value={this.modalRootContext}>
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames(
             getClassName("ModalRoot", this.props.platform),
             {
@@ -214,7 +231,7 @@ class ModalRootDesktopComponent extends React.Component<
           <div
             vkuiClass="ModalRoot__mask"
             ref={this.maskElementRef}
-            onClick={this.props.closeActiveModal}
+            onClick={this.props.onExit}
           />
           <div vkuiClass="ModalRoot__viewport">
             {this.modals.map((Modal: React.ReactElement) => {
@@ -228,9 +245,10 @@ class ModalRootDesktopComponent extends React.Component<
               return (
                 <FocusTrap
                   restoreFocus={false}
-                  onClose={this.props.closeActiveModal}
+                  onClose={this.props.onExit}
                   timeout={this.timeout}
                   key={key}
+                  // eslint-disable-next-line vkui/no-object-expression-in-arguments
                   vkuiClass={classNames("ModalRoot__modal", {
                     "ModalRoot__modal--active":
                       !exitingModal &&