feat(Gallery): add handle click to bullet

packages/vkui/src/components/BaseGallery/BaseGallery.module.css

@@ -74,6 +74,10 @@
   margin-block: 0;
   margin-inline: 3px;
   opacity: var(--vkui--opacity_disable_accessibility);
+  border: 0;
+  outline: 0;
+  padding: 0;
+  cursor: pointer;
 }
 
 .BaseGallery__bullet--active {

packages/vkui/src/components/BaseGallery/BaseGallery.tsx

@@ -8,6 +8,7 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
 import { Touch, TouchEvent } from '../Touch/Touch';
+import { GalleryBullets } from './GalleryBullets/GalleryBullets';
 import { calcMax, calcMin } from './helpers';
 import { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';
 import styles from './BaseGallery.module.css';
@@ -32,10 +33,6 @@ const SHIFT_DEFAULT_STATE = {
   indent: 0,
 };
 
-const stylesBullets = {
-  dark: styles['BaseGallery__bullets--dark'],
-  light: styles['BaseGallery__bullets--light'],
-};
 export const BaseGallery = ({
   bullets = false,
   getRootRef,
@@ -52,6 +49,8 @@ export const BaseGallery = ({
   showArrows,
   getRef,
   arrowSize = 'l',
+  bulletsClassName,
+  slideClassName,
   ...restProps
 }: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
@@ -338,7 +337,7 @@ export const BaseGallery = ({
         <div className={styles['BaseGallery__layer']} style={layerStyle}>
           {React.Children.map(children, (item: React.ReactNode, i: number) => (
             <div
-              className={styles['BaseGallery__slide']}
+              className={classNames(styles['BaseGallery__slide'], slideClassName)}
               key={`slide-${i}`}
               ref={(el) => setSlideRef(el, i)}
             >
@@ -349,20 +348,14 @@ export const BaseGallery = ({
       </Touch>
 
       {bullets && (
-        <div
-          aria-hidden
-          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}
+        <GalleryBullets
+          bullets={bullets}
+          slideIndex={slideIndex}
+          onChange={onChange}
+          bulletsClassName={bulletsClassName}
         >
-          {React.Children.map(children, (_item: React.ReactNode, index: number) => (
-            <div
-              className={classNames(
-                styles['BaseGallery__bullet'],
-                index === slideIndex && styles['BaseGallery__bullet--active'],
-              )}
-              key={index}
-            />
-          ))}
-        </div>
+          {children}
+        </GalleryBullets>
       )}
 
       {showArrows && hasPointer && canSlideLeft && (

packages/vkui/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -9,18 +9,14 @@ import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import { ScrollArrow } from '../../ScrollArrow/ScrollArrow';
 import { Touch, TouchEvent } from '../../Touch/Touch';
+import { GalleryBullets } from '../GalleryBullets/GalleryBullets';
 import { BaseGalleryProps, GallerySlidesState } from '../types';
 import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDES_MANAGER_STATE } from './constants';
 import { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';
 import { useSlideAnimation } from './hooks';
 import { ControlElementsState, SlidesManagerState } from './types';
 import styles from '../BaseGallery.module.css';
 
-const stylesBullets = {
-  dark: styles['BaseGallery__bullets--dark'],
-  light: styles['BaseGallery__bullets--light'],
-};
-
 const warn = warnOnce('Gallery');
 
 export const CarouselBase = ({
@@ -39,6 +35,8 @@ export const CarouselBase = ({
   showArrows,
   getRef,
   arrowSize = 'l',
+  bulletsClassName,
+  slideClassName,
   ...restProps
 }: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
@@ -337,7 +335,7 @@ export const CarouselBase = ({
         <div className={styles['BaseGallery__layer']} ref={layerRef}>
           {React.Children.map(children, (item: React.ReactNode, i: number) => (
             <div
-              className={styles['BaseGallery__slide']}
+              className={classNames(styles['BaseGallery__slide'], slideClassName)}
               key={`slide-${i}`}
               ref={(el) => setSlideRef(el, i)}
             >
@@ -348,20 +346,14 @@ export const CarouselBase = ({
       </Touch>
 
       {bullets && (
-        <div
-          aria-hidden
-          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}
+        <GalleryBullets
+          bullets={bullets}
+          slideIndex={slideIndex}
+          onChange={onChange}
+          bulletsClassName={bulletsClassName}
         >
-          {React.Children.map(children, (_item: React.ReactNode, index: number) => (
-            <div
-              className={classNames(
-                styles['BaseGallery__bullet'],
-                index === slideIndex && styles['BaseGallery__bullet--active'],
-              )}
-              key={index}
-            />
-          ))}
-        </div>
+          {children}
+        </GalleryBullets>
       )}
 
       {showArrows && hasPointer && canSlideLeft && (

packages/vkui/src/components/BaseGallery/GalleryBullets/GalleryBullets.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Tappable } from '../../Tappable/Tappable';
+import { BaseGalleryProps } from '../types';
+import styles from '../BaseGallery.module.css';
+
+const stylesBullets = {
+  dark: styles['BaseGallery__bullets--dark'],
+  light: styles['BaseGallery__bullets--light'],
+};
+
+interface GalleryBulletsProps
+  extends Pick<BaseGalleryProps, 'slideIndex' | 'children' | 'onChange' | 'bulletsClassName'> {
+  bullets: Exclude<BaseGalleryProps['bullets'], false | undefined>;
+}
+
+export const GalleryBullets = ({
+  bullets,
+  slideIndex,
+  children,
+  onChange,
+  bulletsClassName,
+}: GalleryBulletsProps) => {
+  return (
+    <div
+      aria-hidden
+      className={classNames(
+        styles['BaseGallery__bullets'],
+        stylesBullets[bullets],
+        bulletsClassName,
+      )}
+    >
+      {React.Children.map(children, (_item: React.ReactNode, index: number) => (
+        <Tappable
+          Component="button"
+          className={classNames(
+            styles['BaseGallery__bullet'],
+            index === slideIndex && styles['BaseGallery__bullet--active'],
+          )}
+          onClick={() => onChange?.(index)}
+          key={index}
+        />
+      ))}
+    </div>
+  );
+};

packages/vkui/src/components/BaseGallery/types.ts

@@ -43,6 +43,8 @@ export interface BaseGalleryProps
    */
   onNextClick?: (event: React.MouseEvent) => void;
   bullets?: 'dark' | 'light' | false;
+  bulletsClassName?: string;
+  slideClassName?: string;
   /**
    * Позволяет отключить реагирование на тач-события
    */