@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/ModalRoot/Readme.md

@@ -660,3 +660,115 @@ class SelectModal extends Component {
 
 export default withModalRootContext(SelectModal);
 ```
+
+#### В мобильной версии при параметре `autoFocus` у контрола ломается поведение карточки
+
+К сожалению, из-за особенностей React, `autoFocus` ломает CSS анимацию.
+
+Чтобы исправить проблему, следует отказаться от `autoFocus` и выставлять фокус в ручную при событии `onOpened`.
+Подписываться на `onOpened` можно двумя разными способами.
+
+1️⃣ `<ModalRoot onOpened={(id) => ...} />`
+
+```jsx static
+const App = () => {
+  const inputRef = useRef(null);
+
+  const handleOpen = React.useCallback((id) => {
+    if (id === "modal-with-auto-focus" && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const modal = (
+    <ModalRoot activeModal="modal-with-auto-focus" onOpened={handleOpen}>
+      <ModalPage id="modal-with-auto-focus">
+        <Input getRootRef={inputRef} />
+      </ModalPage>
+    </ModalRoot>
+  );
+  // ...
+};
+```
+
+2️⃣ `<ModalPage onOpened={() => ...} />`
+
+> ⚠️ в этом случае `ModalPage` нельзя заворачивать в другой компонент
+> иначе `ModalRoot` не сможет получить доступ к `onOpened`.
+
+```jsx static
+const App = () => {
+  const inputRef = useRef(null);
+
+  const handleOpen = React.useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const modal = (
+    <ModalRoot activeModal="modal-with-auto-focus">
+      <ModalPage id="modal-with-auto-focus" onOpened={handleOpen}>
+        <Input getRootRef={inputRef} />
+      </ModalPage>
+    </ModalRoot>
+  );
+  // ...
+};
+```
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+const Example = () => {
+  const firstInputRef = useRef(null);
+  const secondInputRef = useRef(null);
+  const [activeModal, setActiveModal] = React.useState(false);
+
+  const handleOpenOfModalRoot = React.useCallback((id) => {
+    if (id === "modal-1") {
+      firstInputRef.current.focus();
+    }
+  }, []);
+
+  const handleOpenOfModalPage = React.useCallback(() => {
+    secondInputRef.current.focus();
+  }, []);
+
+  const modal = (
+    <ModalRoot activeModal={activeModal} onOpened={handleOpenOfModalRoot}>
+      <ModalPage id="modal-1" onClose={() => setActiveModal(null)}>
+        <Div>
+          <input type="text" ref={firstInputRef} />
+        </Div>
+      </ModalPage>
+      <ModalPage
+        id="modal-2"
+        onOpened={handleOpenOfModalPage}
+        onClose={() => setActiveModal(null)}
+      >
+        <Div>
+          <input type="text" ref={secondInputRef} />
+        </Div>
+      </ModalPage>
+    </ModalRoot>
+  );
+
+  return (
+    <SplitLayout modal={modal}>
+      <SplitCol>
+        <View activePanel="main">
+          <Panel id="main">
+            <CellButton multiline onClick={() => setActiveModal("modal-1")}>
+              Пример с onOpened() на ModalRoot
+            </CellButton>
+            <CellButton multiline onClick={() => setActiveModal("modal-2")}>
+              Пример с onOpened() на ModalPage
+            </CellButton>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
+
+Example();
+```

package/src/components/ModalRoot/types.ts

@@ -16,7 +16,22 @@ export interface ModalElements {
 
 export interface ModalsStateEntry extends ModalElements {
   id: string | null;
-  onClose?: () => any;
+  /**
+   * Событие начала открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Событие открытия модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Событие начала закрытия модалки.
+   */
+  onClose?: VoidFunction;
+  /**
+   * Событие закрытия модалки.
+   */
+  onClosed?: VoidFunction;
   type?: ModalType;
 
   settlingHeight?: number;

package/src/components/ModalRoot/useModalManager.tsx

@@ -15,10 +15,11 @@ interface ModalTransitionState {
 }
 
 export interface ModalTransitionProps extends ModalTransitionState {
-  onEnter: (id: string | null) => void;
-  onExit: (id: string | null) => void;
+  onEnter: VoidFunction;
+  onEntered: (id: string | null) => void;
+  onExit: VoidFunction;
+  onExited: (id: string | null) => void;
   getModalState: (id: string) => ModalsStateEntry;
-  closeActiveModal: VoidFunction;
   delayEnter: boolean;
 }
 
@@ -86,7 +87,10 @@ export function modalTransitionReducer(
 export function useModalManager(
   activeModal: string | null | undefined,
   children: React.ReactNode | React.ReactNode[],
-  onClose: (id: string) => void,
+  onOpen: (id: string) => void = noop,
+  onOpened: (id: string) => void = noop,
+  onClose: (id: string) => void = noop,
+  onClosed: (id: string) => void = noop,
   initModal: (state: ModalsStateEntry) => void = noop
 ): ModalTransitionProps {
   const modalsState = React.useRef<ModalsState>({}).current;
@@ -97,7 +101,10 @@ export function useModalManager(
       id: id ?? null,
     };
 
+    state.onOpen = Modal.props.onOpen;
+    state.onOpened = Modal.props.onOpened;
     state.onClose = Modal.props.onClose;
+    state.onClosed = Modal.props.onClosed;
     state.dynamicContentHeight = !!modalProps.dynamicContentHeight;
     // ModalPage props
     if (typeof modalProps.settlingHeight === "number") {
@@ -126,7 +133,7 @@ export function useModalManager(
   useIsomorphicLayoutEffect(() => {
     // ignore non-existent activeModal
     if (process.env.NODE_ENV === "development" && isMissing) {
-      warn(`Can't transition - modal ${activeModal} not found`);
+      warn(`Can't transition - modal ${activeModal} not found`, "error");
     }
     dispatchTransition({ type: "setActive", id: safeActiveModal ?? null });
   }, [activeModal]);
@@ -141,13 +148,37 @@ export function useModalManager(
 
   const isCard = (id: string | null | undefined) =>
     id != null && modalsState[id]?.type === ModalType.CARD;
-  const onEnter = React.useCallback(
-    (id: string | null) => dispatchTransition({ type: "entered", id }),
-    []
+  const onEntered = React.useCallback(
+    (id: string | null) => {
+      if (id) {
+        const modalState = modalsState[id];
+
+        if (isFunction(modalState.onOpened)) {
+          modalState.onOpened();
+        } else if (isFunction(onOpened)) {
+          onOpened(id);
+        }
+      }
+
+      dispatchTransition({ type: "entered", id });
+    },
+    [modalsState, onOpened]
   );
-  const onExit = React.useCallback(
-    (id: string | null) => dispatchTransition({ type: "exited", id }),
-    []
+  const onExited = React.useCallback(
+    (id: string | null) => {
+      if (id) {
+        const modalState = modalsState[id];
+
+        if (isFunction(modalState.onClosed)) {
+          modalState.onClosed();
+        } else if (isFunction(onClosed)) {
+          onClosed(id);
+        }
+      }
+
+      dispatchTransition({ type: "exited", id });
+    },
+    [modalsState, onClosed]
   );
   const delayEnter = Boolean(
     transitionState.exitingModal &&
@@ -158,7 +189,19 @@ export function useModalManager(
     [modalsState]
   );
 
-  function closeActiveModal() {
+  function onEnter() {
+    const modalState =
+      transitionState.activeModal && modalsState[transitionState.activeModal];
+    if (modalState) {
+      if (isFunction(modalState.onOpen)) {
+        modalState.onOpen();
+      } else if (isFunction(onOpen)) {
+        onOpen(modalState.id);
+      }
+    }
+  }
+
+  function onExit() {
     const modalState =
       transitionState.activeModal && modalsState[transitionState.activeModal];
     if (modalState) {
@@ -166,19 +209,18 @@ export function useModalManager(
         modalState.onClose();
       } else if (isFunction(onClose)) {
         onClose(modalState.id);
-      } else if (process.env.NODE_ENV === "development") {
-        warn("onClose is undefined");
       }
     }
   }
 
   return {
     onEnter,
+    onEntered,
     onExit,
+    onExited,
     ...transitionState,
     delayEnter,
     getModalState,
-    closeActiveModal,
   };
 }
 
@@ -194,7 +236,10 @@ export function withModalManager(
       const transitionManager = useModalManager(
         props.activeModal,
         props.children,
+        (props as any).onOpen,
+        (props as any).onOpened,
         (props as any).onClose,
+        (props as any).onClosed,
         initModal
       );
       return <Wrapped {...(props as any)} {...transitionManager} />;

package/src/components/NativeSelect/NativeSelect.tsx

@@ -71,6 +71,7 @@ const NativeSelect: React.FC<
   return (
     <FormField
       Component="label"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Select", platform), {
         ["Select--not-selected"]: notSelected,
         [`Select--align-${align}`]: !!align,

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>
+  );
+};

package/src/components/Pagination/Readme.md

@@ -0,0 +1,110 @@
+Чаще всего используется в больших списках или таблицах, для более понятного структурирования и деления информации.
+
+По умолчанию многоточие показывается когда кол-во страниц `> 7`. Чтобы повлиять на это поведение, существуют параметры `siblingCount` и `boundaryCount`.
+К примеру, если выставить `siblingCount={0}` или `boundaryCount={0}`, то многоточие появится уже при `> 5`.
+Если выставить и `siblingCount={0}`, и `boundaryCount={0}`, то `> 4`.
+
+> При ширине `< 380px` рекомендуется отключать `siblingCount` передав в него значение `0`.
+
+## `usePagination`
+
+Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимает почти те же параметры, что и `Pagination`.
+
+```jsx { "props": { "layout": false, "adaptivity": true, "iframe": false } }
+const Example = () => {
+  const [sizeY, setSizeY] = useState("compact");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [siblingCount, setSiblingCount] = useState(0);
+  const [boundaryCount, setBoundaryCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(123);
+  const [disabled, setDisabled] = useState(false);
+
+  const handleChange = React.useCallback((page) => {
+    setCurrentPage(page);
+  }, []);
+
+  return (
+    <div style={rootContainerStyles}>
+      <AdaptivityProvider sizeY={sizeY}>
+        <div style={demoContainerStyles}>
+          <Pagination
+            currentPage={currentPage}
+            siblingCount={siblingCount}
+            boundaryCount={boundaryCount}
+            totalPages={totalPages}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+        </div>
+      </AdaptivityProvider>
+      <div style={propsContainerStyles}>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="prop[currentPage]">
+          <Input
+            type="number"
+            value={currentPage}
+            onChange={({ target: { value } }) => setCurrentPage(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[siblingCount]">
+          <Input
+            type="number"
+            value={siblingCount}
+            onChange={({ target: { value } }) => setSiblingCount(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[boundaryCount]">
+          <Input
+            type="number"
+            value={boundaryCount}
+            onChange={({ target: { value } }) =>
+              setBoundaryCount(Number(value))
+            }
+          />
+        </FormItem>
+        <FormItem top="prop[totalPages]">
+          <Input
+            type="number"
+            value={totalPages}
+            onChange={({ target: { value } }) => setTotalPages(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[disabled]">
+          <Checkbox
+            value={disabled}
+            onChange={({ target: { checked } }) => setDisabled(checked)}
+          >
+            disabled
+          </Checkbox>
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+  justifyContent: "center",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  paddingTop: 24,
+  paddingBottom: 24,
+};
+
+const propsContainerStyles = { minWidth: 200 };
+
+<Example />;
+```

package/src/components/Panel/Panel.tsx

@@ -30,6 +30,7 @@ export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
       <div
         {...restProps}
         ref={getRootRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
           getClassName("Panel", platform),
           `Panel--${sizeX}`,

package/src/components/PanelHeader/PanelHeader.tsx

@@ -91,6 +91,7 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("PanelHeader", platform),
         {

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -36,6 +36,7 @@ const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
   return (
     <PanelHeaderButton
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
         "PanelHeaderBack--has-label": showLabel && !!label,
       })}