@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/FocusTrap/FocusTrap.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useTimeout } from "../../hooks/useTimeout";
+import {
+  FOCUSABLE_ELEMENTS_LIST,
+  Keys,
+  pressedKey,
+} from "../../lib/accessibility";
+import { useDOM } from "../../lib/dom";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { noop } from "../../lib/utils";
+import { HasComponent, HasRootRef } from "../../types";
+import { AppRootContext } from "../AppRoot/AppRootContext";
+
+const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
+
+export interface FocusTrapProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
+  onClose?: (props?: any) => void;
+  restoreFocus?: boolean;
+  timeout?: number;
+}
+
+export const FocusTrap: React.FC<FocusTrapProps> = ({
+  Component = "div",
+  onClose = noop,
+  restoreFocus = true,
+  timeout = 0,
+  getRootRef,
+  children,
+  ...restProps
+}) => {
+  const ref = useExternRef<HTMLElement>(getRootRef);
+
+  const { document, window } = useDOM();
+
+  const [focusableNodes, setFocusableNodes] = React.useState<
+    HTMLElement[] | null
+  >(null);
+  const [restoreFocusTo, setRestoreFocusTo] =
+    React.useState<HTMLElement | null>(null);
+
+  // HANDLE TRAP MOUNT
+
+  const { keyboardInput } = React.useContext(AppRootContext);
+  const focusOnTrapMount = useTimeout(() => {
+    if (
+      keyboardInput &&
+      !ref.current?.contains(document!.activeElement) &&
+      focusableNodes?.length
+    ) {
+      focusableNodes[0].focus();
+    }
+  }, timeout);
+  useIsomorphicLayoutEffect(() => {
+    focusOnTrapMount.set();
+  }, []);
+
+  // HANDLE FOCUSABLE NODES
+
+  useIsomorphicLayoutEffect(() => {
+    if (!ref.current) {
+      return noop();
+    }
+
+    const nodes: HTMLElement[] = [];
+    Array.prototype.forEach.call(
+      // eslint-disable-next-line no-restricted-properties
+      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),
+      (focusableEl: Element) => {
+        const { display, visibility } = window!.getComputedStyle(focusableEl);
+
+        if (display !== "none" && visibility !== "hidden") {
+          nodes.push(focusableEl as HTMLElement);
+        }
+      }
+    );
+
+    if (nodes?.length) {
+      setFocusableNodes(nodes);
+    }
+
+    return noop();
+  }, [children]);
+
+  // HANDLE TRAP UNMOUNT
+
+  const focusOnTrapUnmount = useTimeout(() => {
+    if (restoreFocusTo) {
+      restoreFocusTo.focus();
+    }
+  }, timeout);
+  useIsomorphicLayoutEffect(() => {
+    if (restoreFocus && document!.activeElement) {
+      setRestoreFocusTo(document!.activeElement as HTMLElement);
+
+      return () => {
+        focusOnTrapUnmount.set();
+      };
+    }
+
+    return noop();
+  }, [restoreFocus]);
+
+  const onDocumentKeydown = (e: KeyboardEvent) => {
+    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {
+      const lastIdx = focusableNodes.length - 1;
+      const targetIdx = focusableNodes.findIndex((node) => node === e.target);
+
+      const shouldFocusFirstNode =
+        targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);
+
+      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {
+        e.preventDefault();
+
+        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];
+
+        if (node !== document!.activeElement) {
+          node.focus();
+        }
+
+        return false;
+      }
+    }
+
+    if (pressedKey(e) === Keys.ESCAPE) {
+      onClose();
+    }
+
+    return true;
+  };
+  useGlobalEventListener(document, "keydown", onDocumentKeydown, {
+    capture: true,
+  });
+
+  return (
+    <Component ref={ref} {...restProps}>
+      {children}
+    </Component>
+  );
+};

package/src/components/FocusVisible/FocusVisible.css

@@ -0,0 +1,72 @@
+[class$="--focus-visible"] > .FocusVisible {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-radius: inherit;
+  box-shadow: 0 0 0 2px var(--accent);
+  user-select: none;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+[class$="--focus-visible"] > .FocusVisible--outside {
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+}
+
+/**
+ * [a11y]
+ * add animation for browsers that support prefers-reduced-motion
+ * so that users with vestibular motion disorders have no problem
+ * navigating accessible vkui apps via keyboard
+ */
+@media (prefers-reduced-motion: no-preference) {
+  [class$="--focus-visible"] > .FocusVisible {
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    animation: vkui-animation-focus-visible 0.15s ease-in-out forwards;
+    animation-delay: 0.01ms;
+    will-change: top, left, bottom, right;
+  }
+
+  [class$="--focus-visible"] > .FocusVisible--outside {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    animation-name: vkui-animation-focus-visible-outside;
+  }
+
+  @keyframes vkui-animation-focus-visible {
+    0% {
+    }
+
+    100% {
+      top: 2px;
+      left: 2px;
+      bottom: 2px;
+      right: 2px;
+      will-change: auto;
+    }
+  }
+
+  @keyframes vkui-animation-focus-visible-outside {
+    0% {
+    }
+
+    100% {
+      top: -2px;
+      left: -2px;
+      bottom: -2px;
+      right: -2px;
+      will-change: auto;
+    }
+  }
+}

package/src/components/FocusVisible/FocusVisible.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./FocusVisible.css";
+
+export type FocusVisibleMode = "inside" | "outside";
+
+interface FocusVisibleProps {
+  mode: FocusVisibleMode;
+}
+
+export const FocusVisible: React.FC<FocusVisibleProps> = ({
+  mode,
+}: FocusVisibleProps) => (
+  <span
+    aria-hidden="true"
+    vkuiClass={classNames("FocusVisible", `FocusVisible--${mode}`)}
+  />
+);

package/src/components/Footer/Footer.css

@@ -0,0 +1,8 @@
+.Footer {
+  display: block;
+  margin: 24px 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  text-align: center;
+  color: var(--text_secondary);
+}

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { HasComponent } from "../../types";
+import { Caption } from "../Typography/Caption/Caption";
+import "./Footer.css";
+
+export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
+
+export const Footer: React.FC<FooterProps> = ({
+  children,
+  ...restProps
+}: FooterProps) => {
+  return (
+    <Caption Component="footer" {...restProps} vkuiClass="Footer">
+      {children}
+    </Caption>
+  );
+};

package/src/components/Footer/Readme.md

@@ -0,0 +1,23 @@
+Подвал для списков.
+
+```jsx
+<View activePanel="list">
+  <Panel id="list">
+    <PanelHeader>Footer</PanelHeader>
+    <Group>
+      <List>
+        <Cell before={<Avatar />} description="Веб-сайт">
+          Команда ВКонтакте
+        </Cell>
+        <Cell before={<Avatar />} description="Музыкант">
+          Robbie Williams
+        </Cell>
+        <Cell before={<Avatar />} description="Издательский дом">
+          ПостНаука
+        </Cell>
+      </List>
+    </Group>
+    <Footer>3 сообщества</Footer>
+  </Panel>
+</View>
+```

package/src/components/FormField/FormField.css

@@ -0,0 +1,152 @@
+.FormField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+
+.FormField > * {
+  border-radius: inherit;
+}
+
+.FormField__after {
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 44px;
+  margin: -1px;
+  color: var(--icon_secondary);
+  z-index: 2;
+}
+
+.ChipsInput .FormField__after {
+  z-index: 3;
+}
+
+.FormField__border {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--field_border);
+  background: var(--field_background);
+  content: "";
+  box-sizing: border-box;
+  z-index: 1;
+  transform-origin: left top;
+}
+
+.FormItem--error .FormField__border {
+  background: var(--field_error_background);
+  border-color: var(--field_error_border);
+}
+
+.FormItem--valid .FormField__border {
+  border-color: var(--field_valid_border);
+}
+
+.FormField--disabled {
+  opacity: 0.64;
+  cursor: default;
+  pointer-events: none;
+}
+
+.FormField:not(.FormField--disabled) .FormField__border--hover {
+  border-color: var(--icon_tertiary_alpha);
+}
+
+.FormField:focus-within .FormField__border,
+.FormField *:focus ~ .FormField__border,
+.ChipsInput--focused .FormField__border {
+  border-color: var(--accent);
+  background: var(--field_background);
+}
+
+/**
+ * sizeY COMPACT
+ */
+.FormField--sizeY-compact .FormField__after {
+  min-width: 36px;
+  height: 36px;
+}
+
+/**
+ * iOS
+ */
+.FormField--ios {
+  border-radius: 10px;
+}
+
+@media (min-resolution: 2dppx) {
+  .FormField--ios .FormField__border {
+    border-radius: 20px;
+    transform: scale(0.5);
+    width: 200%;
+    height: 200%;
+  }
+}
+
+@media (min-resolution: 3dppx) {
+  .FormField--ios .FormField__border {
+    border-radius: 31.25px;
+    transform: scale(0.32);
+    width: 312.5%;
+    height: 312.5%;
+  }
+}
+
+/**
+ * VKCOM
+ */
+.FormField--vkcom {
+  border-radius: 6px;
+}
+
+/**
+ * ModalCardBase
+ */
+
+.ModalCardBase__header + .FormField,
+.ModalCardBase__subheader + .FormField {
+  margin-top: 16px;
+}
+
+/**
+ * Select
+ */
+
+.Select--mimicry-plain .FormField__after,
+.Select--mimicry-plain .FormField--sizeY-compact .FormField__after {
+  justify-content: flex-start;
+  min-width: 0;
+  height: auto;
+}
+
+.CustomSelect__open.Select--mimicry:focus .FormField__border {
+  border-color: var(--field_border);
+}
+
+.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop):not(.CustomSelect__open--not-adjacent)
+  .FormField__border {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.CustomSelect__open.CustomSelect__open--popupDirectionTop:not(.CustomSelect__open--not-adjacent)
+  .FormField__border {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.CustomSelect__open.Select--mimicry-plain.Select--mimicry:focus
+  .FormField__border,
+.FormField:not(.FormField--disabled) .FormField__border--hover {
+  background-color: var(--vkui--color_background);
+}

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasComponent, HasRootRef } from "../../types";
+import { hasReactNode } from "../../lib/utils";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import "./FormField.css";
+
+export interface FormFieldProps {
+  /**
+   * Иконка 12|16|20|24|28 или `IconButton`.
+   */
+  after?: React.ReactNode;
+}
+
+interface FormFieldOwnProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent,
+    FormFieldProps {
+  disabled?: boolean;
+}
+
+export const FormField: React.FC<FormFieldOwnProps> = ({
+  Component = "div",
+  children,
+  getRootRef,
+  after,
+  disabled,
+  ...restProps
+}: FormFieldOwnProps) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+  const [hover, setHover] = React.useState(false);
+
+  const handleMouseEnter = (e: MouseEvent) => {
+    e.stopPropagation();
+    setHover(true);
+  };
+
+  const handleMouseLeave = (e: MouseEvent) => {
+    e.stopPropagation();
+    setHover(false);
+  };
+
+  return (
+    <Component
+      role="presentation"
+      {...restProps}
+      ref={getRootRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      vkuiClass={classNames(
+        getClassName("FormField", platform),
+        `FormField--sizeY-${sizeY}`,
+        {
+          "FormField--disabled": disabled,
+        }
+      )}
+    >
+      {children}
+      {hasReactNode(after) && (
+        <div role="presentation" vkuiClass="FormField__after">
+          {after}
+        </div>
+      )}
+      <div
+        role="presentation"
+        vkuiClass={classNames("FormField__border", {
+          "FormField__border--hover": !disabled && hover,
+        })}
+      />
+    </Component>
+  );
+};

package/src/components/FormField/Readme.md

@@ -0,0 +1,42 @@
+Компонент-оболочка для элементов форм ([Input](#/Input), [Select](#/Select), [Textarea](#/Textarea) и другие).
+
+```jsx
+const CustomInput = () => {
+  const style = {
+    position: "relative",
+    display: "block",
+    width: "100%",
+    margin: 0,
+    padding: 11,
+    fontSize: 16,
+    lineHeight: "19px",
+    textOverflow: "ellipsis",
+    color: "#000",
+    border: "none",
+    background: "transparent",
+    zIndex: 2,
+  };
+
+  return <input type="text" style={style} placeholder="Кастомный инпут" />;
+};
+
+const Example = () => (
+  <View activePanel="custom-field">
+    <Panel id="custom-field">
+      <PanelHeader>FormField</PanelHeader>
+
+      <Group>
+        <FormLayout>
+          <FormItem>
+            <FormField>
+              <CustomInput />
+            </FormField>
+          </FormItem>
+        </FormLayout>
+      </Group>
+    </Panel>
+  </View>
+);
+
+<Example />;
+```

package/src/components/FormItem/FormItem.css

@@ -0,0 +1,83 @@
+.FormItem {
+  display: block;
+  padding: 12px var(--formitem_padding);
+}
+
+.FormItem--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.FormItem__removable {
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.FormItem__top {
+  padding-top: 2px;
+  padding-bottom: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--text_subhead);
+}
+
+.FormItem__bottom {
+  color: var(--text_secondary);
+  padding-top: 8px;
+}
+
+.FormItem--error .FormItem__bottom {
+  color: var(--field_error_border);
+}
+
+.FormItem--valid .FormItem__bottom,
+.FormItem--verified .FormItem__bottom {
+  color: var(--field_valid_border);
+}
+
+/**
+ * sizeY COMPACT
+ */
+.FormItem--sizeY-compact .FormItem__top {
+  padding-bottom: 6px;
+}
+
+.FormItem--sizeY-compact .FormItem__bottom {
+  padding-top: 6px;
+}
+
+/**
+ * iOS
+ */
+.FormItem--ios {
+  --formitem_padding: 12px;
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+.FormLayoutGroup--horizontal .FormItem {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+.FormLayoutGroup--horizontal .FormItem + .FormItem {
+  margin-left: 24px;
+}
+
+.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop {
+  margin-top: -28px;
+}
+
+.FormLayoutGroup--removable
+  .FormItem--ios.FormItem--withTop.FormItem--sizeY-compact {
+  margin-top: -26px;
+}