npm - @vkontakte/vkui - Versions diffs - 6.7.0 → 6.7.1 - Mend

@vkontakte/vkui 6.7.0 → 6.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce, noop } from '@vkontakte/vkjs';\nimport { getWindow, isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useCustomEnsuredControl } from '../../../hooks/useEnsuredControl';\nimport { useGlobalOnClickOutside } from '../../../hooks/useGlobalOnClickOutside';\nimport { useStableCallback } from '../../../hooks/useStableCallback';\nimport { contains, getActiveElementByAnotherElement } from '../../dom';\nimport { useIsomorphicLayoutEffect } from '../../useIsomorphicLayoutEffect';\nimport { autoUpdateFloatingElement, useFloating } from '../adapters';\nimport { convertFloatingDataToReactCSSProperties } from '../functions';\nimport { type UseFloatingOptions } from '../types/common';\nimport { DEFAULT_TRIGGER } from './constants';\nimport type {\n FloatingProps,\n ReferenceProps,\n ShownChangeReason,\n UseFloatingWithInteractionsProps,\n UseFloatingWithInteractionsReturn,\n} from './types';\nimport { useResolveTriggerType } from './useResolveTriggerType';\n\ntype LocalState = { shown: boolean; reason?: ShownChangeReason };\n\nconst whileElementsMounted: UseFloatingOptions['whileElementsMounted'] = (...args) =>\n /* istanbul ignore next: не знаю как проверить /\n autoUpdateFloatingElement(...args, { elementResize: true });\n\n/\n @private\n /\nexport const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>({\n trigger = DEFAULT_TRIGGER,\n\n // UseFloating\n placement: placementProp = 'bottom',\n middlewares,\n hoverDelay = 0,\n closeAfterClick = false,\n\n // disables\n disabled = false,\n disableInteractive = false,\n disableCloseOnClickOutside = false,\n disableCloseOnEscKey = false,\n\n // uncontrolled\n defaultShown = false,\n\n // controlled\n shown: shownProp,\n onShownChange: onShownChangeProp,\n onShownChanged: onShownChangedProp,\n}: UseFloatingWithInteractionsProps): UseFloatingWithInteractionsReturn<T> => {\n const memoizedValue = React.useMemo<LocalState \| undefined>(\n () => (shownProp !== undefined ? { shown: shownProp } : undefined),\n [shownProp],\n );\n const [shownLocalState, setShownLocalState] = useCustomEnsuredControl<LocalState>({\n value: memoizedValue,\n disabled,\n defaultValue: { shown: defaultShown },\n onChange: useStableCallback(({ shown, reason }) => {\n if (onShownChangeProp) {\n onShownChangeProp(shown, reason);\n }\n }),\n });\n const onShownChanged = useStableCallback(onShownChangedProp ? onShownChangedProp : noop);\n const [shownFinalState, setShownFinalState] = React.useState(() => shownLocalState.shown);\n const [willBeHide, setWillBeHide] = React.useState(false);\n\n const hasCSSAnimation = React.useRef(false);\n\n const blockMouseEnterRef = React.useRef(false);\n const blockFocusRef = React.useRef(false);\n const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const handleCloseOnReferenceClickOutsideDisabled =\n disabled \|\| disableCloseOnClickOutside \|\| willBeHide \|\| !shownLocalState.shown;\n const handleCloseOnFloatingClickOutsideDisabled =\n disableInteractive \|\| handleCloseOnReferenceClickOutsideDisabled;\n\n const { triggerOnFocus, triggerOnClick, triggerOnHover } = useResolveTriggerType(trigger);\n\n // Библиотека `floating-ui`\n const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({\n strategy: 'fixed',\n placement: placementProp,\n middleware: middlewares,\n whileElementsMounted,\n });\n\n const commitShownLocalState = React.useCallback(\n (nextShown: boolean, reason: ShownChangeReason) => {\n setShownLocalState((prevState) => {\n if (prevState.shown !== nextShown \|\| prevState.reason !== reason) {\n return {\n shown: nextShown,\n reason,\n };\n }\n / istanbul ignore next: страховка, если вдруг на момент вызова обновления состояния, оно уже будет актуальным /\n return prevState;\n });\n },\n [setShownLocalState],\n );\n\n const [mouseEnterDelay, mouseLeaveDelay] =\n typeof hoverDelay === 'number' ? [hoverDelay, hoverDelay] : hoverDelay;\n\n const showWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(true, 'hover'), mouseEnterDelay),\n [mouseEnterDelay, commitShownLocalState],\n );\n\n const hideWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(false, 'hover'), mouseLeaveDelay),\n [mouseLeaveDelay, commitShownLocalState],\n );\n\n const handleFocusOnReference = useStableCallback(() => {\n // Повторный вызов события фокуса - следствие клика на reference-элемент\n if (shownLocalState.shown) {\n commitShownLocalState(false, 'focus');\n return;\n }\n if (blockFocusRef.current) {\n / istanbul ignore next: в Jest не воспроизводится баг на вебе (cм. onRestoreFocus) /\n blockFocusRef.current = false;\n return;\n }\n\n commitShownLocalState(true, 'focus');\n });\n\n const handleBlurOnReference = useStableCallback((event: React.FocusEvent) => {\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (!shownLocalState.shown) {\n clearTimeout(blurTimeoutRef.current);\n return;\n }\n\n const relatedTarget = event.relatedTarget;\n blurTimeoutRef.current = setTimeout(function waitWindowBlurFire() {\n const reference = refs.reference.current;\n // Если пользователь покинул текущее окно в открытом состоянии, то\n // не закрываем всплывающий элемент.\n / istanbul ignore if: не умеем симулировать уход из текущего окна /\n if (!relatedTarget && getActiveElementByAnotherElement(reference) === reference) {\n / istanbul ignore next /\n return;\n }\n\n // Если пользователь нажал на всплывающий элемент, то не закрываем всплывающий элемент.\n // Note: для этого элемент должен быть фокусируемый (например, за счёт `tabindex=\"-1\"`).\n if (contains(refs.floating.current, relatedTarget) \|\| contains(reference, relatedTarget)) {\n return;\n }\n\n commitShownLocalState(false, 'focus');\n });\n });\n\n const handleClickOnReference = useStableCallback(() => {\n // Предыдущий триггер (фокус) уже вызвал открытие/закрытие всплывающего окна, игнорируем вызов\n if (shownLocalState.reason === 'focus') {\n commitShownLocalState(shownLocalState.shown, 'click');\n return;\n }\n commitShownLocalState(!shownLocalState.shown, 'click');\n });\n\n const handleClickOnReferenceForOnlyClose = useStableCallback(() => {\n blockMouseEnterRef.current = true;\n commitShownLocalState(false, 'click');\n });\n\n const handleMouseEnterOnBoth = useStableCallback((event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n if (!blockMouseEnterRef.current && !shownLocalState.shown) {\n showWithDelay();\n }\n });\n\n const handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (triggerOnHover) {\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n hideWithDelay();\n }\n },\n );\n\n const handleFloatingAnimationStart = () => {\n hasCSSAnimation.current = true;\n };\n\n const handleFloatingAnimationEnd = () => {\n if (willBeHide) {\n setShownFinalState(false);\n setWillBeHide(false);\n onShownChanged(false, shownLocalState.reason);\n }\n };\n\n const handleOnClose = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'callback');\n }, [commitShownLocalState]);\n\n const handleRestoreFocus = React.useCallback(\n () => (triggerOnFocus ? blockFocusRef.current : true),\n [triggerOnFocus],\n );\n\n const handleEscapeKeyDown = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'escape-key');\n }, [commitShownLocalState]);\n\n const handleClickOutside = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'click-outside');\n }, [commitShownLocalState]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n handleCloseOnReferenceClickOutsideDisabled ? null : refs.reference,\n handleCloseOnFloatingClickOutsideDisabled ? null : refs.floating,\n );\n\n useIsomorphicLayoutEffect(\n /\n Если пользователь покинул активное окно и:\n * 1. целевой элемент был в состоянии фокуса;\n * 2. всплывающий элемент был закрытом состоянии;\n * то фокус должен быть заблокирован, когда пользователь вернётся обратно. Иначе покажется\n * всплывающий элемент.\n /\n function setGlobalBlurForTriggerOnFocus() {\n if (!triggerOnFocus \|\| !refs.reference.current) {\n return;\n }\n\n const handleGlobalBlur = () => {\n / istanbul ignore next /\n const reference = refs.reference.current;\n / istanbul ignore if: не умеем симулировать уход из текущего окна /\n if (\n !shownLocalState.shown &&\n isHTMLElement(reference) &&\n reference === getActiveElementByAnotherElement(reference)\n ) {\n / istanbul ignore next */\n blockFocusRef.current = true;\n }\n };\n\n const win = getWindow(refs.reference.current);\n win.addEventListener('blur', handleGlobalBlur);\n return () => {\n win.removeEventListener('blur', handleGlobalBlur);\n };\n },\n [triggerOnFocus, refs.reference, shownLocalState],\n );\n\n useIsomorphicLayoutEffect(\n function resolveShownStates() {\n if (willBeHide \|\| shownLocalState.shown === shownFinalState) {\n return;\n }\n\n if (shownLocalState.shown) {\n setShownFinalState(true);\n onShownChanged(true, shownLocalState.reason);\n } else if (hasCSSAnimation.current && !willBeHide) {\n setWillBeHide(true);\n } else {\n setShownFinalState(false);\n }\n\n return () => {\n clearTimeout(blurTimeoutRef.current);\n };\n },\n [shownLocalState, shownFinalState, willBeHide, onShownChanged],\n );\n\n const referencePropsRef = React.useRef<ReferenceProps>({});\n const floatingPropsRef = React.useRef<FloatingProps>({ style: {} });\n\n if (shownFinalState) {\n floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(\n strategy,\n x,\n y,\n undefined,\n middlewareData,\n );\n\n if (disableInteractive) {\n floatingPropsRef.current.style.pointerEvents = 'none';\n }\n }\n\n if (triggerOnFocus) {\n referencePropsRef.current.onFocus = handleFocusOnReference;\n referencePropsRef.current.onBlur = handleBlurOnReference;\n }\n\n if (triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReference;\n }\n\n if (triggerOnHover) {\n referencePropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n\n if (closeAfterClick && !triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReferenceForOnlyClose;\n }\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n }\n }\n\n if (triggerOnHover \|\| triggerOnFocus) {\n referencePropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n }\n }\n\n if (shownFinalState) {\n floatingPropsRef.current.onAnimationStart = handleFloatingAnimationStart;\n floatingPropsRef.current.onAnimationEnd = handleFloatingAnimationEnd;\n }\n\n return {\n placement,\n shown: shownFinalState,\n willBeHide,\n refs,\n referenceProps: referencePropsRef.current,\n floatingProps: floatingPropsRef.current,\n middlewareData,\n onClose: handleOnClose,\n // FocusTrap уже определяет нажатие на ESC, поэтому название события содержит конкретный код\n // кнопки вместо просто onKeyDown.\n onEscapeKeyDown: !shownFinalState \|\| disableCloseOnEscKey ? undefined : handleEscapeKeyDown,\n // [Обход баги с FocusTrap]\n //\n // Если сфокусироваться на целевой элемент через нажатие, а потом нажать в область за пределами\n // целевого и всплывающего элемента, то появляется моргание из-за того, что FocusTrap\n // восстанавливает фокус, из-за чего всплывающий элемент снова показывается за счёт\n // `handleFocusOnReference`, а потом скрывается за счёт `handleBlurOnReference`.\n onRestoreFocus: handleRestoreFocus,\n };\n};\n"],"names":["useFloatingWithInteractions","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","trigger","DEFAULT_TRIGGER","placement","placementProp","middlewares","hoverDelay","closeAfterClick","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","onShownChangeProp","onShownChanged","onShownChangedProp","memoizedValue","React","useMemo","undefined","shownLocalState","setShownLocalState","useCustomEnsuredControl","value","defaultValue","onChange","useStableCallback","reason","noop","shownFinalState","setShownFinalState","useState","willBeHide","setWillBeHide","hasCSSAnimation","useRef","blockMouseEnterRef","blockFocusRef","blurTimeoutRef","handleCloseOnReferenceClickOutsideDisabled","handleCloseOnFloatingClickOutsideDisabled","triggerOnFocus","triggerOnClick","triggerOnHover","useResolveTriggerType","x","y","strategy","refs","middlewareData","useFloating","middleware","commitShownLocalState","useCallback","nextShown","prevState","mouseEnterDelay","mouseLeaveDelay","showWithDelay","debounce","hideWithDelay","handleFocusOnReference","current","handleBlurOnReference","event","clearTimeout","relatedTarget","setTimeout","waitWindowBlurFire","reference","getActiveElementByAnotherElement","contains","floating","handleClickOnReference","handleClickOnReferenceForOnlyClose","handleMouseEnterOnBoth","currentTarget","cancel","handleMouseLeaveOnBothForHoverAndFocusStates","handleFloatingAnimationStart","handleFloatingAnimationEnd","handleOnClose","handleRestoreFocus","handleEscapeKeyDown","handleClickOutside","useGlobalOnClickOutside","useIsomorphicLayoutEffect","setGlobalBlurForTriggerOnFocus","handleGlobalBlur","isHTMLElement","win","getWindow","addEventListener","removeEventListener","resolveShownStates","referencePropsRef","floatingPropsRef","style","convertFloatingDataToReactCSSProperties","pointerEvents","onFocus","onBlur","onClick","onMouseOver","onMouseLeave","onAnimationStart","onAnimationEnd","referenceProps","floatingProps","onClose","onEscapeKeyDown","onRestoreFocus"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts"],"sourcesContent":["import * as React from 'react';\nimport { debounce, noop } from '@vkontakte/vkjs';\nimport { getWindow, isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useCustomEnsuredControl } from '../../../hooks/useEnsuredControl';\nimport { useGlobalOnClickOutside } from '../../../hooks/useGlobalOnClickOutside';\nimport { useStableCallback } from '../../../hooks/useStableCallback';\nimport { contains, getActiveElementByAnotherElement } from '../../dom';\nimport { useIsomorphicLayoutEffect } from '../../useIsomorphicLayoutEffect';\nimport { autoUpdateFloatingElement, useFloating } from '../adapters';\nimport { convertFloatingDataToReactCSSProperties } from '../functions';\nimport { type UseFloatingOptions } from '../types/common';\nimport { DEFAULT_TRIGGER } from './constants';\nimport type {\n FloatingProps,\n ReferenceProps,\n ShownChangeReason,\n UseFloatingWithInteractionsProps,\n UseFloatingWithInteractionsReturn,\n} from './types';\nimport { useResolveTriggerType } from './useResolveTriggerType';\n\ntype LocalState = { shown: boolean; reason?: ShownChangeReason };\n\nconst whileElementsMounted: UseFloatingOptions['whileElementsMounted'] = (...args) =>\n /* istanbul ignore next: не знаю как проверить /\n autoUpdateFloatingElement(...args, { elementResize: true });\n\n/\n @private\n /\nexport const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>({\n trigger = DEFAULT_TRIGGER,\n\n // UseFloating\n placement: placementProp = 'bottom',\n middlewares,\n hoverDelay = 0,\n closeAfterClick = false,\n\n // disables\n disabled = false,\n disableInteractive = false,\n disableCloseOnClickOutside = false,\n disableCloseOnEscKey = false,\n\n // uncontrolled\n defaultShown = false,\n\n // controlled\n shown: shownProp,\n onShownChange: onShownChangeProp,\n onShownChanged: onShownChangedProp,\n}: UseFloatingWithInteractionsProps): UseFloatingWithInteractionsReturn<T> => {\n const memoizedValue = React.useMemo<LocalState \| undefined>(\n () => (shownProp !== undefined ? { shown: shownProp } : undefined),\n [shownProp],\n );\n const [shownLocalState, setShownLocalState] = useCustomEnsuredControl<LocalState>({\n value: memoizedValue,\n disabled,\n defaultValue: { shown: defaultShown },\n onChange: useStableCallback(({ shown, reason }) => {\n if (onShownChangeProp) {\n onShownChangeProp(shown, reason);\n }\n }),\n });\n const onShownChanged = useStableCallback(onShownChangedProp ? onShownChangedProp : noop);\n const [shownFinalState, setShownFinalState] = React.useState(() => shownLocalState.shown);\n const [willBeHide, setWillBeHide] = React.useState(false);\n\n const hasCSSAnimation = React.useRef(false);\n\n const blockMouseEnterRef = React.useRef(false);\n const blockFocusRef = React.useRef(false);\n const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const handleCloseOnReferenceClickOutsideDisabled =\n disabled \|\| disableCloseOnClickOutside \|\| willBeHide \|\| !shownLocalState.shown;\n const handleCloseOnFloatingClickOutsideDisabled =\n disableInteractive \|\| handleCloseOnReferenceClickOutsideDisabled;\n\n const { triggerOnFocus, triggerOnClick, triggerOnHover } = useResolveTriggerType(trigger);\n\n // Библиотека `floating-ui`\n const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({\n strategy: 'fixed',\n placement: placementProp,\n middleware: middlewares,\n whileElementsMounted,\n });\n\n const commitShownLocalState = React.useCallback(\n (nextShown: boolean, reason: ShownChangeReason) => {\n setShownLocalState((prevState) => {\n if (prevState.shown !== nextShown \|\| prevState.reason !== reason) {\n return {\n shown: nextShown,\n reason,\n };\n }\n / istanbul ignore next: страховка, если вдруг на момент вызова обновления состояния, оно уже будет актуальным /\n return prevState;\n });\n },\n [setShownLocalState],\n );\n\n const [mouseEnterDelay, mouseLeaveDelay] =\n typeof hoverDelay === 'number' ? [hoverDelay, hoverDelay] : hoverDelay;\n\n const showWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(true, 'hover'), mouseEnterDelay),\n [mouseEnterDelay, commitShownLocalState],\n );\n\n const hideWithDelay = React.useMemo(\n () => debounce(() => commitShownLocalState(false, 'hover'), mouseLeaveDelay),\n [mouseLeaveDelay, commitShownLocalState],\n );\n\n const handleFocusOnReference = useStableCallback(() => {\n // Повторный вызов события фокуса - следствие клика на reference-элемент\n if (shownLocalState.shown) {\n if (!closeAfterClick && shownLocalState.reason === 'hover') {\n return;\n }\n commitShownLocalState(false, 'focus');\n return;\n }\n if (blockFocusRef.current) {\n / istanbul ignore next: в Jest не воспроизводится баг на вебе (cм. onRestoreFocus) /\n blockFocusRef.current = false;\n return;\n }\n\n commitShownLocalState(true, 'focus');\n });\n\n const handleBlurOnReference = useStableCallback((event: React.FocusEvent) => {\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (!shownLocalState.shown) {\n clearTimeout(blurTimeoutRef.current);\n return;\n }\n\n const relatedTarget = event.relatedTarget;\n blurTimeoutRef.current = setTimeout(function waitWindowBlurFire() {\n const reference = refs.reference.current;\n // Если пользователь покинул текущее окно в открытом состоянии, то\n // не закрываем всплывающий элемент.\n / istanbul ignore if: не умеем симулировать уход из текущего окна /\n if (!relatedTarget && getActiveElementByAnotherElement(reference) === reference) {\n / istanbul ignore next /\n return;\n }\n\n // Если пользователь нажал на всплывающий элемент, то не закрываем всплывающий элемент.\n // Note: для этого элемент должен быть фокусируемый (например, за счёт `tabindex=\"-1\"`).\n if (contains(refs.floating.current, relatedTarget) \|\| contains(reference, relatedTarget)) {\n return;\n }\n\n commitShownLocalState(false, 'focus');\n });\n });\n\n const handleClickOnReference = useStableCallback(() => {\n // Предыдущий триггер (фокус) уже вызвал открытие/закрытие всплывающего окна, игнорируем вызов\n if (shownLocalState.reason === 'focus') {\n commitShownLocalState(shownLocalState.shown, 'click');\n return;\n }\n commitShownLocalState(!shownLocalState.shown, 'click');\n });\n\n const handleClickOnReferenceForOnlyClose = useStableCallback(() => {\n blockMouseEnterRef.current = true;\n commitShownLocalState(false, 'click');\n });\n\n const handleMouseEnterOnBoth = useStableCallback((event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n if (!blockMouseEnterRef.current && !shownLocalState.shown) {\n showWithDelay();\n }\n });\n\n const handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n if (willBeHide && event.currentTarget === refs.floating.current) {\n return;\n }\n\n blockFocusRef.current = false;\n blockMouseEnterRef.current = false;\n\n if (triggerOnHover) {\n showWithDelay.cancel();\n hideWithDelay.cancel();\n\n hideWithDelay();\n }\n },\n );\n\n const handleFloatingAnimationStart = () => {\n hasCSSAnimation.current = true;\n };\n\n const handleFloatingAnimationEnd = () => {\n if (willBeHide) {\n setShownFinalState(false);\n setWillBeHide(false);\n onShownChanged(false, shownLocalState.reason);\n }\n };\n\n const handleOnClose = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'callback');\n }, [commitShownLocalState]);\n\n const handleRestoreFocus = React.useCallback(\n () => (triggerOnFocus ? blockFocusRef.current : true),\n [triggerOnFocus],\n );\n\n const handleEscapeKeyDown = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'escape-key');\n }, [commitShownLocalState]);\n\n const handleClickOutside = React.useCallback(() => {\n blockFocusRef.current = true;\n commitShownLocalState(false, 'click-outside');\n }, [commitShownLocalState]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n handleCloseOnReferenceClickOutsideDisabled ? null : refs.reference,\n handleCloseOnFloatingClickOutsideDisabled ? null : refs.floating,\n );\n\n useIsomorphicLayoutEffect(\n /\n Если пользователь покинул активное окно и:\n * 1. целевой элемент был в состоянии фокуса;\n * 2. всплывающий элемент был закрытом состоянии;\n * то фокус должен быть заблокирован, когда пользователь вернётся обратно. Иначе покажется\n * всплывающий элемент.\n /\n function setGlobalBlurForTriggerOnFocus() {\n if (!triggerOnFocus \|\| !refs.reference.current) {\n return;\n }\n\n const handleGlobalBlur = () => {\n / istanbul ignore next /\n const reference = refs.reference.current;\n / istanbul ignore if: не умеем симулировать уход из текущего окна /\n if (\n !shownLocalState.shown &&\n isHTMLElement(reference) &&\n reference === getActiveElementByAnotherElement(reference)\n ) {\n / istanbul ignore next */\n blockFocusRef.current = true;\n }\n };\n\n const win = getWindow(refs.reference.current);\n win.addEventListener('blur', handleGlobalBlur);\n return () => {\n win.removeEventListener('blur', handleGlobalBlur);\n };\n },\n [triggerOnFocus, refs.reference, shownLocalState],\n );\n\n useIsomorphicLayoutEffect(\n function resolveShownStates() {\n if (willBeHide \|\| shownLocalState.shown === shownFinalState) {\n return;\n }\n\n if (shownLocalState.shown) {\n setShownFinalState(true);\n onShownChanged(true, shownLocalState.reason);\n } else if (hasCSSAnimation.current && !willBeHide) {\n setWillBeHide(true);\n } else {\n setShownFinalState(false);\n }\n\n return () => {\n clearTimeout(blurTimeoutRef.current);\n };\n },\n [shownLocalState, shownFinalState, willBeHide, onShownChanged],\n );\n\n const referencePropsRef = React.useRef<ReferenceProps>({});\n const floatingPropsRef = React.useRef<FloatingProps>({ style: {} });\n\n if (shownFinalState) {\n floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(\n strategy,\n x,\n y,\n undefined,\n middlewareData,\n );\n\n if (disableInteractive) {\n floatingPropsRef.current.style.pointerEvents = 'none';\n }\n }\n\n if (triggerOnFocus) {\n referencePropsRef.current.onFocus = handleFocusOnReference;\n referencePropsRef.current.onBlur = handleBlurOnReference;\n }\n\n if (triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReference;\n }\n\n if (triggerOnHover) {\n referencePropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n\n if (closeAfterClick && !triggerOnClick) {\n referencePropsRef.current.onClick = handleClickOnReferenceForOnlyClose;\n }\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseOver = handleMouseEnterOnBoth;\n }\n }\n\n if (triggerOnHover \|\| triggerOnFocus) {\n referencePropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n\n if (!disableInteractive) {\n floatingPropsRef.current.onMouseLeave = handleMouseLeaveOnBothForHoverAndFocusStates;\n }\n }\n\n if (shownFinalState) {\n floatingPropsRef.current.onAnimationStart = handleFloatingAnimationStart;\n floatingPropsRef.current.onAnimationEnd = handleFloatingAnimationEnd;\n }\n\n return {\n placement,\n shown: shownFinalState,\n willBeHide,\n refs,\n referenceProps: referencePropsRef.current,\n floatingProps: floatingPropsRef.current,\n middlewareData,\n onClose: handleOnClose,\n // FocusTrap уже определяет нажатие на ESC, поэтому название события содержит конкретный код\n // кнопки вместо просто onKeyDown.\n onEscapeKeyDown: !shownFinalState \|\| disableCloseOnEscKey ? undefined : handleEscapeKeyDown,\n // [Обход баги с FocusTrap]\n //\n // Если сфокусироваться на целевой элемент через нажатие, а потом нажать в область за пределами\n // целевого и всплывающего элемента, то появляется моргание из-за того, что FocusTrap\n // восстанавливает фокус, из-за чего всплывающий элемент снова показывается за счёт\n // `handleFocusOnReference`, а потом скрывается за счёт `handleBlurOnReference`.\n onRestoreFocus: handleRestoreFocus,\n };\n};\n"],"names":["useFloatingWithInteractions","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","trigger","DEFAULT_TRIGGER","placement","placementProp","middlewares","hoverDelay","closeAfterClick","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","onShownChangeProp","onShownChanged","onShownChangedProp","memoizedValue","React","useMemo","undefined","shownLocalState","setShownLocalState","useCustomEnsuredControl","value","defaultValue","onChange","useStableCallback","reason","noop","shownFinalState","setShownFinalState","useState","willBeHide","setWillBeHide","hasCSSAnimation","useRef","blockMouseEnterRef","blockFocusRef","blurTimeoutRef","handleCloseOnReferenceClickOutsideDisabled","handleCloseOnFloatingClickOutsideDisabled","triggerOnFocus","triggerOnClick","triggerOnHover","useResolveTriggerType","x","y","strategy","refs","middlewareData","useFloating","middleware","commitShownLocalState","useCallback","nextShown","prevState","mouseEnterDelay","mouseLeaveDelay","showWithDelay","debounce","hideWithDelay","handleFocusOnReference","current","handleBlurOnReference","event","clearTimeout","relatedTarget","setTimeout","waitWindowBlurFire","reference","getActiveElementByAnotherElement","contains","floating","handleClickOnReference","handleClickOnReferenceForOnlyClose","handleMouseEnterOnBoth","currentTarget","cancel","handleMouseLeaveOnBothForHoverAndFocusStates","handleFloatingAnimationStart","handleFloatingAnimationEnd","handleOnClose","handleRestoreFocus","handleEscapeKeyDown","handleClickOutside","useGlobalOnClickOutside","useIsomorphicLayoutEffect","setGlobalBlurForTriggerOnFocus","handleGlobalBlur","isHTMLElement","win","getWindow","addEventListener","removeEventListener","resolveShownStates","referencePropsRef","floatingPropsRef","style","convertFloatingDataToReactCSSProperties","pointerEvents","onFocus","onBlur","onClick","onMouseOver","onMouseLeave","onAnimationStart","onAnimationEnd","referenceProps","floatingProps","onClose","onEscapeKeyDown","onRestoreFocus"],"mappings":"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"}

package/dist/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,UAAU,CAAC;~~AAc1E~~,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,KAAG,KAAK,CAAC,~~SAsV3B~~,CAAC"}
1	+ {"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,KAAK,gBAAgB,EAA2B,MAAM,UAAU,CAAC;AAmB1E,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,KAAG,KAAK,CAAC,SAgW3B,CAAC"}

package/dist/components/BaseGallery/CarouselBase/CarouselBase.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import { ScrollArrow } from '../../ScrollArrow/ScrollArrow';
 import { Touch } from '../../Touch/Touch';
-import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDES_MANAGER_STATE } from './constants';
+import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDE_THRESHOLD, SLIDES_MANAGER_STATE } from './constants';
 import { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';
 import { useSlideAnimation } from './hooks';
 const stylesBullets = {
@@ -209,11 +209,20 @@ export const CarouselBase = (_param)=>{
         align,
         slideWidth
     ]);
+    const calculateMinDeltaXToSlide = ()=>{
+        return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;
+    };
     const slideLeft = (event)=>{
+        if (slideIndex > 0) {
+            shiftXCurrentRef.current += calculateMinDeltaXToSlide();
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange((slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length);
         onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(event);
     };
     const slideRight = (event)=>{
+        if (slideIndex < slidesManager.current.slides.length - 1) {
+            shiftXCurrentRef.current -= calculateMinDeltaXToSlide();
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange((slideIndex + 1) % slidesManager.current.slides.length);
         onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(event);
     };

package/dist/components/BaseGallery/CarouselBase/CarouselBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../../hooks/useGlobalEventListener';\nimport { useMutationObserver } from '../../../hooks/useMutationObserver';\nimport { useDOM } from '../../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ScrollArrow } from '../../ScrollArrow/ScrollArrow';\nimport { type CustomTouchEvent, Touch } from '../../Touch/Touch';\nimport { type BaseGalleryProps, type GallerySlidesState } from '../types';\nimport { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDES_MANAGER_STATE } from './constants';\nimport { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';\nimport { useSlideAnimation } from './hooks';\nimport type { ControlElementsState, SlidesManagerState } from './types';\nimport styles from '../BaseGallery.module.css';\n\nconst stylesBullets = {\n dark: styles['BaseGallery__bullets--dark'],\n light: styles['BaseGallery__bullets--light'],\n};\n\nconst warn = warnOnce('Gallery');\n\nexport const CarouselBase = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize = 'l',\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement \| null>>({});\n const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n const layerRef = React.useRef<HTMLDivElement>(null);\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> \| null>(null);\n const shiftXCurrentRef = React.useRef<number>(0);\n const shiftXDeltaRef = React.useRef<number>(0);\n const initialized = React.useRef<boolean>(false);\n const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();\n\n const [controlElementsState, setControlElementsState] =\n React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);\n\n const { window } = useDOM();\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n const transformCssStyles = (shiftX: number, animation = false) => {\n slidesManager.current.loopPoints.forEach((loopPoint) => {\n const { target, index } = loopPoint;\n const slide = slidesStore.current[index];\n if (slide) {\n slide.style.transform = `translate3d(${target(shiftX)}px, 0, 0)`;\n }\n });\n\n if (layerRef.current) {\n layerRef.current.style.transform = `translate3d(${shiftX}px, 0, 0)`;\n layerRef.current.style.transition = animation\n ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)`\n : '';\n }\n };\n\n const requestTransform = (shiftX: number, animation = false) => {\n const { snaps, contentSize, slides } = slidesManager.current;\n\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (shiftX > snaps[0]) {\n shiftXCurrentRef.current = -contentSize + snaps[0];\n shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;\n }\n const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;\n\n if (shiftX <= -lastPoint) {\n shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];\n }\n transformCssStyles(shiftX, animation);\n });\n };\n\n const initializeSlides = () => {\n if (!rootRef.current \|\| !viewportRef.current) {\n return;\n }\n let localSlides =\n React.Children.map(children, (_item, i): GallerySlidesState => {\n const elem = slidesStore.current[i] \|\| { offsetLeft: 0, offsetWidth: 0 };\n return { coordX: elem.offsetLeft, width: elem.offsetWidth };\n }) \|\| [];\n\n const containerWidth = rootRef.current.offsetWidth;\n const viewportOffsetWidth = viewportRef.current.offsetWidth;\n const layerWidth = localSlides.reduce((val, slide) => slide.width + val, 0);\n\n if (process.env.NODE_ENV === 'development') {\n let remainingWidth = containerWidth;\n let slideIndex = 0;\n\n while (remainingWidth > 0 && slideIndex < localSlides.length) {\n remainingWidth -= localSlides[slideIndex].width;\n slideIndex++;\n }\n if (remainingWidth <= 0 && slideIndex === localSlides.length) {\n warn(\n 'Ширины слайдов недостаточно для корректной работы свойства \"looped\". Пожалуйста, сделайте её больше.\"',\n );\n }\n }\n if (align === 'center') {\n const firstSlideShift = (containerWidth - localSlides[0].width) / 2;\n localSlides = localSlides.map((item) => {\n return {\n width: item.width,\n coordX: item.coordX - firstSlideShift,\n };\n });\n }\n\n slidesManager.current = {\n ...slidesManager.current,\n viewportOffsetWidth,\n slides: localSlides,\n isFullyVisible: layerWidth <= containerWidth,\n };\n\n const snaps = localSlides.map((_, index) =>\n calculateIndent(index, slidesManager.current, isCenterWithCustomWidth),\n );\n\n let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;\n if (align === 'center') {\n contentSize += snaps[0];\n }\n\n slidesManager.current.snaps = snaps;\n slidesManager.current.contentSize = contentSize;\n slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);\n\n setControlElementsState({\n canSlideLeft: !slidesManager.current.isFullyVisible,\n canSlideRight: !slidesManager.current.isFullyVisible,\n isDraggable: !(dragDisabled \|\| slidesManager.current.isFullyVisible),\n });\n\n shiftXCurrentRef.current = snaps[slideIndex];\n initialized.current = true;\n\n requestTransform(shiftXCurrentRef.current);\n };\n\n const onResize = () => {\n if (initialized.current) {\n initializeSlides();\n }\n };\n\n useGlobalEventListener(window, 'resize', onResize);\n\n useIsomorphicLayoutEffect(\n function performSlideChange() {\n if (!initialized.current) {\n return;\n }\n const { snaps, slides } = slidesManager.current;\n const indent = snaps[slideIndex];\n let startPoint = shiftXCurrentRef.current;\n\n /*\n Переключаемся с последнего элемента на первый\n * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) \"вперед\"\n * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения\n /\n if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {\n const distance =\n Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;\n\n addToAnimationQueue(\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress distance * -1;\n\n transformCssStyles(shiftX);\n\n if (shiftX <= snaps[snaps.length - 1] - slides[slides.length - 1].width) {\n requestAnimationFrame(() => {\n shiftXCurrentRef.current = indent;\n transformCssStyles(snaps[0]);\n });\n }\n }),\n );\n /*\n Переключаемся с первого слайда на последний\n * Для корректной анимации сначала задаем первым видимым слайдам смещение\n * В следующем кадре начинаем анимация прокрутки \"назад\"\n /\n } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {\n startPoint = indent - slides[slides.length - 1].width;\n\n addToAnimationQueue(() => {\n requestAnimationFrame(() => {\n const shiftX = indent - slides[slides.length - 1].width;\n transformCssStyles(shiftX);\n\n getAnimateFunction((progress) => {\n transformCssStyles(startPoint + progress slides[slides.length - 1].width);\n })();\n });\n });\n /*\n Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения\n /\n } else {\n addToAnimationQueue(() => {\n const distance = Math.abs(indent - startPoint);\n let direction = startPoint <= indent ? 1 : -1;\n\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress distance * direction;\n transformCssStyles(shiftX);\n })();\n });\n }\n\n startAnimation();\n\n shiftXCurrentRef.current = indent;\n },\n [slideIndex],\n );\n\n useMutationObserver(layerRef, initializeSlides);\n\n useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth]);\n\n const slideLeft = (event: React.MouseEvent) => {\n onChange?.(\n (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,\n );\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n onChange?.((slideIndex + 1) % slidesManager.current.slides.length);\n onNextClick?.(event);\n };\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (controlElementsState.isDraggable) {\n onDragStart?.(e);\n shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];\n shiftXDeltaRef.current = 0;\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n if (shiftXDeltaRef.current !== e.shiftX) {\n shiftXDeltaRef.current = e.shiftX;\n requestTransform(shiftXCurrentRef.current + shiftXDeltaRef.current);\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n let targetIndex = slideIndex;\n if (e.isSlide) {\n targetIndex = getTargetIndex(\n slidesManager.current.slides,\n slideIndex,\n shiftXCurrentRef.current,\n shiftXDeltaRef.current,\n );\n }\n onDragEnd?.(e, targetIndex);\n\n if (targetIndex !== slideIndex) {\n shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;\n onChange?.(targetIndex);\n } else {\n const initialShiftX = slidesManager.current.snaps[targetIndex];\n requestTransform(initialShiftX, true);\n }\n }\n };\n\n const setSlideRef = (slideRef: HTMLDivElement \| null, slideIndex: number) => {\n slidesStore.current[slideIndex] = slideRef;\n };\n\n const { canSlideLeft, canSlideRight, isDraggable } = controlElementsState;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['BaseGallery'],\n slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n isDraggable && styles['BaseGallery--draggable'],\n )}\n getRootRef={rootRef}\n >\n <Touch\n className={styles['BaseGallery__viewport']}\n onStartX={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n getRootRef={viewportRef}\n noSlideClick\n >\n <div className={styles['BaseGallery__layer']} ref={layerRef}>\n {React.Children.map(children, (item: React.ReactNode, i: number) => (\n <div\n className={styles['BaseGallery__slide']}\n key={`slide-${i}`}\n ref={(el) => setSlideRef(el, i)}\n >\n {item}\n </div>\n ))}\n </div>\n </Touch>\n\n {bullets && (\n <div\n aria-hidden\n className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n >\n {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n <div\n className={classNames(\n styles['BaseGallery__bullet'],\n index === slideIndex && styles['BaseGallery__bullet--active'],\n )}\n key={index}\n />\n ))}\n </div>\n )}\n\n {showArrows && hasPointer && canSlideLeft && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"left\"\n onClick={slideLeft}\n size={arrowSize}\n />\n )}\n {showArrows && hasPointer && canSlideRight && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"right\"\n onClick={slideRight}\n size={arrowSize}\n />\n )}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useMutationObserver","useDOM","useIsomorphicLayoutEffect","warnOnce","RootComponent","ScrollArrow","Touch","ANIMATION_DURATION","CONTROL_ELEMENTS_STATE","SLIDES_MANAGER_STATE","calculateIndent","getLoopPoints","getTargetIndex","useSlideAnimation","stylesBullets","dark","light","warn","CarouselBase","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","useRef","slidesManager","rootRef","viewportRef","layerRef","animationFrameRef","shiftXCurrentRef","shiftXDeltaRef","initialized","addToAnimationQueue","getAnimateFunction","startAnimation","controlElementsState","setControlElementsState","useState","window","hasPointer","isCenterWithCustomWidth","transformCssStyles","shiftX","animation","current","loopPoints","forEach","loopPoint","target","index","slide","style","transform","transition","requestTransform","snaps","contentSize","slides","cancelAnimationFrame","requestAnimationFrame","lastPoint","length","width","coordX","Math","abs","initializeSlides","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","containerWidth","viewportOffsetWidth","layerWidth","reduce","val","process","env","NODE_ENV","remainingWidth","firstSlideShift","item","isFullyVisible","_","canSlideLeft","canSlideRight","isDraggable","onResize","performSlideChange","indent","startPoint","distance","progress","direction","slideLeft","event","slideRight","onStart","e","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","targetIndex","isSlide","initialShiftX","setSlideRef","slideRef","baseClassName","className","onStartX","noSlideClick","div","ref","el","aria-hidden","onClick","size"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../../hooks/useGlobalEventListener';\nimport { useMutationObserver } from '../../../hooks/useMutationObserver';\nimport { useDOM } from '../../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ScrollArrow } from '../../ScrollArrow/ScrollArrow';\nimport { type CustomTouchEvent, Touch } from '../../Touch/Touch';\nimport { type BaseGalleryProps, type GallerySlidesState } from '../types';\nimport {\n ANIMATION_DURATION,\n CONTROL_ELEMENTS_STATE,\n SLIDE_THRESHOLD,\n SLIDES_MANAGER_STATE,\n} from './constants';\nimport { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';\nimport { useSlideAnimation } from './hooks';\nimport type { ControlElementsState, SlidesManagerState } from './types';\nimport styles from '../BaseGallery.module.css';\n\nconst stylesBullets = {\n dark: styles['BaseGallery__bullets--dark'],\n light: styles['BaseGallery__bullets--light'],\n};\n\nconst warn = warnOnce('Gallery');\n\nexport const CarouselBase = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize = 'l',\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement \| null>>({});\n const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n const layerRef = React.useRef<HTMLDivElement>(null);\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> \| null>(null);\n const shiftXCurrentRef = React.useRef<number>(0);\n const shiftXDeltaRef = React.useRef<number>(0);\n const initialized = React.useRef<boolean>(false);\n const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();\n\n const [controlElementsState, setControlElementsState] =\n React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);\n\n const { window } = useDOM();\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n const transformCssStyles = (shiftX: number, animation = false) => {\n slidesManager.current.loopPoints.forEach((loopPoint) => {\n const { target, index } = loopPoint;\n const slide = slidesStore.current[index];\n if (slide) {\n slide.style.transform = `translate3d(${target(shiftX)}px, 0, 0)`;\n }\n });\n\n if (layerRef.current) {\n layerRef.current.style.transform = `translate3d(${shiftX}px, 0, 0)`;\n layerRef.current.style.transition = animation\n ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)`\n : '';\n }\n };\n\n const requestTransform = (shiftX: number, animation = false) => {\n const { snaps, contentSize, slides } = slidesManager.current;\n\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (shiftX > snaps[0]) {\n shiftXCurrentRef.current = -contentSize + snaps[0];\n shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;\n }\n const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;\n\n if (shiftX <= -lastPoint) {\n shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];\n }\n transformCssStyles(shiftX, animation);\n });\n };\n\n const initializeSlides = () => {\n if (!rootRef.current \|\| !viewportRef.current) {\n return;\n }\n let localSlides =\n React.Children.map(children, (_item, i): GallerySlidesState => {\n const elem = slidesStore.current[i] \|\| { offsetLeft: 0, offsetWidth: 0 };\n return { coordX: elem.offsetLeft, width: elem.offsetWidth };\n }) \|\| [];\n\n const containerWidth = rootRef.current.offsetWidth;\n const viewportOffsetWidth = viewportRef.current.offsetWidth;\n const layerWidth = localSlides.reduce((val, slide) => slide.width + val, 0);\n\n if (process.env.NODE_ENV === 'development') {\n let remainingWidth = containerWidth;\n let slideIndex = 0;\n\n while (remainingWidth > 0 && slideIndex < localSlides.length) {\n remainingWidth -= localSlides[slideIndex].width;\n slideIndex++;\n }\n if (remainingWidth <= 0 && slideIndex === localSlides.length) {\n warn(\n 'Ширины слайдов недостаточно для корректной работы свойства \"looped\". Пожалуйста, сделайте её больше.\"',\n );\n }\n }\n if (align === 'center') {\n const firstSlideShift = (containerWidth - localSlides[0].width) / 2;\n localSlides = localSlides.map((item) => {\n return {\n width: item.width,\n coordX: item.coordX - firstSlideShift,\n };\n });\n }\n\n slidesManager.current = {\n ...slidesManager.current,\n viewportOffsetWidth,\n slides: localSlides,\n isFullyVisible: layerWidth <= containerWidth,\n };\n\n const snaps = localSlides.map((_, index) =>\n calculateIndent(index, slidesManager.current, isCenterWithCustomWidth),\n );\n\n let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;\n if (align === 'center') {\n contentSize += snaps[0];\n }\n\n slidesManager.current.snaps = snaps;\n slidesManager.current.contentSize = contentSize;\n slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);\n\n setControlElementsState({\n canSlideLeft: !slidesManager.current.isFullyVisible,\n canSlideRight: !slidesManager.current.isFullyVisible,\n isDraggable: !(dragDisabled \|\| slidesManager.current.isFullyVisible),\n });\n\n shiftXCurrentRef.current = snaps[slideIndex];\n initialized.current = true;\n\n requestTransform(shiftXCurrentRef.current);\n };\n\n const onResize = () => {\n if (initialized.current) {\n initializeSlides();\n }\n };\n\n useGlobalEventListener(window, 'resize', onResize);\n\n useIsomorphicLayoutEffect(\n function performSlideChange() {\n if (!initialized.current) {\n return;\n }\n const { snaps, slides } = slidesManager.current;\n const indent = snaps[slideIndex];\n let startPoint = shiftXCurrentRef.current;\n\n /*\n Переключаемся с последнего элемента на первый\n * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) \"вперед\"\n * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения\n /\n if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {\n const distance =\n Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;\n\n addToAnimationQueue(\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress distance * -1;\n\n transformCssStyles(shiftX);\n\n if (shiftX <= snaps[snaps.length - 1] - slides[slides.length - 1].width) {\n requestAnimationFrame(() => {\n shiftXCurrentRef.current = indent;\n transformCssStyles(snaps[0]);\n });\n }\n }),\n );\n /*\n Переключаемся с первого слайда на последний\n * Для корректной анимации сначала задаем первым видимым слайдам смещение\n * В следующем кадре начинаем анимация прокрутки \"назад\"\n /\n } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {\n startPoint = indent - slides[slides.length - 1].width;\n\n addToAnimationQueue(() => {\n requestAnimationFrame(() => {\n const shiftX = indent - slides[slides.length - 1].width;\n transformCssStyles(shiftX);\n\n getAnimateFunction((progress) => {\n transformCssStyles(startPoint + progress slides[slides.length - 1].width);\n })();\n });\n });\n /*\n Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения\n /\n } else {\n addToAnimationQueue(() => {\n const distance = Math.abs(indent - startPoint);\n let direction = startPoint <= indent ? 1 : -1;\n\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress distance * direction;\n transformCssStyles(shiftX);\n })();\n });\n }\n\n startAnimation();\n\n shiftXCurrentRef.current = indent;\n },\n [slideIndex],\n );\n\n useMutationObserver(layerRef, initializeSlides);\n\n useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth]);\n\n const calculateMinDeltaXToSlide = () => {\n return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;\n };\n\n const slideLeft = (event: React.MouseEvent) => {\n if (slideIndex > 0) {\n shiftXCurrentRef.current += calculateMinDeltaXToSlide();\n }\n onChange?.(\n (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,\n );\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n if (slideIndex < slidesManager.current.slides.length - 1) {\n shiftXCurrentRef.current -= calculateMinDeltaXToSlide();\n }\n onChange?.((slideIndex + 1) % slidesManager.current.slides.length);\n onNextClick?.(event);\n };\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (controlElementsState.isDraggable) {\n onDragStart?.(e);\n shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];\n shiftXDeltaRef.current = 0;\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n if (shiftXDeltaRef.current !== e.shiftX) {\n shiftXDeltaRef.current = e.shiftX;\n requestTransform(shiftXCurrentRef.current + shiftXDeltaRef.current);\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n let targetIndex = slideIndex;\n if (e.isSlide) {\n targetIndex = getTargetIndex(\n slidesManager.current.slides,\n slideIndex,\n shiftXCurrentRef.current,\n shiftXDeltaRef.current,\n );\n }\n onDragEnd?.(e, targetIndex);\n\n if (targetIndex !== slideIndex) {\n shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;\n onChange?.(targetIndex);\n } else {\n const initialShiftX = slidesManager.current.snaps[targetIndex];\n requestTransform(initialShiftX, true);\n }\n }\n };\n\n const setSlideRef = (slideRef: HTMLDivElement \| null, slideIndex: number) => {\n slidesStore.current[slideIndex] = slideRef;\n };\n\n const { canSlideLeft, canSlideRight, isDraggable } = controlElementsState;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['BaseGallery'],\n slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n isDraggable && styles['BaseGallery--draggable'],\n )}\n getRootRef={rootRef}\n >\n <Touch\n className={styles['BaseGallery__viewport']}\n onStartX={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n getRootRef={viewportRef}\n noSlideClick\n >\n <div className={styles['BaseGallery__layer']} ref={layerRef}>\n {React.Children.map(children, (item: React.ReactNode, i: number) => (\n <div\n className={styles['BaseGallery__slide']}\n key={`slide-${i}`}\n ref={(el) => setSlideRef(el, i)}\n >\n {item}\n </div>\n ))}\n </div>\n </Touch>\n\n {bullets && (\n <div\n aria-hidden\n className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n >\n {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n <div\n className={classNames(\n styles['BaseGallery__bullet'],\n index === slideIndex && styles['BaseGallery__bullet--active'],\n )}\n key={index}\n />\n ))}\n </div>\n )}\n\n {showArrows && hasPointer && canSlideLeft && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"left\"\n onClick={slideLeft}\n size={arrowSize}\n />\n )}\n {showArrows && hasPointer && canSlideRight && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"right\"\n onClick={slideRight}\n size={arrowSize}\n />\n )}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useMutationObserver","useDOM","useIsomorphicLayoutEffect","warnOnce","RootComponent","ScrollArrow","Touch","ANIMATION_DURATION","CONTROL_ELEMENTS_STATE","SLIDE_THRESHOLD","SLIDES_MANAGER_STATE","calculateIndent","getLoopPoints","getTargetIndex","useSlideAnimation","stylesBullets","dark","light","warn","CarouselBase","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","useRef","slidesManager","rootRef","viewportRef","layerRef","animationFrameRef","shiftXCurrentRef","shiftXDeltaRef","initialized","addToAnimationQueue","getAnimateFunction","startAnimation","controlElementsState","setControlElementsState","useState","window","hasPointer","isCenterWithCustomWidth","transformCssStyles","shiftX","animation","current","loopPoints","forEach","loopPoint","target","index","slide","style","transform","transition","requestTransform","snaps","contentSize","slides","cancelAnimationFrame","requestAnimationFrame","lastPoint","length","width","coordX","Math","abs","initializeSlides","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","containerWidth","viewportOffsetWidth","layerWidth","reduce","val","process","env","NODE_ENV","remainingWidth","firstSlideShift","item","isFullyVisible","_","canSlideLeft","canSlideRight","isDraggable","onResize","performSlideChange","indent","startPoint","distance","progress","direction","calculateMinDeltaXToSlide","slideLeft","event","slideRight","onStart","e","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","targetIndex","isSlide","initialShiftX","setSlideRef","slideRef","baseClassName","className","onStartX","noSlideClick","div","ref","el","aria-hidden","onClick","size"],"mappings":"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"}

package/dist/components/CustomSelect/CustomSelect.d.ts CHANGED Viewed

@@ -2,13 +2,23 @@ import * as React from 'react';
 import { type FilterFn } from '../../lib/select';
 import type { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
 import { type CustomSelectDropdownProps } from '../CustomSelectDropdown/CustomSelectDropdown';
+import { type CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
 import type { FormFieldProps } from '../FormField/FormField';
 import type { NativeSelectProps } from '../NativeSelect/NativeSelect';
 import type { SelectType } from '../Select/Select';
 import { type CustomSelectClearButtonProps } from './CustomSelectClearButton';
 import { type CustomSelectInputProps } from './CustomSelectInput';
-import type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';
-export type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };
+type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
+export interface CustomSelectOptionInterface {
+    value: SelectValue;
+    label: React.ReactElement | string;
+    disabled?: boolean;
+    [index: string]: any;
+}
+export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface> extends CustomSelectOptionProps {
+    option: T;
+}
+export type { CustomSelectClearButtonProps };
 export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, Omit<FormFieldProps, 'maxHeight'>, TrackerOptionsProps, Pick<CustomSelectDropdownProps, 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'>, Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {
     /**
      * ref на внутрений компонент input

package/dist/components/CustomSelect/CustomSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAM~~/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;~~AAEtD~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;~~AAEnD~~,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;~~AAQrF~~,~~OAAO~~,KAAK,~~EAAE~~,2BAA2B,EAAE,~~wBAAwB~~,EAAE,MAAM,~~SAAS,~~CAAC;~~AAiCrF~~,~~YAAY~~,EAAE,~~4BAA4B~~,EAAE,2BAA2B,EAAE,~~wBAAwB~~,EAAE,CAAC;~~AAEpG~~,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE,EACD,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;IAClF;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,~~CAosBjB~~"}
1	+ {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/CustomSelect/CustomSelect.js CHANGED Viewed

@@ -6,29 +6,67 @@ import * as React from 'react';
 import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useDOM } from '../../lib/dom';
 import { defaultFilterFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';
+import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import { CustomSelectClearButton } from './CustomSelectClearButton';
 import { CustomSelectInput } from './CustomSelectInput';
-import { calculateInputValueFromOptions, defaultRenderOptionFn, findIndexAfter, findIndexBefore, findSelectedIndex } from './helpers';
 const sizeYClassNames = {
     none: "vkuiCustomSelect--sizeY-none",
     compact: "vkuiCustomSelect--sizeY-compact"
 };
+const findIndexAfter = (options = [], startIndex = -1)=>{
+    if (startIndex >= options.length - 1) {
+        return -1;
+    }
+    return options.findIndex((option, i)=>i > startIndex && !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 (!option.disabled) {
+            result = i;
+            break;
+        }
+    }
+    return result;
+};
 const warn = warnOnce('CustomSelect');
 const checkOptionsValueType = (options)=>{
     if (new Set(options.map((item)=>typeof item.value)).size > 1) {
         warn('Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.', 'error');
     }
 };
+function defaultRenderOptionFn(_param) {
+    var { option } = _param, props = _object_without_properties(_param, [
+        "option"
+    ]);
+    return /*#__PURE__*/ _jsx(CustomSelectOption, _object_spread({}, props));
+}
 const handleOptionDown = (e)=>{
     e.preventDefault();
 };
+function findSelectedIndex(options = [], value, withClear) {
+    if (withClear && value === '') {
+        return -1;
+    }
+    var _options_findIndex;
+    return (_options_findIndex = options.findIndex((item)=>{
+        value = typeof item.value === 'number' ? Number(value) : value;
+        return item.value === value;
+    })) !== null && _options_findIndex !== void 0 ? _options_findIndex : -1;
+}
 const filter = (options, inputValue, filterFn)=>{
     return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
 };
@@ -83,14 +121,13 @@ const filter = (options, inputValue, filterFn)=>{
     const scrollBoxRef = React.useRef(null);
     const selectElRef = useExternRef(getRef);
     const optionsWrapperRef = React.useRef(null);
-    const selectInputRef = useExternRef(getSelectInputRef);
     const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
     const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+    const [inputValue, setInputValue] = React.useState('');
     const [nativeSelectValue, setNativeSelectValue] = React.useState(()=>{
         var _props_value, _ref;
         return (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : allowClearButton ? '' : undefined;
     });
-    const [inputValue, setInputValue] = React.useState(()=>calculateInputValueFromOptions(optionsProp, nativeSelectValue));
     const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
     const [options, setOptions] = React.useState(optionsProp);
     var _props_value;
@@ -208,6 +245,7 @@ const filter = (options, inputValue, filterFn)=>{
    *  Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
    */ const close = React.useCallback(()=>{
         resetKeyboardInput();
+        setInputValue('');
         setOpened(false);
         resetFocusedOption();
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -218,8 +256,8 @@ const filter = (options, inputValue, filterFn)=>{
     ]);
     const selectOption = React.useCallback((index)=>{
         const item = options[index];
-        close();
         setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
+        close();
         const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
         if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
             var _selectElRef_current;
@@ -263,23 +301,18 @@ const filter = (options, inputValue, filterFn)=>{
             bubbles: true
         });
         (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
-        setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));
     }, [
         close,
-        selectElRef,
-        optionsProp,
-        nativeSelectValue
+        selectElRef
     ]);
     const onFocus = React.useCallback(()=>{
-        var _selectElRef_current, _selectInputRef_current;
+        var _selectElRef_current;
         const event = new Event('focusin', {
             bubbles: true
         });
         (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
-        (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.select();
     }, [
-        selectElRef,
-        selectInputRef
+        selectElRef
     ]);
     const onClick = React.useCallback(()=>{
         if (opened) {
@@ -310,38 +343,21 @@ const filter = (options, inputValue, filterFn)=>{
         focusedOptionIndex,
         options
     ]);
-    React.useEffect(function filterOptions() {
+    React.useEffect(function updateOptionsAndSelectedOptionIndex() {
+        var _props_value, _ref;
+        const value = (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : nativeSelectValue) !== null && _ref !== void 0 ? _ref : defaultValue;
         const options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
         setOptions(options);
+        setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
     }, [
         filterFn,
         inputValue,
+        nativeSelectValue,
         optionsProp,
-        searchable
-    ]);
-    var _props_value1, _ref;
-    const selectValue = (_ref = (_props_value1 = props.value) !== null && _props_value1 !== void 0 ? _props_value1 : nativeSelectValue) !== null && _ref !== void 0 ? _ref : defaultValue;
-    React.useEffect(function updateSelectedOptionIndexOnValueChange() {
-        setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));
-    }, [
-        selectValue,
-        allowClearButton,
-        options
-    ]);
-    const prevSelectValueRef = React.useRef(selectValue);
-    React.useEffect(function updateInputValueOnSelectValueChange() {
-        if (prevSelectValueRef.current === selectValue) {
-            return;
-        }
-        setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));
-    }, [
-        selectValue,
-        optionsProp
-    ]);
-    React.useEffect(function updatePrevSelectValue() {
-        prevSelectValueRef.current = selectValue;
-    }, [
-        selectValue
+        defaultValue,
+        props.value,
+        searchable,
+        allowClearButton
     ]);
     const onNativeSelectChange = (e)=>{
         const newSelectedOptionIndex = findSelectedIndex(options, e.currentTarget.value, allowClearButton);
@@ -506,6 +522,7 @@ const filter = (options, inputValue, filterFn)=>{
         renderDropdown,
         renderOption
     ]);
+    const selectInputRef = useExternRef(getSelectInputRef);
     const focusOnInputTimerRef = React.useRef();
     const focusOnInput = React.useCallback(()=>{
         clearTimeout(focusOnInputTimerRef.current);
@@ -591,14 +608,11 @@ const filter = (options, inputValue, filterFn)=>{
         selectInputRef
     ]);
     const preventInputBlurWhenClickInsideFocusedSelectArea = (e)=>{
-        var _selectInputRef_current;
         // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
         // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
         // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
         const isInputFocused = document && document.activeElement === selectInputRef.current;
-        const clickTarget = e.target;
-        const inputClicked = (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.contains(clickTarget);
-        if (isInputFocused && !inputClicked) {
+        if (isInputFocused) {
             e.preventDefault();
         }
     };
@@ -607,12 +621,14 @@ const filter = (options, inputValue, filterFn)=>{
     const selectInputAriaProps = {
         'role': 'combobox',
         'aria-controls': popupAriaId,
+        'aria-owns': popupAriaId,
         'aria-expanded': opened,
         'aria-activedescendant': ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
         'aria-labelledby': ariaLabelledBy,
         'aria-haspopup': 'listbox',
         'aria-autocomplete': 'none'
     };
+    const focusWithin = useFocusWithin(handleRootRef);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiCustomSelect", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         style: style,
@@ -620,6 +636,10 @@ const filter = (options, inputValue, filterFn)=>{
         onClick: passClickAndFocusToInputOnClick,
         onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
         children: [
+            focusWithin && selected && !opened && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                "aria-live": "polite",
+                children: selected.label
+            }),
             /*#__PURE__*/ _jsx(CustomSelectInput, _object_spread_props(_object_spread({
                 autoComplete: "off",
                 autoCapitalize: "none",
@@ -630,7 +650,7 @@ const filter = (options, inputValue, filterFn)=>{
                 onFocus: onFocus,
                 onBlur: onBlur,
                 className: openedClassNames,
-                searchable: searchable,
+                readOnly: !searchable,
                 fetching: fetching,
                 value: inputValue,
                 onKeyUp: handleKeyUp,
@@ -640,7 +660,7 @@ const filter = (options, inputValue, filterFn)=>{
                 before: before,
                 after: afterIcons,
                 selectType: selectType,
-                selectedOptionLabel: selected === null || selected === void 0 ? void 0 : selected.label
+                children: selected === null || selected === void 0 ? void 0 : selected.label
             })),
             /*#__PURE__*/ _jsxs("select", {
                 ref: selectElRef,