@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/Cell/useDraggable.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { TouchEvent } from '../Touch/Touch';
+import { CellProps } from './Cell';
+
+export interface DraggableProps {
+  onDragStart: () => void;
+  onDragEnd: () => void;
+  onDragMove: (e: TouchEvent) => void;
+}
+
+interface UseDraggableProps extends DraggableProps {
+  dragging: boolean;
+  rootElRef: any;
+}
+
+export const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>) => {
+  const [dragging, setDragging] = React.useState<boolean>(false);
+  const rootElRef = React.useRef(null);
+
+  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);
+  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);
+  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);
+  const [dragShift, setDragShift] = React.useState<number>(0);
+  const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);
+
+  const onDragStart = () => {
+    const rootEl = rootElRef.current;
+
+    setDragging(true);
+
+    const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];
+    const idx = _siblings.indexOf(rootEl);
+
+    setDragStartIndex(idx);
+    setDragEndIndex(idx);
+    setSiblings(_siblings);
+    setDragShift(0);
+  };
+
+  const onDragMove = (e: TouchEvent) => {
+    e.originalEvent.preventDefault();
+
+    const rootEl = rootElRef.current;
+
+    rootEl.style.transform = `translateY(${e.shiftY}px)`;
+    const rootGesture = rootEl.getBoundingClientRect();
+
+    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
+    setDragShift(e.shiftY);
+    setDragEndIndex(dragStartIndex);
+
+    siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
+      const siblingGesture = sibling.getBoundingClientRect();
+      const siblingHalfHeight = siblingGesture.height / 2;
+
+      const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+      const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+
+      if (dragStartIndex < siblingIndex) {
+        if (rootOverSibling) {
+          if (dragDirection === 'down') {
+            sibling.style.transform = 'translateY(-100%)';
+          }
+
+          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
+        }
+        if (rootUnderSibling && dragDirection === 'up') {
+          sibling.style.transform = 'translateY(0)';
+        }
+      } else if (dragStartIndex > siblingIndex) {
+        if (rootUnderSibling) {
+          if (dragDirection === 'up') {
+            sibling.style.transform = 'translateY(100%)';
+          }
+
+          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
+        }
+        if (rootOverSibling && dragDirection === 'down') {
+          sibling.style.transform = 'translateY(0)';
+        }
+      }
+    });
+  };
+
+  const onDragEnd = () => {
+    const [from, to] = [dragStartIndex, dragEndIndex];
+
+    siblings.forEach((sibling: HTMLElement) => {
+      sibling.style.transform = null;
+    });
+
+    setSiblings(undefined);
+    setDragEndIndex(undefined);
+    setDragStartIndex(undefined);
+    setDragDirection(undefined);
+    setDragShift(undefined);
+
+    setDragging(false);
+
+    onDragFinish && onDragFinish({ from, to });
+  };
+
+  const useDraggableProps: UseDraggableProps = {
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    dragging,
+    rootElRef,
+  };
+
+  return useDraggableProps;
+};

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { classNames } from '../../lib/classNames';
 import Spinner from '../Spinner/Spinner';
 import CustomScrollView from '../CustomScrollView/CustomScrollView';
@@ -247,7 +247,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
         getRef={getRef}
         disabled={disabled}
         onInputChange={handleInputChange}
-        after={<Icon20Dropdown />}
+        after={<DropdownIcon />}
       />
       {opened &&
         <div

package/src/components/Counter/Counter.tsx

@@ -6,7 +6,7 @@ import Caption from '../Typography/Caption/Caption';
 import Text from '../Typography/Text/Text';
 import { VKCOM } from '../../lib/platform';
 import { hasReactNode } from '../../lib/utils';
-import { HasPlatform } from '../../types';
+import { HasComponent, HasPlatform } from '../../types';
 import './Counter.css';
 
 export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -17,7 +17,7 @@ export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: 's' | 'm';
 }
 
-type CounterTypographyProps = Pick<CounterProps, 'size'> & HasPlatform & { Component?: React.ElementType };
+type CounterTypographyProps = Pick<CounterProps, 'size'> & HasPlatform & HasComponent;
 
 const CounterTypography: React.FC<CounterTypographyProps> = ({ size, platform, ...restProps }) => {
   return size === 's'

package/src/components/CustomSelect/CustomSelect.tsx

@@ -4,14 +4,14 @@ import { debounce, setRef } from '../../lib/utils';
 import { classNames } from '../../lib/classNames';
 import { NativeSelectProps } from '../NativeSelect/NativeSelect';
 import CustomScrollView from '../CustomScrollView/CustomScrollView';
-import { SizeType, withAdaptivity } from '../../hoc/withAdaptivity';
+import { withAdaptivity } from '../../hoc/withAdaptivity';
 import { withPlatform } from '../../hoc/withPlatform';
 import CustomSelectOption, { CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
 import { getClassName } from '../../helpers/getClassName';
 import { FormFieldProps } from '../FormField/FormField';
 import { HasPlatform } from '../../types';
 import Input from '../Input/Input';
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import Caption from '../Typography/Caption/Caption';
 import { warnOnce } from '../../lib/warnOnce';
 import Spinner from '../Spinner/Spinner';
@@ -150,7 +150,6 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
     }
   }
 
-  public state: CustomSelectState;
   private keyboardInput: string;
   private isControlledOutside: boolean;
   private selectEl: HTMLSelectElement;
@@ -576,7 +575,7 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
             // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
             // @ts-ignore
             onClick={onClick}
-            after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+            after={<DropdownIcon />}
             placeholder={restProps.placeholder}
           /> :
           <SelectMimicry

package/src/components/DropdownIcon/DropdownIcon.css

@@ -0,0 +1,3 @@
+.DropdownIcon {
+  cursor: pointer;
+}

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Icon20Dropdown, Icon24ChevronDown } from '@vkontakte/icons';
+import { SizeType } from '../AdaptivityProvider/AdaptivityContext';
+import { getClassName } from '../../helpers/getClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import './DropdownIcon.css';
+
+export const DropdownIcon: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  const Icon = sizeY === SizeType.COMPACT
+    ? Icon20Dropdown
+    : Icon24ChevronDown;
+
+  return (
+    <Icon vkuiClass={getClassName('DropdownIcon', platform)} {...props} />
+  );
+};

package/src/components/Epic/Readme.md

@@ -29,7 +29,7 @@ const Example = withAdaptivity(({ viewWidth }) => {
       style={{ justifyContent: "center" }}
     >
       {isDesktop && (
-        <SplitCol fixed width="280px" maxWidth="280px">
+        <SplitCol fixed width={280} maxWidth={280}>
           <Panel>
             {hasHeader && <PanelHeader />}
             <Group>
@@ -135,6 +135,7 @@ const Example = withAdaptivity(({ viewWidth }) => {
               onClick={onStoryChange}
               selected={activeStory === 'profile'}
               data-story="profile"
+              indicator={<Badge mode="prominent" />}
               text="Профиль"
             ><Icon28UserCircleOutline /></TabbarItem>
           </Tabbar>

package/src/components/FocusTrap/FocusTrap.tsx

@@ -6,13 +6,12 @@ import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibili
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { noop } from '../../lib/utils';
-import { HasRootRef } from '../../types';
+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> {
-  Component?: React.ElementType;
+export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
   onClose?: (props?: any) => void;
   restoreFocus?: boolean;
   timeout?: number;
@@ -55,14 +54,17 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
     }
 
     const nodes: HTMLElement[] = [];
-    // eslint-disable-next-line no-restricted-properties
-    ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {
-      const { display, visibility } = window.getComputedStyle(focusableEl);
-
-      if (display !== 'none' && visibility !== 'hidden') {
-        nodes.push(focusableEl as 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);

package/src/components/FocusVisible/FocusVisible.css

@@ -1,5 +1,7 @@
 .AppRoot--keyboard-input .Tappable:focus > .FocusVisible,
-.Tappable:focus-visible > .FocusVisible {
+.Tappable:focus-visible > .FocusVisible,
+.AppRoot--keyboard-input input:focus ~ .FocusVisible,
+input:focus-visible ~ .FocusVisible {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -14,7 +16,9 @@
 }
 
 .AppRoot--keyboard-input .Tappable:focus > .FocusVisible--outside,
-.Tappable:focus-visible > .FocusVisible--outside {
+.Tappable:focus-visible > .FocusVisible--outside,
+.AppRoot--keyboard-input input:focus ~ .FocusVisible--outside,
+input:focus-visible ~ .FocusVisible--outside {
   top: -2px;
   left: -2px;
   right: -2px;
@@ -29,7 +33,9 @@
  */
 @media (prefers-reduced-motion: no-preference) {
   .AppRoot--keyboard-input .Tappable:focus > .FocusVisible,
-  .Tappable:focus-visible > .FocusVisible {
+  .Tappable:focus-visible > .FocusVisible,
+  .AppRoot--keyboard-input input:focus ~ .FocusVisible,
+  input:focus-visible ~ .FocusVisible {
     top: 4px;
     left: 4px;
     right: 4px;
@@ -40,7 +46,9 @@
   }
 
   .AppRoot--keyboard-input .Tappable:focus > .FocusVisible--outside,
-  .Tappable:focus-visible > .FocusVisible--outside {
+  .Tappable:focus-visible > .FocusVisible--outside,
+  .AppRoot--keyboard-input input:focus ~ .FocusVisible--outside,
+  input:focus-visible ~ .FocusVisible--outside {
     top: 0;
     left: 0;
     bottom: 0;

package/src/components/FormField/FormField.css

@@ -1,7 +1,6 @@
 .FormField {
   position: relative;
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
   padding: 1px;
   box-sizing: border-box;

package/src/components/FormField/FormField.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { hasReactNode } from '../../lib/utils';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import './FormField.css';
@@ -17,8 +17,8 @@ export interface FormFieldProps {
 interface FormFieldOwnProps extends
   React.AllHTMLAttributes<HTMLElement>,
   HasRootRef<HTMLElement>,
+  HasComponent,
   FormFieldProps {
-  Component?: React.ElementType;
   disabled?: boolean;
 }
 

package/src/components/FormItem/FormItem.css

@@ -3,9 +3,13 @@
   padding: 12px var(--formitem_padding);
 }
 
+.FormItem--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .FormItem__removable {
   flex-grow: 1;
-  flex-shrink: initial;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
@@ -52,19 +56,6 @@
   --formitem_padding: 12px;
 }
 
-.FormItem--ios.FormItem--removable {
-  padding-left: 0;
-  margin-left: 0;
-}
-
-.FormLayoutGroup .Removable .FormItem--ios.FormItem--withTop {
-  margin-top: -28px;
-}
-
-.FormLayoutGroup .Removable .FormItem--ios.FormItem--sizeY-compact.FormItem--withTop {
-  margin-top: -26px;
-}
-
 /**
  * CMP:
  * FormLayoutGroup
@@ -81,3 +72,11 @@
 .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,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HasComponent, HasRootRef } from '../../types';
 import { classNames } from '../../lib/classNames';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -11,11 +11,10 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { Removable, RemovableProps } from '../Removable/Removable';
 import './FormItem.css';
 
-export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLElement> {
+export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
   top?: React.ReactNode;
   bottom?: React.ReactNode;
   status?: 'default' | 'error' | 'valid';
-  Component?: React.ElementType;
   /**
    * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
    */

package/src/components/FormLayout/FormLayout.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasRef } from '../../types';
+import { HasComponent, HasRef } from '../../types';
 import './FormLayout.css';
 
 const preventDefault = (e: React.FormEvent) => e.preventDefault();
 
-export interface FormLayoutProps extends React.AllHTMLAttributes<HTMLElement>, HasRef<HTMLElement> {
-  Component?: React.ElementType;
-}
+export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasComponent;
 
 const FormLayout: React.FunctionComponent<FormLayoutProps> = (props: FormLayoutProps) => {
   const {

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -1,18 +1,22 @@
 .FormLayoutGroup--horizontal {
-  padding: 12px 16px;
   display: flex;
-  flex-flow: row nowrap;
+  padding: 12px var(--formitem_padding);
+}
+
+.FormLayoutGroup__removable {
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
 }
 
 /**
  * iOS
  */
-
-.FormLayoutGroup--ios.FormLayoutGroup--horizontal {
-  padding-left: 12px;
-  padding-right: 12px;
+.FormLayoutGroup--ios {
+  --formitem_padding: 12px;
 }
 
-.FormLayoutGroup--ios.FormLayoutGroup--removable {
+.FormLayoutGroup--removable {
   padding-left: 0;
+  padding-right: 0;
 }

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -42,7 +42,16 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
       )}
       {...restProps}>
       {isRemovable
-        ? <Removable align="start" removePlaceholder={removePlaceholder} onRemove={(e) => onRemove(e, rootEl?.current)}>{children}</Removable>
+        ? (
+          <Removable
+            vkuiClass="FormLayoutGroup__removable"
+            align="start"
+            removePlaceholder={removePlaceholder}
+            onRemove={(e) => onRemove(e, rootEl?.current)}
+          >
+            {children}
+          </Removable>
+        )
         : children
       }
     </div>

package/src/components/Gallery/Gallery.css

@@ -1,7 +1,6 @@
 .Gallery {
   position: relative;
   overflow: hidden;
-  height: 100px;
 }
 
 .Gallery__viewport {
@@ -18,13 +17,13 @@
   display: flex;
   width: 100%;
   height: 100%;
+  min-height: 100px;
   cursor: grab;
   align-items: stretch;
 }
 
 .Gallery__slide {
   width: 100%;
-  height: 100%;
   flex: 0 0 auto;
   max-width: 100%;
   overflow: hidden;
@@ -36,7 +35,7 @@
 
 .Gallery__slide > * {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
 }
 
 .Gallery__bullets {