@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/Progress/Progress.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Progress.module.css';
 
-const stylesAppearance = {
+const stylesAppearance: Record<string, string> = {
   accent: styles.appearanceAccent,
   positive: styles.appearancePositive,
   negative: styles.appearanceNegative,
@@ -24,30 +24,57 @@ export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement>
   /**
    * Стиль отображения прогрессбара
    */
-  appearance?: 'accent' | 'positive' | 'negative';
+  appearance?: 'accent' | 'positive' | 'negative' | `--${string}` | `#${string}`;
   value?: number;
   /**
    * Высота элемента.
    */
   height?: number;
+  /**
+   * Сделать прогрессбар прозрачным
+   */
+  trackDisable?: boolean;
 }
 
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
+const resolveAppearance = (
+  appearance: Exclude<ProgressProps['appearance'], undefined>,
+): [CSSCustomProperties | undefined, string | undefined] => {
+  switch (appearance) {
+    case 'accent':
+    case 'positive':
+    case 'negative':
+      return [undefined, stylesAppearance[appearance]];
+    default: {
+      return [{ '--vkui_internal_Progress_background_color': appearance }, undefined];
+    }
+  }
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
 export const Progress = ({
   value = 0,
-  appearance = 'accent',
   height,
+  trackDisable = false,
+  appearance = 'accent',
   ...restProps
 }: ProgressProps): React.ReactNode => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
   const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
   const styleHeight = progressCustomHeightStyle(height);
 
+  const [appearanceStyles, appearanceClassName] = resolveAppearance(appearance);
+
+  const style = {
+    ...styleHeight,
+    ...appearanceStyles,
+    '--vkui_internal_Progress_progress': progress,
+  };
+
   return (
     <RootComponent
       aria-valuenow={value}
@@ -56,10 +83,12 @@ export const Progress = ({
       role="progressbar"
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
-      baseClassName={classNames(styles.host, stylesAppearance[appearance])}
-      baseStyle={styleHeight}
-    >
-      <div className={styles.in} style={{ width: `${progress}%` }} />
-    </RootComponent>
+      baseClassName={classNames(
+        styles.host,
+        trackDisable && styles.trackDisable,
+        appearanceClassName,
+      )}
+      baseStyle={style}
+    />
   );
 };

package/src/components/PullToRefresh/PullToRefresh.module.css

@@ -1,12 +1,12 @@
 .host {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .refreshing {
-  touch-action: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .controls {
@@ -19,28 +19,28 @@
 }
 
 .spinner {
+  box-sizing: border-box;
   display: flex;
-  margin: auto;
-  inline-size: 40px;
-  block-size: 40px;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  transition:
-    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
-    opacity 220ms ease-out;
-  opacity: 0;
+  inline-size: 40px;
+  block-size: 40px;
+  margin: auto;
+  color: var(--vkui--color_icon_accent);
   background: var(--vkui--color_background_modal);
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  color: var(--vkui--color_icon_accent);
+  opacity: 0;
+  transition:
+    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
 }
 
 .ios .spinner {
+  color: var(--vkui--color_icon_medium);
+  background: none;
   border-radius: 0;
   box-shadow: none;
-  background: none;
-  color: var(--vkui--color_icon_medium);
 }
 
 .watching .spinner {
@@ -72,8 +72,8 @@
 
 .content {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   overflow: hidden;
   transition: transform 400ms var(--vkui--animation_easing_platform);
 }

package/src/components/Radio/Radio.module.css

@@ -4,7 +4,7 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalRadioGroup) .host {
+  box-sizing: border-box;
   flex: 1;
   margin: 0;
-  box-sizing: border-box;
 }

package/src/components/Radio/RadioInput/RadioInput.module.css

@@ -10,8 +10,8 @@
 }
 
 .icon .pin {
-  transform-origin: center;
   transform: scale(0);
+  transform-origin: center;
   transition: transform 0.15s var(--vkui--animation_easing_platform);
 }
 

package/src/components/RadioGroup/RadioGroup.module.css

@@ -8,7 +8,7 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem) .host {
+  box-sizing: content-box;
   margin-block: 0;
   margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
-  box-sizing: content-box;
 }

package/src/components/Removable/Removable.module.css

@@ -2,18 +2,31 @@
   position: relative;
   display: flex;
   align-items: center;
+  transform: translateX(
+    calc(
+      -1px * var(--vkui_internal_Removable_remove_offset) *
+        var(--vkui_internal_Removable_remove_offset_direction)
+    )
+  );
+
+  --vkui_internal_Removable_remove_offset: 0;
+  --vkui_internal_Removable_remove_offset_direction: 1;
 }
 
 .withPadding {
   padding-inline-start: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.rtl {
+  --vkui_internal_Removable_remove_offset_direction: -1;
+}
+
 .action {
   position: relative;
   flex-grow: 0;
   flex-shrink: 0;
-  border: 0;
   color: var(--vkui--color_icon_secondary);
+  border: 0;
 }
 
 .alignStart .action {
@@ -33,8 +46,8 @@
 
 .remove {
   position: absolute;
-  inset-inline-start: 100%;
   inset-block-start: 0;
+  inset-inline-start: 100%;
   block-size: 100%;
   padding-block: 0;
   padding-inline: 10px;
@@ -66,8 +79,8 @@
 .toggleIn {
   position: relative;
   display: flex;
-  align-items: center;
   align-content: center;
+  align-items: center;
   justify-content: center;
   inline-size: 100%;
   block-size: 100%;
@@ -75,19 +88,19 @@
 }
 
 .toggleIn::after {
-  content: '';
   inline-size: 22px;
   block-size: 22px;
+  content: '';
   background-color: var(--vkui--color_background_negative);
   border-radius: 50%;
 }
 
 .toggleIn::before {
-  content: '';
   position: absolute;
   display: block;
   inline-size: 12px;
   block-size: 2px;
+  content: '';
   background-color: var(--vkui_internal--white);
 }
 
@@ -122,8 +135,8 @@
 :global(.vkuiInternalFormItem--withTop) :global(.vkuiInternalFormItem__removable) ~ .offset,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalFormItem--withTop) ~ .offset {
-  order: -1;
   display: block;
+  order: -1;
   inline-size: 100%;
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }

package/src/components/Removable/Removable.tsx

@@ -3,11 +3,12 @@
 import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getTextFromChildren } from '../../lib/children';
 import { useDOM } from '../../lib/dom';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { IconButton } from '../IconButton/IconButton';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
@@ -54,6 +55,8 @@ const RemovableIos = ({
   removeButtonTestId,
   disabled,
 }: RemovableIosOwnProps) => {
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
   const { window } = useDOM();
 
   const removeButtonRef = React.useRef<HTMLElement>(null);
@@ -89,10 +92,14 @@ const RemovableIos = ({
     updateRemoveOffset(offsetWidth);
   };
 
+  const style: CSSCustomProperties = {
+    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),
+  };
+
   return (
     <div
-      className={classNames(styles.content, 'vkuiInternalRemovable__content')}
-      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}
+      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}
+      style={style}
       onTransitionEnd={onRemoveTransitionEnd}
     >
       <IconButton

package/src/components/RichCell/RichCell.module.css

@@ -1,12 +1,12 @@
 .host {
+  box-sizing: border-box;
   display: flex;
+  min-block-size: 64px;
   padding-block: var(--vkui--spacing_size_m);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  min-block-size: 64px;
-  box-sizing: border-box;
+  font-family: var(--vkui--font_family_base);
   color: var(--vkui--color_text_primary);
   text-decoration: none; /* в случае если Component="a" */
-  font-family: var(--vkui--font_family_base);
 }
 
 .sizeYCompact {
@@ -25,11 +25,11 @@
 
 .in {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   justify-content: center;
-  flex-grow: 1;
-  max-inline-size: 100%;
   min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .host.withAfter:not(.alignAfterStart).contentAlignStart .in {
@@ -47,8 +47,8 @@
 
 .contentBefore {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   min-inline-size: 0;
 }
 
@@ -65,12 +65,12 @@
 }
 
 .contentAfter {
+  box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   align-items: flex-end;
-  flex-shrink: 0;
   padding-inline-start: var(--vkui--spacing_size_xl);
-  box-sizing: border-box;
 }
 
 .alignBeforeStart .before,
@@ -128,10 +128,10 @@
 .textEllipsis .children,
 .textEllipsis .subtitle,
 .textEllipsis .extraSubtitle {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   max-inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .bottom {

package/src/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -1,12 +1,12 @@
 .host {
-  inline-size: 48px;
-  block-size: 40px;
   box-sizing: border-box;
-  color: var(--vkui--color_icon_accent_themed);
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
+  inline-size: 48px;
+  block-size: 40px;
   padding-block: 6px;
   padding-inline: 12px 0;
+  color: var(--vkui--color_icon_accent_themed);
 }

package/src/components/Root/Root.module.css

@@ -3,9 +3,9 @@
   --vkui_internal--root_animation_transform_initial: scale(1.05);
   --vkui_internal--root_animation_duration: 0.3s;
 
+  position: relative;
   inline-size: 100%;
   block-size: 100%;
-  position: relative;
 }
 
 .ios {
@@ -19,9 +19,9 @@
 }
 
 .view {
+  position: relative;
   inline-size: 100%;
   block-size: 100%;
-  position: relative;
 }
 
 .viewShowForward {
@@ -36,8 +36,8 @@
 
 .transition .view {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
 }
 
@@ -53,11 +53,11 @@
 .ios .viewShowBack::after,
 .ios .viewHideForward::after {
   position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   display: block;
+  inline-size: 100%;
+  block-size: 100%;
   content: '';
   background-color: #000;
 }
@@ -85,24 +85,24 @@
 
 @keyframes root-animation-hide-back {
   from {
-    transform: none;
     opacity: 1;
+    transform: none;
   }
 
   to {
-    transform: var(--vkui_internal--root_animation_transform_initial);
     opacity: var(--vkui_internal--root_animation_opacity_initial);
+    transform: var(--vkui_internal--root_animation_transform_initial);
   }
 }
 @keyframes root-animation-show-forward {
   from {
-    transform: var(--vkui_internal--root_animation_transform_initial);
     opacity: var(--vkui_internal--root_animation_opacity_initial);
+    transform: var(--vkui_internal--root_animation_transform_initial);
   }
 
   to {
-    transform: none;
     opacity: 1;
+    transform: none;
   }
 }
 @keyframes root-ios-overlay-animation-show-back {

package/src/components/ScreenSpinner/ScreenSpinner.module.css

@@ -10,29 +10,29 @@
 }
 
 .hasLabel {
-  inline-size: fit-content;
-  block-size: fit-content;
-  max-inline-size: 150px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
+  inline-size: fit-content;
+  max-inline-size: 150px;
+  block-size: fit-content;
 }
 
 .modeShadow {
+  color: var(--vkui--color_icon_medium);
   background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation3);
-  color: var(--vkui--color_icon_medium);
 }
 
 .modeOverlay {
-  background-color: var(--vkui--color_avatar_overlay);
   color: var(--vkui--color_icon_contrast);
+  background-color: var(--vkui--color_avatar_overlay);
 }
 
 .label {
-  color: var(--vkui--color_text_secondary);
   margin-block-start: var(--vkui--spacing_size_xs);
+  color: var(--vkui--color_text_secondary);
   text-align: center;
 }
 
@@ -55,22 +55,22 @@
 }
 
 .iconSlot {
-  inline-size: 56px;
-  block-size: 56px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 56px;
+  block-size: 56px;
 }
 
 .icon {
   position: absolute;
   inset-block-start: 0;
-  inline-size: 100%;
-  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .stateCancelable .icon {

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -34,7 +34,7 @@ export const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
 
   return (
     <AppRootPortal usePortal={usePortal}>
-      <PopoutWrapper className={className} style={style} noBackground>
+      <PopoutWrapper className={className} style={style} noBackground strategy="fixed">
         <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>
           <ScreenSpinnerLoader {...restProps} />
           <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />

package/src/components/ScrollArrow/ScrollArrow.module.css

@@ -1,35 +1,35 @@
 .host {
+  display: flex;
+  justify-content: center;
+  padding: 0;
   cursor: pointer;
   user-select: auto;
-  padding: 0;
-  border: 0;
   background-color: transparent;
+  border: 0;
   transition: opacity 0.15s;
   transition-timing-function: var(--vkui--animation_easing_platform);
-  display: flex;
-  justify-content: center;
 }
 
 .directionLeft,
 .directionRight {
-  block-size: 100%;
   flex-direction: column;
+  block-size: 100%;
 }
 
 .directionUp,
 .directionDown {
-  inline-size: 100%;
   flex-direction: row;
+  inline-size: 100%;
 }
 
 .icon {
   position: relative;
-  background-color: var(--vkui--color_background_contrast_themed);
-  color: var(--vkui--color_icon_secondary);
-  box-shadow: var(--vkui--elevation3);
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--vkui--color_icon_secondary);
+  background-color: var(--vkui--color_background_contrast_themed);
+  box-shadow: var(--vkui--elevation3);
 }
 
 .sizeS .icon {
@@ -45,26 +45,27 @@
 }
 
 .directionLeft {
-  padding-inline-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
   inset-inline-start: 0;
+  padding-inline-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
 }
 
 .directionRight {
-  padding-inline-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
   inset-inline-end: 0;
+  padding-inline-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
 }
 
 .directionUp {
-  padding-block-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
   inset-block-start: 0;
+  padding-block-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
 }
 
 .directionDown {
-  padding-block-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
   inset-block-end: 0;
+  padding-block-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
 }
 
-.directionLeft .defaultIcon {
+.directionLeft:not(.rtl) .defaultIcon,
+.directionRight.rtl .defaultIcon {
   transform: rotate(180deg);
 }
 

package/src/components/ScrollArrow/ScrollArrow.tsx

@@ -1,6 +1,9 @@
+'use client';
+
 import * as React from 'react';
 import { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import type { HasRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -66,13 +69,19 @@ export const ScrollArrow = ({
   children = <ArrowIcon size={size} />,
   ...restProps
 }: ScrollArrowProps): React.ReactNode => {
+  const textDirection = useConfigDirection();
   const label = labelProp ?? labelDirection[direction];
 
   return (
     <RootComponent
       Component="button"
       type="button"
-      baseClassName={classNames(styles.host, stylesSize[size], stylesDirection[direction])}
+      baseClassName={classNames(
+        styles.host,
+        stylesSize[size],
+        stylesDirection[direction],
+        textDirection === 'rtl' && styles.rtl,
+      )}
       {...restProps}
     >
       {label && <VisuallyHidden>{label}</VisuallyHidden>}