@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/NativeSelect/NativeSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
@@ -64,7 +64,7 @@ const NativeSelect: React.FC<NativeSelectProps> = ({
       style={style}
       getRootRef={getRootRef}
       disabled={disabled}
-      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+      after={<DropdownIcon />}
     >
       <select
         {...restProps}

package/src/components/Removable/Removable.css

@@ -1,14 +1,8 @@
-.Removable {
-  position: relative;
-  min-width: 0;
-  width: 100%;
-  max-width: 100%;
-}
-
 .Removable__content {
+  position: relative;
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
+  padding-left: var(--formitem_padding);
 }
 
 .Removable__action {
@@ -22,35 +16,16 @@
   align-self: flex-start;
 }
 
-.FormItem .Removable,
-.FormLayoutGroup .Removable {
-  padding-left: var(--formitem_padding);
-  padding-right: var(--formitem_padding);
-  margin-left: calc(-1 * var(--formitem_padding));
-  margin-right: calc(-1 * var(--formitem_padding));
-}
-
-.FormItem--withTop .Removable__action,
-.FormItem--withTop ~ .Removable__action {
+.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
   top: 28px;
 }
 
-.FormItem--withTop .Removable--sizeY-compact .Removable__action,
-.Removable--sizeY-compact .FormItem--withTop ~ .Removable__action {
+.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
   top: 26px;
 }
 
-.Cell .Removable {
-  padding-right: 6px;
-  box-sizing: border-box;
-}
-
-/* TODO: remove this
-   (a very temporary fix to appease screenshot tests) */
-.Cell.Cell--android .Removable.Removable--sizeY-regular {
-  padding-right: 4px;
-}
-
 /**
  * iOS
  */
@@ -81,16 +56,16 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .Removable--ios .Removable__content,
-  .Removable__remove {
+  .Removable--ios .Removable__content {
     transition: transform .6s var(--ios-easing);
   }
 }
 
 .Removable__toggle {
   display: block;
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
+  margin: 0 2px;
   background: none;
 }
 
@@ -122,44 +97,22 @@
   background-color: var(--white);
 }
 
-.Removable--sizeY-compact .Removable__toggle {
-  margin-top: -4px;
-  margin-bottom: -4px;
+.Removable--ios .Removable__content {
+  padding-left: 0;
+  padding-right: var(--formitem_padding);
 }
 
-.FormLayoutGroup .Removable--ios .Removable__content {
+.FormLayoutGroup--removable .Removable__content {
   flex-wrap: wrap;
 }
 
-.FormLayoutGroup .Removable--ios .FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop ~ .Removable__offset {
   order: -1;
   display: block;
   width: 100%;
   height: 28px;
 }
 
-.FormLayoutGroup .Removable--ios.Removable--sizeY-compact .FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact .FormItem--ios.FormItem--withTop ~ .Removable__offset {
   height: 26px;
 }
-
-/**
- * ANDROID & VKCOM
- */
-.FormItem .Removable--android .Removable__action,
-.FormItem .Removable--vkcom .Removable__action,
-.FormLayoutGroup .Removable--android .Removable__action,
-.FormLayoutGroup .Removable--vkcom .Removable__action {
-   margin-top: -2px;
-   margin-right: -16px;
-   margin-bottom: -2px;
-}
-
-.FormItem--sizeY-compact .Removable--android .Removable__action,
-.FormItem--sizeY-compact .Removable--vkcom .Removable__action,
-.FormLayoutGroup--sizeY-compact .Removable--android .Removable__action,
-.FormLayoutGroup--sizeY-compact .Removable--vkcom .Removable__action {
-   margin-left: 2px;
-   margin-top: -4px;
-   margin-right: -14px;
-   margin-bottom: -4px;
-}

package/src/components/Removable/Removable.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 import { classNames } from '../../lib/classNames';
-import { getTitleFromChildren } from '../../lib/utils';
+import { getTitleFromChildren, noop } from '../../lib/utils';
+import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getClassName } from '../../helpers/getClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -23,65 +25,104 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
 
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {
-  /**
-   * Расположение кнопки удаления.
-   */
-  align?: 'start' | 'center';
+interface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {
+  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
+  removePlaceholderString?: string;
 }
 
-export const Removable: React.FC<RemovableOwnProps> = ({
+const RemovableIos: React.FC<RemovableIosOwnProps> = ({
+  onRemoveClick,
+  removePlaceholder,
+  removePlaceholderString,
   children,
-  onRemove,
-  removePlaceholder = 'Удалить',
-  align = 'center',
-  ...restProps
-}: RemovableOwnProps) => {
-  const platform = usePlatform();
-  const { sizeY } = useAdaptivity();
+}) => {
   const { document } = useDOM();
 
   const removeButtonRef = React.useRef(null);
-
-  const [isRemoveActivated, setRemoveActivated] = React.useState(false);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(document, 'click', isRemoveActivated && (() => {
-    setRemoveActivated(false);
+  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {
     updateRemoveOffset(0);
   }));
 
   const onRemoveTransitionEnd = () => {
-    if (isRemoveActivated) {
+    if (removeOffset > 0) {
       removeButtonRef?.current?.focus();
     }
   };
 
-  const onRemoveActivateClick = (e: React.MouseEvent) => {
-    e.nativeEvent.stopPropagation();
-    e.preventDefault();
-    setRemoveActivated(true);
+  const onRemoveActivateClick = () => {
+    const { offsetWidth = 0 } = removeButtonRef?.current;
+    updateRemoveOffset(offsetWidth);
   };
 
+  return (
+    <div
+      vkuiClass="Removable__content"
+      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}
+      onTransitionEnd={onRemoveTransitionEnd}
+    >
+      <IconButton
+        hasActive={false}
+        hasHover={false}
+        aria-label={removePlaceholderString}
+        vkuiClass="Removable__action Removable__toggle"
+        onClick={onRemoveActivateClick}
+        disabled={removeOffset > 0}
+      >
+        <i vkuiClass="Removable__toggle-in" role="presentation" />
+      </IconButton>
+      {children}
+
+      <span vkuiClass="Removable__offset" aria-hidden="true"></span>
+
+      <Tappable
+        Component="button"
+        hasActive={false}
+        hasHover={false}
+        disabled={removeOffset === 0}
+        getRootRef={removeButtonRef}
+        vkuiClass="Removable__remove"
+        onClick={onRemoveClick}
+        onTransitionEnd={onRemoveTransitionEnd}
+      >
+        <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
+      </Tappable>
+    </div>
+  );
+};
+
+interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+  /**
+   * Расположение кнопки удаления.
+   */
+  align?: 'start' | 'center';
+}
+
+export const Removable: React.FC<RemovableOwnProps> = ({
+  getRootRef,
+  children,
+  onRemove = noop,
+  removePlaceholder = 'Удалить',
+  align = 'center',
+  ...restProps
+}: RemovableOwnProps) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  const ref = useExternRef(getRootRef);
+
   const onRemoveClick = (e: React.MouseEvent) => {
-    e.nativeEvent.stopImmediatePropagation();
     e.preventDefault();
-    onRemove && onRemove(e);
+    onRemove(e);
   };
 
-  React.useEffect(() => {
-    const removeButton = removeButtonRef?.current;
-
-    if (isRemoveActivated && removeButton) {
-      updateRemoveOffset(removeButton.offsetWidth);
-    }
-  }, [isRemoveActivated]);
-
   const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);
 
   return (
     <div
       {...restProps}
+      ref={ref}
       vkuiClass={classNames(
         getClassName('Removable', platform),
         `Removable--${align}`,
@@ -93,9 +134,11 @@ export const Removable: React.FC<RemovableOwnProps> = ({
           {children}
 
           <IconButton
-            aria-label={removePlaceholderString}
+            activeMode="opacity"
+            hoverMode="opacity"
             vkuiClass="Removable__action"
             onClick={onRemoveClick}
+            aria-label={removePlaceholderString}
           >
             <Icon24Cancel role="presentation" />
           </IconButton>
@@ -103,36 +146,13 @@ export const Removable: React.FC<RemovableOwnProps> = ({
       )}
 
       {platform === IOS && (
-        <React.Fragment>
-          <div vkuiClass="Removable__content" style={{ transform: `translateX(-${removeOffset}px)` }}>
-            <IconButton
-              hasActive={false}
-              hasHover={false}
-              aria-label={removePlaceholderString}
-              vkuiClass="Removable__action Removable__toggle"
-              onClick={onRemoveActivateClick}
-            >
-              <i vkuiClass="Removable__toggle-in" role="presentation" />
-            </IconButton>
-            {children}
-
-            <span vkuiClass="Removable__offset" aria-hidden="true"></span>
-          </div>
-
-          <Tappable
-            Component="button"
-            hasActive={false}
-            hasHover={false}
-            disabled={!isRemoveActivated}
-            getRootRef={removeButtonRef}
-            vkuiClass="Removable__remove"
-            onClick={onRemoveClick}
-            onTransitionEnd={onRemoveTransitionEnd}
-            style={{ transform: `translateX(-${removeOffset}px)` }}
-          >
-            <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
-          </Tappable>
-        </React.Fragment>
+        <RemovableIos
+          onRemoveClick={onRemoveClick}
+          removePlaceholder={removePlaceholder}
+          removePlaceholderString={removePlaceholderString}
+        >
+          {children}
+        </RemovableIos>
       )}
     </div>
   );

package/src/components/ScreenSpinner/Readme.md

@@ -4,7 +4,7 @@
 
 Рекомендуется использовать в случаях, когда требуется заблокировать интерфейс до завершения асинхронного процесса.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 class Example extends React.Component {
 
   constructor (props) {
@@ -21,14 +21,18 @@ class Example extends React.Component {
 
   render () {
     return (
-      <View popout={this.state.popout} activePanel="spinner">
-        <Panel id="spinner">
-          <PanelHeader>ScreenSpinner</PanelHeader>
-          <Group>
-            <CellButton onClick={this.onClick.bind(this)}>Запустить долгий процесс</CellButton>
-          </Group>
-        </Panel>
-      </View>
+      <SplitLayout popout={this.state.popout}>
+        <SplitCol>
+        <View activePanel="spinner">
+          <Panel id="spinner">
+            <PanelHeader>ScreenSpinner</PanelHeader>
+            <Group>
+              <CellButton onClick={this.onClick.bind(this)}>Запустить долгий процесс</CellButton>
+            </Group>
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     )
   }
 }

package/src/components/Search/Search.css

@@ -30,7 +30,7 @@
 }
 
 .Search__input {
-  -webkit-appearance: textfield;
+  -webkit-appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
   border: none;
   margin: 0;
   height: var(--search_default_height);

package/src/components/Select/Select.css

@@ -1,5 +1,6 @@
 .Select {
   position: relative;
+  cursor: pointer;
   box-sizing: border-box;
 }
 
@@ -25,7 +26,6 @@
   box-sizing: border-box;
   position: relative;
   z-index: 2;
-  cursor: pointer;
   overflow: hidden;
 }
 

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { HasAlign, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
@@ -51,7 +51,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? null : onClick}
       disabled={disabled}
-      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+      after={<DropdownIcon />}
     >
       <TypographyComponent Component="div" weight="regular" vkuiClass="Select__container">
         <span vkuiClass="Select__title">{children || placeholder}</span>

package/src/components/SimpleCell/SimpleCell.css

@@ -5,12 +5,8 @@
   white-space: nowrap;
   text-decoration: none;
   color: var(--text_primary);
-}
-
-.FormItem .SimpleCell {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .SimpleCell--mult {
@@ -26,7 +22,6 @@
   max-width: 100%;
   flex-grow: 1;
   min-width: 0;
-  flex-shrink: initial;
   overflow: hidden;
 }
 
@@ -57,7 +52,6 @@
 
 .SimpleCell:not(.SimpleCell--mult) .SimpleCell__content {
   display: flex;
-  flex-flow: row nowrap;
   align-content: flex-start;
   align-items: center;
   justify-content: flex-start;
@@ -120,10 +114,6 @@
   padding-right: 2px;
 }
 
-.SimpleCell .Switch {
-  padding-left: 10px;
-}
-
 .SimpleCell__after .IconButton .Icon--28,
 .SimpleCell__after .IconButton .Icon--28 ~ * {
   margin-right: -8px;
@@ -189,12 +179,6 @@
  * Android & VKCOM
  */
 
-.SimpleCell--android,
-.SimpleCell--vkcom {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
 .SimpleCell--android .SimpleCell__main,
 .SimpleCell--android .SimpleCell__indicator,
 .SimpleCell--vkcom .SimpleCell__main,
@@ -246,3 +230,11 @@
 .SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
   transform: translateY(.5px);
 }
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem > .SimpleCell {
+  margin: 0 calc(-1 * var(--formitem_padding));
+}

package/src/components/SimpleCell/SimpleCell.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasComponent } from '../../types';
 import { classNames } from '../../lib/classNames';
 import { getClassName } from '../../helpers/getClassName';
 import Tappable, { TappableProps } from '../Tappable/Tappable';
@@ -13,7 +14,7 @@ import Text from '../Typography/Text/Text';
 import Subhead from '../Typography/Subhead/Subhead';
 import './SimpleCell.css';
 
-export interface SimpleCellOwnProps {
+export interface SimpleCellOwnProps extends HasComponent {
   /**
    * Иконка 28 или `<Avatar size={28|32|40|48|72} />`
    */
@@ -43,14 +44,11 @@ export interface SimpleCellOwnProps {
    */
   expandable?: boolean;
   multiline?: boolean;
-  Component?: React.ElementType;
 }
 
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
 
-interface SimpleCellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {
-  Component?: React.ElementType;
-}
+type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> & HasComponent;
 
 const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (props: SimpleCellTypographyProps) => {
   const { sizeY } = useAdaptivity();

package/src/components/SplitCol/SplitCol.tsx

@@ -13,9 +13,9 @@ export const SplitColContext = React.createContext<SplitColContextProps>({
 });
 
 export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
-  width?: string;
-  maxWidth?: string;
-  minWidth?: string;
+  width?: number | string;
+  maxWidth?: number | string;
+  minWidth?: number | string;
   /**
    * Если false, то переходы между Panel происходят без анимации
    */
@@ -28,7 +28,7 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
-  const { children, width, maxWidth, minWidth, spaced, animate, fixed, style, ...restProps } = props;
+  const { children, width, maxWidth, minWidth, spaced, animate = false, fixed, style, ...restProps } = props;
   const baseRef = React.useRef<HTMLDivElement>();
 
   const contextValue = React.useMemo(() => {
@@ -59,7 +59,3 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
     </div>
   );
 };
-
-SplitCol.defaultProps = {
-  animate: false,
-};

package/src/components/SplitLayout/Readme.md

@@ -46,7 +46,7 @@ const Example = withAdaptivity(
         modal={modalRoot}
       >
         {isDesktop && (
-          <SplitCol fixed width="280px" maxWidth="280px">
+          <SplitCol fixed width={280} maxWidth={280}>
             <Panel>
               {hasHeader && <PanelHeader />}
               <Group>
@@ -137,4 +137,4 @@ const Example = withAdaptivity(
 
 <Example />
 
-```
+```