@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/FocusTrap/FocusTrap.tsx

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

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

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

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

@@ -1,23 +0,0 @@
-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}
-      level="1"
-      weight="regular"
-      vkuiClass="Footer"
-    >
-      {children}
-    </Caption>
-  );
-};

package/src/components/Footer/Readme.md

@@ -1,23 +0,0 @@
-Подвал для списков.
-
-```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 cообщества</Footer>
-  </Panel>
-</View>
-```

package/src/components/FormField/FormField.css

@@ -1,119 +0,0 @@
-.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;
-}

package/src/components/FormField/FormField.tsx

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

@@ -1,42 +0,0 @@
-Компонент-оболочка для элементов форм ([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

@@ -1,83 +0,0 @@
-.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;
-}

package/src/components/FormItem/FormItem.tsx

@@ -1,91 +0,0 @@
-import * as React from "react";
-import { HasComponent, HasRootRef } from "../../types";
-import { classNames } from "../../lib/classNames";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-import { hasReactNode, noop } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
-import Caption from "../Typography/Caption/Caption";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { Removable, RemovableProps } from "../Removable/Removable";
-import "./FormItem.css";
-
-export interface FormItemProps
-  extends React.AllHTMLAttributes<HTMLElement>,
-    HasRootRef<HTMLElement>,
-    HasComponent,
-    RemovableProps {
-  top?: React.ReactNode;
-  bottom?: React.ReactNode;
-  status?: "default" | "error" | "valid";
-  /**
-   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
-   */
-  removable?: boolean;
-}
-
-export const FormItem: React.FC<FormItemProps> = ({
-  children,
-  top,
-  bottom,
-  status = "default",
-  Component = "div",
-  removable,
-  onRemove = noop,
-  removePlaceholder = "Удалить",
-  getRootRef,
-  ...restProps
-}: FormItemProps) => {
-  const platform = usePlatform();
-  const rootEl = useExternRef(getRootRef);
-  const { sizeY } = useAdaptivity();
-
-  const wrappedChildren = (
-    <React.Fragment>
-      {hasReactNode(top) && (
-        <Subhead weight="regular" vkuiClass="FormItem__top">
-          {top}
-        </Subhead>
-      )}
-      {children}
-      {hasReactNode(bottom) && (
-        <Caption level="1" weight="regular" vkuiClass="FormItem__bottom">
-          {bottom}
-        </Caption>
-      )}
-    </React.Fragment>
-  );
-
-  return (
-    <Component
-      {...restProps}
-      ref={rootEl}
-      vkuiClass={classNames(
-        getClassName("FormItem", platform),
-        `FormItem--${status}`,
-        `FormItem--sizeY-${sizeY}`,
-        {
-          "FormItem--withTop": hasReactNode(top),
-          "FormItem--removable": removable,
-        }
-      )}
-    >
-      {removable ? (
-        <Removable
-          align="start"
-          onRemove={(e) => {
-            if (rootEl?.current) {
-              onRemove(e, rootEl.current);
-            }
-          }}
-          removePlaceholder={removePlaceholder}
-        >
-          <div vkuiClass="FormItem__removable">{wrappedChildren}</div>
-        </Removable>
-      ) : (
-        wrappedChildren
-      )}
-    </Component>
-  );
-};