@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/View/utils.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+.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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,224 @@
+Компонент для отрисовки поля ввода сообщения или комментария.
+
+Для `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

@@ -0,0 +1,106 @@
+.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

@@ -0,0 +1,137 @@
+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

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

package/src/components/WriteBarIcon/WriteBarIcon.css

@@ -0,0 +1,75 @@
+.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

@@ -0,0 +1,104 @@
+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>
+  );
+};