@vkontakte/vkui 4.15.0 → 4.16.2

package/src/components/UsersStack/UsersStack.css

@@ -40,31 +40,27 @@
 }
 
 .UsersStack__photo + .UsersStack__photo {
-  margin-left: 4px;
-}
-
-.UsersStack:not(.UsersStack--simple) .UsersStack__photo + .UsersStack__photo {
   margin-left: -2px;
 }
 
-.UsersStack--size-xs:not(.UsersStack--simple) .UsersStack__photo + .UsersStack__photo {
+.UsersStack--size-xs .UsersStack__photo + .UsersStack__photo {
   margin-left: -1px;
   clip-path: url(#users_stack_mask_16_left);
 }
 
-.UsersStack--size-s:not(.UsersStack--simple) .UsersStack__photo + .UsersStack__photo {
+.UsersStack--size-s .UsersStack__photo + .UsersStack__photo {
   clip-path: url(#users_stack_mask_24_left);
 }
 
-.UsersStack--size-m:not(.UsersStack--simple) .UsersStack__photo + .UsersStack__photo {
+.UsersStack--size-m .UsersStack__photo + .UsersStack__photo {
   clip-path: url(#users_stack_mask_32_left);
 }
 
-.UsersStack--size-m.UsersStack--others:not(.UsersStack--simple) .UsersStack__photo {
+.UsersStack--size-m.UsersStack--others .UsersStack__photo {
   clip-path: url(#users_stack_mask_32_right);
 }
 
-.UsersStack--size-m.UsersStack--others:not(.UsersStack--simple) .UsersStack__photo:last-child {
+.UsersStack--size-m.UsersStack--others .UsersStack__photo:last-child {
   clip-path: none;
 }
 

package/src/components/UsersStack/UsersStack.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
-import { useBrowserInfo } from '../../hooks/useBrowserInfo';
 import { usePlatform } from '../../hooks/usePlatform';
 import { hasReactNode } from '../../lib/utils';
 import { classNames } from '../../lib/classNames';
-import { System } from '../../lib/browser';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import Caption from '../Typography/Caption/Caption';
 import Subhead from '../Typography/Subhead/Subhead';
 import { createMasks } from './masks';
+import { useDOM } from '../../lib/dom';
 import './UsersStack.css';
 
 export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -32,24 +31,19 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
-  const { system, systemVersion } = useBrowserInfo();
   const platform = usePlatform();
   const { photos, visibleCount, size, layout, children, ...restProps } = props;
+  const { document } = useDOM();
 
   useIsomorphicLayoutEffect(() => {
-    createMasks();
-  }, []);
+    createMasks(document);
+  }, [document]);
 
   const othersCount = Math.max(0, photos.length - visibleCount);
   const canShowOthers = othersCount > 0 && size === 'm';
 
   const photosShown = photos.slice(0, visibleCount);
 
-  let canUseClipPath = true;
-  if (system === System.IOS) {
-    canUseClipPath = systemVersion && systemVersion.major >= 12;
-  }
-
   return (
     <div
       {...restProps}
@@ -60,7 +54,6 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
           `UsersStack--l-${layout}`,
           {
             'UsersStack--others': canShowOthers,
-            'UsersStack--simple': !canUseClipPath,
           },
         )
       }

package/src/components/UsersStack/masks.tsx

@@ -1,9 +1,9 @@
-import { canUseDOM, onDOMLoaded } from '../../lib/dom';
+import { canUseDOM } from '../../lib/dom';
 
-let masksCreated = false;
+const masksCreated: Document[] = [];
 
-export function createMasks(): void {
-  if (!canUseDOM || masksCreated) {
+export function createMasks(document: Document): void {
+  if (!canUseDOM || masksCreated.includes(document)) {
     return;
   }
 
@@ -38,9 +38,6 @@ export function createMasks(): void {
   </clipPath>
 </defs>`;
 
-  onDOMLoaded(() => {
-    // eslint-disable-next-line no-restricted-globals
-    document.body.appendChild(svgElement);
-  });
-  masksCreated = true;
+  document.body.appendChild(svgElement);
+  masksCreated.push(document);
 }

package/src/components/View/Readme.md

@@ -5,48 +5,40 @@
 Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 ```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activePanel: 'panel1'
-    }
-  }
-
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="panel1">
-          <PanelHeader>Panel 1</PanelHeader>
-          <Group>
-            <CellButton onClick={ () => this.setState({ activePanel: 'panel2' }) }>
-              Go to panel 2
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel2">
-          <PanelHeader>Panel 2</PanelHeader>
-          <Group>
-            <CellButton onClick={ () => this.setState({ activePanel: 'panel3' }) }>
-              Go to panel 3
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel3">
-          <PanelHeader>Panel 3</PanelHeader>
-          <Group>
-            <CellButton onClick={ () => this.setState({ activePanel: 'panel1' }) }>
-              Back to panel 1
-            </CellButton>
-          </Group>
-        </Panel>
-      </View>
-    )
-  }
-}
-
-<Example />
+const [activePanel, setActivePanel] = useState('panel1');
+
+<View activePanel={activePanel}>
+  <Panel id="panel1">
+    <PanelHeader>Panel 1</PanelHeader>
+    <Group>
+      <div style={{ height: 200 }} />
+      <CellButton onClick={ () => setActivePanel('panel2') }>
+        Go to panel 2
+      </CellButton>
+      <div style={{ height: 600 }} />
+    </Group>
+  </Panel>
+  <Panel id="panel2">
+    <PanelHeader>Panel 2</PanelHeader>
+    <Group>
+      <div style={{ height: 200 }} />
+      <CellButton onClick={ () => setActivePanel('panel3') }>
+        Go to panel 3
+      </CellButton>
+      <div style={{ height: 600 }} />
+    </Group>
+  </Panel>
+  <Panel id="panel3">
+    <PanelHeader>Panel 3</PanelHeader>
+    <Group>
+      <div style={{ height: 200 }} />
+      <CellButton onClick={ () => setActivePanel('panel1') }>
+        Back to panel 1
+      </CellButton>
+      <div style={{ height: 600 }} />
+    </Group>
+  </Panel>
+</View>
 ```
 
 ### <a id="/View?id=iosswipeback"></a>[iOS Swipe Back](#/View?id=iosswipeback)

package/src/components/View/View.tsx

@@ -3,7 +3,7 @@ import { classNames } from '../../lib/classNames';
 import { transitionEvent, animationEvent } from '../../lib/supportEvents';
 import { getClassName } from '../../helpers/getClassName';
 import { IOS, ANDROID, VKCOM } from '../../lib/platform';
-import Touch, { TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEvent } from '../Touch/Touch';
 import { removeObjectKeys } from '../../lib/removeObjectKeys';
 import { HasPlatform } from '../../types';
 import { withPlatform } from '../../hoc/withPlatform';

package/src/components/View/ViewInfinite.tsx

@@ -3,7 +3,7 @@ import { classNames } from '../../lib/classNames';
 import { transitionEvent, animationEvent } from '../../lib/supportEvents';
 import { getClassName } from '../../helpers/getClassName';
 import { IOS, ANDROID, VKCOM } from '../../lib/platform';
-import Touch, { TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEvent } from '../Touch/Touch';
 import { HasPlatform } from '../../types';
 import { withPlatform } from '../../hoc/withPlatform';
 import { withContext } from '../../hoc/withContext';

package/src/hooks/useEventListener.ts

@@ -4,8 +4,8 @@ import { canUseDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 interface EventListenerHandle {
-  add(el: HTMLElement | Document): void;
-  remove(): void;
+  add: (el: HTMLElement | Document) => void;
+  remove: () => void;
 }
 
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
@@ -19,21 +19,24 @@ export function useEventListener(event: string, _cb: (ev: Event) => any, _option
   useIsomorphicLayoutEffect(() => {
     cbRef.current = _cb;
   }, [_cb]);
-  const cb = React.useCallback<typeof _cb>((e) => cbRef.current(e), []);
+  const cb = React.useCallback<typeof _cb>((e) => cbRef.current && cbRef.current(e), []);
 
   const detach = React.useRef(noop);
-  const remove = React.useCallback(() => detach.current(), []);
+  const remove = React.useCallback(() => {
+    detach.current();
+    detach.current = noop;
+  }, []);
   const add = React.useCallback((el: HTMLElement | Document) => {
     if (!canUseDOM) {
       return;
     }
     remove();
+    if (!el) {
+      return;
+    }
     const options = { ..._options };
     el.addEventListener(event, cb, options);
-    detach.current = () => {
-      el.removeEventListener(event, cb, options);
-      detach.current = noop;
-    };
+    detach.current = () => el.removeEventListener(event, cb, options);
   }, []);
   React.useEffect(() => remove, []);
 

package/src/hooks/useGlobalEventListener.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 import { useEventListener } from './useEventListener';
 
 export function useGlobalEventListener<K extends keyof GlobalEventHandlersEventMap>(
@@ -15,5 +15,5 @@ export function useGlobalEventListener(
 ): void;
 export function useGlobalEventListener(element: any, event: string, cb: (ev: Event) => any, options?: AddEventListenerOptions) {
   const listener = useEventListener(event, cb, options);
-  React.useEffect(() => cb ? listener.add(element) : listener.remove(), [Boolean(cb)]);
+  useIsomorphicLayoutEffect(() => cb ? listener.add(element) : listener.remove(), [Boolean(cb)]);
 }

package/src/hooks/useInsets.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import vkBridge, { Insets } from '@vkontakte/vk-bridge';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 let initialState: Insets = {
   bottom: null,
@@ -36,13 +37,6 @@ function resolveInsets(e: BridgeEvent): Insets | null {
 vkBridge.subscribe((e: BridgeEvent) => {
   const insets = resolveInsets(e);
   if (insets) {
-    // eslint-disable-next-line no-restricted-globals
-    const htmlElement = document.documentElement;
-    for (let key in insets) {
-      if (insets.hasOwnProperty(key) && (insets[key as keyof Insets] > 0 || key === 'bottom')) {
-        htmlElement.style.setProperty(`--safe-area-inset-${key}`, `${insets[key as keyof Insets]}px`);
-      }
-    }
     initialState = insets;
   }
 });
@@ -50,7 +44,7 @@ vkBridge.subscribe((e: BridgeEvent) => {
 export function useInsets(): Insets {
   const [insets, setInsets] = React.useState<Insets>(initialState);
 
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     function connectListener(e: BridgeEvent) {
       const insets = resolveInsets(e);
       if (insets) {

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useDOM } from '../lib/dom';
+import { useGlobalEventListener } from './useGlobalEventListener';
+
+interface SoftwareKeyboardState {
+  isOpened: boolean;
+  isPrecise: boolean;
+}
+
+/**
+ Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большиству устройств
+ Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
+ */
+export function getPreciseKeyboardState(window: any): boolean {
+  const { availHeight } = window.screen;
+  const { innerHeight } = window;
+
+  const coveredViewportPercentage = Math.round((1 - innerHeight / availHeight) * 100);
+  return coveredViewportPercentage > 24;
+}
+
+export function useKeyboard(): SoftwareKeyboardState {
+  const { window, document } = useDOM();
+
+  const [keyboardState, setKeyboardState] = React.useState<SoftwareKeyboardState>({
+    isOpened: false,
+    isPrecise: false,
+  });
+
+  const transitionalTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const eventOptions = {
+    passive: true,
+    capture: false,
+  };
+
+  /**
+   У полей с autoFocus не отлавливаются события focus, для этого вызываем вручную,
+   чтобы иметь хоть какое-то понимание происходящего.
+   */
+  React.useEffect(() => {
+    onFocus(true);
+  }, [onFocus]);
+
+  function onFocus(event: FocusEvent | true) {
+    clearTimeout(transitionalTimeout.current);
+
+    let returnObject = {
+      isOpened: (event === true || event.type === 'focusin') && (
+        document.activeElement?.tagName === 'INPUT' ||
+        document.activeElement?.tagName === 'TEXTAREA'
+      ),
+      isPrecise: false,
+    };
+
+    // Ожидаем прохождение анимации раскрытия клавиатуры
+    transitionalTimeout.current = setTimeout(() => {
+      returnObject.isPrecise = getPreciseKeyboardState(window);
+      setKeyboardState(returnObject);
+    }, 300);
+  }
+
+  useGlobalEventListener(document, 'focusout', onFocus, eventOptions);
+  useGlobalEventListener(document, 'focusin', onFocus, eventOptions);
+
+  return keyboardState;
+}

package/src/hooks/useKeyboardInputTracker.ts

@@ -6,10 +6,12 @@ import { useGlobalEventListener } from './useGlobalEventListener';
 export function useKeyboardInputTracker(): boolean {
   const { document } = useDOM();
 
-  const [isKeyboardInputActive, toggleKeyboardInput] = React.useState<boolean>(true);
+  const [isKeyboardInputActive, toggleKeyboardInput] = React.useState<boolean>(false);
 
   const enableKeyboardInput = React.useCallback((e: KeyboardEvent) => {
-    toggleKeyboardInput(pressedKey(e) === Keys.TAB);
+    if (pressedKey(e) === Keys.TAB) {
+      toggleKeyboardInput(true);
+    }
   }, []);
 
   const disableKeyboardInput = React.useCallback(() => {

package/src/index.ts

@@ -204,7 +204,7 @@ export { default as Div } from './components/Div/Div';
 export type { DivProps } from './components/Div/Div';
 export { default as Tappable } from './components/Tappable/Tappable';
 export type { TappableProps } from './components/Tappable/Tappable';
-export { default as Touch } from './components/Touch/Touch';
+export { Touch } from './components/Touch/Touch';
 export type { TouchProps } from './components/Touch/Touch';
 export { default as PanelSpinner } from './components/PanelSpinner/PanelSpinner';
 export type { PanelSpinnerProps } from './components/PanelSpinner/PanelSpinner';

package/src/lib/select.ts

@@ -0,0 +1,53 @@
+type Option = {
+  label?: string;
+  [index: string]: any;
+};
+
+type GetOptionLabel = (option: Option) => string;
+
+const findAllIncludes = (target = '', search = '') => {
+  const includes = [];
+
+  let i = target.indexOf(search);
+  while (i !== -1) {
+    includes.push(i);
+    i = target.indexOf(search, i + 1);
+  }
+
+  return includes;
+};
+
+let letterRegexp: RegExp;
+
+// На момент написания флаг u не поддерживался рядом браузеров, поэтому добавили фоллбэк.
+try {
+  letterRegexp = new RegExp('\\p{L}', 'u');
+} catch (e) {}
+
+export const defaultFilterFn = (
+  query = '',
+  option: Option,
+  getOptionLabel: GetOptionLabel = (option) => option.label,
+) => {
+  query = query.toLocaleLowerCase();
+  let label = getOptionLabel(option).toLocaleLowerCase();
+
+  if (label.startsWith(query)) {
+    return true;
+  }
+
+  const includes = findAllIncludes(label, query);
+
+  // Ищем вхождение перед началом которого не буква
+  if (letterRegexp) {
+    for (const index of includes) {
+      if (!letterRegexp.test(label[index - 1])) {
+        return true;
+      }
+    }
+  } else { // если regexp не поддерживается, то ищем любое вхождение
+    return includes.length > 0;
+  }
+
+  return false;
+};

package/src/lib/touch.ts

@@ -24,7 +24,7 @@ const coordY = (e: VKUITouchEvent): number => {
 };
 
 // eslint-disable-next-line no-restricted-globals
-const touchEnabled: boolean = canUseDOM && 'ontouchstart' in window;
+const touchEnabled = () => canUseDOM && 'ontouchstart' in window;
 
 /*
  * Возвращает массив поддерживаемых событий
@@ -32,7 +32,7 @@ const touchEnabled: boolean = canUseDOM && 'ontouchstart' in window;
  * Если нет, используем события мыши
  */
 function getSupportedEvents(): string[] {
-  if (touchEnabled) {
+  if (touchEnabled()) {
     return ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
   }
 

package/src/lib/utils.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Ref, RefWithCurrent } from '../types';
 
 export type ImgOnlyAttributes = {
   [index in Exclude<keyof React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>]: React.ImgHTMLAttributes<HTMLImageElement>[index];
@@ -42,17 +41,17 @@ export function isPrimitiveReactNode(node: React.ReactNode): boolean {
   return typeof node === 'string' || typeof node === 'number';
 }
 
-export function setRef<T>(element: T, ref: Ref<T>): void {
+export function setRef<T>(element: T, ref: React.Ref<T>): void {
   if (ref) {
     if (typeof ref === 'function') {
       ref(element);
     } else {
-      ref.current = element;
+      (ref as React.MutableRefObject<T>).current = element;
     }
   }
 }
 
-export function multiRef<T>(...refs: Array<Ref<T>>): RefWithCurrent<T> {
+export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
   let current: T | null = null;
   return {
     get current() {

package/src/styles/animations.css

@@ -1,17 +1,3 @@
-:root {
-  --duration: .7s;
-}
-
-@keyframes vkui-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes vkui-rotator {
   0% {
     transform: rotate(0deg);

package/src/styles/common.css

@@ -22,27 +22,6 @@
   color: var(--text_primary);
 }
 
-.vkui__root--embedded {
-  transform: translate3d(0, 0, 0);
-  overflow-x: hidden;
-}
-
-.AppRoot {
-  height: 100%;
-}
-
-.vkui__root--embedded .AppRoot {
-  overflow: auto;
-}
-
-.vkui--sizeX-regular {
-  background: var(--background_page);
-}
-
-.AppRoot--no-mouse {
-  user-select: none;
-}
-
 .vkui__root input,
 .vkui__root textarea,
 .vkui__root select,

package/src/styles/components.css

@@ -5,6 +5,8 @@
  * чтобы в каждом файле были доступны CSS переменные без их дублирования.
  */
 
+@import '../components/AppRoot/AppRoot.css';
+
 /* Typography */
 @import '../components/Typography/Title/Title.css';
 @import '../components/Typography/Headline/Headline.css';

package/src/styles/constants.css

@@ -29,6 +29,9 @@
   --safe-area-inset-right: 0px;
   --safe-area-inset-bottom: 0px;
   --safe-area-inset-left: 0px;
+
+  /* animations */
+  --duration: .7s;
 }
 
 @media (min-resolution: 2dppx) {

package/src/styles/unstable.css

@@ -1,2 +1,3 @@
 /* Forms */
 @import '../components/ChipsSelect/ChipsSelect.css';
+@import '../components/SimpleCheckbox/SimpleCheckbox.css';

package/src/types.ts

@@ -6,18 +6,12 @@ export type AnyFunction = (...args: any[]) => any;
 
 export type AlignType = 'left' | 'center' | 'right';
 
-export type RefWithCurrent<T> = {
-  current: T | null;
-};
-
-export type Ref<T> = React.RefCallback<T> | RefWithCurrent<T>;
-
 export interface HasRootRef<T> {
-  getRootRef?: Ref<T>;
+  getRootRef?: React.Ref<T>;
 }
 
 export interface HasRef<T> {
-  getRef?: Ref<T>;
+  getRef?: React.Ref<T>;
 }
 
 export interface HasAlign {

package/src/unstable/index.ts

@@ -6,3 +6,6 @@ export type { ChipsSelectProps } from './../components/ChipsSelect/ChipsSelect';
 
 export { default as ViewInfinite } from './../components/View/ViewInfinite';
 export type { ViewInfiniteProps } from './../components/View/ViewInfinite';
+
+export { default as SimpleCheckbox } from './../components/SimpleCheckbox/SimpleCheckbox';
+export type { SimpleCheckboxProps } from './../components/SimpleCheckbox/SimpleCheckbox';