@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/View/utils.ts

@@ -1,9 +0,0 @@
-import { TouchEvent } from "../Touch/Touch";
-
-const swipeBackExcludedSelector =
-  "input, textarea, [data-vkui-swipe-back=false]";
-
-export function swipeBackExcluded(e: TouchEvent) {
-  const target = e.originalEvent.target as HTMLElement;
-  return Boolean(target?.closest(swipeBackExcludedSelector));
-}

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.css

@@ -1,9 +0,0 @@
-.VisuallyHiddenInput {
-  position: absolute;
-  height: 1px;
-  white-space: nowrap;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  overflow: hidden;
-  opacity: 0;
-}

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef";
-import { HasRef } from "../../types";
-import "./VisuallyHiddenInput.css";
-
-export interface VisuallyHiddenInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    HasRef<HTMLInputElement> {}
-
-/**
- * @description
- * Обертка над обычным `<input/>`; дает
- * скрыть его визуально и оставить
- * доступным для ассистивных технологий.
- */
-export const VisuallyHiddenInput: React.FC<VisuallyHiddenInputProps> = ({
-  getRef,
-  ...restProps
-}) => {
-  const inputRef = useExternRef(getRef);
-
-  return (
-    <input {...restProps} vkuiClass="VisuallyHiddenInput" ref={inputRef} />
-  );
-};

package/src/components/WriteBar/Readme.md

@@ -1,224 +0,0 @@
-Компонент для отрисовки поля ввода сообщения или комментария.
-
-Для `before`, `inlineAfter` и `after` необходимо использовать одну или несколько `WriteBarIcon`.
-
-Все остальные свойства кроме `className` прокидываются элементу `<textarea />`.
-
-```jsx
-import { useState, useEffect, useRef, Fragment } from "react";
-
-const WriteBarExample = (props) => {
-  const [text1, setText1] = useState("");
-  const [text2, setText2] = useState("");
-  const [text3, setText3] = useState("Завтра в 7?");
-  const [text4, setText4] = useState("Да.");
-
-  const attachmentsCount = 5;
-  const fixedLayoutInnerElRef = useRef();
-  const [bottomPadding, setBottomPadding] = useState(0);
-  const [isAttachmentsShown, setIsAttachmentsShown] = useState(false);
-  const [text, setText] = useState("");
-
-  const updateBottomPadding = () => {
-    const el = fixedLayoutInnerElRef.current;
-    if (el) {
-      const height = el.offsetHeight;
-      if (height !== bottomPadding) {
-        setBottomPadding(height);
-      }
-    }
-  };
-
-  useEffect(() => {
-    updateBottomPadding();
-  }, [isAttachmentsShown]);
-
-  return (
-    <View activePanel="writebar">
-      <Panel id="writebar">
-        <PanelHeader>WriteBar</PanelHeader>
-
-        <Group>
-          <WriteBar
-            value={text1}
-            onChange={(e) => setText1(e.target.value)}
-            before={<WriteBarIcon mode="attach" />}
-            after={
-              <Fragment>
-                <WriteBarIcon aria-label="Эмоджи и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-
-                <WriteBarIcon aria-label="Записать видео-сообщение">
-                  <Icon28CameraOutline />
-                </WriteBarIcon>
-
-                <WriteBarIcon aria-label="Записать голосовое сообщение">
-                  <Icon28VoiceOutline />
-                </WriteBarIcon>
-              </Fragment>
-            }
-            placeholder="Сообщение"
-          />
-        </Group>
-
-        <Group>
-          <WriteBar
-            value={text2}
-            onChange={(e) => setText2(e.target.value)}
-            before={<WriteBarIcon mode="attach" />}
-            inlineAfter={
-              <Fragment>
-                {text2.length === 0 && (
-                  <WriteBarIcon aria-label="Открыть меню бота">
-                    <Icon28KeyboardBotsOutline />
-                  </WriteBarIcon>
-                )}
-
-                {text2.length > 0 && (
-                  <WriteBarIcon aria-label="Эмоджи и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                )}
-              </Fragment>
-            }
-            after={
-              <Fragment>
-                {text2.length === 0 && (
-                  <WriteBarIcon aria-label="Эмоджи и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                )}
-
-                {text2.length === 0 && (
-                  <WriteBarIcon aria-label="Записать голосовое сообщение">
-                    <Icon28VoiceOutline />
-                  </WriteBarIcon>
-                )}
-
-                {text2.length > 0 && <WriteBarIcon mode="send" />}
-              </Fragment>
-            }
-            placeholder="Сообщение"
-          />
-        </Group>
-
-        <Group>
-          <WriteBar
-            value={text3}
-            onChange={(e) => setText3(e.target.value)}
-            before={<WriteBarIcon mode="attach" />}
-            inlineAfter={
-              <Fragment>
-                {text3.length > 0 && (
-                  <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                )}
-              </Fragment>
-            }
-            after={
-              <Fragment>
-                {text3.length === 0 && (
-                  <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                )}
-
-                <WriteBarIcon mode="send" disabled={text3.length === 0} />
-              </Fragment>
-            }
-            placeholder="Сообщение"
-          />
-        </Group>
-
-        <Group>
-          <WriteBar
-            value={text4}
-            onChange={(e) => setText4(e.target.value)}
-            before={<WriteBarIcon mode="attach" />}
-            inlineAfter={
-              <Fragment>
-                {text4.length > 0 && (
-                  <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                )}
-              </Fragment>
-            }
-            after={
-              <Fragment>
-                {text4.length === 0 && (
-                  <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                )}
-
-                <WriteBarIcon mode="done" disabled={text4.length === 0} />
-              </Fragment>
-            }
-            placeholder="Сообщение"
-          />
-        </Group>
-
-        <div style={{ height: bottomPadding }} />
-
-        <FixedLayout vertical="bottom">
-          <div ref={fixedLayoutInnerElRef}>
-            <Separator wide />
-
-            {isAttachmentsShown && (
-              <div>
-                <Div>Интерфейс прикрепления</Div>
-                <Separator wide />
-              </div>
-            )}
-
-            <WriteBar
-              before={
-                <WriteBarIcon
-                  mode="attach"
-                  onClick={() => setIsAttachmentsShown(!isAttachmentsShown)}
-                  count={isAttachmentsShown ? null : attachmentsCount}
-                />
-              }
-              inlineAfter={
-                <Fragment>
-                  {text.length > 0 && (
-                    <WriteBarIcon aria-label="Смайлы и стикеры">
-                      <Icon28SmileOutline />
-                    </WriteBarIcon>
-                  )}
-                </Fragment>
-              }
-              after={
-                <Fragment>
-                  {text.length === 0 && (
-                    <WriteBarIcon aria-label="Смайлы и стикеры">
-                      <Icon28SmileOutline />
-                    </WriteBarIcon>
-                  )}
-
-                  {text.length === 0 && (
-                    <WriteBarIcon aria-label="Записать голосовое сообщение">
-                      <Icon28VoiceOutline />
-                    </WriteBarIcon>
-                  )}
-
-                  {text.length > 0 && <WriteBarIcon mode="send" />}
-                </Fragment>
-              }
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              onHeightChange={() => updateBottomPadding()}
-              placeholder="Сообщение"
-            />
-          </div>
-        </FixedLayout>
-      </Panel>
-    </View>
-  );
-};
-
-<WriteBarExample />;
-```

package/src/components/WriteBar/WriteBar.css

@@ -1,106 +0,0 @@
-.WriteBar {
-  background: var(--background_content);
-}
-
-.WriteBar__before,
-.WriteBar__form,
-.WriteBar__after {
-  display: flex;
-  align-items: flex-end;
-}
-
-.WriteBar__form {
-  min-height: 52px;
-}
-
-.WriteBar__formIn {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  position: relative;
-}
-
-.WriteBar__textarea {
-  box-sizing: border-box;
-  width: 100%;
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-  resize: none;
-  line-height: 20px;
-  color: var(--text_primary);
-  -webkit-appearance: none;
-  max-height: 120px;
-}
-
-.WriteBar__textarea::placeholder {
-  color: var(--text_placeholder);
-}
-
-.WriteBar__textarea::-moz-placeholder {
-  opacity: 1;
-  color: var(--text_placeholder);
-}
-
-.WriteBar__inlineAfter {
-  display: flex;
-  align-items: flex-end;
-}
-
-/**
- * iOS
- */
-
-.WriteBar--ios .WriteBar__before,
-.WriteBar--ios .WriteBar__after {
-  padding: 0 4px;
-}
-
-.WriteBar--ios .WriteBar__formIn {
-  box-sizing: border-box;
-  background-color: var(--input_background);
-  border: 1px solid var(--input_border);
-  border-radius: 18px;
-  margin: 8px 0;
-}
-
-.WriteBar--ios .WriteBar__formIn:first-child {
-  margin-left: 12px;
-}
-
-.WriteBar--ios .WriteBar__inlineAfter {
-  margin-right: -1px;
-  margin-top: -9px;
-  margin-bottom: -9px;
-}
-
-.WriteBar--ios .WriteBar__textarea {
-  height: 34px;
-  padding: 6px 11px;
-  font-size: 17px;
-  line-height: 22px;
-}
-
-/**
- * Android + vkcom
- */
-
-.WriteBar--android .WriteBar__before,
-.WriteBar--vkcom .WriteBar__before {
-  padding-left: 4px;
-}
-
-.WriteBar--android .WriteBar__after,
-.WriteBar--vkcom .WriteBar__after {
-  padding-right: 4px;
-}
-
-.WriteBar--android .WriteBar__textarea,
-.WriteBar--vkcom .WriteBar__textarea {
-  height: 52px;
-  padding: 16px 12px;
-  font-size: 16px;
-  line-height: 20px;
-}

package/src/components/WriteBar/WriteBar.tsx

@@ -1,137 +0,0 @@
-import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useExternRef } from "../../hooks/useExternRef";
-import { hasReactNode, isFunction } from "../../lib/utils";
-import { useDOM } from "../../lib/dom";
-import { getClassName } from "../../helpers/getClassName";
-import { HasRef, HasRootRef } from "../../types";
-import "./WriteBar.css";
-
-export interface WriteBarProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    HasRootRef<HTMLDivElement>,
-    HasRef<HTMLTextAreaElement> {
-  /**
-   * Содержимое, отображаемое слева от поля ввода.
-   */
-  before?: React.ReactNode;
-  /**
-   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)
-   */
-  inlineAfter?: React.ReactNode;
-  /**
-   * Содержимое, отображаемое справа от поля ввода
-   */
-  after?: React.ReactNode;
-  /**
-   * Вызывается при смене высоты поля ввода
-   */
-  onHeightChange?: VoidFunction;
-
-  children?: never;
-}
-
-export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
-  const platform = usePlatform();
-  const {
-    className,
-    style,
-
-    before,
-    inlineAfter,
-    after,
-
-    value,
-    onChange,
-
-    getRootRef,
-    getRef,
-    onHeightChange,
-    ...restProps
-  } = props;
-
-  const isControlledOutside = value != null;
-
-  const { window } = useDOM();
-  const textareaRef = useExternRef(getRef);
-  const textareaMinHeightRef = React.useRef<number | null>(null);
-
-  const resize = React.useCallback(() => {
-    const textareaEl = textareaRef.current;
-    if (!textareaEl) {
-      return;
-    }
-
-    const { offsetHeight, scrollHeight } = textareaEl;
-    const style = window!.getComputedStyle(textareaEl);
-    const paddingTop = parseInt(style.paddingTop);
-    const paddingBottom = parseInt(style.paddingBottom);
-
-    if (textareaMinHeightRef.current === null) {
-      textareaMinHeightRef.current = offsetHeight;
-    }
-
-    let diff = paddingTop + paddingBottom + 10;
-
-    if (scrollHeight + diff <= offsetHeight) {
-      diff = 0;
-    }
-
-    textareaEl.style.height = "0px";
-
-    const height = textareaEl.scrollHeight - diff / 4;
-    textareaEl.style.height =
-      String(Math.max(height, textareaMinHeightRef.current)) + "px";
-
-    if (isFunction(onHeightChange)) {
-      onHeightChange();
-    }
-  }, [onHeightChange, textareaRef, window]);
-
-  const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
-    event
-  ) => {
-    if (isFunction(onChange)) {
-      onChange(event);
-    }
-
-    if (!isControlledOutside) {
-      resize();
-    }
-  };
-
-  React.useEffect(() => {
-    resize();
-  }, [resize, value]);
-
-  return (
-    <div
-      ref={getRootRef}
-      vkuiClass={getClassName("WriteBar", platform)}
-      className={className}
-      style={style}
-    >
-      <form vkuiClass="WriteBar__form" onSubmit={(e) => e.preventDefault()}>
-        {hasReactNode(before) && (
-          <div vkuiClass="WriteBar__before">{before}</div>
-        )}
-
-        <div vkuiClass="WriteBar__formIn">
-          <textarea
-            {...restProps}
-            vkuiClass="WriteBar__textarea"
-            onChange={onTextareaChange}
-            ref={textareaRef}
-            value={value}
-          />
-
-          {hasReactNode(inlineAfter) && (
-            <div vkuiClass="WriteBar__inlineAfter">{inlineAfter}</div>
-          )}
-        </div>
-
-        {hasReactNode(after) && <div vkuiClass="WriteBar__after">{after}</div>}
-      </form>
-    </div>
-  );
-};

package/src/components/WriteBarIcon/Readme.md

@@ -1,11 +0,0 @@
-Компонент для отрисовки кнопок-иконок в `WriteBar`.
-
-Надстройка над `<button />`. Компонент принимает все валидные для этого элемента свойства.
-
-```jsx static
-<WriteBarIcon mode="attach" />
-
-<WriteBarIcon aria-label="Записать голосовое сообщение">
-  <Icon28VoiceOutline />
-</WriteBarIcon>
-```

package/src/components/WriteBarIcon/WriteBarIcon.css

@@ -1,75 +0,0 @@
-.WriteBarIcon {
-  background: none;
-  border: 0;
-  position: relative;
-  color: var(--icon_secondary);
-  height: 52px;
-  width: 44px;
-  cursor: pointer;
-  border-radius: 8px;
-}
-
-.WriteBarIcon__in {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.WriteBarIcon:disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-.WriteBarIcon__active {
-  opacity: 0.6;
-}
-
-.WriteBarIcon__counter {
-  position: absolute;
-  top: 6px;
-  right: 2px;
-  box-shadow: 0 0 0 2px var(--background_content);
-}
-
-.WriteBarIcon.WriteBarIcon--send,
-.WriteBarIcon.WriteBarIcon--done {
-  color: var(--accent);
-}
-
-/**
- * iOS
- */
-.WriteBarIcon--ios {
-  color: var(--writebar_icon);
-  border-radius: 10px;
-}
-
-.WriteBarIcon--ios.WriteBarIcon--send,
-.WriteBarIcon--ios.WriteBarIcon--done {
-  width: 48px;
-  color: var(--writebar_icon);
-}
-
-.WriteBarIcon--ios.WriteBarIcon--send:not(:disabled) {
-  color: var(--accent);
-}
-
-.WriteBarIcon--ios.WriteBarIcon--send:first-child,
-.WriteBarIcon--ios.WriteBarIcon--done:first-child {
-  margin-left: -4px;
-}
-
-.WriteBarIcon--ios.WriteBarIcon--send:last-child,
-.WriteBarIcon--ios.WriteBarIcon--done:last-child {
-  margin-right: -4px;
-}
-
-/**
- * VKCOM
- */
-.WriteBarIcon--vkcom {
-  color: var(--icon_secondary);
-  border-radius: 10px;
-}

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-import {
-  Icon24Send,
-  Icon28AddCircleOutline,
-  Icon28AttachOutline,
-  Icon28CheckCircleOutline,
-  Icon48WritebarDone,
-  Icon48WritebarSend,
-} from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { IOS } from "../../lib/platform";
-import Counter from "../Counter/Counter";
-import Tappable from "../Tappable/Tappable";
-import { warnOnce } from "../../lib/warnOnce";
-import { hasReactNode } from "../../lib/utils";
-import "./WriteBarIcon.css";
-
-export interface WriteBarIconProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.
-   * Если передать валидное значение для этого свойства, `children` игнорируется.
-   *
-   * - `attach` – иконка прикрепления.
-   * - `send` – иконка отправки.
-   * - `done` – иконка отправки в режиме редактирования.
-   */
-  mode?: "attach" | "send" | "done";
-  /**
-   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.
-   */
-  count?: number;
-}
-
-const warn = warnOnce("WriteBarIcon");
-const IS_DEV = process.env.NODE_ENV === "development";
-
-export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
-  mode,
-  children,
-  count,
-  ...restProps
-}: WriteBarIconProps) => {
-  const platform = usePlatform();
-
-  let icon: React.ReactNode;
-  let ariaLabel: string | undefined = undefined;
-
-  switch (mode) {
-    case "attach":
-      icon =
-        platform === IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;
-      ariaLabel = "Прикрепить файл";
-      break;
-
-    case "send":
-      icon = platform === IOS ? <Icon48WritebarSend /> : <Icon24Send />;
-      ariaLabel = "Отправить";
-      break;
-
-    case "done":
-      icon =
-        platform === IOS ? (
-          <Icon48WritebarDone />
-        ) : (
-          <Icon28CheckCircleOutline />
-        );
-      ariaLabel = "Готово";
-      break;
-
-    default:
-      break;
-  }
-
-  if (IS_DEV && !restProps["aria-label"] && !ariaLabel) {
-    warn(
-      "[WriteBarIcon/a11y] У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей."
-    );
-  }
-
-  return (
-    <Tappable
-      aria-label={ariaLabel}
-      {...restProps}
-      Component="button"
-      hasHover={false}
-      activeMode="WriteBarIcon__active"
-      vkuiClass={classNames(getClassName("WriteBarIcon", platform), {
-        [`WriteBarIcon--${mode}`]: !!mode,
-      })}
-    >
-      <span vkuiClass="WriteBarIcon__in">
-        {icon || children}
-        {hasReactNode(count) && (
-          <Counter vkuiClass="WriteBarIcon__counter" size="s">
-            {count}
-          </Counter>
-        )}
-      </span>
-    </Tappable>
-  );
-};