@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","ScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","ScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,KAAK,QAAoB,iBAAiB;AACnD,SAASC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAE7C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,qBAAqB;AAE3B,MAAMC,uBAAuB;IAC3BC,gBAAgB;IAChBC,qBAAqB;IACrBC,YAAY;IACZC,KAAK;IACLC,KAAK;IACLC,QAAQ,EAAE;IACVC,gBAAgB;AAClB;AAEA,MAAMC,sBAAsB;IAC1BC,WAAWC;IACXC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,QAAQ;AACV;AAEA,OAAO,MAAMC,cAAc,CAAC,EAC1BC,UAAU,KAAK,EACfC,UAAU,EACVC,QAAQ,EACRC,aAAa,MAAM,EACnBC,aAAa,CAAC,EACdC,aAAaC,kBAAkB,IAAI,EACnCC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,QAAQ,MAAM,EACdC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,YAAY,GAAG,EACf,GAAGC,WACc;IACjB,MAAMC,cAAc/C,MAAMgD,MAAM,CAAwC,CAAC;IACzE,MAAMC,cAAcjD,MAAMgD,MAAM,CAAcnC;IAC9C,MAAM,CAACqC,YAAYC,cAAc,GAAGnD,MAAMoD,QAAQ,CAAgB/B;IAElE,MAAMgC,UAAUlD,aAAa2B;IAC7B,MAAMwB,cAAcnD,aAAawC;IAEjC,MAAM,EAAEY,MAAM,EAAE,GAAGlD;IACnB,MAAMmD,aAAatD;IAEnB,MAAMuD,0BAA0BzB,eAAe,YAAYS,UAAU;IAErE,MAAMiB,iBAAiB,CAACC;QACtB,MAAMC,WAAWX,YAAYY,OAAO,CAAC3C,GAAG,IAAI;QAC5C,MAAM4C,WAAWb,YAAYY,OAAO,CAAC5C,GAAG,IAAI;QAE5C,IAAI0C,QAAQG,UAAU;YACpB,OAAOA;QACT,OAAO,IAAIH,QAAQC,UAAU;YAC3B,OAAOA;QACT;QAEA,OAAOD;IACT;IAEA;;GAEC,GACD,MAAMI,kBAAkB,CAACC;QACvB,IAAIf,YAAYY,OAAO,CAACzC,cAAc,EAAE;YACtC,OAAO;QACT;QAEA,MAAM6C,cAAchB,YAAYY,OAAO,CAAC1C,MAAM,EAAE+C,SAC5CjB,YAAYY,OAAO,CAAC1C,MAAM,CAAC6C,YAAY,GACvC;QAEJ,IAAIC,aAAa;YACf,MAAM,EAAEE,MAAM,EAAEC,KAAK,EAAE,GAAGH;YAE1B,IAAIR,yBAAyB;gBAC3B,MAAMY,gBAAgBpB,YAAYY,OAAO,CAAC9C,mBAAmB,IAAI;gBACjE,OAAOsD,gBAAgB,IAAIF,SAASC,QAAQ;YAC9C;YAEA,OAAOV,eAAe,CAAC,IAAIS;QAC7B;QAEA,OAAO;IACT;IAEA;;GAEC,GACD,MAAMG,sBAAsB;QAC1B,MAAMV,WAAWX,YAAYY,OAAO,CAAC3C,GAAG,IAAI;QAC5C,MAAM4C,WAAWb,YAAYY,OAAO,CAAC5C,GAAG,IAAI;QAC5C,MAAMU,SAASuB,WAAW1B,MAAM,GAAG0B,WAAWxB,MAAM;QAEpD,IAAIC,SAASiC,UAAU;YACrB,OAAOA,WAAWW,OAAO,AAAC5C,CAAAA,SAASiC,QAAO,IAAK;QACjD,OAAO,IAAIjC,SAASmC,UAAU;YAC5B,OAAOA,WAAWS,OAAO,AAAC5C,CAAAA,SAASmC,QAAO,IAAK;QACjD;QAEA,OAAOnC;IACT;IAEA,MAAM6C,mBAAmB,CAACC,UAAmC,CAAC,CAAC;QAC7D,MAAMC,cACJ1E,MAAM2E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,CAAC8C,OAAwBC;YACpD,MAAMC,OAAOhC,YAAYc,OAAO,CAAC,CAAC,MAAM,EAAEiB,EAAE,CAAC,CAAC;YAC9C,OAAO;gBACLX,QAAQY,MAAMC,cAAc;gBAC5BZ,OAAOW,MAAME,eAAe;YAC9B;QACF,MAAM,EAAE;QAEV,MAAMC,sBAAsB7B,QAAQQ,OAAO,EAAEoB,eAAe;QAC5D,MAAME,2BAA2B7B,YAAYO,OAAO,EAAEoB,eAAe;QACrE,MAAMG,kBAAkBV,YAAYW,MAAM,CACxC,CAACC,KAAaC,QAA8BA,MAAMnB,KAAK,GAAGkB,KAC1D;QAEF,MAAME,eACJd,YAAYR,MAAM,IAAIjB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,IACvDjB,YAAYY,OAAO,CAAC1C,MAAM,CAACc,WAAW,EAAEkC,WAAWO,WAAW,CAACzC,WAAW,EAAEkC;QAE9ElB,YAAYY,OAAO,GAAG;YACpB/C,gBAAgBoE;YAChBnE,qBAAqBoE;YACrBnE,YAAYoE;YACZlE,KAAKT,QAAQ;gBACXU,QAAQuD;gBACR3D,qBAAqBoE;gBACrB1B;YACF;YACAxC,KAAKP,QAAQ;gBACXI,gBAAgBoE;gBAChBlE,YAAYoE;gBACZjE,QAAQuD;gBACR3D,qBAAqBoE;gBACrB1B;gBACAhB;YACF;YACAtB,QAAQuD;YACRtD,gBAAgBgE,mBAAmBF;QACrC;QAEA/B,cAAc,CAACsC,YAAe,CAAA;gBAC5B,GAAGA,SAAS;gBACZjE,QAAQgE,eAAezB,gBAAgB9B,cAAcwD,UAAUjE,MAAM;gBACrEF,WAAWmD,QAAQnD,SAAS,IAAImE,UAAUjE,MAAM,KAAKkC,eAAe+B,UAAUjE,MAAM;YACtF,CAAA;IACF;IAEA,MAAMkE,WAAW;QACf,IAAIxC,WAAW5B,SAAS,KAAKC,WAAW;YACtCiD,iBAAiB;gBAAElD,WAAW;YAAM;QACtC;IACF;IAEAlB,uBAAuBmD,QAAQ,UAAUmC;IAEzCpF,0BAA0B;QACxBkE,iBAAiB;YAAElD,WAAW;QAAM;IACtC,GAAG;QAACS;QAAUU;QAAOT;KAAW;IAEhC1B,0BAA0B;QACxB,IAAI4C,WAAW5B,SAAS,KAAKC,WAAW;YACtC4B,cAAc,CAACsC,YAAe,CAAA;oBAC5B,GAAGA,SAAS;oBACZnE,WAAW;oBACXI,QAAQ;oBACRF,QAAQuC,gBAAgB9B,cAAc;gBACxC,CAAA;QACF;IACF,GAAG;QAACA;KAAW;IAEf,MAAM0D,YAAY,CAACC;QACjBtD,WAAWL,aAAa;QACxBM,cAAcqD;IAChB;IAEA,MAAMC,aAAa,CAACD;QAClBtD,WAAWL,aAAa;QACxBO,cAAcoD;IAChB;IAEA;;GAEC,GACD,MAAME,YAAY,CAACC;QACjB,MAAMC,eAAe,AAAC9C,WAAWxB,MAAM,GAAGqE,EAAEE,QAAQ,GAAI,MAAM;QAC9D,MAAMC,QACJhD,WAAW1B,MAAM,GAAG0B,WAAWxB,MAAM,GAAGsE,eAAgB/C,CAAAA,YAAYY,OAAO,CAAC3C,GAAG,IAAI,CAAA;QACrF,MAAMiF,YAAYjD,WAAWxB,MAAM,GAAG,IAAI,IAAI,CAAC;QAE/C,sDAAsD;QACtD,IAAIsC,cAAcf,YAAYY,OAAO,CAAC1C,MAAM,CAACkE,MAAM,CACjD,CAACC,KAAac,MAA0BC;YACtC,MAAMC,gBAAgBC,KAAKC,GAAG,CAACvD,YAAYY,OAAO,CAAC1C,MAAM,CAACmE,IAAI,CAACnB,MAAM,GAAG+B;YACxE,MAAMO,eAAeF,KAAKC,GAAG,CAACJ,KAAKjC,MAAM,GAAG+B;YAE5C,OAAOI,gBAAgBG,eAAenB,MAAMe;QAC9C,GACApE;QAGF,IAAI+B,gBAAgB/B,YAAY;YAC9B,IAAIgC,cAAchC,aAAakE;YAE/B,IAAIlC,eAAe,KAAKA,cAAchB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,EAAE;gBACvE,IAAIqC,KAAKC,GAAG,CAACtD,WAAWxB,MAAM,IAAIuB,YAAYY,OAAO,CAAC1C,MAAM,CAAC8C,YAAY,CAACG,KAAK,GAAG,MAAM;oBACtFJ,cAAcC;gBAChB;YACF;QACF;QAEA,OAAOD;IACT;IAEA,MAAM0C,UAAU,CAACX;QACf3D,cAAc2D;QACd5C,cAAc,CAACsC,YAAe,CAAA;gBAAE,GAAGA,SAAS;gBAAEnE,WAAW;YAAM,CAAA;IACjE;IAEA,MAAMqF,UAAU,CAACZ;QACf,IAAI5D,mBAAmB,CAACc,YAAYY,OAAO,CAACzC,cAAc,EAAE;YAC1D2E,EAAEa,aAAa,CAACC,cAAc;YAE9B,IAAId,EAAEe,QAAQ,EAAE;gBACd,IAAI5D,WAAWxB,MAAM,KAAKqE,EAAEvE,MAAM,EAAE;oBAClC2B,cAAc,CAACsC,YAAe,CAAA;4BAC5B,GAAGA,SAAS;4BACZ/D,QAAQqE,EAAEvE,MAAM;4BAChBC,UAAUsE,EAAEe,QAAQ;wBACtB,CAAA;gBACF;YACF;QACF;IACF;IAEA,MAAMC,QAAQ,CAAChB;QACb,MAAM/B,cAAc+B,EAAEiB,OAAO,GAAGlB,UAAUC,KAAK9D,cAAc;QAC7DI,YAAY0D,GAAG/B;QAEf,MAAMiD,iBAAyC;YAC7C3F,WAAW;YACXG,UAAU;YACVC,QAAQ;QACV;QAEA,MAAMwF,cAAc5C;QACpB,IAAIN,gBAAgB/B,YAAY;YAC9B,6FAA6F;YAC7FgF,eAAezF,MAAM,GAAG0F;QAC1B;QAEA/D,cAAc,CAACsC,YAAe,CAAA;gBAAE,GAAGA,SAAS;gBAAE,GAAGwB,cAAc;YAAC,CAAA;QAChE,IAAIjD,gBAAgB/B,YAAY;YAC9BK,WAAW0B;QACb;IACF;IAEA,MAAMrC,SAASuB,WAAWzB,QAAQ,GAAG6C,wBAAwBpB,WAAW1B,MAAM;IAE9E,MAAM2F,aAAa;QACjBC,iBAAiB,CAAC,WAAW,EAAEzF,OAAO,GAAG,CAAC;QAC1C0F,WAAW,CAAC,WAAW,EAAE1F,OAAO,GAAG,CAAC;QACpC2F,kBAAkBpE,WAAW5B,SAAS,GAClC,CAAC,kBAAkB,EAAEV,mBAAmB,6BAA6B,CAAC,GACtE;QACJ2G,YAAYrE,WAAW5B,SAAS,GAC5B,CAAC,UAAU,EAAEV,mBAAmB,6BAA6B,CAAC,GAC9D;IACN;IAEA,MAAM4G,cAAc,CAACC,UAAiCxF;QACpDc,YAAYc,OAAO,CAAC,CAAC,MAAM,EAAE5B,WAAW,CAAC,CAAC,GAAGwF;IAC/C;IAEA,sEAAsE;IACtE,MAAMC,eAAe,CAACzE,YAAYY,OAAO,CAACzC,cAAc,IAAI8B,WAAW1B,MAAM,GAAG;IAEhF,MAAMmG,gBACJ,CAAC1E,YAAYY,OAAO,CAACzC,cAAc,IACnC,+FAA+F;IAC9F,CAAA,AAACqB,UAAU,UACVQ,YAAYY,OAAO,CAAC/C,cAAc,GAAGoC,WAAW1B,MAAM,GACnDyB,CAAAA,YAAYY,OAAO,CAAC7C,UAAU,IAAI,CAAA,KACrC,mFAAmF;IAClFyB,UAAU,UAAUR,aAAagB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,GAAG,CAAC;IAE3E,MAAMhC,cAAcC,mBAAmB,CAACc,YAAYY,OAAO,CAACzC,cAAc;IAE1E,qBACE,oBAACwG;QACE,GAAG9E,SAAS;QACbF,WAAW3C,WACTU,MAAM,CAAC,cAAc,EACrB8B,UAAU,YAAY9B,MAAM,CAAC,4BAA4B,EACzDqB,eAAe,YAAYrB,MAAM,CAAC,4BAA4B,EAC9DuB,eAAevB,MAAM,CAAC,yBAAyB,EAC/CiC;QAEFiF,KAAKxE;qBAEL,oBAAC7C;QACCoC,WAAWjC,MAAM,CAAC,wBAAwB;QAC1CmH,UAAUpB;QACVC,SAASA;QACTI,OAAOA;QACPgB,OAAO;YAAE3D,OAAOpC,eAAe,WAAW,SAASA;QAAW;QAC9DF,YAAYwB;QACZ0E,cAAAA;qBAEA,oBAACJ;QAAIhF,WAAWjC,MAAM,CAAC,qBAAqB;QAAEoH,OAAOZ;OAClDnH,MAAM2E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,CAACqE,MAAuBtB,kBACpD,oBAAC8C;YACChF,WAAWjC,MAAM,CAAC,qBAAqB;YACvCsH,KAAK,CAAC,MAAM,EAAEnD,EAAE,CAAC;YACjB+C,KAAK,CAACK,KAAOV,YAAYU,IAAIpD;WAE5BsB,UAMRvE,yBACC,oBAAC+F;QACCO,eAAAA;QACAvF,WAAW3C,WACTU,MAAM,CAAC,uBAAuB,EAC9B;YACEyH,MAAMzH,MAAM,CAAC,6BAA6B;YAC1C0H,OAAO1H,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACkB,QAAQ;OAGX7B,MAAM2E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,CAAC8C,OAAwBwB,sBACrD,oBAACuB;YACChF,WAAW3C,WACTU,MAAM,CAAC,sBAAsB,EAC7B0F,UAAUpE,cAActB,MAAM,CAAC,8BAA8B;YAE/DsH,KAAK5B;cAMZ3D,cAAcc,cAAckE,8BAC3B,oBAACnH;QACCqC,WAAWjC,MAAM,CAAC,qBAAqB;QACvCwF,WAAU;QACVmC,SAAS3C;QACT4C,MAAM1F;QAGTH,cAAcc,cAAcmE,+BAC3B,oBAACpH;QACCqC,WAAWjC,MAAM,CAAC,qBAAqB;QACvCwF,WAAU;QACVmC,SAASzC;QACT0C,MAAM1F;;AAKhB,EAAE"}

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

@@ -1,4 +1,4 @@
-export const calcMin = ({ containerWidth =0 , layerWidth =0 , slides =[] , viewportOffsetWidth =0 , align , isCenterWithCustomWidth  })=>{
+export const calcMin = ({ containerWidth = 0, layerWidth = 0, slides = [], viewportOffsetWidth = 0, align, isCenterWithCustomWidth })=>{
     switch(align){
         case 'left':
             return containerWidth - layerWidth;
@@ -6,7 +6,7 @@ export const calcMin = ({ containerWidth =0 , layerWidth =0 , slides =[] , viewp
             return viewportOffsetWidth - layerWidth;
         case 'center':
             if (isCenterWithCustomWidth && slides.length) {
-                const { coordX , width  } = slides[slides.length - 1];
+                const { coordX, width } = slides[slides.length - 1];
                 return viewportOffsetWidth / 2 - coordX - width / 2;
             } else {
                 return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;
@@ -14,9 +14,9 @@ export const calcMin = ({ containerWidth =0 , layerWidth =0 , slides =[] , viewp
     }
     return undefined;
 };
-export const calcMax = ({ slides =[] , viewportOffsetWidth =0 , isCenterWithCustomWidth  })=>{
+export const calcMax = ({ slides = [], viewportOffsetWidth = 0, isCenterWithCustomWidth })=>{
     if (isCenterWithCustomWidth && slides.length) {
-        const { width , coordX  } = slides[0];
+        const { width, coordX } = slides[0];
         return viewportOffsetWidth / 2 - coordX - width / 2;
     }
     return 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { HasAlign } from '../../types';\nimport { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,MAAMA,UAAU,CAAC,EACtBC,gBAAiB,EAAC,EAClBC,YAAa,EAAC,EACdC,QAAS,EAAE,CAAA,EACXC,qBAAsB,EAAC,EACvBC,MAAK,EACLC,wBAAuB,EACf;IACR,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,QAAQ;gBAC5C,MAAM,EAAEC,OAAM,EAAEC,MAAK,EAAE,GAAGN,MAAM,CAACA,OAAOI,SAAS,EAAE;gBACnD,OAAOH,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E;IACJ;IACA,OAAOQ;AACT,EAAE;AAMF,OAAO,MAAMC,UAAU,CAAC,EACtBR,QAAS,EAAE,CAAA,EACXC,qBAAsB,EAAC,EACvBE,wBAAuB,EACf;IACR,IAAIA,2BAA2BH,OAAOI,QAAQ;QAC5C,MAAM,EAAEE,MAAK,EAAED,OAAM,EAAE,GAAGL,MAAM,CAAC,EAAE;QACnC,OAAOC,sBAAsB,IAAII,SAASC,QAAQ;IACpD;IACA,OAAO;AACT,EAAE"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { HasAlign } from '../../types';\nimport { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,MAAMA,UAAU,CAAC,EACtBC,iBAAiB,CAAC,EAClBC,aAAa,CAAC,EACdC,SAAS,EAAE,EACXC,sBAAsB,CAAC,EACvBC,KAAK,EACLC,uBAAuB,EACf;IACR,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,MAAM,EAAE;gBAC5C,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGN,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE;gBACnD,OAAOH,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E;IACJ;IACA,OAAOQ;AACT,EAAE;AAMF,OAAO,MAAMC,UAAU,CAAC,EACtBR,SAAS,EAAE,EACXC,sBAAsB,CAAC,EACvBE,uBAAuB,EACf;IACR,IAAIA,2BAA2BH,OAAOI,MAAM,EAAE;QAC5C,MAAM,EAAEE,KAAK,EAAED,MAAM,EAAE,GAAGL,MAAM,CAAC,EAAE;QACnC,OAAOC,sBAAsB,IAAII,SAASC,QAAQ;IACpD;IACA,OAAO;AACT,EAAE"}

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

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

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

@@ -14,10 +14,10 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
- */ export const Button = ({ size ='s' , mode ='primary' , appearance ='accent' , stretched =false , align ='center' , children , before , after , getRootRef , loading , onClick , stopPropagation =true , className , ...restProps })=>{
+ */ export const Button = ({ size = 's', mode = 'primary', appearance = 'accent', stretched = false, align = 'center', children, before, after, getRootRef, loading, onClick, stopPropagation = true, className, disableSpinnerAnimation, ...restProps })=>{
     const hasIcons = Boolean(before || after);
     const hasIconOnly = !children && Boolean(after) !== Boolean(before);
-    const { sizeY ='none'  } = useAdaptivity();
+    const { sizeY = 'none' } = useAdaptivity();
     const platform = usePlatform();
     return /*#__PURE__*/ React.createElement(Tappable, {
         hoverMode: styles['Button--hover'],
@@ -52,7 +52,8 @@ const sizeYClassNames = {
         getRootRef: getRootRef
     }, loading && /*#__PURE__*/ React.createElement(Spinner, {
         size: "small",
-        className: styles.Button__spinner
+        className: styles.Button__spinner,
+        disableAnimation: disableSpinnerAnimation
     }), /*#__PURE__*/ React.createElement("span", {
         className: styles.Button__in
     }, hasReactNode(before) && /*#__PURE__*/ React.createElement("span", {

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

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

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

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './ButtonGroup.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ButtonGroup
- */ export const ButtonGroup = ({ mode ='horizontal' , gap ='m' , stretched =false , align ='left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */  , getRootRef , className , children , ...restProps })=>{
+ */ export const ButtonGroup = ({ mode = 'horizontal', gap = 'm', stretched = false, align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */ , getRootRef, className, children, ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames(className, styles.ButtonGroup, {
             vertical: styles['ButtonGroup--mode-vertical'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HasRootRef } from '../../types';\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNames(\n        className,\n        styles.ButtonGroup,\n        {\n          vertical: styles['ButtonGroup--mode-vertical'],\n          horizontal: styles['ButtonGroup--mode-horizontal'],\n        }[mode],\n        gap !== 'none' &&\n          {\n            space: styles['ButtonGroup--gap-space'],\n            s: styles['ButtonGroup--gap-s'],\n            m: styles['ButtonGroup--gap-m'],\n          }[gap],\n        stretched && styles['ButtonGroup--stretched'],\n        {\n          left: styles['ButtonGroup--align-left'],\n          center: styles['ButtonGroup--align-center'],\n          right: styles['ButtonGroup--align-right'],\n        }[align],\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","div","vertical","horizontal","space","s","m","left","center","right","role","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAyB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAO,aAAY,EACnBC,KAAM,IAAG,EACTC,WAAY,MAAK,EACjBC,OAAQ,OAAO,4EAA4E,IAA7E,EACdC,WAAU,EACVC,UAAS,EACTC,SAAQ,EACR,GAAGC,WACc;IACjB,qBACE,oBAACC;QACCH,WAAWR,WACTQ,WACAP,OAAOC,aACP;YACEU,UAAUX,MAAM,CAAC,6BAA6B;YAC9CY,YAAYZ,MAAM,CAAC,+BAA+B;QACpD,CAAC,CAACE,KAAK,EACPC,QAAQ,UACN,CAAA;YACEU,OAAOb,MAAM,CAAC,yBAAyB;YACvCc,GAAGd,MAAM,CAAC,qBAAqB;YAC/Be,GAAGf,MAAM,CAAC,qBAAqB;QACjC,CAAA,CAAC,CAACG,IAAI,EACRC,aAAaJ,MAAM,CAAC,yBAAyB,EAC7C;YACEgB,MAAMhB,MAAM,CAAC,0BAA0B;YACvCiB,QAAQjB,MAAM,CAAC,4BAA4B;YAC3CkB,OAAOlB,MAAM,CAAC,2BAA2B;QAC3C,CAAC,CAACK,MAAM;QAEVc,MAAK;QACLC,KAAKd;QACJ,GAAGG,SAAS;OAEZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { AlignType, HasRootRef } from '../../types';\nimport styles from './ButtonGroup.module.css';\n\nexport interface ButtonGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n   */\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n   */\n  gap?: 'none' | 'space' | 's' | 'm';\n  /**\n   * Растягивает компонент на всю ширину контейнера.\n   *\n   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n   */\n  stretched?: boolean;\n  /**\n   * Горизонтальное выравнивание элементов внутри группы.\n   */\n  align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n  mode = 'horizontal',\n  gap = 'm',\n  stretched = false,\n  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n  getRootRef,\n  className,\n  children,\n  ...restProps\n}: ButtonGroupProps) => {\n  return (\n    <div\n      className={classNames(\n        className,\n        styles.ButtonGroup,\n        {\n          vertical: styles['ButtonGroup--mode-vertical'],\n          horizontal: styles['ButtonGroup--mode-horizontal'],\n        }[mode],\n        gap !== 'none' &&\n          {\n            space: styles['ButtonGroup--gap-space'],\n            s: styles['ButtonGroup--gap-s'],\n            m: styles['ButtonGroup--gap-m'],\n          }[gap],\n        stretched && styles['ButtonGroup--stretched'],\n        {\n          left: styles['ButtonGroup--align-left'],\n          center: styles['ButtonGroup--align-center'],\n          right: styles['ButtonGroup--align-right'],\n        }[align],\n      )}\n      role=\"group\"\n      ref={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","ButtonGroup","mode","gap","stretched","align","getRootRef","className","children","restProps","div","vertical","horizontal","space","s","m","left","center","right","role","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAyB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAO,YAAY,EACnBC,MAAM,GAAG,EACTC,YAAY,KAAK,EACjBC,QAAQ,OAAO,4EAA4E,GAA7E,EACdC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACc;IACjB,qBACE,oBAACC;QACCH,WAAWR,WACTQ,WACAP,OAAOC,WAAW,EAClB;YACEU,UAAUX,MAAM,CAAC,6BAA6B;YAC9CY,YAAYZ,MAAM,CAAC,+BAA+B;QACpD,CAAC,CAACE,KAAK,EACPC,QAAQ,UACN,CAAA;YACEU,OAAOb,MAAM,CAAC,yBAAyB;YACvCc,GAAGd,MAAM,CAAC,qBAAqB;YAC/Be,GAAGf,MAAM,CAAC,qBAAqB;QACjC,CAAA,CAAC,CAACG,IAAI,EACRC,aAAaJ,MAAM,CAAC,yBAAyB,EAC7C;YACEgB,MAAMhB,MAAM,CAAC,0BAA0B;YACvCiB,QAAQjB,MAAM,CAAC,4BAA4B;YAC3CkB,OAAOlB,MAAM,CAAC,2BAA2B;QAC3C,CAAC,CAACK,MAAM;QAEVc,MAAK;QACLC,KAAKd;QACJ,GAAGG,SAAS;OAEZD;AAGP,EAAE"}

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

@@ -12,8 +12,8 @@ import styles from './Calendar.module.css';
 const warn = warnOnce('Calendar');
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
- */ export const Calendar = ({ value , onChange , disablePast , disableFuture , shouldDisableDate , onClose , enableTime =false , doneButtonText , weekStartsOn =1 , getRootRef , disablePickers , changeHoursAriaLabel , changeMinutesAriaLabel , prevMonthAriaLabel , nextMonthAriaLabel , changeMonthAriaLabel , changeYearAriaLabel , showNeighboringMonth , changeDayAriaLabel ='Изменить день' , size ='m' , viewDate: externalViewDate , onHeaderChange , onNextMonth , onPrevMonth , prevMonthIcon , nextMonthIcon , prevMonthProps , nextMonthProps , dayProps , className , listenDayChangesForUpdate , ...props })=>{
-    const { viewDate , setViewDate , setPrevMonth , setNextMonth , focusedDay , setFocusedDay , isDayFocused , isDayDisabled , resetSelectedDay  } = useCalendar({
+ */ export const Calendar = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime = false, doneButtonText, weekStartsOn = 1, getRootRef, disablePickers, changeHoursAriaLabel, changeMinutesAriaLabel, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, showNeighboringMonth, changeDayAriaLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, className, listenDayChangesForUpdate, ...props })=>{
+    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay } = useCalendar({
         value,
         disableFuture,
         disablePast,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","styles","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","div","ref","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur"],"mappings":"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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 { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?(value: Date): void;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      className={classNames(\n        styles['Calendar'],\n        size === 's' && styles['Calendar--size-s'],\n        className,\n      )}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles['Calendar__header']}\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n      />\n      {enableTime && value && size !== 's' && (\n        <div className={styles['Calendar__time']}>\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","isSameDay","isSameMonth","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","styles","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","className","listenDayChangesForUpdate","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean","div","ref","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur"],"mappings":"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"}

package/dist/cssm/components/CalendarDay/CalendarDay.js

@@ -4,8 +4,8 @@ import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTr
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { Tappable } from '../Tappable/Tappable';
 import styles from './CalendarDay.module.css';
-export const CalendarDay = /*#__PURE__*/ React.memo(({ day , today , selected , onChange , hidden , disabled , active , selectionStart , selectionEnd , focused , onEnter , onLeave , hinted , hintedSelectionStart , hintedSelectionEnd , sameMonth , size , className , ...props })=>{
-    const { locale  } = useConfigProvider();
+export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, className, ...props })=>{
+    const { locale } = useConfigProvider();
     const ref = React.useRef(null);
     const onClick = React.useCallback(()=>onChange(day), [
         day,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size === 's' && styles['CalendarDay--size-s'],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? '' : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","div","hoverMode","hasActive","aria-label","Intl","DateTimeFormat","weekday","year","month","format","tabIndex","getRootRef","focusVisibleMode","getDate","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAA8B,uBAAuB;AACtE,OAAOC,YAAY,2BAA2B;AA2B9C,OAAO,MAAMC,4BAAcN,MAAMO,KAC/B,CAAC,EACCC,IAAG,EACHC,MAAK,EACLC,SAAQ,EACRC,SAAQ,EACRC,OAAM,EACNC,SAAQ,EACRC,OAAM,EACNC,eAAc,EACdC,aAAY,EACZC,QAAO,EACPC,QAAO,EACPC,QAAO,EACPC,OAAM,EACNC,qBAAoB,EACpBC,mBAAkB,EAClBC,UAAS,EACTC,KAAI,EACJC,UAAS,EACT,GAAGC,OACc;IACjB,MAAM,EAAEC,OAAM,EAAE,GAAGxB;IACnB,MAAMyB,MAAM5B,MAAM6B,OAAoB;IACtC,MAAMC,UAAU9B,MAAM+B,YAAY,IAAMpB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMqB,cAAchC,MAAM+B,YAAY,IAAMb,UAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMe,cAAcjC,MAAM+B,YAAY,IAAMZ,UAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1EnB,MAAMkC,UAAU;QACd,IAAIjB,WAAWW,IAAIO,SAAS;YAC1BP,IAAIO,QAAQC,cAAc,IAAIC,MAAMnC,kCAAkC;gBAAEoC,SAAS;YAAK;YACtFV,IAAIO,QAAQI;QACd;IACF,GAAG;QAACtB;KAAQ;IAEZ,IAAIL,QAAQ;QACV,qBAAO,oBAAC4B;YAAIf,WAAWpB,MAAM,CAAC,sBAAsB;;IACtD;IAEA,qBACE,oBAACD;QACCqB,WAAWxB,WACTI,MAAM,CAAC,cAAc,EACrBmB,SAAS,OAAOnB,MAAM,CAAC,sBAAsB,EAC7CI,SAASJ,MAAM,CAAC,qBAAqB,EACrCK,YAAY,CAACG,YAAYR,MAAM,CAAC,wBAAwB,EACxDU,kBAAkBV,MAAM,CAAC,+BAA+B,EACxDW,gBAAgBX,MAAM,CAAC,6BAA6B,EACpDQ,YAAYR,MAAM,CAAC,wBAAwB,EAC3C,CAACkB,aAAalB,MAAM,CAAC,8BAA8B,EACnDoB;QAEFgB,WAAW3B,SAAS,KAAKT,MAAM,CAAC,qBAAqB;QACrDqC,WAAW;QACXZ,SAASA;QACTjB,UAAUA;QACV8B,cAAY,IAAIC,KAAKC,eAAelB,QAAQ;YAC1CmB,SAAS;YACTC,MAAM;YACNC,OAAO;YACPxC,KAAK;QACP,GAAGyC,OAAOzC;QACV0C,UAAU,CAAC;QACXC,YAAYvB;QACZwB,kBAAkBtC,SAAS,YAAY;QACvCI,SAASc;QACTb,SAASc;QACR,GAAGP,KAAK;qBAET,oBAACc;QACCf,WAAWxB,WACTI,MAAM,CAAC,sBAAsB,EAC7Be,UAAUf,MAAM,CAAC,8BAA8B,EAC/CgB,wBAAwBhB,MAAM,CAAC,uCAAuC,EACtEiB,sBAAsBjB,MAAM,CAAC,qCAAqC;qBAGpE,oBAACmC;QACCf,WAAWxB,WACTI,MAAM,CAAC,qBAAqB,EAC5BS,UAAU,CAACD,YAAYR,MAAM,CAAC,6BAA6B;qBAG7D,oBAACmC;QAAIf,WAAWpB,MAAM,CAAC,0BAA0B;OAAGG,IAAI6C;AAKlE,GACA;AAEF/C,YAAYgD,cAAc"}
+{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  TappableElementProps,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    className,\n    ...props\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div className={styles['CalendarDay__hidden']}></div>;\n    }\n\n    return (\n      <Tappable\n        className={classNames(\n          styles['CalendarDay'],\n          size === 's' && styles['CalendarDay--size-s'],\n          today && styles['CalendarDay--today'],\n          selected && !disabled && styles['CalendarDay--selected'],\n          selectionStart && styles['CalendarDay--selection-start'],\n          selectionEnd && styles['CalendarDay--selection-end'],\n          disabled && styles['CalendarDay--disabled'],\n          !sameMonth && styles['CalendarDay--not-same-month'],\n          className,\n        )}\n        hoverMode={active ? '' : styles['CalendarDay--hover']}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: 'long',\n          year: 'numeric',\n          month: 'long',\n          day: 'numeric',\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n        {...props}\n      >\n        <div\n          className={classNames(\n            styles['CalendarDay__hinted'],\n            hinted && styles['CalendarDay__hinted--active'],\n            hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n            hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n          )}\n        >\n          <div\n            className={classNames(\n              styles['CalendarDay__inner'],\n              active && !disabled && styles['CalendarDay__inner--active'],\n            )}\n          >\n            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","props","locale","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","div","hoverMode","hasActive","aria-label","Intl","DateTimeFormat","weekday","year","month","format","tabIndex","getRootRef","focusVisibleMode","getDate","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAA8B,uBAAuB;AACtE,OAAOC,YAAY,2BAA2B;AA2B9C,OAAO,MAAMC,4BAAcN,MAAMO,IAAI,CACnC,CAAC,EACCC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,YAAY,EACZC,OAAO,EACPC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,oBAAoB,EACpBC,kBAAkB,EAClBC,SAAS,EACTC,IAAI,EACJC,SAAS,EACT,GAAGC,OACc;IACjB,MAAM,EAAEC,MAAM,EAAE,GAAGxB;IACnB,MAAMyB,MAAM5B,MAAM6B,MAAM,CAAc;IACtC,MAAMC,UAAU9B,MAAM+B,WAAW,CAAC,IAAMpB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMqB,cAAchC,MAAM+B,WAAW,CAAC,IAAMb,UAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMe,cAAcjC,MAAM+B,WAAW,CAAC,IAAMZ,UAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1EnB,MAAMkC,SAAS,CAAC;QACd,IAAIjB,WAAWW,IAAIO,OAAO,EAAE;YAC1BP,IAAIO,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAMnC,kCAAkC;gBAAEoC,SAAS;YAAK;YACtFV,IAAIO,OAAO,CAACI,KAAK;QACnB;IACF,GAAG;QAACtB;KAAQ;IAEZ,IAAIL,QAAQ;QACV,qBAAO,oBAAC4B;YAAIf,WAAWpB,MAAM,CAAC,sBAAsB;;IACtD;IAEA,qBACE,oBAACD;QACCqB,WAAWxB,WACTI,MAAM,CAAC,cAAc,EACrBmB,SAAS,OAAOnB,MAAM,CAAC,sBAAsB,EAC7CI,SAASJ,MAAM,CAAC,qBAAqB,EACrCK,YAAY,CAACG,YAAYR,MAAM,CAAC,wBAAwB,EACxDU,kBAAkBV,MAAM,CAAC,+BAA+B,EACxDW,gBAAgBX,MAAM,CAAC,6BAA6B,EACpDQ,YAAYR,MAAM,CAAC,wBAAwB,EAC3C,CAACkB,aAAalB,MAAM,CAAC,8BAA8B,EACnDoB;QAEFgB,WAAW3B,SAAS,KAAKT,MAAM,CAAC,qBAAqB;QACrDqC,WAAW;QACXZ,SAASA;QACTjB,UAAUA;QACV8B,cAAY,IAAIC,KAAKC,cAAc,CAAClB,QAAQ;YAC1CmB,SAAS;YACTC,MAAM;YACNC,OAAO;YACPxC,KAAK;QACP,GAAGyC,MAAM,CAACzC;QACV0C,UAAU,CAAC;QACXC,YAAYvB;QACZwB,kBAAkBtC,SAAS,YAAY;QACvCI,SAASc;QACTb,SAASc;QACR,GAAGP,KAAK;qBAET,oBAACc;QACCf,WAAWxB,WACTI,MAAM,CAAC,sBAAsB,EAC7Be,UAAUf,MAAM,CAAC,8BAA8B,EAC/CgB,wBAAwBhB,MAAM,CAAC,uCAAuC,EACtEiB,sBAAsBjB,MAAM,CAAC,qCAAqC;qBAGpE,oBAACmC;QACCf,WAAWxB,WACTI,MAAM,CAAC,qBAAqB,EAC5BS,UAAU,CAACD,YAAYR,MAAM,CAAC,6BAA6B;qBAG7D,oBAACmC;QAAIf,WAAWpB,MAAM,CAAC,0BAA0B;OAAGG,IAAI6C,OAAO;AAKzE,GACA;AAEF/C,YAAYgD,WAAW,GAAG"}

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

@@ -7,8 +7,8 @@ import { CalendarDay } from '../CalendarDay/CalendarDay';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './CalendarDays.module.css';
-export const CalendarDays = ({ viewDate , value , weekStartsOn , onDayChange , isDaySelected , isDayActive , isDaySelectionEnd , isDaySelectionStart , onDayEnter , onDayLeave , isDayHinted , isHintedDaySelectionStart , isHintedDaySelectionEnd , isDayFocused , isDayDisabled , size , showNeighboringMonth =false , dayProps , className , listenDayChangesForUpdate =false , ...props })=>{
-    const { locale  } = useConfigProvider();
+export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, className, listenDayChangesForUpdate = false, ...props })=>{
+    const { locale } = useConfigProvider();
     const ref = React.useRef(null);
     const now = useTodayDate(listenDayChangesForUpdate);
     const weeks = React.useMemo(()=>getWeeks(viewDate, weekStartsOn), [

package/dist/cssm/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":["React","classNames","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","Footnote","styles","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","div","map","dayName","key","week","i","day","sameMonth","toISOString","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,qBAAqB;AAC5D,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,WAAW,QAAiC,6BAA6B;AAClF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAwB/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,SAAQ,EACRC,MAAK,EACLC,aAAY,EACZC,YAAW,EACXC,cAAa,EACbC,YAAW,EACXC,kBAAiB,EACjBC,oBAAmB,EACnBC,WAAU,EACVC,WAAU,EACVC,YAAW,EACXC,0BAAyB,EACzBC,wBAAuB,EACvBC,aAAY,EACZC,cAAa,EACbC,KAAI,EACJC,sBAAuB,MAAK,EAC5BC,SAAQ,EACRC,UAAS,EACTC,2BAA4B,MAAK,EACjC,GAAGC,OACe;IAClB,MAAM,EAAEC,OAAM,EAAE,GAAGzB;IACnB,MAAM0B,MAAMlC,MAAMmC,OAAuB;IACzC,MAAMC,MAAMlC,aAAa6B;IAEzB,MAAMM,QAAQrC,MAAMsC,QAAQ,IAAMlC,SAASQ,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM2B,YAAYvC,MAAMsC,QACtB,IAAMnC,aAAaiC,KAAKtB,cAAcmB,SACtC;QAACA;QAAQG;QAAKtB;KAAa;IAG7B,MAAM0B,kBAAkBxC,MAAMyC,YAC5B,CAACC;QACC3B,YAAY2B;QAEZR,IAAIS,SAASC;IACf,GACA;QAAC7B;KAAY;IAGf,qBACE,oBAAC8B;QAAK,GAAGb,KAAK;QAAEF,WAAW7B,WAAWS,MAAM,CAAC,eAAe,EAAEoB;QAAYI,KAAKA;qBAC7E,oBAACW;QACCf,WAAW7B,WACTS,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;OAGpD6B,UAAUO,IAAI,CAACC,wBACd,oBAACtC;YAASuC,KAAKD;YAASjB,WAAWpB,MAAM,CAAC,wBAAwB;WAC/DqC,YAKNV,MAAMS,IAAI,CAACG,MAAMC,kBAChB,oBAACL;YACCf,WAAW7B,WACTS,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;YAErDsC,KAAKE;WAEJD,KAAKH,IAAI,CAACK,KAAKD;YACd,MAAME,YAAY9C,YAAY6C,KAAKvC;YACnC,qBACE,oBAACL;gBACCyC,KAAKG,IAAIE;gBACTF,KAAKA;gBACLG,OAAOjD,UAAU8C,KAAKf;gBACtBmB,QAAQtC,YAAYkC;gBACpBK,UAAUhB;gBACViB,QAAQ,CAAC7B,wBAAwB,CAACwB;gBAClCM,UAAUhC,cAAcyB;gBACxBQ,gBAAgBxC,oBAAoBgC,KAAKD;gBACzCU,cAAc1C,kBAAkBiC,KAAKD;gBACrCW,sBAAsBtC,4BAA4B4B,KAAKD;gBACvDY,oBAAoBtC,0BAA0B2B,KAAKD;gBACnDa,UAAU/C,gBAAgBmC;gBAC1Ba,SAASvC,aAAa0B;gBACtBc,SAAS7C;gBACT8C,SAAS7C;gBACT8C,QAAQ7C,cAAc6B;gBACtBC,WAAWA;gBACXzB,MAAMA;gBACL,GAAGE,QAAQ;;QAGlB;AAKV,EAAE"}
+{"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":["React","classNames","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","Footnote","styles","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","div","map","dayName","key","week","i","day","sameMonth","toISOString","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,qBAAqB;AAC5D,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,WAAW,QAAiC,6BAA6B;AAClF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAwB/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,SAAS,EACTC,4BAA4B,KAAK,EACjC,GAAGC,OACe;IAClB,MAAM,EAAEC,MAAM,EAAE,GAAGzB;IACnB,MAAM0B,MAAMlC,MAAMmC,MAAM,CAAiB;IACzC,MAAMC,MAAMlC,aAAa6B;IAEzB,MAAMM,QAAQrC,MAAMsC,OAAO,CAAC,IAAMlC,SAASQ,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM2B,YAAYvC,MAAMsC,OAAO,CAC7B,IAAMnC,aAAaiC,KAAKtB,cAAcmB,SACtC;QAACA;QAAQG;QAAKtB;KAAa;IAG7B,MAAM0B,kBAAkBxC,MAAMyC,WAAW,CACvC,CAACC;QACC3B,YAAY2B;QAEZR,IAAIS,OAAO,EAAEC;IACf,GACA;QAAC7B;KAAY;IAGf,qBACE,oBAAC8B;QAAK,GAAGb,KAAK;QAAEF,WAAW7B,WAAWS,MAAM,CAAC,eAAe,EAAEoB;QAAYI,KAAKA;qBAC7E,oBAACW;QACCf,WAAW7B,WACTS,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;OAGpD6B,UAAUO,GAAG,CAAC,CAACC,wBACd,oBAACtC;YAASuC,KAAKD;YAASjB,WAAWpB,MAAM,CAAC,wBAAwB;WAC/DqC,YAKNV,MAAMS,GAAG,CAAC,CAACG,MAAMC,kBAChB,oBAACL;YACCf,WAAW7B,WACTS,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;YAErDsC,KAAKE;WAEJD,KAAKH,GAAG,CAAC,CAACK,KAAKD;YACd,MAAME,YAAY9C,YAAY6C,KAAKvC;YACnC,qBACE,oBAACL;gBACCyC,KAAKG,IAAIE,WAAW;gBACpBF,KAAKA;gBACLG,OAAOjD,UAAU8C,KAAKf;gBACtBmB,QAAQtC,YAAYkC;gBACpBK,UAAUhB;gBACViB,QAAQ,CAAC7B,wBAAwB,CAACwB;gBAClCM,UAAUhC,cAAcyB;gBACxBQ,gBAAgBxC,oBAAoBgC,KAAKD;gBACzCU,cAAc1C,kBAAkBiC,KAAKD;gBACrCW,sBAAsBtC,4BAA4B4B,KAAKD;gBACvDY,oBAAoBtC,0BAA0B2B,KAAKD;gBACnDa,UAAU/C,gBAAgBmC;gBAC1Ba,SAASvC,aAAa0B;gBACtBc,SAAS7C;gBACT8C,SAAS7C;gBACT8C,QAAQ7C,cAAc6B;gBACtBC,WAAWA;gBACXzB,MAAMA;gBACL,GAAGE,QAAQ;;QAGlB;AAKV,EAAE"}

package/dist/cssm/components/CalendarHeader/CalendarHeader.js

@@ -10,16 +10,16 @@ import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import styles from './CalendarHeader.module.css';
-export const CalendarHeader = ({ viewDate , onChange , prevMonth =true , nextMonth =true , disablePickers =false , onNextMonth , onPrevMonth , className , prevMonthProps ={} , nextMonthProps ={} , prevMonthAriaLabel ='Предыдущий месяц' , nextMonthAriaLabel ='Следующий месяц' , changeMonthAriaLabel ='Изменить месяц' , changeYearAriaLabel ='Изменить год' , prevMonthIcon =/*#__PURE__*/ React.createElement(Icon20ChevronLeftOutline, {
+export const CalendarHeader = ({ viewDate, onChange, prevMonth = true, nextMonth = true, disablePickers = false, onNextMonth, onPrevMonth, className, prevMonthProps = {}, nextMonthProps = {}, prevMonthAriaLabel = 'Предыдущий месяц', nextMonthAriaLabel = 'Следующий месяц', changeMonthAriaLabel = 'Изменить месяц', changeYearAriaLabel = 'Изменить год', prevMonthIcon = /*#__PURE__*/ React.createElement(Icon20ChevronLeftOutline, {
     className: styles['CalendarHeader__nav-icon--accent'],
     width: 30,
     height: 30
-}) , nextMonthIcon =/*#__PURE__*/ React.createElement(Icon20ChevronRightOutline, {
+}), nextMonthIcon = /*#__PURE__*/ React.createElement(Icon20ChevronRightOutline, {
     className: styles['CalendarHeader__nav-icon--accent'],
     width: 30,
     height: 30
-})  })=>{
-    const { locale  } = useConfigProvider();
+}) })=>{
+    const { locale } = useConfigProvider();
     const onMonthsChange = React.useCallback((event)=>onChange(setMonth(viewDate, Number(event.target.value))), [
         onChange,
         viewDate
@@ -28,7 +28,7 @@ export const CalendarHeader = ({ viewDate , onChange , prevMonth =true , nextMon
         onChange,
         viewDate
     ]);
-    const months = React.useMemo(()=>getMonths(locale).map(({ value , label  })=>({
+    const months = React.useMemo(()=>getMonths(locale).map(({ value, label })=>({
                 value,
                 label: /*#__PURE__*/ React.createElement("span", {
                     className: styles['CalendarHeader__month']
@@ -44,8 +44,8 @@ export const CalendarHeader = ({ viewDate , onChange , prevMonth =true , nextMon
         year: 'numeric',
         month: 'long'
     });
-    const { className: prevMonthClassName , ...restPrevMonthProps } = prevMonthProps;
-    const { className: nextMonthClassName , ...restNextMonthProps } = nextMonthProps;
+    const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;
+    const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['CalendarHeader'], className)
     }, prevMonth && /*#__PURE__*/ React.createElement(AdaptivityProvider, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(\n            styles['CalendarHeader__pickers'],\n            'vkuiInternalCalendarHeader__pickers',\n          )}\n          weight=\"2\"\n        >\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div\n            className={classNames(\n              styles['CalendarHeader__pickers'],\n              'vkuiInternalCalendarHeader__pickers',\n            )}\n          >\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","Tappable","Paragraph","styles","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","width","height","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","span","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","sizeX","REGULAR","onClick","aria-label","format","weight","sizeY","COMPACT","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","forceDropdownPortal","selectType"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(\n            styles['CalendarHeader__pickers'],\n            'vkuiInternalCalendarHeader__pickers',\n          )}\n          weight=\"2\"\n        >\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div\n            className={classNames(\n              styles['CalendarHeader__pickers'],\n              'vkuiInternalCalendarHeader__pickers',\n            )}\n          >\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","Tappable","Paragraph","styles","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","width","height","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","span","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","sizeX","REGULAR","onClick","aria-label","format","weight","sizeY","COMPACT","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","forceDropdownPortal","selectType"],"mappings":"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"}

package/dist/cssm/components/CalendarRange/CalendarRange.js

@@ -14,8 +14,8 @@ const getIsDaySelected = (day, value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
- */ export const CalendarRange = ({ value , onChange , disablePast , disableFuture , shouldDisableDate , onClose , weekStartsOn =1 , getRootRef , disablePickers , prevMonthAriaLabel , nextMonthAriaLabel , changeMonthAriaLabel , changeYearAriaLabel , changeDayAriaLabel ='Изменить день' , prevMonthIcon , nextMonthIcon , className , listenDayChangesForUpdate , ...props })=>{
-    const { viewDate , setViewDate , setPrevMonth , setNextMonth , focusedDay , setFocusedDay , isDayFocused , isDayDisabled , resetSelectedDay  } = useCalendar({
+ */ export const CalendarRange = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, className, listenDayChangesForUpdate, ...props })=>{
+    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay } = useCalendar({
         value,
         disableFuture,
         disablePast,