@vkontakte/vkui 6.0.1-beta.0 → 6.0.2

package/dist/cjs/components/AppRoot/ScrollContext.js

@@ -236,9 +236,9 @@ const useScrollLockEffect = (effect, deps)=>{
     ]);
 };
 const useScrollLock = (enabled = true)=>{
-    const { enableScrollLock, disableScrollLock } = useScroll();
+    const { enableScrollLock, disableScrollLock, isScrollLock } = useScroll();
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        if (enabled) {
+        if (enabled && !isScrollLock) {
             enableScrollLock();
             return disableScrollLock;
         }

package/dist/cjs/components/AppRoot/ScrollContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"names":["ElementScrollController","GlobalScrollController","ScrollContext","useScroll","useScrollLock","useScrollLockEffect","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","React","createContext","getScroll","x","y","scrollTo","noop","isScrollLock","enableScrollLock","disableScrollLock","useContext","children","useDOM","setScrollLock","useState","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","clamp","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","elRef","scrollLeft","scrollTop","el","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","enabled","useIsomorphicLayoutEffect"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock, isScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled && !isScrollLock) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"names":["ElementScrollController","GlobalScrollController","ScrollContext","useScroll","useScrollLock","useScrollLockEffect","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","React","createContext","getScroll","x","y","scrollTo","noop","isScrollLock","enableScrollLock","disableScrollLock","useContext","children","useDOM","setScrollLock","useState","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","clamp","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","elRef","scrollLeft","scrollTop","el","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","enabled","useIsomorphicLayoutEffect"],"mappings":"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"}

package/dist/cjs/components/AspectRatio/AspectRatio.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     className?: string;

package/dist/cjs/components/AspectRatio/AspectRatio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7E,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAehC"}
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7E,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAehC"}

package/dist/cjs/components/Banner/Banner.js

@@ -51,14 +51,14 @@ const Banner = (_param)=>{
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__content"
     }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(HeaderTypography, {
-        Component: "p",
+        Component: "div",
         weight: "2",
         level: size === 'm' ? '2' : '1'
     }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(SubheaderTypography, {
-        Component: "p",
+        Component: "div",
         className: "vkuiBanner__subheader"
     }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_Text.Text, {
-        Component: "p",
+        Component: "div",
         className: "vkuiBanner__text"
     }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__actions"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        platform === 'ios' && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        size === 'm' && styles['Banner--size-m'],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === 'ios' ? 'opacity' : 'background'}\n          onClick={noop}\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24Dismiss","content","div","aria-hidden","className","hasReactNode","Component","weight","level","React","Children","count","RootComponent","baseClassName","classNames","Tappable","activeMode","onClick","noop","Icon24Chevron","IconButton","label","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;iEApFU;uBACuD;sBAC/B;6BACnB;4BAED;+BACG;0BACL;0BACA;yBACD;sBACH;uBACC;AAyEf,MAAMA,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EAEX,WADTC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,mBAAmBd,SAAS,MAAMe,YAAK,GAAGC,kBAAQ;IACxD,MAAMC,sBAAsBjB,SAAS,MAAMkB,UAAI,GAAGC,gBAAO;IAEzD,MAAMC,iBAAiBtB,SAAS,UAAUuB,wBAAiB,GAAGC,oBAAa;IAE3E,MAAMC,wBACJ,4CACGzB,SAAS,WAAWS,4BACnB,qBAACiB;QAAIC,eAAAA;QAAYC,SAAS;OACvBnB,aAIJN,wBAAU,qBAACuB;QAAIE,SAAS;OAA6BzB,uBAEtD,qBAACuB;QAAIE,SAAS;OACXC,IAAAA,kBAAY,EAACxB,yBACZ,qBAACW;QAAiBc,WAAU;QAAIC,QAAO;QAAIC,OAAO9B,SAAS,MAAM,MAAM;OACpEG,SAGJwB,IAAAA,kBAAY,EAACvB,4BACZ,qBAACa;QAAoBW,WAAU;QAAIF,SAAS;OACzCtB,YAGJuB,IAAAA,kBAAY,EAACtB,uBACZ,qBAACa,UAAI;QAACU,WAAU;QAAIF,SAAS;OAC1BrB,OAGJsB,IAAAA,kBAAY,EAACnB,YAAYuB,OAAMC,QAAQ,CAACC,KAAK,CAACzB,WAAW,mBACxD,qBAACgB;QAAIE,SAAS;OAA8BlB;IAMpD,qBACE,qBAAC0B,4BAAa;QACZN,WAAU;OACNjB;QACJwB,eAAeC,IAAAA,gBAAU,gBAEvBxB,aAAa,4BACbd,SAAS,qCACTE,SAAS,6BACTF,SAAS,WAAWC,eAAe;QAGpCG,cAAc,yBACb,qBAACmC,kBAAQ;QACPX,SAAS;QACTY,YAAY1B,aAAa,QAAQ,YAAY;QAC7C2B,SAASC,UAAI;OAEZjB,uBAED,qBAACC;QAAIE,SAAS;qBACZ,qBAACe,oBAAa;QAACf,SAAS;yBAI5B,qBAACF;QAAIE,SAAS;OACXH,SAEArB,cAAc,2BACb,qBAACsB;QAAIE,SAAS;qBACZ,qBAACgB,sBAAU;QACTC,OAAOjC;QACPgB,SAAS;QACTa,SAAS9B;QACTmC,WAAU;QACVC,WAAW;OAEVjC,aAAa,sBAAQ,qBAACQ,sCAAoB,qBAAC0B,mBAAY;AAQxE"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"div\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"div\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        platform === 'ios' && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        size === 'm' && styles['Banner--size-m'],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === 'ios' ? 'opacity' : 'background'}\n          onClick={noop}\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24Dismiss","content","div","aria-hidden","className","hasReactNode","Component","weight","level","React","Children","count","RootComponent","baseClassName","classNames","Tappable","activeMode","onClick","noop","Icon24Chevron","IconButton","label","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;iEApFU;uBACuD;sBAC/B;6BACnB;4BAED;+BACG;0BACL;0BACA;yBACD;sBACH;uBACC;AAyEf,MAAMA,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EAEX,WADTC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,mBAAmBd,SAAS,MAAMe,YAAK,GAAGC,kBAAQ;IACxD,MAAMC,sBAAsBjB,SAAS,MAAMkB,UAAI,GAAGC,gBAAO;IAEzD,MAAMC,iBAAiBtB,SAAS,UAAUuB,wBAAiB,GAAGC,oBAAa;IAE3E,MAAMC,wBACJ,4CACGzB,SAAS,WAAWS,4BACnB,qBAACiB;QAAIC,eAAAA;QAAYC,SAAS;OACvBnB,aAIJN,wBAAU,qBAACuB;QAAIE,SAAS;OAA6BzB,uBAEtD,qBAACuB;QAAIE,SAAS;OACXC,IAAAA,kBAAY,EAACxB,yBACZ,qBAACW;QAAiBc,WAAU;QAAMC,QAAO;QAAIC,OAAO9B,SAAS,MAAM,MAAM;OACtEG,SAGJwB,IAAAA,kBAAY,EAACvB,4BACZ,qBAACa;QAAoBW,WAAU;QAAMF,SAAS;OAC3CtB,YAGJuB,IAAAA,kBAAY,EAACtB,uBACZ,qBAACa,UAAI;QAACU,WAAU;QAAMF,SAAS;OAC5BrB,OAGJsB,IAAAA,kBAAY,EAACnB,YAAYuB,OAAMC,QAAQ,CAACC,KAAK,CAACzB,WAAW,mBACxD,qBAACgB;QAAIE,SAAS;OAA8BlB;IAMpD,qBACE,qBAAC0B,4BAAa;QACZN,WAAU;OACNjB;QACJwB,eAAeC,IAAAA,gBAAU,gBAEvBxB,aAAa,4BACbd,SAAS,qCACTE,SAAS,6BACTF,SAAS,WAAWC,eAAe;QAGpCG,cAAc,yBACb,qBAACmC,kBAAQ;QACPX,SAAS;QACTY,YAAY1B,aAAa,QAAQ,YAAY;QAC7C2B,SAASC,UAAI;OAEZjB,uBAED,qBAACC;QAAIE,SAAS;qBACZ,qBAACe,oBAAa;QAACf,SAAS;yBAI5B,qBAACF;QAAIE,SAAS;OACXH,SAEArB,cAAc,2BACb,qBAACsB;QAAIE,SAAS;qBACZ,qBAACgB,sBAAU;QACTC,OAAOjC;QACPgB,SAAS;QACTa,SAAS9B;QACTmC,WAAU;QACVC,WAAW;OAEVjC,aAAa,sBAAQ,qBAACQ,sCAAoB,qBAAC0B,mBAAY;AAQxE"}

package/dist/cjs/components/CalendarRange/CalendarRange.d.ts

@@ -10,7 +10,7 @@ export interface CalendarRangeProps extends Omit<HTMLAttributesWithRootRef<HTMLD
     disablePickers?: boolean;
     changeDayLabel?: string;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    onChange?(value?: DateRangeType): void;
+    onChange?: (value: DateRangeType | undefined) => void;
     shouldDisableDate?(value: Date): boolean;
     onClose?(): void;
 }

package/dist/cjs/components/CalendarRange/CalendarRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvF,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEvD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACvC,iBAAiB,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,oQAkBvB,kBAAkB,sBAyLpB,CAAC"}
+{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvF,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEvD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,oQAkBvB,kBAAkB,sBAyLpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n  value?: DateRangeType;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?(value?: DateRangeType): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\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?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      if (isValueEmpty) {\n        return [date, null];\n      }\n\n      const start = value[0];\n      const end = value[1];\n      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n        return [setTimeEqual(date, start), setTimeEqual(date, end)];\n      } else if (start && isBefore(date, start)) {\n        return [setTimeEqual(date, start), end];\n      } else if (start && isAfter(date, start)) {\n        return [start, setTimeEqual(date, end)];\n      }\n\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          aria-label={changeDayLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={setViewDate}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          tabIndex={0}\n          onBlur={resetSelectedDay}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useCalendar","hintedDate","setHintedDate","React","useState","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","isValueEmpty","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","RootComponent","baseClassName","div","className","CalendarHeader","nextMonthHidden","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n  value?: DateRangeType;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?: (value: DateRangeType | undefined) => void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\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?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      if (isValueEmpty) {\n        return [date, null];\n      }\n\n      const start = value[0];\n      const end = value[1];\n      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n        return [setTimeEqual(date, start), setTimeEqual(date, end)];\n      } else if (start && isBefore(date, start)) {\n        return [setTimeEqual(date, start), end];\n      } else if (start && isAfter(date, start)) {\n        return [start, setTimeEqual(date, end)];\n      }\n\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          aria-label={changeDayLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={setViewDate}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          tabIndex={0}\n          onBlur={resetSelectedDay}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useCalendar","hintedDate","setHintedDate","React","useState","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","isValueEmpty","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","RootComponent","baseClassName","div","className","CalendarHeader","nextMonthHidden","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":";;;;+BAuDaA;;;eAAAA;;;;;;;iEAvDU;6BACK;0BACsC;sBAU3D;8BAEyC;gCACI;+BACtB;AA4B9B,MAAMC,mBAAmB,CAACC,KAAWC;IACnC,IAAI,EAACA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAI,CAACA,KAAK,CAAC,EAAE,EAAE;QAC5B,OAAO;IACT;IAEA,OAAOC,QAAQC,IAAAA,sBAAgB,EAACH,KAAKI,IAAAA,gBAAU,EAACH,KAAK,CAAC,EAAE,GAAGI,IAAAA,cAAQ,EAACJ,KAAK,CAAC,EAAE;AAC9E;AAKO,MAAMH,gBAAgB;QAAC,EAC5BG,KAAK,EACLK,QAAQ,EACRC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,OAAO,EACPC,eAAe,CAAC,EAChBC,cAAc,EACdC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,iBAAiB,eAAe,EAChCC,aAAa,EACbC,aAAa,EACbC,yBAAyB,EAEN,WADhBC;QAhBHpB;QACAK;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EACJE,QAAQ,EACRC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,gBAAgB,EACjB,GAAGC,IAAAA,wBAAW,EAAC;QAAE9B;QAAOO;QAAeD;QAAaE;IAAkB;IACvE,MAAM,CAACuB,YAAYC,cAAc,GAAGC,OAAMC,QAAQ;IAClD,MAAMC,iBAAiBC,IAAAA,eAAS,EAACf,UAAU;IAE3C,MAAMgB,gBAAgBJ,OAAMK,WAAW,CACrC,CAACC;QACC,IAAI;YAAC;YAAW;YAAa;YAAa;SAAa,CAACC,QAAQ,CAACD,MAAME,GAAG,GAAG;YAC3EF,MAAMG,cAAc;QACtB;QAEA,MAAMC,gBAAgBC,IAAAA,sBAAY,EAACnB,uBAAAA,wBAAAA,aAAczB,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,EAAEuC,MAAME,GAAG;QAEtE,IACEE,iBACA,CAACE,IAAAA,iBAAW,EAACF,eAAetB,aAC5B,CAACwB,IAAAA,iBAAW,EAACF,eAAeP,IAAAA,eAAS,EAACf,UAAU,KAChD;YACAC,YAAYqB;QACd;QACAjB,cAAciB;IAChB,GACA;QAAClB;QAAYC;QAAeJ;QAAatB;QAAOqB;KAAS;IAG3D,MAAMyB,cAAcb,OAAMK,WAAW,CACnC,CAACS;QACC,MAAMC,eAAe,CAAChD,SAAUA,KAAK,CAAC,EAAE,KAAK,QAAQA,KAAK,CAAC,EAAE,KAAK;QAClE,IAAIgD,cAAc;YAChB,OAAO;gBAACD;gBAAM;aAAK;QACrB;QAEA,MAAME,QAAQjD,KAAK,CAAC,EAAE;QACtB,MAAMkD,MAAMlD,KAAK,CAAC,EAAE;QACpB,IAAI,AAACiD,SAASE,IAAAA,eAAS,EAACJ,MAAME,UAAYC,OAAOC,IAAAA,eAAS,EAACJ,MAAMG,MAAO;YACtE,OAAO;gBAACE,IAAAA,sBAAY,EAACL,MAAME;gBAAQG,IAAAA,sBAAY,EAACL,MAAMG;aAAK;QAC7D,OAAO,IAAID,SAASI,IAAAA,cAAQ,EAACN,MAAME,QAAQ;YACzC,OAAO;gBAACG,IAAAA,sBAAY,EAACL,MAAME;gBAAQC;aAAI;QACzC,OAAO,IAAID,SAASK,IAAAA,aAAO,EAACP,MAAME,QAAQ;YACxC,OAAO;gBAACA;gBAAOG,IAAAA,sBAAY,EAACL,MAAMG;aAAK;QACzC;QAEA,OAAOlD;IACT,GACA;QAACA;KAAM;IAGT,MAAMuD,cAActB,OAAMK,WAAW,CACnC,CAACS;QACC1C,qBAAAA,+BAAAA,SAAWyC,YAAYC;QACvBf,cAAcwB;IAChB,GACA;QAACnD;QAAUyC;KAAY;IAGzB,MAAMW,gBAAgBxB,OAAMK,WAAW,CAAC,CAACvC,MAAcD,iBAAiBC,KAAKC,QAAQ;QAACA;KAAM;IAE5F,MAAM0D,cAAczB,OAAMK,WAAW,CACnC,CAACvC,MACCE,QAAQ,CAACD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAImD,IAAAA,eAAS,EAACpD,KAAKC,KAAK,CAAC,EAAE,KAAOA,CAAAA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAImD,IAAAA,eAAS,EAACpD,KAAKC,KAAK,CAAC,EAAE,IAC5F;QAACA;KAAM;IAGT,MAAM2D,oBAAoB1B,OAAMK,WAAW,CACzC,CAACvC,KAAW6D,YACV3D,QAAQ4D,IAAAA,mBAAS,EAAC9D,KAAK6D,cAAe5D,CAAAA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAImD,IAAAA,eAAS,EAACpD,KAAKC,KAAK,CAAC,EAAE,IAC7E;QAACA;KAAM;IAGT,MAAM8D,0BAA0B7B,OAAMK,WAAW,CAC/C,CAACvC,KAAW6D,YACV3D,QAAQ4D,IAAAA,mBAAS,EAAC9D,KAAK6D,cAAe7B,CAAAA,uBAAAA,iCAAAA,UAAY,CAAC,EAAE,KAAIoB,IAAAA,eAAS,EAACpD,KAAKgC,UAAU,CAAC,EAAE,IACvF;QAACA;KAAW;IAGd,MAAMgC,sBAAsB9B,OAAMK,WAAW,CAC3C,CAACvC,KAAW6D,YACV3D,QAAQ+D,IAAAA,oBAAU,EAACjE,KAAK6D,cAAe5D,CAAAA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAImD,IAAAA,eAAS,EAACpD,KAAKC,KAAK,CAAC,EAAE,IAC9E;QAACA;KAAM;IAGT,MAAMiE,4BAA4BhC,OAAMK,WAAW,CACjD,CAACvC,KAAW6D,YACV3D,QAAQ+D,IAAAA,oBAAU,EAACjE,KAAK6D,cAAe7B,CAAAA,uBAAAA,iCAAAA,UAAY,CAAC,EAAE,KAAIoB,IAAAA,eAAS,EAACpD,KAAKgC,UAAU,CAAC,EAAE,IACxF;QAACA;KAAW;IAGd,MAAMmC,aAAajC,OAAMK,WAAW,CAClC,CAACS,OAAef,cAAcc,YAAYC,QAC1C;QAACf;QAAec;KAAY;IAG9B,MAAMqB,aAAalC,OAAMK,WAAW,CAAC,IAAMN,cAAcwB,YAAY;QAACxB;KAAc;IAEpF,MAAMoC,cAAcnC,OAAMK,WAAW,CACnC,CAACvC,MAAcD,iBAAiBC,KAAKgC,aACrC;QAACA;KAAW;IAGd,qBACE,qBAACsC,4BAAa,8CAAKjD;QAAOkD,aAAa;sBACrC,qBAACC;QAAIC,SAAS;qBACZ,qBAACC,8BAAc;QACbpD,UAAUA;QACVhB,UAAUiB;QACVoD,iBAAAA;QACAC,aAAapD;QACbZ,gBAAgBA;QAChB6D,SAAS;QACT5D,gBAAgBA;QAChBC,gBAAgBA;QAChBC,kBAAkBA;QAClBC,iBAAiBA;QACjBE,eAAeA;sBAEjB,qBAAC2D,0BAAY;QACXvD,UAAUA;QACVrB,OAAOA;QACPU,cAAcA;QACdmE,WAAWxC;QACXV,cAAcA;QACd4B,aAAaA;QACbE,eAAeA;QACfC,aAAaA;QACbC,mBAAmBA;QACnBI,qBAAqBA;QACrBK,aAAaA;QACbF,YAAYA;QACZC,YAAYA;QACZL,yBAAyBA;QACzBG,2BAA2BA;QAC3BrC,eAAeA;QACfT,2BAA2BA;QAC3B2D,cAAY9D;uBAGhB,qBAACuD;QAAIC,SAAS;qBACZ,qBAACC,8BAAc;QACbpD,UAAUc;QACV9B,UAAUiB;QACVyD,iBAAAA;QACAC,aAAaxD;QACbb,gBAAgBA;QAChB6D,SAAS;QACT5D,gBAAgBA;QAChBC,gBAAgBA;QAChBC,kBAAkBA;QAClBC,iBAAiBA;QACjBG,eAAeA;sBAEjB,qBAAC0D,0BAAY;QACXvD,UAAUc;QACVnC,OAAOA;QACPU,cAAcA;QACdoE,cAAY9D;QACZ6D,WAAWxC;QACXV,cAAcA;QACd4B,aAAaA;QACbE,eAAeA;QACfC,aAAaA;QACbC,mBAAmBA;QACnBI,qBAAqBA;QACrBK,aAAaA;QACbF,YAAYA;QACZC,YAAYA;QACZL,yBAAyBA;QACzBG,2BAA2BA;QAC3BrC,eAAeA;QACfT,2BAA2BA;QAC3B8D,UAAU;QACVC,QAAQrD;;AAKlB"}

package/dist/cjs/components/ChipsInputBase/types.d.ts

@@ -7,6 +7,7 @@ export type ChipOptionLabel = React.ReactElement | string | number;
 export type ChipOption = {
     value: ChipOptionValue;
     label: ChipOptionLabel;
+    disabled?: boolean;
     [index: string]: any;
 };
 export interface ChipProps extends HasComponent, HasDataAttribute, HTMLAttributesWithRootRef<HTMLElement> {

package/dist/cjs/components/ChipsInputBase/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/types.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/ChipsInputBase/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  HasAlign,\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { FormFieldProps } from '../FormField/FormField';\n\nexport type NavigateTo = 'first' | 'prev' | 'next' | 'last';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n  value: ChipOptionValue;\n  label: ChipOptionLabel;\n  [index: string]: any;\n};\n\nexport interface ChipProps\n  extends HasComponent,\n    HasDataAttribute,\n    HTMLAttributesWithRootRef<HTMLElement> {\n  value?: ChipOptionValue;\n  removable?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  removeLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  onRemove?(event: React.MouseEvent, value: ChipOptionValue): void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n  label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n  props: RenderChipProps,\n  option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n  value: ChipOptionValue,\n  label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n  disabled?: boolean;\n\n  value?: O[];\n  defaultValue?: O[];\n  onChange?: OnChange<O>;\n\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: OnInputChange;\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n  UseChipsInputBaseProps<O>,\n  'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputBaseOnlyNeededProps<O>,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n    >,\n    HasRef<HTMLInputElement>,\n    HasAlign {\n  getRootRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Добавляет значение в список на событие `onBlur`\n   */\n  addOnBlur?: boolean;\n  /**\n   * Render prop функция для возврата своего компонента.\n   *\n   * @default Используется [Chip](#/Chip)\n   */\n  renderChip?: RenderChip;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n  extends ChipsInputBaseProps<O>,\n    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {\n  onAddChipOption(value: O | string): void;\n  onRemoveChipOption(value: O | ChipOptionValue): void;\n}\n"],"names":[],"mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  HasAlign,\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { FormFieldProps } from '../FormField/FormField';\n\nexport type NavigateTo = 'first' | 'prev' | 'next' | 'last';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n  value: ChipOptionValue;\n  label: ChipOptionLabel;\n  disabled?: boolean;\n  [index: string]: any;\n};\n\nexport interface ChipProps\n  extends HasComponent,\n    HasDataAttribute,\n    HTMLAttributesWithRootRef<HTMLElement> {\n  value?: ChipOptionValue;\n  removable?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  removeLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  onRemove?(event: React.MouseEvent, value: ChipOptionValue): void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n  label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n  props: RenderChipProps,\n  option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n  value: ChipOptionValue,\n  label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n  disabled?: boolean;\n\n  value?: O[];\n  defaultValue?: O[];\n  onChange?: OnChange<O>;\n\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: OnInputChange;\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n  UseChipsInputBaseProps<O>,\n  'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputBaseOnlyNeededProps<O>,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n    >,\n    HasRef<HTMLInputElement>,\n    HasAlign {\n  getRootRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Добавляет значение в список на событие `onBlur`\n   */\n  addOnBlur?: boolean;\n  /**\n   * Render prop функция для возврата своего компонента.\n   *\n   * @default Используется [Chip](#/Chip)\n   */\n  renderChip?: RenderChip;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n  extends ChipsInputBaseProps<O>,\n    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {\n  onAddChipOption(value: O | string): void;\n  onRemoveChipOption(value: O | ChipOptionValue): void;\n}\n"],"names":[],"mappings":";;;;;iEAAuB"}

package/dist/cjs/components/ChipsSelect/ChipsSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAa7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQ5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,CACpD,SAAQ,mBAAmB,CAAC,CAAC,CAAC,EAC5B,mBAAmB,CAAC,CAAC,CAAC,EACtB,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,YAAY,CAAC,CAAC,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;OAEG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;CAChF;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,gqBA4YvB,CAAC"}
+{"version":3,"file":"ChipsSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAa7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAuC5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,CACpD,SAAQ,mBAAmB,CAAC,CAAC,CAAC,EAC5B,mBAAmB,CAAC,CAAC,CAAC,EACtB,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,YAAY,CAAC,CAAC,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;OAEG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;CAChF;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,gqBAwZvB,CAAC"}

package/dist/cjs/components/ChipsSelect/ChipsSelect.js

@@ -30,6 +30,26 @@ const stylesDropdownVerticalPlacement = {
     top: "vkuiChipsSelect--pop-up",
     bottom: "vkuiChipsSelect--pop-down"
 };
+const findIndexAfter = (options = [], startIndex = -1)=>{
+    if (startIndex >= options.length - 1) {
+        return -1;
+    }
+    return options.findIndex((option, i)=>i > startIndex && (!(0, _constants1.isNotServicePreset)(option) || !option.disabled));
+};
+const findIndexBefore = (options = [], endIndex = options.length)=>{
+    let result = -1;
+    if (endIndex <= 0) {
+        return result;
+    }
+    for(let i = endIndex - 1; i >= 0; i--){
+        let option = options[i];
+        if (!(0, _constants1.isNotServicePreset)(option) || !option.disabled) {
+            result = i;
+            break;
+        }
+    }
+    return result;
+};
 const ChipsSelect = (_param)=>{
     var { // FormFieldProps
     id: labelledbyId, getRootRef, className, status = 'default', icon: dropdownIconProp, onChangeStart, // CustomSelectDropdownProps
@@ -151,15 +171,21 @@ const ChipsSelect = (_param)=>{
         if (index === oldIndex) {
             /* istanbul ignore next: нет представления как воспроизвести */ return;
         }
+        const option = options[index];
+        if ((0, _constants1.isNotServicePreset)(option) && option.disabled) {
+            return;
+        }
         scrollToElement(index);
         setFocusedOptionIndex(index);
     };
     const focusOption = (nextIndex, type)=>{
         let index = nextIndex === null ? -1 : nextIndex;
         if (type === _constants1.FOCUS_ACTION_NEXT) {
-            index = index + 1;
+            const nextIndex = findIndexAfter(options, index);
+            index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index
         } else if (type === _constants1.FOCUS_ACTION_PREV) {
-            index = index - 1;
+            const beforeIndex = findIndexBefore(options, index);
+            index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index
         }
         focusOptionByIndex(index, focusedOptionIndex);
     };
@@ -176,7 +202,7 @@ const ChipsSelect = (_param)=>{
                 event.preventDefault();
                 if (!opened) {
                     setOpened(true);
-                    setFocusedOptionIndex(0);
+                    focusOption(null, _constants1.FOCUS_ACTION_NEXT);
                 } else {
                     focusOption(focusedOptionIndex, event.key === _accessibility.Keys.ARROW_UP ? _constants1.FOCUS_ACTION_PREV : _constants1.FOCUS_ACTION_NEXT);
                 }
@@ -312,6 +338,7 @@ const ChipsSelect = (_param)=>{
             key: `${typeof option.value}-${option.label}`
         }, renderOption({
             id: dropdownItemId,
+            disabled: option.disabled,
             hovered: focusedOption ? getOptionValue(option) === getOptionValue(focusedOption) : false,
             children: option.label,
             selected: !!value.find((selectedOption)=>getOptionValue(selectedOption) === getOptionValue(option)),
@@ -321,6 +348,9 @@ const ChipsSelect = (_param)=>{
                 }
             },
             onMouseDown (event) {
+                if (option.disabled) {
+                    return;
+                }
                 if (onChangeStart) {
                     onChangeStart(event, option);
                 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n  renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n  DEFAULT_EMPTY_TEXT,\n  DEFAULT_SELECTED_BEHAVIOR,\n  FOCUS_ACTION_NEXT,\n  FOCUS_ACTION_PREV,\n  isCreateNewOptionPreset,\n  isEmptyOptionPreset,\n  isNotServicePreset,\n  renderOptionDefault,\n} from './constants';\nimport type { FocusActionType } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst stylesDropdownVerticalPlacement = {\n  top: styles['ChipsSelect--pop-up'],\n  bottom: styles['ChipsSelect--pop-down'],\n} as const;\n\nexport interface ChipsSelectProps<O extends ChipOption>\n  extends ChipsInputBaseProps<O>,\n    UseChipsSelectProps<O>,\n    Pick<FormFieldProps, 'status' | 'mode' | 'before'> {\n  placement?: 'top' | 'bottom';\n  /**\n   * Отрисовка Spinner вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * Ширина раскрывающегося списка зависит от контента\n   */\n  dropdownAutoWidth?: boolean;\n  /**\n   * Принудительно использовать портал.\n   */\n  forceDropdownPortal?: boolean;\n  /**\n   * Передача `data-testid`.\n   */\n  dropdownTestId?: string;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n   */\n  addOnBlur?: boolean;\n  /**\n   * Отключает максимальную высоту по умолчанию\n   */\n  noMaxHeight?: boolean;\n\n  renderOption?(props: CustomSelectOptionProps, option: O): React.ReactNode;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?(event: React.MouseEvent | React.KeyboardEvent, option: O): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n  // FormFieldProps\n  id: labelledbyId,\n  getRootRef,\n  className,\n  status = 'default',\n  icon: dropdownIconProp,\n  onChangeStart,\n\n  // CustomSelectDropdownProps\n  options: optionsProp,\n  placement: placementProp = 'bottom',\n  closeAfterSelect = true,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  creatable = false,\n  fetching = false,\n  dropdownAutoWidth,\n  forceDropdownPortal,\n  noMaxHeight = false,\n  filterFn = defaultFilterFn,\n  dropdownTestId,\n\n  // ChipsInputProps\n  getRef,\n  value: valueProp,\n  defaultValue,\n  inputValue: inputValueProp,\n  defaultInputValue,\n  disabled,\n  readOnly,\n  getOptionValue = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  getNewOptionData = getNewOptionDataDefault,\n  renderChip = renderChipDefault,\n  renderOption = renderOptionDefault,\n  onChange,\n  onFocus: onFocusProp,\n  onInputChange: onInputChangeProp,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n  ...restProps\n}: ChipsSelectProps<Option>) => {\n  const {\n    // Связано с ChipsInputProps\n    // option\n    value,\n    addOptionFromInput,\n    addOption,\n    removeOption,\n    // input\n    inputRef: inputRefHook,\n    inputValue,\n    clearInput,\n    onInputChange,\n\n    // Связано с CustomSelectDropdownProps\n    options,\n    opened,\n    setOpened,\n    focusedOption,\n    focusedOptionIndex,\n    setFocusedOption,\n    setFocusedOptionIndex,\n  } = useChipsSelect({\n    // option\n    value: valueProp,\n    defaultValue,\n    onChange,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n\n    // input\n    inputValue: inputValueProp,\n    defaultInputValue,\n    onInputChange: onInputChangeProp,\n\n    // dropdown\n    options: optionsProp,\n    emptyText,\n    creatable,\n    filterFn,\n    selectedBehavior,\n\n    // other\n    disabled,\n  });\n\n  // Связано с ChipsInputProps\n  const rootRef = useExternRef(getRootRef);\n  const inputRef = useExternRef(getRef, inputRefHook);\n\n  // Связано с CustomSelectDropdownProps\n  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n    Extract<Placement, 'top' | 'bottom'> | undefined\n  >(placementProp);\n  const dropdownId = React.useId();\n  const dropdownCurrentItemId =\n    focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n  const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n\n    if (!readOnly) {\n      setOpened(true);\n      setFocusedOptionIndex(null);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!readOnly && !event.defaultPrevented && !creatable) {\n      event.preventDefault();\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = dropdownScrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    /* istanbul ignore next: нет представления как воспроизвести */\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    const length = options.length;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      /* istanbul ignore next: нет представления как воспроизвести */\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = nextIndex === null ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onKeyDownProp) {\n      onKeyDownProp(event);\n    }\n\n    if (event.defaultPrevented || readOnly) {\n      return;\n    }\n\n    switch (event.key) {\n      case Keys.ARROW_UP:\n      case Keys.ARROW_DOWN:\n        event.preventDefault();\n\n        if (!opened) {\n          setOpened(true);\n          setFocusedOptionIndex(0);\n        } else {\n          focusOption(\n            focusedOptionIndex,\n            event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n          );\n        }\n        break;\n      case Keys.ENTER: {\n        if (!opened) {\n          break;\n        }\n        if (focusedOptionIndex != null) {\n          const foundOption = options[focusedOptionIndex];\n          if (foundOption && isNotServicePreset(foundOption)) {\n            event.preventDefault();\n\n            if (onChangeStart) {\n              onChangeStart(event, foundOption);\n            }\n\n            addOption(foundOption);\n            setFocusedOptionIndex(null);\n            clearInput();\n            if (closeAfterSelect) {\n              setOpened(false);\n            }\n\n            break;\n          }\n        }\n\n        if (!creatable) {\n          event.preventDefault();\n        }\n        break;\n      }\n      case Keys.ESCAPE:\n      case Keys.TAB:\n        if (opened) {\n          setOpened(false);\n        }\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex === null) {\n      setFocusedOption(null);\n    } else {\n      const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n      if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n        setFocusedOption(foundFocusedOptionIndex);\n      }\n    }\n  }, [options, focusedOptionIndex, setFocusedOption]);\n\n  const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n    /* istanbul ignore next:  */\n    if (placement.startsWith('top')) {\n      setDropdownVerticalPlacement('top');\n    } else if (placement.startsWith('bottom')) {\n      setDropdownVerticalPlacement('bottom');\n    }\n  }, []);\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const handleClickOutside = React.useCallback(() => {\n    setOpened(false);\n  }, [setOpened]);\n\n  useGlobalOnClickOutside(\n    handleClickOutside,\n    opened ? rootRef : null,\n    opened ? dropdownScrollBoxRef : null,\n  );\n\n  return (\n    <>\n      <ChipsInputBase\n        {...restProps}\n        disabled={disabled}\n        readOnly={readOnly}\n        // FormFieldProps\n        id={labelledbyId}\n        getRootRef={rootRef}\n        className={classNames(\n          styles['ChipsSelect'],\n          opened &&\n            dropdownVerticalPlacement &&\n            stylesDropdownVerticalPlacement[dropdownVerticalPlacement],\n          className,\n        )}\n        status={status}\n        after={dropdownIconProp || <DropdownIcon opened={opened} />}\n        // option\n        value={value}\n        onAddChipOption={addOptionFromInput}\n        onRemoveChipOption={removeOption}\n        renderChip={renderChip}\n        // input\n        getRef={inputRef}\n        inputValue={inputValue}\n        onInputChange={onInputChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        // a11y\n        role=\"combobox\"\n        aria-expanded={opened}\n        aria-autocomplete=\"list\"\n        aria-controls={opened ? dropdownId : undefined}\n        aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n        aria-haspopup=\"listbox\"\n      />\n      {opened && (\n        <CustomSelectDropdown\n          data-testid={dropdownTestId}\n          targetRef={rootRef}\n          placement={placementProp}\n          scrollBoxRef={dropdownScrollBoxRef}\n          onPlacementChange={onDropdownPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          autoWidth={dropdownAutoWidth}\n          forcePortal={forceDropdownPortal}\n          noMaxHeight={noMaxHeight}\n          // a11y\n          id={dropdownId}\n          role=\"listbox\"\n          aria-labelledby={labelledbyId}\n        >\n          {options.map((option, index) => {\n            const dropdownItemId = `${dropdownId}-${index}`;\n\n            if (isEmptyOptionPreset(option)) {\n              return (\n                <Footnote key=\"empty-text\" className={styles['ChipsSelect__empty']}>\n                  {option.placeholder}\n                </Footnote>\n              );\n            }\n            if (isCreateNewOptionPreset(option)) {\n              return (\n                <CustomSelectOption\n                  key=\"create-new-option\"\n                  id={dropdownItemId}\n                  hovered={focusedOptionIndex === index}\n                  onMouseDown={() => addOptionFromInput(inputValue)}\n                  onMouseEnter={() => setFocusedOptionIndex(index)}\n                >\n                  {option.actionText}\n                </CustomSelectOption>\n              );\n            }\n            return (\n              <React.Fragment key={`${typeof option.value}-${option.label}`}>\n                {renderOption(\n                  {\n                    id: dropdownItemId,\n                    hovered: focusedOption\n                      ? getOptionValue(option) === getOptionValue(focusedOption)\n                      : false,\n                    children: option.label,\n                    selected: !!value.find(\n                      (selectedOption: Option) =>\n                        getOptionValue(selectedOption) === getOptionValue(option),\n                    ),\n                    getRootRef(node) {\n                      if (node) {\n                        chipsSelectOptions[index] = node;\n                      }\n                    },\n                    onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n                      if (onChangeStart) {\n                        onChangeStart(event, option);\n                      }\n\n                      if (!event.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter() {\n                      setFocusedOptionIndex(index);\n                    },\n                  },\n                  option,\n                )}\n              </React.Fragment>\n            );\n          })}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["ChipsSelect","stylesDropdownVerticalPlacement","top","bottom","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","options","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","DEFAULT_SELECTED_BEHAVIOR","emptyText","DEFAULT_EMPTY_TEXT","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","defaultFilterFn","dropdownTestId","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","disabled","readOnly","getOptionValue","getOptionValueDefault","getOptionLabel","getOptionLabelDefault","getNewOptionData","getNewOptionDataDefault","renderChip","renderChipDefault","renderOption","renderOptionDefault","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","restProps","addOptionFromInput","addOption","removeOption","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","useChipsSelect","rootRef","useExternRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","React","useState","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","length","focusOption","nextIndex","type","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","handleKeyDown","key","Keys","ARROW_UP","ARROW_DOWN","ENTER","foundOption","isNotServicePreset","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownPlacementChange","useCallback","startsWith","onDropdownMouseLeave","handleClickOutside","useGlobalOnClickOutside","ChipsInputBase","classNames","after","DropdownIcon","onAddChipOption","onRemoveChipOption","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","CustomSelectDropdown","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","aria-labelledby","map","option","dropdownItemId","isEmptyOptionPreset","Footnote","placeholder","isCreateNewOptionPreset","CustomSelectOption","hovered","onMouseDown","onMouseEnter","actionText","Fragment","label","children","selected","find","selectedOption","node"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n  renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n  DEFAULT_EMPTY_TEXT,\n  DEFAULT_SELECTED_BEHAVIOR,\n  FOCUS_ACTION_NEXT,\n  FOCUS_ACTION_PREV,\n  isCreateNewOptionPreset,\n  isEmptyOptionPreset,\n  isNotServicePreset,\n  renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst stylesDropdownVerticalPlacement = {\n  top: styles['ChipsSelect--pop-up'],\n  bottom: styles['ChipsSelect--pop-down'],\n} as const;\n\nconst findIndexAfter = <O extends ChipOption>(\n  options: Array<OptionPreset<O>> = [],\n  startIndex = -1,\n) => {\n  if (startIndex >= options.length - 1) {\n    return -1;\n  }\n  return options.findIndex(\n    (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n  );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n  options: Array<OptionPreset<O>> = [],\n  endIndex: number = options.length,\n) => {\n  let result = -1;\n  if (endIndex <= 0) {\n    return result;\n  }\n  for (let i = endIndex - 1; i >= 0; i--) {\n    let option = options[i];\n\n    if (!isNotServicePreset(option) || !option.disabled) {\n      result = i;\n      break;\n    }\n  }\n  return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n  extends ChipsInputBaseProps<O>,\n    UseChipsSelectProps<O>,\n    Pick<FormFieldProps, 'status' | 'mode' | 'before'> {\n  placement?: 'top' | 'bottom';\n  /**\n   * Отрисовка Spinner вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * Ширина раскрывающегося списка зависит от контента\n   */\n  dropdownAutoWidth?: boolean;\n  /**\n   * Принудительно использовать портал.\n   */\n  forceDropdownPortal?: boolean;\n  /**\n   * Передача `data-testid`.\n   */\n  dropdownTestId?: string;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n   */\n  addOnBlur?: boolean;\n  /**\n   * Отключает максимальную высоту по умолчанию\n   */\n  noMaxHeight?: boolean;\n\n  renderOption?(props: CustomSelectOptionProps, option: O): React.ReactNode;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?(event: React.MouseEvent | React.KeyboardEvent, option: O): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n  // FormFieldProps\n  id: labelledbyId,\n  getRootRef,\n  className,\n  status = 'default',\n  icon: dropdownIconProp,\n  onChangeStart,\n\n  // CustomSelectDropdownProps\n  options: optionsProp,\n  placement: placementProp = 'bottom',\n  closeAfterSelect = true,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  creatable = false,\n  fetching = false,\n  dropdownAutoWidth,\n  forceDropdownPortal,\n  noMaxHeight = false,\n  filterFn = defaultFilterFn,\n  dropdownTestId,\n\n  // ChipsInputProps\n  getRef,\n  value: valueProp,\n  defaultValue,\n  inputValue: inputValueProp,\n  defaultInputValue,\n  disabled,\n  readOnly,\n  getOptionValue = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  getNewOptionData = getNewOptionDataDefault,\n  renderChip = renderChipDefault,\n  renderOption = renderOptionDefault,\n  onChange,\n  onFocus: onFocusProp,\n  onInputChange: onInputChangeProp,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n  ...restProps\n}: ChipsSelectProps<Option>) => {\n  const {\n    // Связано с ChipsInputProps\n    // option\n    value,\n    addOptionFromInput,\n    addOption,\n    removeOption,\n    // input\n    inputRef: inputRefHook,\n    inputValue,\n    clearInput,\n    onInputChange,\n\n    // Связано с CustomSelectDropdownProps\n    options,\n    opened,\n    setOpened,\n    focusedOption,\n    focusedOptionIndex,\n    setFocusedOption,\n    setFocusedOptionIndex,\n  } = useChipsSelect({\n    // option\n    value: valueProp,\n    defaultValue,\n    onChange,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n\n    // input\n    inputValue: inputValueProp,\n    defaultInputValue,\n    onInputChange: onInputChangeProp,\n\n    // dropdown\n    options: optionsProp,\n    emptyText,\n    creatable,\n    filterFn,\n    selectedBehavior,\n\n    // other\n    disabled,\n  });\n\n  // Связано с ChipsInputProps\n  const rootRef = useExternRef(getRootRef);\n  const inputRef = useExternRef(getRef, inputRefHook);\n\n  // Связано с CustomSelectDropdownProps\n  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n    Extract<Placement, 'top' | 'bottom'> | undefined\n  >(placementProp);\n  const dropdownId = React.useId();\n  const dropdownCurrentItemId =\n    focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n  const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n\n    if (!readOnly) {\n      setOpened(true);\n      setFocusedOptionIndex(null);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!readOnly && !event.defaultPrevented && !creatable) {\n      event.preventDefault();\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = dropdownScrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    /* istanbul ignore next: нет представления как воспроизвести */\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    const length = options.length;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      /* istanbul ignore next: нет представления как воспроизвести */\n      return;\n    }\n\n    const option = options[index];\n\n    if (isNotServicePreset(option) && option.disabled) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = nextIndex === null ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      const nextIndex = findIndexAfter(options, index);\n      index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n    } else if (type === FOCUS_ACTION_PREV) {\n      const beforeIndex = findIndexBefore(options, index);\n      index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onKeyDownProp) {\n      onKeyDownProp(event);\n    }\n\n    if (event.defaultPrevented || readOnly) {\n      return;\n    }\n\n    switch (event.key) {\n      case Keys.ARROW_UP:\n      case Keys.ARROW_DOWN:\n        event.preventDefault();\n\n        if (!opened) {\n          setOpened(true);\n          focusOption(null, FOCUS_ACTION_NEXT);\n        } else {\n          focusOption(\n            focusedOptionIndex,\n            event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n          );\n        }\n        break;\n      case Keys.ENTER: {\n        if (!opened) {\n          break;\n        }\n        if (focusedOptionIndex != null) {\n          const foundOption = options[focusedOptionIndex];\n          if (foundOption && isNotServicePreset(foundOption)) {\n            event.preventDefault();\n\n            if (onChangeStart) {\n              onChangeStart(event, foundOption);\n            }\n\n            addOption(foundOption);\n            setFocusedOptionIndex(null);\n            clearInput();\n            if (closeAfterSelect) {\n              setOpened(false);\n            }\n\n            break;\n          }\n        }\n\n        if (!creatable) {\n          event.preventDefault();\n        }\n        break;\n      }\n      case Keys.ESCAPE:\n      case Keys.TAB:\n        if (opened) {\n          setOpened(false);\n        }\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex === null) {\n      setFocusedOption(null);\n    } else {\n      const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n      if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n        setFocusedOption(foundFocusedOptionIndex);\n      }\n    }\n  }, [options, focusedOptionIndex, setFocusedOption]);\n\n  const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n    /* istanbul ignore next:  */\n    if (placement.startsWith('top')) {\n      setDropdownVerticalPlacement('top');\n    } else if (placement.startsWith('bottom')) {\n      setDropdownVerticalPlacement('bottom');\n    }\n  }, []);\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const handleClickOutside = React.useCallback(() => {\n    setOpened(false);\n  }, [setOpened]);\n\n  useGlobalOnClickOutside(\n    handleClickOutside,\n    opened ? rootRef : null,\n    opened ? dropdownScrollBoxRef : null,\n  );\n\n  return (\n    <>\n      <ChipsInputBase\n        {...restProps}\n        disabled={disabled}\n        readOnly={readOnly}\n        // FormFieldProps\n        id={labelledbyId}\n        getRootRef={rootRef}\n        className={classNames(\n          styles['ChipsSelect'],\n          opened &&\n            dropdownVerticalPlacement &&\n            stylesDropdownVerticalPlacement[dropdownVerticalPlacement],\n          className,\n        )}\n        status={status}\n        after={dropdownIconProp || <DropdownIcon opened={opened} />}\n        // option\n        value={value}\n        onAddChipOption={addOptionFromInput}\n        onRemoveChipOption={removeOption}\n        renderChip={renderChip}\n        // input\n        getRef={inputRef}\n        inputValue={inputValue}\n        onInputChange={onInputChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        // a11y\n        role=\"combobox\"\n        aria-expanded={opened}\n        aria-autocomplete=\"list\"\n        aria-controls={opened ? dropdownId : undefined}\n        aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n        aria-haspopup=\"listbox\"\n      />\n      {opened && (\n        <CustomSelectDropdown\n          data-testid={dropdownTestId}\n          targetRef={rootRef}\n          placement={placementProp}\n          scrollBoxRef={dropdownScrollBoxRef}\n          onPlacementChange={onDropdownPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          autoWidth={dropdownAutoWidth}\n          forcePortal={forceDropdownPortal}\n          noMaxHeight={noMaxHeight}\n          // a11y\n          id={dropdownId}\n          role=\"listbox\"\n          aria-labelledby={labelledbyId}\n        >\n          {options.map((option, index) => {\n            const dropdownItemId = `${dropdownId}-${index}`;\n\n            if (isEmptyOptionPreset(option)) {\n              return (\n                <Footnote key=\"empty-text\" className={styles['ChipsSelect__empty']}>\n                  {option.placeholder}\n                </Footnote>\n              );\n            }\n            if (isCreateNewOptionPreset(option)) {\n              return (\n                <CustomSelectOption\n                  key=\"create-new-option\"\n                  id={dropdownItemId}\n                  hovered={focusedOptionIndex === index}\n                  onMouseDown={() => addOptionFromInput(inputValue)}\n                  onMouseEnter={() => setFocusedOptionIndex(index)}\n                >\n                  {option.actionText}\n                </CustomSelectOption>\n              );\n            }\n            return (\n              <React.Fragment key={`${typeof option.value}-${option.label}`}>\n                {renderOption(\n                  {\n                    id: dropdownItemId,\n                    disabled: option.disabled,\n                    hovered: focusedOption\n                      ? getOptionValue(option) === getOptionValue(focusedOption)\n                      : false,\n                    children: option.label,\n                    selected: !!value.find(\n                      (selectedOption: Option) =>\n                        getOptionValue(selectedOption) === getOptionValue(option),\n                    ),\n                    getRootRef(node) {\n                      if (node) {\n                        chipsSelectOptions[index] = node;\n                      }\n                    },\n                    onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n                      if (option.disabled) {\n                        return;\n                      }\n                      if (onChangeStart) {\n                        onChangeStart(event, option);\n                      }\n\n                      if (!event.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter() {\n                      setFocusedOptionIndex(index);\n                    },\n                  },\n                  option,\n                )}\n              </React.Fragment>\n            );\n          })}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["ChipsSelect","stylesDropdownVerticalPlacement","top","bottom","findIndexAfter","options","startIndex","length","findIndex","option","i","isNotServicePreset","disabled","findIndexBefore","endIndex","result","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","DEFAULT_SELECTED_BEHAVIOR","emptyText","DEFAULT_EMPTY_TEXT","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","defaultFilterFn","dropdownTestId","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionValueDefault","getOptionLabel","getOptionLabelDefault","getNewOptionData","getNewOptionDataDefault","renderChip","renderChipDefault","renderOption","renderOptionDefault","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","restProps","addOptionFromInput","addOption","removeOption","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","useChipsSelect","rootRef","useExternRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","React","useState","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","beforeIndex","handleKeyDown","key","Keys","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownPlacementChange","useCallback","startsWith","onDropdownMouseLeave","handleClickOutside","useGlobalOnClickOutside","ChipsInputBase","classNames","after","DropdownIcon","onAddChipOption","onRemoveChipOption","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","CustomSelectDropdown","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","aria-labelledby","map","dropdownItemId","isEmptyOptionPreset","Footnote","placeholder","isCreateNewOptionPreset","CustomSelectOption","hovered","onMouseDown","onMouseEnter","actionText","Fragment","label","children","selected","find","selectedOption","node"],"mappings":"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"}

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.d.ts

@@ -34,8 +34,8 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
     /**
      * Блокирует весь блок.
      *
-     * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select) или [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect), то свойство явно должно выставляться только через структуру `options`.
-     * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) не будет знать об актуальном состоянии
+     * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.
+     * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии
      * опции.
      */
     disabled?: boolean;

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomSelectOption.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAUxD,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,sJAa5B,uBAAuB,sBA8CzB,CAAC"}
+{"version":3,"file":"CustomSelectOption.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAWxD,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,sJAa5B,uBAAuB,sBAiDzB,CAAC"}

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js

@@ -18,6 +18,7 @@ const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _Footnote = require("../Typography/Footnote/Footnote");
 const _Paragraph = require("../Typography/Paragraph/Paragraph");
+const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 const sizeYClassNames = {
     none: "vkuiCustomSelectOption--sizeY-none",
     ['regular']: "vkuiCustomSelectOption--sizeY-regular"
@@ -61,7 +62,7 @@ const CustomSelectOption = (_param)=>{
         className: "vkuiCustomSelectOption__children"
     }, children), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiCustomSelectOption__description"
-    }, description)), /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, " "), description)), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCustomSelectOption__after"
     }, (0, _vkjs.hasReactNode)(after) && /*#__PURE__*/ _react.createElement("div", null, after), selected && /*#__PURE__*/ _react.createElement(_icons.Icon16Done, {
         className: "vkuiCustomSelectOption__selectedIcon"