@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/cssm/components/BaseGallery/BaseGallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","ScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nconst stylesBullets = {\n  dark: styles['BaseGallery__bullets--dark'],\n  light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n      )}\n      getRootRef={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","baseClassName","className","onStartX","style","noSlideClick","div","key","ref","el","aria-hidden","onClick","size"],"mappings":"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"}

package/dist/cssm/components/BaseGallery/BaseGallery.module.css

@@ -45,6 +45,8 @@
   width: auto;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .BaseGallery__slide > * {
   width: 100%;
   min-height: 100%;

package/dist/cssm/components/BaseGallery/types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 import { TouchEvent, TouchEventHandler } from '../Touch/Touch';
 export interface GallerySlidesState {
@@ -21,7 +21,7 @@ export interface LayoutState {
     slides: GallerySlidesState[];
     isFullyVisible: boolean;
 }
-export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>, HasAlign, HasRootRef<HTMLDivElement>, HasRef<HTMLElement> {
+export interface BaseGalleryProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>, HasAlign, HasRef<HTMLElement> {
     slideWidth?: string | number;
     slideIndex?: number;
     onDragStart?: TouchEventHandler;

package/dist/cssm/components/BaseGallery/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport { TouchEvent, TouchEventHandler } from '../Touch/Touch';\n\nexport interface GallerySlidesState {\n  coordX: number;\n  width: number;\n}\n\nexport interface ShiftingState {\n  deltaX: number;\n  shiftX: number;\n  animation?: boolean;\n  dragging: boolean;\n}\n\nexport interface LayoutState {\n  containerWidth: number;\n  viewportOffsetWidth: number;\n  layerWidth: number;\n  min?: number;\n  max: number;\n  slides: GallerySlidesState[];\n  isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n    HasAlign,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLElement> {\n  slideWidth?: string | number;\n  slideIndex?: number;\n  onDragStart?: TouchEventHandler;\n  onDragEnd?(e: TouchEvent, targetIndex: number): void;\n  onChange?(current: number): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку влево\n   */\n  onPrevClick?(event: React.MouseEvent): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку вправо\n   */\n  onNextClick?(event: React.MouseEvent): void;\n  bullets?: 'dark' | 'light' | false;\n  isDraggable?: boolean;\n  showArrows?: boolean;\n  hasPointer?: boolean;\n  arrowSize?: ScrollArrowProps['size'];\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport { TouchEvent, TouchEventHandler } from '../Touch/Touch';\n\nexport interface GallerySlidesState {\n  coordX: number;\n  width: number;\n}\n\nexport interface ShiftingState {\n  deltaX: number;\n  shiftX: number;\n  animation?: boolean;\n  dragging: boolean;\n}\n\nexport interface LayoutState {\n  containerWidth: number;\n  viewportOffsetWidth: number;\n  layerWidth: number;\n  min?: number;\n  max: number;\n  slides: GallerySlidesState[];\n  isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n    HasAlign,\n    HasRef<HTMLElement> {\n  slideWidth?: string | number;\n  slideIndex?: number;\n  onDragStart?: TouchEventHandler;\n  onDragEnd?(e: TouchEvent, targetIndex: number): void;\n  onChange?(current: number): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку влево\n   */\n  onPrevClick?(event: React.MouseEvent): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку вправо\n   */\n  onNextClick?(event: React.MouseEvent): void;\n  bullets?: 'dark' | 'light' | false;\n  isDraggable?: boolean;\n  showArrows?: boolean;\n  hasPointer?: boolean;\n  arrowSize?: ScrollArrowProps['size'];\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/dist/cssm/components/Button/Button.d.ts

@@ -11,10 +11,11 @@ export interface VKUIButtonProps extends HasAlign {
     after?: React.ReactNode;
     loading?: boolean;
     disableSpinnerAnimation?: boolean;
+    rounded?: boolean;
 }
 export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
-export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, disableSpinnerAnimation, ...restProps }: ButtonProps) => React.JSX.Element;
+export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, disableSpinnerAnimation, rounded, ...restProps }: ButtonProps) => React.JSX.Element;

package/dist/cssm/components/Button/Button.js

@@ -8,13 +8,38 @@ import { Spinner } from '../Spinner/Spinner';
 import { Tappable } from '../Tappable/Tappable';
 import '../Spinner/Spinner.module.css';
 import styles from './Button.module.css';
+const stylesSize = {
+    s: styles['Button--size-s'],
+    m: styles['Button--size-m'],
+    l: styles['Button--size-l']
+};
+const stylesMode = {
+    primary: styles['Button--mode-primary'],
+    secondary: styles['Button--mode-secondary'],
+    tertiary: styles['Button--mode-tertiary'],
+    outline: styles['Button--mode-outline'],
+    link: styles['Button--mode-link']
+};
+const stylesAppearance = {
+    'accent': styles['Button--appearance-accent'],
+    'positive': styles['Button--appearance-positive'],
+    'negative': styles['Button--appearance-negative'],
+    'neutral': styles['Button--appearance-neutral'],
+    'overlay': styles['Button--appearance-overlay'],
+    'accent-invariable': styles['Button--appearance-accent-invariable']
+};
+const stylesAlign = {
+    left: styles['Button--align-left'],
+    center: styles['Button--align-center'],
+    right: styles['Button--align-right']
+};
 const sizeYClassNames = {
     none: styles['Button--sizeY-none'],
     [SizeType.REGULAR]: styles['Button--sizeY-regular']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
- */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, stopPropagation = true, className, disableSpinnerAnimation, ...restProps })=>{
+ */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, stopPropagation = true, className, disableSpinnerAnimation, rounded, ...restProps })=>{
     const hasIcons = Boolean(before || after);
     const hasIconOnly = !children && Boolean(after) !== Boolean(before);
     const { sizeY = 'none' } = useAdaptivity();
@@ -27,28 +52,7 @@ const sizeYClassNames = {
         ...restProps,
         onClick: loading ? undefined : onClick,
         stopPropagation: stopPropagation,
-        className: classNames(className, styles.Button, {
-            s: styles['Button--size-s'],
-            m: styles['Button--size-m'],
-            l: styles['Button--size-l']
-        }[size], {
-            primary: styles['Button--mode-primary'],
-            secondary: styles['Button--mode-secondary'],
-            tertiary: styles['Button--mode-tertiary'],
-            outline: styles['Button--mode-outline'],
-            link: styles['Button--mode-link']
-        }[mode], {
-            'accent': styles['Button--appearance-accent'],
-            'positive': styles['Button--appearance-positive'],
-            'negative': styles['Button--appearance-negative'],
-            'neutral': styles['Button--appearance-neutral'],
-            'overlay': styles['Button--appearance-overlay'],
-            'accent-invariable': styles['Button--appearance-accent-invariable']
-        }[appearance], {
-            left: styles['Button--align-left'],
-            center: styles['Button--align-center'],
-            right: styles['Button--align-right']
-        }[align], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], platform === Platform.IOS && styles['Button--ios'], stretched && styles['Button--stretched'], hasIcons && styles['Button--with-icon'], hasIconOnly && !stretched && styles['Button--singleIcon'], loading && styles['Button--loading']),
+        className: classNames(className, styles.Button, stylesSize[size], stylesMode[mode], stylesAppearance[appearance], stylesAlign[align], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], platform === Platform.IOS && styles['Button--ios'], stretched && styles['Button--stretched'], hasIcons && styles['Button--with-icon'], hasIconOnly && !stretched && styles['Button--singleIcon'], loading && styles['Button--loading'], rounded && styles['Button--rounded']),
         getRootRef: getRootRef
     }, loading && /*#__PURE__*/ React.createElement(Spinner, {
         size: "small",

package/dist/cssm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  disableSpinnerAnimation,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        {\n          s: styles['Button--size-s'],\n          m: styles['Button--size-m'],\n          l: styles['Button--size-l'],\n        }[size],\n        {\n          primary: styles['Button--mode-primary'],\n          secondary: styles['Button--mode-secondary'],\n          tertiary: styles['Button--mode-tertiary'],\n          outline: styles['Button--mode-outline'],\n          link: styles['Button--mode-link'],\n        }[mode],\n        {\n          'accent': styles['Button--appearance-accent'],\n          'positive': styles['Button--appearance-positive'],\n          'negative': styles['Button--appearance-negative'],\n          'neutral': styles['Button--appearance-neutral'],\n          'overlay': styles['Button--appearance-overlay'],\n          'accent-invariable': styles['Button--appearance-accent-invariable'],\n        }[appearance],\n        {\n          left: styles['Button--align-left'],\n          center: styles['Button--align-center'],\n          right: styles['Button--align-right'],\n        }[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['Button--ios'],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"small\"\n          className={styles.Button__spinner}\n          disableAnimation={disableSpinnerAnimation}\n        />\n      )}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","styles","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","IOS","Button__spinner","disableAnimation","span","Button__in","Button__before","role","data-testid","process","env","NODE_ENV","Button__content","Button__after"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst stylesSize = {\n  s: styles['Button--size-s'],\n  m: styles['Button--size-m'],\n  l: styles['Button--size-l'],\n};\n\nconst stylesMode = {\n  primary: styles['Button--mode-primary'],\n  secondary: styles['Button--mode-secondary'],\n  tertiary: styles['Button--mode-tertiary'],\n  outline: styles['Button--mode-outline'],\n  link: styles['Button--mode-link'],\n};\n\nconst stylesAppearance = {\n  'accent': styles['Button--appearance-accent'],\n  'positive': styles['Button--appearance-positive'],\n  'negative': styles['Button--appearance-negative'],\n  'neutral': styles['Button--appearance-neutral'],\n  'overlay': styles['Button--appearance-overlay'],\n  'accent-invariable': styles['Button--appearance-accent-invariable'],\n};\n\nconst stylesAlign = {\n  left: styles['Button--align-left'],\n  center: styles['Button--align-center'],\n  right: styles['Button--align-right'],\n};\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n  disableSpinnerAnimation?: boolean;\n  rounded?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  disableSpinnerAnimation,\n  rounded,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        stylesSize[size],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesAlign[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['Button--ios'],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n        rounded && styles['Button--rounded'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && (\n        <Spinner\n          size=\"small\"\n          className={styles.Button__spinner}\n          disableAnimation={disableSpinnerAnimation}\n        />\n      )}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","styles","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","center","right","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","rounded","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","COMPACT","IOS","Button__spinner","disableAnimation","span","Button__in","Button__before","role","data-testid","process","env","NODE_ENV","Button__content","Button__after"],"mappings":"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"}

package/dist/cssm/components/Button/Button.module.css

@@ -17,6 +17,10 @@
   font-family: var(--vkui--font_family_base);
 }
 
+.Button--rounded {
+  border-radius: var(--vkui--size_border_radius_rounded--regular);
+}
+
 .Button--loading {
   cursor: progress;
 }

package/dist/cssm/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { AlignType, HasRootRef } from '../../types';
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import type { AlignType, HTMLAttributesWithRootRef } from '../../types';
+export interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
      */
@@ -23,4 +23,4 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
  */
-export declare const ButtonGroup: ({ mode, gap, stretched, align, getRootRef, className, children, ...restProps }: ButtonGroupProps) => React.JSX.Element;
+export declare const ButtonGroup: ({ mode, gap, stretched, align, ...restProps }: ButtonGroupProps) => React.JSX.Element;

package/dist/cssm/components/ButtonGroup/ButtonGroup.js

@@ -1,26 +1,29 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './ButtonGroup.module.css';
+const stylesMode = {
+    vertical: styles['ButtonGroup--mode-vertical'],
+    horizontal: styles['ButtonGroup--mode-horizontal']
+};
+const stylesGap = {
+    space: styles['ButtonGroup--gap-space'],
+    s: styles['ButtonGroup--gap-s'],
+    m: styles['ButtonGroup--gap-m']
+};
+const stylesAlign = {
+    left: styles['ButtonGroup--align-left'],
+    center: styles['ButtonGroup--align-center'],
+    right: styles['ButtonGroup--align-right']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
- */ export const ButtonGroup = ({ mode = 'horizontal', gap = 'm', stretched = false, align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */ , getRootRef, className, children, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(className, styles.ButtonGroup, {
-            vertical: styles['ButtonGroup--mode-vertical'],
-            horizontal: styles['ButtonGroup--mode-horizontal']
-        }[mode], gap !== 'none' && ({
-            space: styles['ButtonGroup--gap-space'],
-            s: styles['ButtonGroup--gap-s'],
-            m: styles['ButtonGroup--gap-m']
-        })[gap], stretched && styles['ButtonGroup--stretched'], {
-            left: styles['ButtonGroup--align-left'],
-            center: styles['ButtonGroup--align-center'],
-            right: styles['ButtonGroup--align-right']
-        }[align]),
+ */ export const ButtonGroup = ({ mode = 'horizontal', gap = 'm', stretched = false, align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */ , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames(styles.ButtonGroup, stylesMode[mode], gap !== 'none' && stylesGap[gap], stretched && styles['ButtonGroup--stretched'], stylesAlign[align]),
         role: "group",
-        ref: getRootRef,
         ...restProps
-    }, children);
+    });
 };
 
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/cssm/components/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HasRootRef } from '../../types';\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNames(\n        className,\n        styles.ButtonGroup,\n        {\n          vertical: styles['ButtonGroup--mode-vertical'],\n          horizontal: styles['ButtonGroup--mode-horizontal'],\n        }[mode],\n        gap !== 'none' &&\n          {\n            space: styles['ButtonGroup--gap-space'],\n            s: styles['ButtonGroup--gap-s'],\n            m: styles['ButtonGroup--gap-m'],\n          }[gap],\n        stretched && styles['ButtonGroup--stretched'],\n        {\n          left: styles['ButtonGroup--align-left'],\n          center: styles['ButtonGroup--align-center'],\n          right: styles['ButtonGroup--align-right'],\n        }[align],\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","div","vertical","horizontal","space","s","m","left","center","right","role","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAyB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACdC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACc;IACjB,qBACE,oBAACC;QACCH,WAAWR,WACTQ,WACAP,OAAOC,WAAW,EAClB;YACEU,UAAUX,MAAM,CAAC,6BAA6B;YAC9CY,YAAYZ,MAAM,CAAC,+BAA+B;QACpD,CAAC,CAACE,KAAK,EACPC,QAAQ,UACN,CAAA;YACEU,OAAOb,MAAM,CAAC,yBAAyB;YACvCc,GAAGd,MAAM,CAAC,qBAAqB;YAC/Be,GAAGf,MAAM,CAAC,qBAAqB;QACjC,CAAA,CAAC,CAACG,IAAI,EACRC,aAAaJ,MAAM,CAAC,yBAAyB,EAC7C;YACEgB,MAAMhB,MAAM,CAAC,0BAA0B;YACvCiB,QAAQjB,MAAM,CAAC,4BAA4B;YAC3CkB,OAAOlB,MAAM,CAAC,2BAA2B;QAC3C,CAAC,CAACK,MAAM;QAEVc,MAAK;QACLC,KAAKd;QACJ,GAAGG,SAAS;OAEZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ButtonGroup.module.css';\n\nconst stylesMode = {\n  vertical: styles['ButtonGroup--mode-vertical'],\n  horizontal: styles['ButtonGroup--mode-horizontal'],\n};\n\nconst stylesGap = {\n  space: styles['ButtonGroup--gap-space'],\n  s: styles['ButtonGroup--gap-s'],\n  m: styles['ButtonGroup--gap-m'],\n};\n\nconst stylesAlign = {\n  left: styles['ButtonGroup--align-left'],\n  center: styles['ButtonGroup--align-center'],\n  right: styles['ButtonGroup--align-right'],\n};\n\nexport interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.ButtonGroup,\n        stylesMode[mode],\n        gap !== 'none' && stylesGap[gap],\n        stretched && styles['ButtonGroup--stretched'],\n        stylesAlign[align],\n      )}\n      role=\"group\"\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesMode","vertical","horizontal","stylesGap","space","s","m","stylesAlign","left","center","right","ButtonGroup","mode","gap","stretched","align","restProps","baseClassName","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,UAAUF,MAAM,CAAC,6BAA6B;IAC9CG,YAAYH,MAAM,CAAC,+BAA+B;AACpD;AAEA,MAAMI,YAAY;IAChBC,OAAOL,MAAM,CAAC,yBAAyB;IACvCM,GAAGN,MAAM,CAAC,qBAAqB;IAC/BO,GAAGP,MAAM,CAAC,qBAAqB;AACjC;AAEA,MAAMQ,cAAc;IAClBC,MAAMT,MAAM,CAAC,0BAA0B;IACvCU,QAAQV,MAAM,CAAC,4BAA4B;IAC3CW,OAAOX,MAAM,CAAC,2BAA2B;AAC3C;AAuBA;;CAEC,GACD,OAAO,MAAMY,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACd,GAAGC,WACc;IACjB,qBACE,oBAAClB;QACCmB,eAAepB,WACbE,OAAOY,WAAW,EAClBX,UAAU,CAACY,KAAK,EAChBC,QAAQ,UAAUV,SAAS,CAACU,IAAI,EAChCC,aAAaf,MAAM,CAAC,yBAAyB,EAC7CQ,WAAW,CAACQ,MAAM;QAEpBG,MAAK;QACJ,GAAGF,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/ButtonGroup/ButtonGroup.module.css

@@ -18,7 +18,7 @@
   align-items: flex-start;
 }
 
-/* stylelint-disable @project-tools/stylelint-atomic */
+/* stylelint-disable @project-tools/stylelint-atomic, selector-max-universal */
 
 /**
  * [Примечание 3] Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
@@ -64,7 +64,7 @@
   margin-right: var(--vkui--size_button_group_gap_medium--regular);
 }
 
-/* stylelint-enable @project-tools/stylelint-atomic */
+/* stylelint-enable @project-tools/stylelint-atomic, selector-max-universal */
 
 .ButtonGroup--mode-vertical.ButtonGroup--align-left {
   align-items: flex-start;

package/dist/cssm/components/Calendar/Calendar.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
 import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
 import { CalendarTimeProps } from '../CalendarTime/CalendarTime';
-export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>, HasRootRef<HTMLDivElement> {
+export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'> {
     value?: Date;
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -30,4 +30,4 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */
-export declare const Calendar: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime, doneButtonText, weekStartsOn, getRootRef, disablePickers, changeHoursAriaLabel, changeMinutesAriaLabel, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, showNeighboringMonth, changeDayAriaLabel, size, viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, className, listenDayChangesForUpdate, ...props }: CalendarProps) => React.JSX.Element;
+export declare const Calendar: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime, doneButtonText, weekStartsOn, disablePickers, changeHoursAriaLabel, changeMinutesAriaLabel, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, showNeighboringMonth, changeDayAriaLabel, size, viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, ...props }: CalendarProps) => React.JSX.Element;

package/dist/cssm/components/Calendar/Calendar.js

@@ -8,11 +8,12 @@ import { warnOnce } from '../../lib/warnOnce';
 import { CalendarDays } from '../CalendarDays/CalendarDays';
 import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
 import { CalendarTime } from '../CalendarTime/CalendarTime';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Calendar.module.css';
 const warn = warnOnce('Calendar');
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
- */ export const Calendar = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime = false, doneButtonText, weekStartsOn = 1, getRootRef, disablePickers, changeHoursAriaLabel, changeMinutesAriaLabel, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, showNeighboringMonth, changeDayAriaLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, className, listenDayChangesForUpdate, ...props })=>{
+ */ export const Calendar = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime = false, doneButtonText, weekStartsOn = 1, disablePickers, changeHoursAriaLabel, changeMinutesAriaLabel, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, showNeighboringMonth, changeDayAriaLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, ...props })=>{
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay } = useCalendar({
         value,
         disableFuture,
@@ -65,10 +66,9 @@ const warn = warnOnce('Calendar');
     const isDayActive = React.useCallback((day)=>Boolean(value && isSameDay(day, value)), [
         value
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...props,
-        ref: getRootRef,
-        className: classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'], className)
+        baseClassName: classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'])
     }, /*#__PURE__*/ React.createElement(CalendarHeader, {
         viewDate: externalViewDate || viewDate,
         onChange: setViewDate,

package/dist/cssm/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","styles","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","div","ref","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,QAAQ,qBAAqB;AACvF,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAA2B,+BAA+B;AAC/E,SAASC,cAAc,QAA6B,mCAAmC;AACvF,SAASC,YAAY,QAA2B,+BAA+B;AAC/E,OAAOC,YAAY,wBAAwB;AA4C3C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,WAAW,CAAC,EACvBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,OAAO,EACPC,aAAa,KAAK,EAClBC,cAAc,EACdC,eAAe,CAAC,EAChBC,UAAU,EACVC,cAAc,EACdC,oBAAoB,EACpBC,sBAAsB,EACtBC,kBAAkB,EAClBC,kBAAkB,EAClBC,oBAAoB,EACpBC,mBAAmB,EACnBC,oBAAoB,EACpBC,qBAAqB,eAAe,EACpCC,OAAO,GAAG,EACVC,UAAUC,gBAAgB,EAC1BC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,cAAc,EACdC,QAAQ,EACRC,SAAS,EACTC,yBAAyB,EACzB,GAAGC,OACW;IACd,MAAM,EACJZ,QAAQ,EACRa,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,gBAAgB,EACjB,GAAGvD,YAAY;QACde;QACAG;QACAD;QACAE;QACAkB;QACAC;QACAC;IACF;IAEAhC,0BAA0B;QACxB,IAAIQ,OAAO;YACTiC,YAAYjC;QACd;IACF,GAAG;QAACA;KAAM;IAEV,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB,CAACjC,kBAAkBS,SAAS,KAAK;QAC7ErB,KAAK,yEAAyE;IAChF;IAEA,IAAI2C,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBrC,cAAca,SAAS,KAAK;QACxErB,KAAK,4DAA4D;IACnE;IAEA,MAAM8C,gBAAgB7D,MAAM8D,WAAW,CACrC,CAACC;QACC,IAAI;YAAC;YAAW;YAAa;YAAa;SAAa,CAACC,QAAQ,CAACD,MAAME,GAAG,GAAG;YAC3EF,MAAMG,cAAc;QACtB;QAEA,MAAMC,gBAAgB9D,aAAagD,cAAcpC,OAAO8C,MAAME,GAAG;QAEjE,IAAIE,iBAAiB,CAAC3D,YAAY2D,eAAe9B,WAAW;YAC1Da,YAAYiB;QACd;QACAb,cAAca;IAChB,GACA;QAACd;QAAYC;QAAeJ;QAAajC;QAAOoB;KAAS;IAG3D,MAAM+B,cAAcpE,MAAM8D,WAAW,CACnC,CAACO;QACCnD,WAAWZ,aAAa+D,MAAMpD;IAChC,GACA;QAACA;QAAOC;KAAS;IAGnB,MAAMoD,cAActE,MAAM8D,WAAW,CACnC,CAACS,MAAcC,QAAQvD,SAASV,UAAUgE,KAAKtD,SAC/C;QAACA;KAAM;IAGT,qBACE,oBAACwD;QACE,GAAGxB,KAAK;QACTyB,KAAKhD;QACLqB,WAAW9C,WACTa,MAAM,CAAC,WAAW,EAClBsB,SAAS,OAAOtB,MAAM,CAAC,mBAAmB,EAC1CiC;qBAGF,oBAACnC;QACCyB,UAAUC,oBAAoBD;QAC9BnB,UAAUgC;QACVV,aAAaY;QACbX,aAAaU;QACbxB,gBAAgBA,kBAAkBS,SAAS;QAC3CW,WAAWjC,MAAM,CAAC,mBAAmB;QACrCgB,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBS,eAAeA;QACfC,eAAeA;QACfC,gBAAgBA;QAChBC,gBAAgBA;sBAElB,oBAAClC;QACC0B,UAAUC,oBAAoBD;QAC9BpB,OAAOA;QACPQ,cAAcA;QACd8B,cAAcA;QACdoB,UAAU;QACVC,cAAYzC;QACZ0C,WAAWhB;QACXO,aAAaA;QACbE,aAAaA;QACbQ,qBAAqB3E;QACrB4E,mBAAmB3E;QACnBoD,eAAeA;QACfwB,QAAQvB;QACRvB,sBAAsBA;QACtBE,MAAMA;QACNU,UAAUA;QACVE,2BAA2BA;QAE5BzB,cAAcN,SAASmB,SAAS,qBAC/B,oBAACqC;QAAI1B,WAAWjC,MAAM,CAAC,iBAAiB;qBACtC,oBAACD;QACCI,OAAOA;QACPC,UAAUA;QACVI,SAASA;QACTE,gBAAgBA;QAChBI,sBAAsBA;QACtBC,wBAAwBA;;AAMpC,EAAE"}
+{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'])}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","baseClassName","className","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div"],"mappings":"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"}

package/dist/cssm/components/CalendarDays/CalendarDays.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDayElementProps } from '../CalendarDay/CalendarDay';
-export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface CalendarDaysProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {
     value?: Date | Array<Date | null>;
     viewDate: Date;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -21,4 +22,4 @@ export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElem
     onDayEnter?(value: Date): void;
     onDayLeave?(value: Date): void;
 }
-export declare const CalendarDays: ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth, dayProps, className, listenDayChangesForUpdate, ...props }: CalendarDaysProps) => React.JSX.Element;
+export declare const CalendarDays: ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth, dayProps, listenDayChangesForUpdate, getRootRef, ...props }: CalendarDaysProps) => React.JSX.Element;

package/dist/cssm/components/CalendarDays/CalendarDays.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
 import { useTodayDate } from '../../hooks/useTodayDate';
 import { getDaysNames, getWeeks } from '../../lib/calendar';
 import { isSameDay, isSameMonth } from '../../lib/date';
 import { CalendarDay } from '../CalendarDay/CalendarDay';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './CalendarDays.module.css';
-export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, className, listenDayChangesForUpdate = false, ...props })=>{
+export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, listenDayChangesForUpdate = false, getRootRef, ...props })=>{
     const { locale } = useConfigProvider();
-    const ref = React.useRef(null);
+    const ref = useExternRef(getRootRef);
     const now = useTodayDate(listenDayChangesForUpdate);
     const weeks = React.useMemo(()=>getWeeks(viewDate, weekStartsOn), [
         weekStartsOn,
@@ -24,12 +26,13 @@ export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDay
         onDayChange(date);
         ref.current?.focus();
     }, [
-        onDayChange
+        onDayChange,
+        ref
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...props,
-        className: classNames(styles['CalendarDays'], className),
-        ref: ref
+        baseClassName: styles['CalendarDays'],
+        getRootRef: ref
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['CalendarDays__row'], size === 's' && styles['CalendarDays__row--size-s'])
     }, daysNames.map((dayName)=>/*#__PURE__*/ React.createElement(Footnote, {