@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/FormField/FormField.css

@@ -4,7 +4,7 @@
   align-items: center;
   padding: 1px;
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .FormField > * {
@@ -21,7 +21,7 @@
   min-width: 44px;
   height: 44px;
   margin: -1px;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   z-index: 2;
 }
 
@@ -35,8 +35,9 @@
   top: 0;
   width: 100%;
   height: 100%;
-  border: 1px solid var(--field_border);
-  background: var(--field_background);
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_field_border_alpha));
+  background: var(--field_background, var(--vkui--color_field_background));
   content: "";
   box-sizing: border-box;
   z-index: 1;
@@ -44,29 +45,35 @@
 }
 
 .FormItem--error .FormField__border {
-  background: var(--field_error_background);
-  border-color: var(--field_error_border);
+  background: var(
+    --field_error_background,
+    var(--vkui--color_background_negative_tint)
+  );
+  border-color: var(--field_error_border, var(--vkui--color_stroke_negative));
 }
 
 .FormItem--valid .FormField__border {
-  border-color: var(--field_valid_border);
+  border-color: var(--field_valid_border, var(--vkui--color_stroke_positive));
 }
 
 .FormField--disabled {
-  opacity: 0.64;
+  opacity: var(--vkui--opacity_disable_accessibility);
   cursor: default;
   pointer-events: none;
 }
 
 .FormField:not(.FormField--disabled) .FormField__border--hover {
-  border-color: var(--icon_tertiary_alpha);
+  border-color: var(
+    --icon_tertiary_alpha,
+    var(--vkui--color_field_border_alpha--hover)
+  );
 }
 
 .FormField:focus-within .FormField__border,
 .FormField *:focus ~ .FormField__border,
 .ChipsInput--focused .FormField__border {
-  border-color: var(--accent);
-  background: var(--field_background);
+  border-color: var(--accent, var(--vkui--color_stroke_accent));
+  background: var(--field_background, var(--vkui--color_field_background));
 }
 
 /**
@@ -78,42 +85,43 @@
 }
 
 /**
- * iOS
+ * ModalCardBase
  */
-.FormField--ios {
-  border-radius: 10px;
+
+.ModalCardBase__header + .FormField,
+.ModalCardBase__subheader + .FormField {
+  margin-top: 16px;
 }
 
-@media (min-resolution: 2dppx) {
-  .FormField--ios .FormField__border {
-    border-radius: 20px;
-    transform: scale(0.5);
-    width: 200%;
-    height: 200%;
-  }
+/**
+ * Select
+ */
+
+.Select--mimicry-plain .FormField__after,
+.Select--mimicry-plain .FormField--sizeY-compact .FormField__after {
+  justify-content: flex-start;
+  min-width: 0;
+  height: auto;
 }
 
-@media (min-resolution: 3dppx) {
-  .FormField--ios .FormField__border {
-    border-radius: 31.25px;
-    transform: scale(0.32);
-    width: 312.5%;
-    height: 312.5%;
-  }
+.CustomSelect__open.Select--mimicry:focus .FormField__border {
+  border-color: var(--field_border, var(--vkui--color_field_border_alpha));
 }
 
-/**
- * VKCOM
- */
-.FormField--vkcom {
-  border-radius: 6px;
+.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop):not(.CustomSelect__open--not-adjacent)
+  .FormField__border {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-/**
- * ModalCardBase
- */
+.CustomSelect__open.CustomSelect__open--popupDirectionTop:not(.CustomSelect__open--not-adjacent)
+  .FormField__border {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 
-.ModalCardBase__header + .FormField,
-.ModalCardBase__subheader + .FormField {
-  margin-top: 16px;
+.CustomSelect__open.Select--mimicry-plain.Select--mimicry:focus
+  .FormField__border,
+.FormField:not(.FormField--disabled) .FormField__border--hover {
+  background-color: var(--background_page, var(--vkui--color_field_background));
 }

package/src/components/FormField/FormField.tsx

@@ -54,9 +54,7 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       vkuiClass={classNames(
         getClassName("FormField", platform),
         `FormField--sizeY-${sizeY}`,
-        {
-          "FormField--disabled": disabled,
-        }
+        disabled && "FormField--disabled"
       )}
     >
       {children}
@@ -67,9 +65,10 @@ export const FormField: React.FC<FormFieldOwnProps> = ({
       )}
       <div
         role="presentation"
-        vkuiClass={classNames("FormField__border", {
-          "FormField__border--hover": !disabled && hover,
-        })}
+        vkuiClass={classNames(
+          "FormField__border",
+          !disabled && hover && "FormField__border--hover"
+        )}
       />
     </Component>
   );

package/src/components/FormItem/FormItem.tsx

@@ -5,8 +5,8 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { hasReactNode, noop } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
-import Caption from "../Typography/Caption/Caption";
+import { Subhead } from "../Typography/Subhead/Subhead";
+import { Caption } from "../Typography/Caption/Caption";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { Removable, RemovableProps } from "../Removable/Removable";
 import "./FormItem.css";
@@ -46,9 +46,7 @@ export const FormItem: React.FC<FormItemProps> = ({
       {hasReactNode(top) && <Subhead vkuiClass="FormItem__top">{top}</Subhead>}
       {children}
       {hasReactNode(bottom) && (
-        <Caption level="1" weight="regular" vkuiClass="FormItem__bottom">
-          {bottom}
-        </Caption>
+        <Caption vkuiClass="FormItem__bottom">{bottom}</Caption>
       )}
     </React.Fragment>
   );
@@ -57,6 +55,7 @@ export const FormItem: React.FC<FormItemProps> = ({
     <Component
       {...restProps}
       ref={rootEl}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("FormItem", platform),
         `FormItem--${status}`,

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -37,6 +37,7 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
   return (
     <div
       ref={rootEl}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("FormLayoutGroup", platform),
         `FormLayoutGroup--sizeY-${sizeY}`,

package/src/components/FormStatus/FormStatus.tsx

@@ -3,7 +3,7 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import Headline from "../Typography/Headline/Headline";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { hasReactNode } from "../../lib/utils";
 import "./FormStatus.css";
 
@@ -35,16 +35,10 @@ export const FormStatus: React.FunctionComponent<FormStatusProps> = ({
         </Headline>
       )}
       {dangerouslySetInnerHTML && (
-        <Caption
-          level="1"
-          weight="regular"
-          dangerouslySetInnerHTML={dangerouslySetInnerHTML}
-        />
+        <Caption dangerouslySetInnerHTML={dangerouslySetInnerHTML} />
       )}
       {hasReactNode(children) && !dangerouslySetInnerHTML && (
-        <Caption level="1" weight="regular">
-          {children}
-        </Caption>
+        <Caption>{children}</Caption>
       )}
     </div>
   );

package/src/components/Gallery/Gallery.tsx

@@ -27,6 +27,14 @@ export interface BaseGalleryProps
   onDragEnd?: TouchEventHandler;
   onChange?(current: number): void;
   onEnd?({ targetIndex }: { targetIndex: number }): void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку влево
+   */
+  onPrevClick?(): void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку вправо
+   */
+  onNextClick?(): void;
   bullets?: "dark" | "light" | false;
   isDraggable?: boolean;
   showArrows?: boolean;
@@ -322,20 +330,22 @@ class BaseGallery extends React.Component<
   }
 
   slideLeft = () => {
-    const { slideIndex = 0, onChange } = this.props;
+    const { slideIndex = 0, onChange, onPrevClick } = this.props;
     if (this.canSlideLeft) {
       this.setState({ deltaX: 0, animation: true }, () =>
         onChange?.(slideIndex - 1)
       );
+      onPrevClick?.();
     }
   };
 
   slideRight = () => {
-    const { slideIndex = 0, onChange } = this.props;
+    const { slideIndex = 0, onChange, onNextClick } = this.props;
     if (this.canSlideRight) {
       this.setState({ deltaX: 0, animation: true }, () =>
         onChange?.(slideIndex + 1)
       );
+      onNextClick?.();
     }
   };
 
@@ -427,6 +437,7 @@ class BaseGallery extends React.Component<
     return (
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
           getClassName("Gallery", platform),
           `Gallery--${align}`,
@@ -474,6 +485,7 @@ class BaseGallery extends React.Component<
               children,
               (_item: React.ReactNode, index: number) => (
                 <div
+                  // eslint-disable-next-line vkui/no-object-expression-in-arguments
                   vkuiClass={classNames("Gallery__bullet", {
                     "Gallery__bullet--active": index === slideIndex,
                   })}

package/src/components/Gallery/Readme.md

@@ -55,7 +55,7 @@ const [showArrows, setShowArrows] = useState(true);
         <div style={{ backgroundColor: "var(--accent)" }} />
       </Gallery>
     </Group>
-    <Group header={<Header mode="secondary">Controled</Header>}>
+    <Group header={<Header mode="secondary">Controlled</Header>}>
       <Gallery
         slideWidth="90%"
         align="center"

package/src/components/GridAvatar/GridAvatar.css

@@ -11,27 +11,24 @@
 
 .GridAvatar__item {
   width: calc(50% - var(--grid-avatar-image-offset) / 2);
-  height: 100%;
+  height: calc(50% - var(--grid-avatar-image-offset) / 2);
+  margin-right: var(--grid-avatar-image-offset);
   background-size: cover;
   background-position: center;
 }
 
-.GridAvatar--images-1 .GridAvatar__item {
+.GridAvatar__item:only-child {
   width: 100%;
 }
 
-.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
-.GridAvatar--images-4 .GridAvatar__item {
-  height: calc(50% - var(--grid-avatar-image-offset) / 2);
-}
-
-.GridAvatar--images-2 .GridAvatar__item:nth-child(1n + 2),
-.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
-.GridAvatar--images-4 .GridAvatar__item:nth-child(1n + 3) {
-  margin-left: var(--grid-avatar-image-offset);
+.GridAvatar__item:first-child:not(:nth-last-child(4)),
+.GridAvatar__item:nth-child(2):last-child {
+  height: 100%;
 }
 
-.GridAvatar--images-3 .GridAvatar__item:nth-child(2),
-.GridAvatar--images-4 .GridAvatar__item:nth-child(odd) {
+/* если есть минимум три элемента — выбираем второй с конца */
+.GridAvatar__item:nth-last-child(n + 3) ~ .GridAvatar__item:nth-last-child(2),
+/* четвертый с конца */
+.GridAvatar__item:nth-last-child(4) {
   margin-bottom: var(--grid-avatar-image-offset);
 }

package/src/components/GridAvatar/GridAvatar.tsx

@@ -12,41 +12,29 @@ export interface GridAvatarProps
   src?: string[];
 }
 
-const MIN_GRID_LENGTH = 1;
-const MAX_GRID_LENGTH = 4;
+export const MAX_GRID_LENGTH = 4;
 
 const warn = warnOnce("GridAvatar");
-
 export const GridAvatar: React.FC<GridAvatarProps> = ({
   src = [],
   ...restProps
-}: GridAvatarProps) => {
+}) => {
   if (process.env.NODE_ENV === "development" && src.length > MAX_GRID_LENGTH) {
     warn(
-      `Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`
+      `Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`
     );
   }
 
-  const count = Math.max(
-    MIN_GRID_LENGTH,
-    Math.min(MAX_GRID_LENGTH, src.length)
-  );
-
   return (
-    <Avatar
-      {...restProps}
-      vkuiClass={classNames("GridAvatar", `GridAvatar--images-${count}`)}
-    >
-      <div vkuiClass="GridAvatar__in">
-        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
-          return (
-            <div
-              key={i}
-              vkuiClass="GridAvatar__item"
-              style={{ backgroundImage: `url(${src})` }}
-            ></div>
-          );
-        })}
+    <Avatar {...restProps} vkuiClass={classNames("GridAvatar")}>
+      <div vkuiClass="GridAvatar__in" aria-hidden="true">
+        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => (
+          <div
+            key={i}
+            vkuiClass="GridAvatar__item"
+            style={{ backgroundImage: `url(${src})` }}
+          />
+        ))}
       </div>
     </Avatar>
   );

package/src/components/Group/Group.tsx

@@ -5,7 +5,7 @@ import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
 import Separator from "../Separator/Separator";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import {
   withAdaptivity,
   AdaptivityProps,
@@ -70,14 +70,13 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
         {header}
         {children}
         {hasReactNode(description) && (
-          <Caption vkuiClass="Group__description" weight="regular" level="1">
-            {description}
-          </Caption>
+          <Caption vkuiClass="Group__description">{description}</Caption>
         )}
       </div>
 
       {separator !== "hide" && (
         <Separator
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Group__separator", {
             "Group__separator--force": separator === "show",
           })}

package/src/components/Header/Header.tsx

@@ -6,10 +6,10 @@ import { HasComponent, HasPlatform, HasRootRef } from "../../types";
 import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
 import Headline from "../Typography/Headline/Headline";
-import Caption from "../Typography/Caption/Caption";
-import Title from "../Typography/Title/Title";
+import { Caption } from "../Typography/Caption/Caption";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import "./Header.css";
 
 export interface HeaderProps
@@ -43,7 +43,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
       case "tertiary":
         return <Title weight="1" level="3" {...restProps} />;
       case "secondary":
-        return <Caption level="1" weight="semibold" caps {...restProps} />;
+        return <Caption weight="2" caps {...restProps} />;
     }
   }
 
@@ -53,7 +53,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
         return <Headline weight="regular" {...restProps} />;
       case "secondary":
       case "tertiary":
-        return <Caption level="1" weight="regular" {...restProps} />;
+        return <Caption {...restProps} />;
     }
   }
 
@@ -62,7 +62,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
     case "tertiary":
       return <Headline weight="medium" {...restProps} />;
     case "secondary":
-      return <Caption level="1" weight="medium" caps {...restProps} />;
+      return <Caption weight="1" caps {...restProps} />;
   }
 
   return null;
@@ -91,7 +91,7 @@ const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
   return mode === "secondary" ? (
     <Subhead {...restProps} />
   ) : (
-    <Caption weight="regular" level="1" {...restProps} />
+    <Caption {...restProps} />
   );
 };
 
@@ -111,6 +111,7 @@ const Header: React.FC<HeaderProps> = ({
     <header
       {...restProps}
       ref={getRootRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Header", platform),
         `Header--mode-${mode}`,
@@ -125,6 +126,7 @@ const Header: React.FC<HeaderProps> = ({
           platform={platform}
         >
           <span
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames("Header__content-in", {
               "Header__content-in--multiline": multiline,
             })}
@@ -135,11 +137,8 @@ const Header: React.FC<HeaderProps> = ({
             <Caption
               vkuiClass="Header__indicator"
               weight={
-                mode === "primary" || mode === "secondary"
-                  ? "medium"
-                  : "regular"
+                mode === "primary" || mode === "secondary" ? "1" : undefined
               }
-              level="1"
             >
               {indicator}
             </Caption>
@@ -147,7 +146,11 @@ const Header: React.FC<HeaderProps> = ({
         </HeaderContent>
 
         {hasReactNode(subtitle) && (
-          <HeaderSubtitle vkuiClass="Header__subtitle" Component="span">
+          <HeaderSubtitle
+            vkuiClass="Header__subtitle"
+            Component="span"
+            mode={mode}
+          >
             {subtitle}
           </HeaderSubtitle>
         )}

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -3,9 +3,9 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Tappable from "../Tappable/Tappable";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Avatar from "../Avatar/Avatar";
 import { HasComponent, HasRef, HasRootRef } from "../../types";
 import "./HorizontalCell.css";
@@ -20,7 +20,7 @@ const CellTypography: React.FC<CellTypographyProps> = ({
   ...restProps
 }: CellTypographyProps) => {
   return size === "s" ? (
-    <Caption level="2" weight="regular" {...restProps}>
+    <Caption level="2" {...restProps}>
       {children}
     </Caption>
   ) : (
@@ -77,13 +77,7 @@ export const HorizontalCell: React.FC<HorizontalCellProps> = ({
             </CellTypography>
           )}
           {hasReactNode(subtitle) && (
-            <Caption
-              weight="regular"
-              level="1"
-              vkuiClass="HorizontalCell__subtitle"
-            >
-              {subtitle}
-            </Caption>
+            <Caption vkuiClass="HorizontalCell__subtitle">{subtitle}</Caption>
           )}
         </div>
       </Tappable>

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -113,7 +113,7 @@ function doScroll({
   })();
 }
 
-const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
+const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   children,
   getScrollToLeft,
   getScrollToRight,
@@ -122,7 +122,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   hasMouse,
   getRef,
   ...restProps
-}: HorizontalScrollProps) => {
+}) => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
 
@@ -132,25 +132,41 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
 
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
-  function scrollTo(getScrollPosition: (offset: number) => number) {
-    const scrollElement = scrollerRef.current;
-
-    animationQueue.current.push(() =>
-      doScroll({
-        scrollElement,
-        getScrollPosition,
-        animationQueue: animationQueue.current,
-        onScrollToRightBorder: () => setCanScrollRight(false),
-        onScrollEnd: () => (isCustomScrollingRef.current = false),
-        onScrollStart: () => (isCustomScrollingRef.current = true),
-        initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
-        scrollAnimationDuration,
-      })
-    );
-    if (animationQueue.current.length === 1) {
-      animationQueue.current[0]();
-    }
-  }
+  const scrollTo = React.useCallback(
+    (getScrollPosition: ScrollPositionHandler) => {
+      const scrollElement = scrollerRef.current;
+
+      animationQueue.current.push(() =>
+        doScroll({
+          scrollElement,
+          getScrollPosition,
+          animationQueue: animationQueue.current,
+          onScrollToRightBorder: () => setCanScrollRight(false),
+          onScrollEnd: () => (isCustomScrollingRef.current = false),
+          onScrollStart: () => (isCustomScrollingRef.current = true),
+          initialScrollWidth:
+            scrollElement?.firstElementChild?.scrollWidth || 0,
+          scrollAnimationDuration,
+        })
+      );
+      if (animationQueue.current.length === 1) {
+        animationQueue.current[0]();
+      }
+    },
+    [scrollAnimationDuration, scrollerRef]
+  );
+
+  const scrollToLeft = React.useCallback(() => {
+    const getScrollPosition =
+      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);
+    scrollTo(getScrollPosition);
+  }, [getScrollToLeft, scrollTo, scrollerRef]);
+
+  const scrollToRight = React.useCallback(() => {
+    const getScrollPosition =
+      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);
+    scrollTo(getScrollPosition);
+  }, [getScrollToRight, scrollTo, scrollerRef]);
 
   const onscroll = React.useCallback(() => {
     if (
@@ -180,29 +196,16 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("HorizontalScroll", {
         ["HorizontalScroll--withConstArrows"]: showArrows === "always",
       })}
     >
       {showArrows && hasMouse && canScrollLeft && (
-        <HorizontalScrollArrow
-          direction="left"
-          onClick={() => {
-            if (getScrollToLeft) {
-              scrollTo(getScrollToLeft);
-            }
-          }}
-        />
+        <HorizontalScrollArrow direction="left" onClick={scrollToLeft} />
       )}
       {showArrows && hasMouse && canScrollRight && (
-        <HorizontalScrollArrow
-          direction="right"
-          onClick={() => {
-            if (getScrollToRight) {
-              scrollTo(getScrollToRight);
-            }
-          }}
-        />
+        <HorizontalScrollArrow direction="right" onClick={scrollToRight} />
       )}
       <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
         <div vkuiClass="HorizontalScroll__in-wrapper">{children}</div>
@@ -211,7 +214,6 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(HorizontalScroll, {
+export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });