@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/cjs/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":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","React","useRef","layoutState","useState","shiftState","setShiftState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","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","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","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","classNames","ref","Touch","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","ScrollArrow","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":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","useState","shiftState","setShiftState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","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","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","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","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","key","ref","el","aria-hidden","ScrollArrow","onClick","size"],"mappings":"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"}

package/dist/cjs/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/cjs/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":[],"mappings":";;;;;+DAAuB"}
+{"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":[],"mappings":";;;;;+DAAuB"}

package/dist/cjs/components/Button/Button.js

@@ -21,6 +21,31 @@ var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _Spinner = require("../Spinner/Spinner");
 var _Tappable = require("../Tappable/Tappable");
+var stylesSize = {
+    s: "vkuiButton--size-s",
+    m: "vkuiButton--size-m",
+    l: "vkuiButton--size-l"
+};
+var stylesMode = {
+    primary: "vkuiButton--mode-primary",
+    secondary: "vkuiButton--mode-secondary",
+    tertiary: "vkuiButton--mode-tertiary",
+    outline: "vkuiButton--mode-outline",
+    link: "vkuiButton--mode-link"
+};
+var stylesAppearance = {
+    "accent": "vkuiButton--appearance-accent",
+    "positive": "vkuiButton--appearance-positive",
+    "negative": "vkuiButton--appearance-negative",
+    "neutral": "vkuiButton--appearance-neutral",
+    "overlay": "vkuiButton--appearance-overlay",
+    "accent-invariable": "vkuiButton--appearance-accent-invariable"
+};
+var stylesAlign = {
+    left: "vkuiButton--align-left",
+    center: "vkuiButton--align-center",
+    right: "vkuiButton--align-right"
+};
 var sizeYClassNames = _define_property._({
     none: "vkuiButton--sizeY-none"
 }, _adaptivity.SizeType.REGULAR, "vkuiButton--sizeY-regular");
@@ -53,28 +78,7 @@ var Button = function(_param) {
     }, restProps), {
         onClick: loading ? undefined : onClick,
         stopPropagation: stopPropagation,
-        className: (0, _vkjs.classNames)(className, "vkuiButton", {
-            s: "vkuiButton--size-s",
-            m: "vkuiButton--size-m",
-            l: "vkuiButton--size-l"
-        }[size], {
-            primary: "vkuiButton--mode-primary",
-            secondary: "vkuiButton--mode-secondary",
-            tertiary: "vkuiButton--mode-tertiary",
-            outline: "vkuiButton--mode-outline",
-            link: "vkuiButton--mode-link"
-        }[mode], {
-            "accent": "vkuiButton--appearance-accent",
-            "positive": "vkuiButton--appearance-positive",
-            "negative": "vkuiButton--appearance-negative",
-            "neutral": "vkuiButton--appearance-neutral",
-            "overlay": "vkuiButton--appearance-overlay",
-            "accent-invariable": "vkuiButton--appearance-accent-invariable"
-        }[appearance], {
-            left: "vkuiButton--align-left",
-            center: "vkuiButton--align-center",
-            right: "vkuiButton--align-right"
-        }[align], sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], platform === _platform.Platform.IOS && "vkuiButton--ios", stretched && "vkuiButton--stretched", hasIcons && "vkuiButton--with-icon", hasIconOnly && !stretched && "vkuiButton--singleIcon", loading && "vkuiButton--loading"),
+        className: (0, _vkjs.classNames)(className, "vkuiButton", stylesSize[size], stylesMode[mode], stylesAppearance[appearance], stylesAlign[align], sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], platform === _platform.Platform.IOS && "vkuiButton--ios", stretched && "vkuiButton--stretched", hasIcons && "vkuiButton--with-icon", hasIconOnly && !stretched && "vkuiButton--singleIcon", loading && "vkuiButton--loading"),
         getRootRef: getRootRef
     }), loading && /*#__PURE__*/ _react.createElement(_Spinner.Spinner, {
         size: "small",

package/dist/cjs/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":["Button","sizeYClassNames","none","SizeType","REGULAR","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","restProps","hasIcons","Boolean","hasIconOnly","useAdaptivity","sizeY","platform","usePlatform","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","classNames","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","Platform","IOS","Spinner","disableAnimation","span","hasReactNode","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;;+DAjCU;oBACkB;6BACX;2BACF;0BACH;wBACA;uBAED;wBACgB;AAIxC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAmBZ,IAAMJ,SAAS;6BACpBK,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,+BAClBC,mBAAAA,WACAC,iCAAAA,yBACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQV,UAAUC;IACnC,IAAMU,cAAc,CAACZ,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,IAA2BY,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWX,UAAUY,IAAI,GAAG,MAAM;QAClCC,kBAAiB;OACbb;QACJJ,SAASD,UAAUmB,YAAYlB;QAC/BC,iBAAiBA;QACjBC,WAAWiB,IAAAA,gBAAU,EACnBjB,yBAEA;YACEkB,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAChC,KAAK,EACP;YACEiC,OAAO;YACPC,SAAS;YACTC,QAAQ;YACRC,OAAO;YACPC,IAAI;QACN,CAAC,CAACpC,KAAK,EACP;YACE,QAAQ;YACR,UAAU;YACV,UAAU;YACV,SAAS;YACT,SAAS;YACT,mBAAmB;QACrB,CAAC,CAACC,WAAW,EACb;YACEoC,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAACpC,MAAM,EACRe,UAAUrB,oBAAQ,CAAC2C,OAAO,IAAI7C,eAAe,CAACuB,MAAM,EACpDC,aAAasB,kBAAQ,CAACC,GAAG,uBACzBxC,sCACAY,qCACAE,eAAe,CAACd,uCAChBM;QAEFD,YAAYA;QAEXC,yBACC,qBAACmC,gBAAO;QACN5C,MAAK;QACLY,SAAS;QACTiC,kBAAkBhC;sBAGtB,qBAACiC;QAAKlC,SAAS;OACZmC,IAAAA,kBAAY,EAACzC,yBACZ,qBAACwC;QACClC,SAAS;QACToC,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWxB;OAEzDtB,SAGJyC,IAAAA,kBAAY,EAAC1C,2BACZ,qBAACyC;QACClC,SAAS;QACTqC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAaxB;OAE3DvB,WAGJ0C,IAAAA,kBAAY,EAACxC,wBACZ,qBAACuC;QACClC,SAAS;QACToC,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUxB;OAExDrB;AAMb"}
+{"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}\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        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      )}\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":["Button","stylesSize","s","m","l","stylesMode","primary","secondary","tertiary","outline","link","stylesAppearance","stylesAlign","left","center","right","sizeYClassNames","none","SizeType","REGULAR","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","disableSpinnerAnimation","restProps","hasIcons","Boolean","hasIconOnly","useAdaptivity","sizeY","platform","usePlatform","Tappable","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","classNames","COMPACT","Platform","IOS","Spinner","disableAnimation","span","hasReactNode","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;+BA8DaA;;;eAAAA;;;;;;;;+DA9DU;oBACkB;6BACX;2BACF;0BACH;wBACA;uBAED;wBACgB;AAIxC,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC,IAAI;AACN;AAEA,IAAMC,mBAAmB;IACvB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,SAAS;IACT,SAAS;IACT,mBAAmB;AACrB;AAEA,IAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAEA,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAmBZ,IAAMnB,SAAS;6BACpBoB,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,+BAClBC,mBAAAA,WACAC,iCAAAA,yBACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQV,UAAUC;IACnC,IAAMU,cAAc,CAACZ,YAAYW,QAAQT,WAAWS,QAAQV;IAC5D,IAA2BY,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,kBAAQ;QACPC,SAAS;QACTC,UAAU;QACVC,WAAWX,UAAUY,IAAI,GAAG,MAAM;QAClCC,kBAAiB;OACbb;QACJJ,SAASD,UAAUmB,YAAYlB;QAC/BC,iBAAiBA;QACjBC,WAAWiB,IAAAA,gBAAU,EACnBjB,yBAEA/B,UAAU,CAACmB,KAAK,EAChBf,UAAU,CAACgB,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BV,WAAW,CAACY,MAAM,EAClBe,UAAUrB,oBAAQ,CAACgC,OAAO,IAAIlC,eAAe,CAACuB,MAAM,EACpDC,aAAaW,kBAAQ,CAACC,GAAG,uBACzB7B,sCACAY,qCACAE,eAAe,CAACd,uCAChBM;QAEFD,YAAYA;QAEXC,yBACC,qBAACwB,gBAAO;QACNjC,MAAK;QACLY,SAAS;QACTsB,kBAAkBrB;sBAGtB,qBAACsB;QAAKvB,SAAS;OACZwB,IAAAA,kBAAY,EAAC9B,yBACZ,qBAAC6B;QACCvB,SAAS;QACTyB,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWb;OAEzDtB,SAGJ8B,IAAAA,kBAAY,EAAC/B,2BACZ,qBAAC8B;QACCvB,SAAS;QACT0B,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAab;OAE3DvB,WAGJ+B,IAAAA,kBAAY,EAAC7B,wBACZ,qBAAC4B;QACCvB,SAAS;QACTyB,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUb;OAExDrB;AAMb"}

package/dist/cjs/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/cjs/components/ButtonGroup/ButtonGroup.js

@@ -13,32 +13,32 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesMode = {
+    vertical: "vkuiButtonGroup--mode-vertical",
+    horizontal: "vkuiButtonGroup--mode-horizontal"
+};
+var stylesGap = {
+    space: "vkuiButtonGroup--gap-space",
+    s: "vkuiButtonGroup--gap-s",
+    m: "vkuiButtonGroup--gap-m"
+};
+var stylesAlign = {
+    left: "vkuiButtonGroup--align-left",
+    center: "vkuiButtonGroup--align-center",
+    right: "vkuiButtonGroup--align-right"
+};
 var ButtonGroup = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "horizontal" : _param_mode, _param_gap = _param.gap, gap = _param_gap === void 0 ? "m" : _param_gap, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "left" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */  : _param_align, getRootRef = _param.getRootRef, className = _param.className, children = _param.children, restProps = _object_without_properties._(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "horizontal" : _param_mode, _param_gap = _param.gap, gap = _param_gap === void 0 ? "m" : _param_gap, _param_stretched = _param.stretched, stretched = _param_stretched === void 0 ? false : _param_stretched, _param_align = _param.align, align = _param_align === void 0 ? "left" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */  : _param_align, restProps = _object_without_properties._(_param, [
         "mode",
         "gap",
         "stretched",
-        "align",
-        "getRootRef",
-        "className",
-        "children"
+        "align"
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        className: (0, _vkjs.classNames)(className, "vkuiButtonGroup", {
-            vertical: "vkuiButtonGroup--mode-vertical",
-            horizontal: "vkuiButtonGroup--mode-horizontal"
-        }[mode], gap !== "none" && ({
-            space: "vkuiButtonGroup--gap-space",
-            s: "vkuiButtonGroup--gap-s",
-            m: "vkuiButtonGroup--gap-m"
-        })[gap], stretched && "vkuiButtonGroup--stretched", {
-            left: "vkuiButtonGroup--align-left",
-            center: "vkuiButtonGroup--align-center",
-            right: "vkuiButtonGroup--align-right"
-        }[align]),
-        role: "group",
-        ref: getRootRef
-    }, restProps), children);
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiButtonGroup", stylesMode[mode], gap !== "none" && stylesGap[gap], stretched && "vkuiButtonGroup--stretched", stylesAlign[align]),
+        role: "group"
+    }, restProps));
 };
 
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/cjs/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":["ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","div","classNames","vertical","horizontal","space","s","m","left","center","right","role","ref"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;+DA/BU;oBACI;AA8BpB,IAAMA,cAAc;6BACzBC,MAAAA,gCAAO,gDACPC,KAAAA,8BAAM,4CACNC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,OAAO,4EAA4E,oBAC3FC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCH,WAAWI,IAAAA,gBAAU,EACnBJ,8BAEA;YACEK,QAAQ;YACRC,UAAU;QACZ,CAAC,CAACX,KAAK,EACPC,QAAQ,UACN,CAAA;YACEW,KAAK;YACLC,CAAC;YACDC,CAAC;QACH,CAAA,CAAC,CAACb,IAAI,EACRC,2CACA;YACEa,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAACd,MAAM;QAEVe,MAAK;QACLC,KAAKf;OACDG,YAEHD;AAGP"}
+{"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":["ButtonGroup","stylesMode","vertical","horizontal","stylesGap","space","s","m","stylesAlign","left","center","right","mode","gap","stretched","align","restProps","RootComponent","baseClassName","classNames","role"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;+DA/CU;oBACI;6BAEG;AAG9B,IAAMC,aAAa;IACjBC,QAAQ;IACRC,UAAU;AACZ;AAEA,IAAMC,YAAY;IAChBC,KAAK;IACLC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AA0BO,IAAMX,cAAc;6BACzBY,MAAAA,gCAAO,gDACPC,KAAAA,8BAAM,4CACNC,WAAAA,0CAAY,gDACZC,OAAAA,kCAAQ,OAAO,4EAA4E,oBACxFC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBlB,UAAU,CAACW,KAAK,EAChBC,QAAQ,UAAUT,SAAS,CAACS,IAAI,EAChCC,2CACAN,WAAW,CAACO,MAAM;QAEpBK,MAAK;OACDJ;AAGV"}

package/dist/cjs/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/cjs/components/Calendar/Calendar.js

@@ -22,9 +22,10 @@ var _warnOnce = require("../../lib/warnOnce");
 var _CalendarDays = require("../CalendarDays/CalendarDays");
 var _CalendarHeader = require("../CalendarHeader/CalendarHeader");
 var _CalendarTime = require("../CalendarTime/CalendarTime");
+var _RootComponent = require("../RootComponent/RootComponent");
 var warn = (0, _warnOnce.warnOnce)("Calendar");
 var Calendar = function(_param) {
-    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_enableTime = _param.enableTime, enableTime = _param_enableTime === void 0 ? false : _param_enableTime, doneButtonText = _param.doneButtonText, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, getRootRef = _param.getRootRef, disablePickers = _param.disablePickers, changeHoursAriaLabel = _param.changeHoursAriaLabel, changeMinutesAriaLabel = _param.changeMinutesAriaLabel, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, showNeighboringMonth = _param.showNeighboringMonth, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, externalViewDate = _param.viewDate, onHeaderChange = _param.onHeaderChange, onNextMonth = _param.onNextMonth, onPrevMonth = _param.onPrevMonth, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, prevMonthProps = _param.prevMonthProps, nextMonthProps = _param.nextMonthProps, dayProps = _param.dayProps, className = _param.className, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties._(_param, [
+    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_enableTime = _param.enableTime, enableTime = _param_enableTime === void 0 ? false : _param_enableTime, doneButtonText = _param.doneButtonText, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, disablePickers = _param.disablePickers, changeHoursAriaLabel = _param.changeHoursAriaLabel, changeMinutesAriaLabel = _param.changeMinutesAriaLabel, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, showNeighboringMonth = _param.showNeighboringMonth, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, externalViewDate = _param.viewDate, onHeaderChange = _param.onHeaderChange, onNextMonth = _param.onNextMonth, onPrevMonth = _param.onPrevMonth, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, prevMonthProps = _param.prevMonthProps, nextMonthProps = _param.nextMonthProps, dayProps = _param.dayProps, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties._(_param, [
         "value",
         "onChange",
         "disablePast",
@@ -34,7 +35,6 @@ var Calendar = function(_param) {
         "enableTime",
         "doneButtonText",
         "weekStartsOn",
-        "getRootRef",
         "disablePickers",
         "changeHoursAriaLabel",
         "changeMinutesAriaLabel",
@@ -54,7 +54,6 @@ var Calendar = function(_param) {
         "prevMonthProps",
         "nextMonthProps",
         "dayProps",
-        "className",
         "listenDayChangesForUpdate"
     ]);
     var _useCalendar1 = (0, _useCalendar.useCalendar)({
@@ -112,9 +111,8 @@ var Calendar = function(_param) {
     }, [
         value
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, props), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiCalendar", size === "s" && "vkuiCalendar--size-s", className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, props), {
+        baseClassName: (0, _vkjs.classNames)("vkuiCalendar", size === "s" && "vkuiCalendar--size-s")
     }), /*#__PURE__*/ _react.createElement(_CalendarHeader.CalendarHeader, {
         viewDate: externalViewDate || viewDate,
         onChange: setViewDate,

package/dist/cjs/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":["Calendar","warn","warnOnce","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","useCalendar","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useIsomorphicLayoutEffect","process","env","NODE_ENV","handleKeyDown","React","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","onDayChange","date","setTimeEqual","isDayActive","day","Boolean","isSameDay","div","ref","classNames","CalendarHeader","CalendarDays","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isFirstDay","isDaySelectionEnd","isLastDay","onBlur","CalendarTime"],"mappings":"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"}
+{"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":["Calendar","warn","warnOnce","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","useCalendar","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useIsomorphicLayoutEffect","process","env","NODE_ENV","handleKeyDown","React","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","onDayChange","date","setTimeEqual","isDayActive","day","Boolean","isSameDay","RootComponent","baseClassName","classNames","CalendarHeader","className","CalendarDays","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isFirstDay","isDaySelectionEnd","isLastDay","onBlur","div","CalendarTime"],"mappings":"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"}

package/dist/cjs/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/cjs/components/CalendarDays/CalendarDays.js

@@ -14,14 +14,16 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _useExternRef = require("../../hooks/useExternRef");
 var _useTodayDate = require("../../hooks/useTodayDate");
 var _calendar = require("../../lib/calendar");
 var _date = require("../../lib/date");
 var _CalendarDay = require("../CalendarDay/CalendarDay");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var CalendarDays = function(_param) {
-    var viewDate = _param.viewDate, value = _param.value, weekStartsOn = _param.weekStartsOn, onDayChange = _param.onDayChange, isDaySelected = _param.isDaySelected, isDayActive = _param.isDayActive, isDaySelectionEnd = _param.isDaySelectionEnd, isDaySelectionStart = _param.isDaySelectionStart, onDayEnter = _param.onDayEnter, onDayLeave = _param.onDayLeave, isDayHinted = _param.isDayHinted, isHintedDaySelectionStart = _param.isHintedDaySelectionStart, isHintedDaySelectionEnd = _param.isHintedDaySelectionEnd, isDayFocused = _param.isDayFocused, isDayDisabled = _param.isDayDisabled, size = _param.size, _param_showNeighboringMonth = _param.showNeighboringMonth, showNeighboringMonth = _param_showNeighboringMonth === void 0 ? false : _param_showNeighboringMonth, dayProps = _param.dayProps, className = _param.className, _param_listenDayChangesForUpdate = _param.listenDayChangesForUpdate, listenDayChangesForUpdate = _param_listenDayChangesForUpdate === void 0 ? false : _param_listenDayChangesForUpdate, props = _object_without_properties._(_param, [
+    var viewDate = _param.viewDate, value = _param.value, weekStartsOn = _param.weekStartsOn, onDayChange = _param.onDayChange, isDaySelected = _param.isDaySelected, isDayActive = _param.isDayActive, isDaySelectionEnd = _param.isDaySelectionEnd, isDaySelectionStart = _param.isDaySelectionStart, onDayEnter = _param.onDayEnter, onDayLeave = _param.onDayLeave, isDayHinted = _param.isDayHinted, isHintedDaySelectionStart = _param.isHintedDaySelectionStart, isHintedDaySelectionEnd = _param.isHintedDaySelectionEnd, isDayFocused = _param.isDayFocused, isDayDisabled = _param.isDayDisabled, size = _param.size, _param_showNeighboringMonth = _param.showNeighboringMonth, showNeighboringMonth = _param_showNeighboringMonth === void 0 ? false : _param_showNeighboringMonth, dayProps = _param.dayProps, _param_listenDayChangesForUpdate = _param.listenDayChangesForUpdate, listenDayChangesForUpdate = _param_listenDayChangesForUpdate === void 0 ? false : _param_listenDayChangesForUpdate, getRootRef = _param.getRootRef, props = _object_without_properties._(_param, [
         "viewDate",
         "value",
         "weekStartsOn",
@@ -40,11 +42,11 @@ var CalendarDays = function(_param) {
         "size",
         "showNeighboringMonth",
         "dayProps",
-        "className",
-        "listenDayChangesForUpdate"
+        "listenDayChangesForUpdate",
+        "getRootRef"
     ]);
     var locale = (0, _ConfigProviderContext.useConfigProvider)().locale;
-    var ref = _react.useRef(null);
+    var ref = (0, _useExternRef.useExternRef)(getRootRef);
     var now = (0, _useTodayDate.useTodayDate)(listenDayChangesForUpdate);
     var weeks = _react.useMemo(function() {
         return (0, _calendar.getWeeks)(viewDate, weekStartsOn);
@@ -64,11 +66,12 @@ var CalendarDays = function(_param) {
         onDayChange(date);
         (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
     }, [
-        onDayChange
+        onDayChange,
+        ref
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, props), {
-        className: (0, _vkjs.classNames)("vkuiCalendarDays", className),
-        ref: ref
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, props), {
+        baseClassName: "vkuiCalendarDays",
+        getRootRef: ref
     }), /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiCalendarDays__row", size === "s" && "vkuiCalendarDays__row--size-s")
     }, daysNames.map(function(dayName) {

package/dist/cjs/components/CalendarDays/CalendarDays.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange],\n  );\n\n  return (\n    <div {...props} className={classNames(styles['CalendarDays'], className)} ref={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size === 's' && styles['CalendarDays__row--size-s'],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size === 's' && styles['CalendarDays__row--size-s'],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","useConfigProvider","ref","React","useRef","now","useTodayDate","weeks","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","div","classNames","map","dayName","Footnote","key","week","i","day","sameMonth","isSameMonth","CalendarDay","toISOString","today","isSameDay","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;+DAhCU;oBACI;4BACE;wBACU;oBACA;2BACc;qCACnB;wBACT;AAyBlB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,eAAAA,OACAC,sBAAAA,cACAC,qBAAAA,aACAC,uBAAAA,eACAC,qBAAAA,aACAC,2BAAAA,mBACAC,6BAAAA,qBACAC,oBAAAA,YACAC,oBAAAA,YACAC,qBAAAA,aACAC,mCAAAA,2BACAC,iCAAAA,yBACAC,sBAAAA,cACAC,uBAAAA,eACAC,cAAAA,2CACAC,sBAAAA,gEAAuB,qCACvBC,kBAAAA,UACAC,mBAAAA,qDACAC,2BAAAA,0EAA4B,0CACzBC;QApBHpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWC,IAAAA,wCAAiB,IAA5BD;IACR,IAAME,MAAMC,OAAMC,MAAM,CAAiB;IACzC,IAAMC,MAAMC,IAAAA,0BAAY,EAACR;IAEzB,IAAMS,QAAQJ,OAAMK,OAAO,CAAC;eAAMC,IAAAA,kBAAQ,EAAC9B,UAAUE;OAAe;QAACA;QAAcF;KAAS;IAE5F,IAAM+B,YAAYP,OAAMK,OAAO,CAC7B;eAAMG,IAAAA,sBAAY,EAACN,KAAKxB,cAAcmB;OACtC;QAACA;QAAQK;QAAKxB;KAAa;IAG7B,IAAM+B,kBAAkBT,OAAMU,WAAW,CACvC,SAACC;YAGCZ;QAFApB,YAAYgC;SAEZZ,eAAAA,IAAIa,OAAO,cAAXb,mCAAAA,aAAac,KAAK;IACpB,GACA;QAAClC;KAAY;IAGf,qBACE,qBAACmC,mDAAQlB;QAAOF,WAAWqB,IAAAA,gBAAU,sBAAyBrB;QAAYK,KAAKA;sBAC7E,qBAACe;QACCpB,WAAWqB,IAAAA,gBAAU,2BAEnBxB,SAAS;OAGVgB,UAAUS,GAAG,CAAC,SAACC;6BACd,qBAACC,kBAAQ;YAACC,KAAKF;YAASvB,SAAS;WAC9BuB;SAKNb,MAAMY,GAAG,CAAC,SAACI,MAAMC;6BAChB,qBAACP;YACCpB,WAAWqB,IAAAA,gBAAU,2BAEnBxB,SAAS;YAEX4B,KAAKE;WAEJD,KAAKJ,GAAG,CAAC,SAACM,KAAKD;gBAaYlC,4BACFC,0BACVR,gBAIFM;YAlBZ,IAAMqC,YAAYC,IAAAA,iBAAW,EAACF,KAAK9C;YACnC,qBACE,qBAACiD,wBAAW;gBACVN,KAAKG,IAAII,WAAW;gBACpBJ,KAAKA;gBACLK,OAAOC,IAAAA,eAAS,EAACN,KAAKpB;gBACtB2B,QAAQhD,YAAYyC;gBACpBQ,UAAUrB;gBACVsB,QAAQ,CAACvC,wBAAwB,CAAC+B;gBAClCS,UAAU1C,cAAcgC;gBACxBW,gBAAgBlD,oBAAoBuC,KAAKD;gBACzCa,cAAcpD,kBAAkBwC,KAAKD;gBACrCc,oBAAoB,GAAEhD,6BAAAA,uCAAAA,iDAAAA,2BAA4BmC,KAAKD;gBACvDe,kBAAkB,GAAEhD,2BAAAA,qCAAAA,+CAAAA,yBAA0BkC,KAAKD;gBACnDgB,QAAQ,GAAEzD,iBAAAA,2BAAAA,qCAAAA,eAAgB0C;gBAC1BgB,SAASjD,aAAaiC;gBACtBiB,SAASvD;gBACTwD,SAASvD;gBACTwD,MAAM,GAAEvD,eAAAA,yBAAAA,mCAAAA,aAAcoC;gBACtBC,WAAWA;gBACXhC,MAAMA;eACFE;QAGV;;AAKV"}
+{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  listenDayChangesForUpdate = false,\n  getRootRef,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = useExternRef(getRootRef);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange, ref],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles['CalendarDays']} getRootRef={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size === 's' && styles['CalendarDays__row--size-s'],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size === 's' && styles['CalendarDays__row--size-s'],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </RootComponent>\n  );\n};\n"],"names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","listenDayChangesForUpdate","getRootRef","props","locale","useConfigProvider","ref","useExternRef","now","useTodayDate","weeks","React","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","RootComponent","baseClassName","div","className","classNames","map","dayName","Footnote","key","week","i","day","sameMonth","isSameMonth","CalendarDay","toISOString","today","isSameDay","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;+DApCU;oBACI;4BACE;4BACA;wBACU;oBACA;2BAEc;qCACnB;6BACJ;wBACL;AA0BlB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,eAAAA,OACAC,sBAAAA,cACAC,qBAAAA,aACAC,uBAAAA,eACAC,qBAAAA,aACAC,2BAAAA,mBACAC,6BAAAA,qBACAC,oBAAAA,YACAC,oBAAAA,YACAC,qBAAAA,aACAC,mCAAAA,2BACAC,iCAAAA,yBACAC,sBAAAA,cACAC,uBAAAA,eACAC,cAAAA,2CACAC,sBAAAA,gEAAuB,qCACvBC,kBAAAA,oDACAC,2BAAAA,0EAA4B,0CAC5BC,oBAAAA,YACGC;QApBHpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,SAAWC,IAAAA,wCAAiB,IAA5BD;IACR,IAAME,MAAMC,IAAAA,0BAAY,EAACL;IACzB,IAAMM,MAAMC,IAAAA,0BAAY,EAACR;IAEzB,IAAMS,QAAQC,OAAMC,OAAO,CAAC;eAAMC,IAAAA,kBAAQ,EAAC9B,UAAUE;OAAe;QAACA;QAAcF;KAAS;IAE5F,IAAM+B,YAAYH,OAAMC,OAAO,CAC7B;eAAMG,IAAAA,sBAAY,EAACP,KAAKvB,cAAcmB;OACtC;QAACA;QAAQI;QAAKvB;KAAa;IAG7B,IAAM+B,kBAAkBL,OAAMM,WAAW,CACvC,SAACC;YAGCZ;QAFApB,YAAYgC;SAEZZ,eAAAA,IAAIa,OAAO,cAAXb,mCAAAA,aAAac,KAAK;IACpB,GACA;QAAClC;QAAaoB;KAAI;IAGpB,qBACE,qBAACe,4BAAa,8CAAKlB;QAAOmB,aAAa;QAA0BpB,YAAYI;sBAC3E,qBAACiB;QACCC,WAAWC,IAAAA,gBAAU,2BAEnB3B,SAAS;OAGVgB,UAAUY,GAAG,CAAC,SAACC;6BACd,qBAACC,kBAAQ;YAACC,KAAKF;YAASH,SAAS;WAC9BG;SAKNjB,MAAMgB,GAAG,CAAC,SAACI,MAAMC;6BAChB,qBAACR;YACCC,WAAWC,IAAAA,gBAAU,2BAEnB3B,SAAS;YAEX+B,KAAKE;WAEJD,KAAKJ,GAAG,CAAC,SAACM,KAAKD;gBAaYrC,4BACFC,0BACVR,gBAIFM;YAlBZ,IAAMwC,YAAYC,IAAAA,iBAAW,EAACF,KAAKjD;YACnC,qBACE,qBAACoD,wBAAW;gBACVN,KAAKG,IAAII,WAAW;gBACpBJ,KAAKA;gBACLK,OAAOC,IAAAA,eAAS,EAACN,KAAKxB;gBACtB+B,QAAQnD,YAAY4C;gBACpBQ,UAAUxB;gBACVyB,QAAQ,CAAC1C,wBAAwB,CAACkC;gBAClCS,UAAU7C,cAAcmC;gBACxBW,gBAAgBrD,oBAAoB0C,KAAKD;gBACzCa,cAAcvD,kBAAkB2C,KAAKD;gBACrCc,oBAAoB,GAAEnD,6BAAAA,uCAAAA,iDAAAA,2BAA4BsC,KAAKD;gBACvDe,kBAAkB,GAAEnD,2BAAAA,qCAAAA,+CAAAA,yBAA0BqC,KAAKD;gBACnDgB,QAAQ,GAAE5D,iBAAAA,2BAAAA,qCAAAA,eAAgB6C;gBAC1BgB,SAASpD,aAAaoC;gBACtBiB,SAAS1D;gBACT2D,SAAS1D;gBACT2D,MAAM,GAAE1D,eAAAA,yBAAAA,mCAAAA,aAAcuC;gBACtBC,WAAWA;gBACXnC,MAAMA;eACFE;QAGV;;AAKV"}