@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/DirectionProvider/DirectionProvider.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
+
+export interface DirectionProviderProps {
+  value: ConfigProviderContextInterface['direction'];
+  children: React.ReactNode;
+}
+
+/**
+ * Компонент, прокидывающий направление контента
+ * @see https://vkcom.github.io/VKUI/#/DirectionProvider
+ * @since 7.2.0
+ */
+export function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode {
+  return <ConfigProviderOverride direction={value}>{children}</ConfigProviderOverride>;
+}

package/src/components/DropZone/DropZone.module.css

@@ -3,11 +3,11 @@
 }
 
 .host::before {
-  content: '';
   position: absolute;
   inset: 0;
-  border-radius: var(--vkui--size_border_radius--regular);
+  content: '';
   border: 1px dashed var(--vkui--color_separator_primary);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .active::before {

package/src/components/FixedLayout/FixedLayout.module.css

@@ -1,6 +1,5 @@
 .host {
   position: fixed;
-  box-sizing: border-box;
   /**
    * ⚠️ WARNING ⚠️
    * `left: auto` решает следующие задачи:
@@ -13,6 +12,7 @@
    */
   inset-inline-start: auto;
   z-index: var(--vkui_internal--z_index_fixed_layout);
+  box-sizing: border-box;
   padding-inline: var(--vkui_internal--safe_area_inset_left)
     var(--vkui_internal--safe_area_inset_right);
 }
@@ -22,13 +22,13 @@
 }
 
 .verticalTop {
-  inline-size: 100%;
   inset-block-start: 0;
+  inline-size: 100%;
 }
 
 .verticalBottom {
-  inline-size: 100%;
   inset-block-end: 0;
+  inline-size: 100%;
   padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
 }
 

package/src/components/Flex/Flex.module.css

@@ -9,17 +9,35 @@
   --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
   --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
 
-  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin-block: var(--vkui--size_base_padding_vertical--regular);
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-.withGaps {
-  margin-block-start: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-  margin-inline-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
+/*TODO [>=8]: Проверить браузерную поддержку gap*/
+/*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/
+/*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/
+/*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/
+/*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/
+@supports (inset: 0) {
+  .host {
+    gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
+  }
+}
+@supports not (inset: 0) {
+  .host {
+    margin-block-start: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+    margin-inline-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+  }
+
+  /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+  .host.host > * {
+    margin-block-start: var(--vkui_internal--row_gap);
+    margin-inline-start: var(--vkui_internal--column_gap);
+  }
 }
 
 .host > .marginAuto {
@@ -90,9 +108,3 @@
 .alignBaseline {
   align-items: baseline;
 }
-
-/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-.withGaps.withGaps > * {
-  margin-block-start: var(--vkui_internal--row_gap);
-  margin-inline-start: var(--vkui_internal--column_gap);
-}

package/src/components/Flex/Flex.tsx

@@ -1,4 +1,3 @@
-import { Children } from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import {
   calculateGap,
@@ -76,7 +75,7 @@ export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseCl
 export const Flex: React.FC<FlexProps> & {
   Item: typeof FlexItem;
 } = ({
-  gap,
+  gap = 0,
   align,
   justify,
   margin = 'none',
@@ -86,8 +85,7 @@ export const Flex: React.FC<FlexProps> & {
   children,
   ...props
 }: FlexProps) => {
-  const withGaps = Children.count(children) > 1 && gap;
-  const [rowGap, columnGap] = calculateGap(withGaps ? gap : undefined);
+  const [rowGap, columnGap] = calculateGap(gap);
 
   return (
     <RootComponent
@@ -100,8 +98,7 @@ export const Flex: React.FC<FlexProps> & {
         margin !== 'none' && styles.marginAuto,
         align && alignClassNames[align],
         justify && justifyClassNames[justify],
-        withGaps && styles.withGaps,
-        withGaps && getGapsPresets(rowGap, columnGap),
+        getGapsPresets(rowGap, columnGap),
       )}
       baseStyle={getGapsByUser(rowGap, columnGap)}
     >

package/src/components/FloatingArrow/FloatingArrow.module.css

@@ -3,8 +3,8 @@
 }
 
 .in {
-  content: '';
   display: block;
+  content: '';
 
   /* см. "Примечание" в DefaultIcon.tsx. */
   transform: translateY(1px);

package/src/components/Footer/Footer.module.css

@@ -2,6 +2,6 @@
   display: block;
   padding-block: 24px;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }

package/src/components/FormField/FormField.module.css

@@ -1,29 +1,29 @@
 .host {
   position: relative;
-  display: flex;
   box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
   min-block-size: var(--vkui--size_field_height--regular);
   font-family: var(--vkui--font_family_base);
-  -webkit-tap-highlight-color: transparent;
-  isolation: isolate;
   border-radius: var(--vkui--size_border_radius--regular);
-  inline-size: 100%;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .scrollContainer {
   display: flex;
-  inline-size: 100%;
   align-items: flex-start;
   justify-content: flex-start;
-  overflow-y: auto;
+  inline-size: 100%;
   min-block-size: inherit;
+  overflow-y: auto;
 }
 
 .content {
-  min-block-size: inherit;
   display: flex;
   flex-grow: 1;
   min-inline-size: 0;
+  min-block-size: inherit;
 }
 
 .sizeYCompact {
@@ -38,25 +38,25 @@
 
 /* stylelint-disable-next-line selector-max-universal */
 .host > * {
-  border-radius: inherit;
   z-index: var(--vkui_internal--z_index_form_field_element);
+  border-radius: inherit;
 }
 
 .iconWrapper {
-  flex-shrink: 0;
-  block-size: 100%;
-  display: flex;
   position: sticky;
   inset-block-start: 0;
+  display: flex;
+  flex-shrink: 0;
+  block-size: 100%;
 }
 
 .before,
 .after {
   display: flex;
-  align-items: center;
   align-content: center;
-  justify-content: center;
+  align-items: center;
   align-self: center;
+  justify-content: center;
   min-inline-size: var(--vkui--size_field_height--regular);
   color: var(--vkui--color_icon_secondary);
 }
@@ -90,17 +90,17 @@
 }
 
 .border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_form_field_border);
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_border);
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
-  transform-origin: left top;
+  pointer-events: none;
   border: var(--vkui--size_border--regular) solid transparent;
   border-radius: inherit;
+  transform-origin: left top;
 }
 
 .modeDefault > .border {
@@ -116,8 +116,8 @@
 }
 
 .modeDefault.hover > .border {
-  border-color: var(--vkui--color_field_border_alpha--hover);
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
+  border-color: var(--vkui--color_field_border_alpha--hover);
 }
 
 /**
@@ -139,8 +139,8 @@
 :global(.vkuiInternalFormItem--status-error) .focusVisible > .border,
 .statusError.modeDefault > .border,
 .statusError.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_negative);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -156,8 +156,8 @@
 :global(.vkuiInternalFormItem--status-valid) .focusVisible > .border,
 .statusValid.modeDefault > .border,
 .statusValid.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_positive);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -168,9 +168,9 @@
 /* [end] */
 
 .disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
-  cursor: default;
   pointer-events: none;
+  cursor: default;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
@@ -199,8 +199,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--segmented) .host {
   z-index: auto;
-  isolation: auto;
   border-radius: 0;
+  isolation: auto;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/src/components/FormItem/FormItem.module.css

@@ -12,27 +12,27 @@
 }
 
 .removable {
-  max-inline-size: 100%;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
-  padding: 0;
   min-inline-size: 1px;
+  max-inline-size: 100%;
+  padding: 0;
   overflow: hidden;
 }
 
 .top {
-  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
-  color: var(--vkui--color_text_subhead);
   display: flex;
   align-items: flex-end;
+  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
+  color: var(--vkui--color_text_subhead);
 }
 
 .label,
 .aside {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .label {
@@ -40,8 +40,8 @@
 }
 
 .aside {
-  color: var(--vkui--color_text_tertiary);
   margin-inline-start: auto;
+  color: var(--vkui--color_text_tertiary);
 }
 
 .aside:not(:only-child) {
@@ -53,13 +53,13 @@
 }
 
 .labelRequired {
-  color: var(--vkui--color_text_negative);
   margin-inline-start: 3px;
+  color: var(--vkui--color_text_negative);
 }
 
 .bottom {
-  color: var(--vkui--color_text_secondary);
   padding-block-start: var(--vkui--spacing_size_m);
+  color: var(--vkui--color_text_secondary);
 }
 
 .statusError .bottom {
@@ -99,12 +99,12 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .host {
-  max-inline-size: 100%;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
-  padding: 0;
   min-inline-size: 1px;
+  max-inline-size: 100%;
+  padding: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/src/components/FormLayoutGroup/FormLayoutGroup.module.css

@@ -1,16 +1,16 @@
 .host {
-  border: 0;
+  min-inline-size: auto;
   padding: 0;
   margin: 0;
-  min-inline-size: auto;
+  border: 0;
 }
 
 .modeHorizontal {
   display: flex;
-  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   flex-wrap: wrap;
   align-items: flex-start;
+  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .removable {
@@ -25,8 +25,8 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .modeHorizontal :global(.vkuiInternalFormItem--withTop) ~ .offset {
-  order: -1;
   display: block;
+  order: -1;
   min-inline-size: 100%;
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }

package/src/components/GridAvatar/GridAvatar.module.css

@@ -5,8 +5,8 @@
 .in {
   display: flex;
   flex-flow: column wrap;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   overflow: hidden;
   border-radius: inherit;
 }
@@ -15,8 +15,8 @@
   inline-size: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
   block-size: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
   margin-inline-end: var(--vkui_internal--grid_avatar_image_offset);
-  background-size: cover;
   background-position: center;
+  background-size: cover;
 }
 
 .item:only-child {

package/src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.module.css

@@ -1,9 +1,9 @@
 .host {
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .shifted {
-  inset-inline-end: -2px;
   inset-block-end: -2px;
+  inset-inline-end: -2px;
 }

package/src/components/Group/Group.module.css

@@ -11,9 +11,9 @@
   --vkui_internal--Group_padding_block: var(--vkui--spacing_size_m);
   --vkui_internal--Group_card_mode_padding_size: 0;
 
-  color: var(--vkui--color_text_primary);
   padding-block: var(--vkui_internal--Group_padding_block);
   padding-inline: var(--vkui_internal--Group_padding_inline);
+  color: var(--vkui--color_text_primary);
 }
 
 .paddingS {
@@ -63,16 +63,16 @@
 .sizeXCompact.modeCard:first-of-type {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
   border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (--sizeX-compact) {
   .sizeXNone.modeCard:first-of-type {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
-    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
     border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
+    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
 
@@ -85,27 +85,27 @@
  */
 .modeCard::before,
 .sizeXRegular.modeNone::before {
-  content: '';
-  inset-inline-start: 0;
+  position: absolute;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  position: absolute;
-  border-radius: inherit;
   pointer-events: none;
+  content: '';
+  border-radius: inherit;
   box-shadow: inset 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_separator_primary);
 }
 
 @media (--sizeX-regular) {
   .sizeXNone.modeNone::before {
-    content: '';
-    inset-inline-start: 0;
+    position: absolute;
     inset-block-start: 0;
+    inset-inline-start: 0;
     inline-size: 100%;
     block-size: 100%;
-    position: absolute;
-    border-radius: inherit;
     pointer-events: none;
+    content: '';
+    border-radius: inherit;
     box-shadow: inset 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha);
   }
 }
@@ -173,10 +173,10 @@
 
 .separatorSibling::before {
   display: var(--vkui_internal--Group__separator_hr);
-  content: '';
   block-size: var(--vkui--size_border--regular);
-  background: var(--vkui--color_separator_primary);
   margin-block-end: calc(-1 * var(--vkui--size_border--regular));
+  content: '';
+  background: var(--vkui--color_separator_primary);
 }
 
 /* разделитель при mode="plain" */
@@ -184,16 +184,16 @@
 .sizeXCompact.modeNone + .separatorSibling {
   --vkui_internal--Group__separator_hr: block;
 
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   padding-block: var(--vkui--spacing_size_m);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 @media (--sizeX-compact) {
   .sizeXNone.modeNone + .separatorSibling {
     --vkui_internal--Group__separator_hr: block;
 
-    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
     padding-block: var(--vkui--spacing_size_m);
+    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   }
 }
 
@@ -302,6 +302,6 @@
 :global(.vkuiInternalPanelHeader--vkcom) + * .host:first-of-type {
   position: relative;
   inset-block-start: -1px;
-  border-start-end-radius: 0;
   border-start-start-radius: 0;
+  border-start-end-radius: 0;
 }

package/src/components/Header/Header.module.css

@@ -17,8 +17,8 @@
 
 .before {
   align-self: center;
-  margin-inline-end: var(--vkui--spacing_size_m);
   margin-block-start: var(--vkui--spacing_size_2xs);
+  margin-inline-end: var(--vkui--spacing_size_m);
 }
 
 .beforeWithSubtitle {
@@ -59,14 +59,14 @@
 
 .contentIn,
 .subtitle {
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .contentMultiline {
-  white-space: initial;
   word-break: break-word;
+  white-space: initial;
 }
 
 .subtitle {
@@ -79,9 +79,9 @@
 }
 
 .indicator {
-  color: var(--vkui--color_text_secondary);
-  margin-inline-start: var(--vkui--spacing_size_xs);
   flex-shrink: 0;
+  margin-inline-start: var(--vkui--spacing_size_xs);
+  color: var(--vkui--color_text_secondary);
 }
 
 .host:not(.pi) .indicator {

package/src/components/HorizontalCell/HorizontalCell.module.css

@@ -9,8 +9,8 @@
 
 .body {
   max-inline-size: inherit;
-  text-decoration: none;
   font-family: inherit;
+  text-decoration: none;
 }
 
 /* Перебиваем селектор в Tappable--sizeX-(compact|none) */
@@ -20,9 +20,9 @@
 
 .content {
   max-inline-size: inherit;
+  text-overflow: ellipsis;
   color: var(--vkui--color_text_primary);
   word-break: break-word;
-  text-overflow: ellipsis;
 }
 
 .subtitle {
@@ -99,8 +99,8 @@
 
 .host:first-child::before,
 .host:last-child::after {
-  content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);
+  content: '';
 }
 
 .sized:first-child,

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -7,16 +7,16 @@
 }
 
 .host:last-child::after {
-  content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);
+  content: '';
 }
 
 .body {
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_s);
 }

package/src/components/HorizontalScroll/HorizontalScroll.module.css

@@ -7,6 +7,12 @@
    */
   overflow-x: hidden;
   isolation: isolate;
+
+  --vkui_internal--HorizontalScroll_shift_direction: 1;
+}
+
+.rtl {
+  --vkui_internal--HorizontalScroll_shift_direction: -1;
 }
 
 .in {
@@ -31,9 +37,9 @@
 }
 
 .arrow {
-  z-index: var(--vkui_internal--z_index_horizontal_scroll_arrow);
   position: absolute;
   inset-block-start: 0;
+  z-index: var(--vkui_internal--z_index_horizontal_scroll_arrow);
   opacity: 0;
 }
 
@@ -48,11 +54,11 @@
 }
 
 .arrowLeft:hover ~ .in .inWrapper {
-  transform: translateX(8px);
+  transform: translateX(calc(8px * var(--vkui_internal--HorizontalScroll_shift_direction)));
 }
 
 .arrowRight:hover ~ .in .inWrapper {
-  transform: translateX(-8px);
+  transform: translateX(calc(-8px * var(--vkui_internal--HorizontalScroll_shift_direction)));
 }
 
 /**
@@ -69,8 +75,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabs--withGaps) .inWrapper::before {
   display: block;
-  inline-size: var(--vkui--size_base_padding_horizontal--regular);
   flex-shrink: 0;
+  inline-size: var(--vkui--size_base_padding_horizontal--regular);
   block-size: 1px;
   content: '';
 }