@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/Pagination/Readme.md

@@ -0,0 +1,110 @@
+Чаще всего используется в больших списках или таблицах, для более понятного структурирования и деления информации.
+
+По умолчанию многоточие показывается когда кол-во страниц `> 7`. Чтобы повлиять на это поведение, существуют параметры `siblingCount` и `boundaryCount`.
+К примеру, если выставить `siblingCount={0}` или `boundaryCount={0}`, то многоточие появится уже при `> 5`.
+Если выставить и `siblingCount={0}`, и `boundaryCount={0}`, то `> 4`.
+
+> При ширине `< 380px` рекомендуется отключать `siblingCount` передав в него значение `0`.
+
+## `usePagination`
+
+Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимиает почти те же параметры, что и `Pagination`.
+
+```jsx { "props": { "layout": false, "adaptivity": true, "iframe": false } }
+const Example = () => {
+  const [sizeY, setSizeY] = useState("compact");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [siblingCount, setSiblingCount] = useState(0);
+  const [boundaryCount, setBoundaryCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(123);
+  const [disabled, setDisabled] = useState(false);
+
+  const handleChange = React.useCallback((page) => {
+    setCurrentPage(page);
+  }, []);
+
+  return (
+    <div style={rootContainerStyles}>
+      <AdaptivityProvider sizeY={sizeY}>
+        <div style={demoContainerStyles}>
+          <Pagination
+            currentPage={currentPage}
+            siblingCount={siblingCount}
+            boundaryCount={boundaryCount}
+            totalPages={totalPages}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+        </div>
+      </AdaptivityProvider>
+      <div style={propsContainerStyles}>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+        <FormItem top="prop[currentPage]">
+          <Input
+            type="number"
+            value={currentPage}
+            onChange={({ target: { value } }) => setCurrentPage(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[siblingCount]">
+          <Input
+            type="number"
+            value={siblingCount}
+            onChange={({ target: { value } }) => setSiblingCount(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[boundaryCount]">
+          <Input
+            type="number"
+            value={boundaryCount}
+            onChange={({ target: { value } }) =>
+              setBoundaryCount(Number(value))
+            }
+          />
+        </FormItem>
+        <FormItem top="prop[totalPages]">
+          <Input
+            type="number"
+            value={totalPages}
+            onChange={({ target: { value } }) => setTotalPages(Number(value))}
+          />
+        </FormItem>
+        <FormItem top="prop[disabled]">
+          <Checkbox
+            value={disabled}
+            onChange={({ target: { checked } }) => setDisabled(checked)}
+          >
+            disabled
+          </Checkbox>
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+  justifyContent: "center",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  paddingTop: 24,
+  paddingBottom: 24,
+};
+
+const propsContainerStyles = { minWidth: 200 };
+
+<Example />;
+```

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -3,7 +3,7 @@ import { getClassName } from "../../helpers/getClassName";
 import Tappable from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Headline from "../Typography/Headline/Headline";
 import { IOS, Platform } from "../../lib/platform";
 import Text from "../Typography/Text/Text";
@@ -81,13 +81,7 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
       )}
       <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
         {hasReactNode(status) && (
-          <Caption
-            level="1"
-            weight="regular"
-            vkuiClass="PanelHeaderContent__status"
-          >
-            {status}
-          </Caption>
+          <Caption vkuiClass="PanelHeaderContent__status">{status}</Caption>
         )}
         <div vkuiClass="PanelHeaderContent__children">
           <PanelHeaderChildren

package/src/components/PopoutWrapper/Readme.md

@@ -9,4 +9,4 @@ import { PopoutWrapper } from "@vkontakte/vkui";
 </PopoutWrapper>;
 ```
 
-Все всплывающие окна передаются в свойство `popout` компонентов `View` или `Root`.
+Все всплывающие окна передаются в свойство `popout` компонента [`SplitLayout`](#/SplitLayout).

package/src/components/Popper/Readme.md

@@ -2,7 +2,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позициионироваться
+Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позиционироваться
 рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
 реализующие логику скрытия и показа по клику и по ховеру соответственно.
 

package/src/components/PromoBanner/PromoBanner.tsx

@@ -3,7 +3,7 @@ import { Icon24Dismiss } from "@vkontakte/icons";
 import Button from "../Button/Button";
 import SimpleCell from "../SimpleCell/SimpleCell";
 import Avatar from "../Avatar/Avatar";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { warnOnce } from "../../lib/warnOnce";
@@ -90,13 +90,11 @@ const PromoBanner = (props: PromoBannerProps) => {
   return (
     <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
       <div vkuiClass="PromoBanner__head">
-        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">
+        <Caption vkuiClass="PromoBanner__label">
           {bannerData.advertisingLabel || "Advertisement"}
         </Caption>
         {ageRestrictions != null && (
-          <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">
-            {ageRestrictions}+
-          </Caption>
+          <Caption vkuiClass="PromoBanner__age">{ageRestrictions}+</Caption>
         )}
 
         {!props.isCloseButtonHidden && (

package/src/components/Radio/Radio.tsx

@@ -11,7 +11,7 @@ import {
   SizeType,
 } from "../../hoc/withAdaptivity";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Headline from "../Typography/Headline/Headline";
 import Text from "../Typography/Text/Text";
 import "./Radio.css";
@@ -68,14 +68,7 @@ const Radio: React.FC<RadioProps> = (props: RadioProps) => {
         >
           <div vkuiClass="Radio__children">{children}</div>
           {hasReactNode(description) && (
-            <Caption
-              level="1"
-              Component="span"
-              weight="regular"
-              vkuiClass="Radio__description"
-            >
-              {description}
-            </Caption>
+            <Caption vkuiClass="Radio__description">{description}</Caption>
           )}
         </ContentComponent>
       </div>

package/src/components/Removable/Removable.tsx

@@ -25,14 +25,12 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
 
-interface RemovableIosOwnProps
-  extends Pick<RemovableProps, "removePlaceholder"> {
-  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
+interface RemovableIosOwnProps extends RemovableProps {
   removePlaceholderString?: string;
 }
 
 const RemovableIos: React.FC<RemovableIosOwnProps> = ({
-  onRemoveClick,
+  onRemove,
   removePlaceholder,
   removePlaceholderString,
   children,
@@ -40,6 +38,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   const { window } = useDOM();
 
   const removeButtonRef = React.useRef<HTMLElement>(null);
+  const disabledRef = React.useRef(true);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
   useGlobalEventListener(
@@ -56,6 +55,8 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   const onRemoveTransitionEnd = () => {
     if (removeOffset > 0) {
       removeButtonRef?.current?.focus();
+    } else {
+      disabledRef.current = true;
     }
   };
 
@@ -65,6 +66,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
       return;
     }
     const { offsetWidth } = removeButtonRef.current;
+    disabledRef.current = false;
     updateRemoveOffset(offsetWidth);
   };
 
@@ -92,10 +94,10 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
         Component="button"
         hasActive={false}
         hasHover={false}
-        disabled={removeOffset === 0}
+        disabled={disabledRef.current}
         getRootRef={removeButtonRef}
         vkuiClass="Removable__remove"
-        onClick={onRemoveClick}
+        onClick={onRemove}
       >
         <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
       </Tappable>
@@ -162,7 +164,7 @@ export const Removable: React.FC<RemovableOwnProps> = ({
 
       {platform === IOS && (
         <RemovableIos
-          onRemoveClick={onRemoveClick}
+          onRemove={onRemoveClick}
           removePlaceholder={removePlaceholder}
           removePlaceholderString={removePlaceholderString}
         >

package/src/components/RichCell/Readme.md

@@ -11,10 +11,10 @@
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
         actions={
-          <React.Fragment>
+          <ButtonGroup mode="horizontal" gap="s">
             <Button>Принять</Button>
             <Button mode="secondary">Отклонить</Button>
-          </React.Fragment>
+          </ButtonGroup>
         }
       >
         Тарас Иванов
@@ -36,10 +36,10 @@
           </UsersStack>
         }
         actions={
-          <React.Fragment>
+          <ButtonGroup mode="horizontal" gap="s">
             <Button>Добавить</Button>
             <Button mode="secondary">Скрыть</Button>
-          </React.Fragment>
+          </ButtonGroup>
         }
       >
         Илья Гришин

package/src/components/RichCell/RichCell.tsx

@@ -23,7 +23,8 @@ export interface RichCellProps extends TappableProps {
    */
   bottom?: React.ReactNode;
   /**
-   * Кнопка или набор кнопок `<Button size="s" />`. Располагается под `bottom`.
+   * Кнопка `<Button size="s" />`. Располагается под `bottom`.
+   * Для набора кнопок следует использовать обёртку `<ButtonGroup mode="horizontal" gap="s">...</ButtonGroup>`.
    */
   actions?: React.ReactNode;
   /**
@@ -82,11 +83,7 @@ const RichCell: React.FC<RichCellProps> = ({
           </Text>
         )}
         {hasReactNode(caption) && (
-          <Subhead
-            Component="span"
-            weight="regular"
-            vkuiClass="RichCell__caption"
-          >
+          <Subhead Component="span" vkuiClass="RichCell__caption">
             {caption}
           </Subhead>
         )}

package/src/components/RichTooltip/Readme.md

@@ -2,7 +2,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
+Тултип, открывающийся при наведении мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
 по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
 
 ```jsx { "props": { "layout": false, "iframe": true } }

package/src/components/Select/Select.css

@@ -57,3 +57,8 @@
 .Select--sizeY--compact .Select__container {
   padding: 7px 11px;
 }
+
+.Select--sizeY--compact .Select__container--plain,
+.Select__container--plain {
+  padding: 0 6px 0 8px;
+}

package/src/components/SelectMimicry/SelectMimicry.css

@@ -0,0 +1,10 @@
+.Select--mimicry-plain {
+  padding: 8px 8px 8px 0;
+  text-transform: capitalize;
+  border-radius: 8px;
+}
+
+.Select--mimicry-plain .FormField__border {
+  background-color: transparent;
+  border: none;
+}

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -13,7 +13,9 @@ import { getClassName } from "../../helpers/getClassName";
 import Headline from "../Typography/Headline/Headline";
 import Text from "../Typography/Text/Text";
 import { VKCOM } from "../../lib/platform";
+import { SelectType } from "../CustomSelect/CustomSelect";
 import "../Select/Select.css";
+import "./SelectMimicry.css";
 
 export interface SelectMimicryProps
   extends React.HTMLAttributes<HTMLElement>,
@@ -22,6 +24,8 @@ export interface SelectMimicryProps
     AdaptivityProps {
   multiline?: boolean;
   disabled?: boolean;
+  after?: React.ReactNode;
+  selectType?: SelectType;
 }
 
 const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
@@ -35,6 +39,8 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
   onClick,
   sizeX,
   sizeY,
+  after = <DropdownIcon />,
+  selectType = SelectType.Default,
   ...restProps
 }: SelectMimicryProps) => {
   const platform = usePlatform();
@@ -49,6 +55,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       vkuiClass={classNames(
         getClassName("Select", platform),
         "Select--mimicry",
+        `Select--mimicry-${selectType}`,
         {
           "Select--not-selected": !children,
           "Select--multiline": multiline,
@@ -60,12 +67,15 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
-      after={<DropdownIcon />}
+      after={after}
     >
       <TypographyComponent
         Component="div"
-        weight="regular"
-        vkuiClass="Select__container"
+        weight={selectType === SelectType.Plain ? "semibold" : "regular"}
+        vkuiClass={classNames(
+          "Select__container",
+          `Select__container--${selectType}`
+        )}
       >
         <span vkuiClass="Select__title">{children || placeholder}</span>
       </TypographyComponent>

package/src/components/SimpleCell/SimpleCell.tsx

@@ -105,11 +105,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
           )}
         </div>
         {description && (
-          <Subhead
-            Component="span"
-            weight="regular"
-            vkuiClass="SimpleCell__description"
-          >
+          <Subhead Component="span" vkuiClass="SimpleCell__description">
             {description}
           </Subhead>
         )}

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -141,6 +141,3 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default SimpleCheckbox;

package/src/components/Spacing/Spacing.tsx

@@ -26,7 +26,7 @@ export const Spacing: React.FC<SpacingProps> = ({
   style,
   ...restProps
 }: SpacingProps) => {
-  const platfrom = usePlatform();
+  const platform = usePlatform();
   const styles = {
     height: size,
     ...style,
@@ -36,7 +36,7 @@ export const Spacing: React.FC<SpacingProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
-      vkuiClass={classNames(getClassName("Spacing", platfrom), {
+      vkuiClass={classNames(getClassName("Spacing", platform), {
         "Spacing--separator": !!separator,
         "Spacing--separator-center":
           separator === true || separator === "center",

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -6,7 +6,7 @@ import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Subhead from "../Typography/Subhead/Subhead";
 import "./SubnavigationButton.css";
 
@@ -36,16 +36,10 @@ const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
   ...restProps
 }: SubnavButtonTypographyProps) => {
   if (textLevel === 1) {
-    return <Subhead weight="regular" {...restProps} />;
+    return <Subhead {...restProps} />;
   }
 
-  return (
-    <Caption
-      level={textLevel === 2 ? "1" : "2"}
-      weight="regular"
-      {...restProps}
-    />
-  );
+  return <Caption level={textLevel === 2 ? "1" : "2"} {...restProps} />;
 };
 
 export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (

package/src/components/Tabbar/Readme.md

@@ -3,5 +3,5 @@
 > **Важно**
 >
 > `Tabbar` располагается фиксированно. Если внутри панели вы используете `FixedLayout`, например
-> располагаете внизу панели `Tabs`, то у `Tabbar` нужно указать `shadow={false}`, чтобы его тень не наeзжала на
+> располагаете внизу панели `Tabs`, то у `Tabbar` нужно указать `shadow={false}`, чтобы его тень не наезжала на
 > "прижатый" книзу контент панели.

package/src/components/Tappable/Tappable.tsx

@@ -18,6 +18,7 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { callMultiple } from "../../lib/callMultiple";
+import { useBooleanState } from "../../hooks/useBooleanState";
 import "./Tappable.css";
 
 export interface TappableProps
@@ -61,6 +62,8 @@ export interface TappableProps
    * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
    */
   focusVisibleMode?: FocusVisibleMode | string;
+  onEnter?: (outputEvent: MouseEvent) => void;
+  onLeave?: (outputEvent: MouseEvent) => void;
 }
 
 interface Wave {
@@ -158,6 +161,8 @@ const Tappable: React.FC<TappableProps> = ({
   hasActive: _hasActive = true,
   activeMode = "background",
   focusVisibleMode = "inside",
+  onEnter,
+  onLeave,
   ...props
 }: TappableProps) => {
   Component = Component || ((props.href ? "a" : "div") as React.ElementType);
@@ -169,7 +174,11 @@ const Tappable: React.FC<TappableProps> = ({
 
   const [clicks, setClicks] = React.useState<Wave[]>([]);
   const [childHover, setChildHover] = React.useState(false);
-  const [_hovered, setHovered] = React.useState(false);
+  const {
+    value: _hovered,
+    setTrue: setHoveredTrue,
+    setFalse: setHoveredFalse,
+  } = useBooleanState(false);
 
   const hovered = _hovered && !props.disabled;
   const hasActive = _hasActive && !childHover && !props.disabled;
@@ -280,8 +289,8 @@ const Tappable: React.FC<TappableProps> = ({
 
   return (
     <Touch
-      onEnter={() => setHovered(true)}
-      onLeave={() => setHovered(false)}
+      onEnter={callMultiple(setHoveredTrue, onEnter)}
+      onLeave={callMultiple(setHoveredFalse, onLeave)}
       type={Component === "button" ? "button" : undefined}
       tabIndex={isCustomElement && !props.disabled ? 0 : undefined}
       role={isCustomElement ? role : undefined}

package/src/components/TextTooltip/Readme.md

@@ -2,7 +2,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-Тултип, открывающийся при наведеннии мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
+Тултип, открывающийся при наведении мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 <TextTooltip text="Привет">

package/src/components/TextTooltip/TextTooltip.tsx

@@ -37,18 +37,14 @@ export const TextTooltip: React.FC<TextTooltipProps> = ({
           {hasReactNode(header) && (
             <Subhead
               Component="span"
-              weight="medium"
+              weight="2"
               vkuiClass="TextTooltip__header"
             >
               {header}
             </Subhead>
           )}
           {hasReactNode(text) && (
-            <Subhead
-              Component="span"
-              weight="regular"
-              vkuiClass="TextTooltip__text"
-            >
+            <Subhead Component="span" vkuiClass="TextTooltip__text">
               {text}
             </Subhead>
           )}

package/src/components/Tooltip/Tooltip.tsx

@@ -58,15 +58,11 @@ const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
           />
           <div vkuiClass="Tooltip__content">
             {header && (
-              <Subhead weight="semibold" vkuiClass="Tooltip__title">
+              <Subhead weight="1" vkuiClass="Tooltip__title">
                 {header}
               </Subhead>
             )}
-            {text && (
-              <Subhead weight="regular" vkuiClass="Tooltip__text">
-                {text}
-              </Subhead>
-            )}
+            {text && <Subhead vkuiClass="Tooltip__text">{text}</Subhead>}
           </div>
         </div>
       </div>