@vkontakte/vkui 6.6.0 → 6.7.0

package/dist/components/Clickable/useState.js

@@ -1,40 +1,77 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { callMultiple } from '../../lib/callMultiple';
 import { mergeCalls } from '../../lib/mergeCalls';
 import { useStateWithDelay } from './useStateWithDelay';
 export const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
- */ function useHover({ hovered, hoverClassName, hasHover = true, lockState }) {
-    const [hoveredState, setHover] = React.useState(false);
-    const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
+ */ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }) {
+    const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);
+    const prevIsHoveredRef = React.useRef(undefined);
+    const handleHover = React.useCallback((isHover)=>{
+        setHoveredStateLocal(isHover);
+        const isHovered = calculateStateValue({
+            hasState: hasHover,
+            isLocked: lockState,
+            stateValueControlled: Boolean(hovered),
+            stateValueLocal: isHover
+        });
+        // проверка сделана чтобы реже вызывать обновление состояния
+        // контекста родителя
+        if (isHovered !== prevIsHoveredRef.current) {
+            prevIsHoveredRef.current = isHovered;
+            setParentStateLock(isHovered);
+        }
+    }, [
+        setParentStateLock,
+        hasHover,
+        hovered,
+        lockState
+    ]);
     const onPointerEnter = (e)=>{
         if (e.pointerType === 'touch') {
             return;
         }
-        setHover(true);
+        handleHover(true);
     };
     const onPointerLeave = ()=>{
-        setHover(false);
+        handleHover(false);
     };
+    const isHovered = calculateStateValue({
+        hasState: hasHover,
+        isLocked: lockState,
+        stateValueControlled: Boolean(hovered),
+        stateValueLocal: hoveredStateLocal
+    });
     return {
-        hover,
+        isHovered,
         onPointerEnter: hasHover ? onPointerEnter : noop,
         onPointerLeave: hasHover ? onPointerLeave : noop
     };
 }
 /**
  * Управляет активацией компонента
- */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true, lockState }) {
-    const [activatedState, setActivated] = useStateWithDelay(false);
+ */ function useActive({ activated, activeEffectDelay, hasActive = true, lockStateRef, setParentStateLock }) {
+    // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,
+    // если установка отложена c помощью delay, то и вызов будет отложен
+    const [activatedState, setActivated] = useStateWithDelay(false, 0, setParentStateLock);
     // Список нажатий которые не требуется отменять
     const pointersUp = React.useMemo(()=>new Set(), []);
-    const active = hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
-    const onPointerDown = ()=>setActivated(true, ACTIVE_DELAY);
+    const onPointerDown = ()=>{
+        if (lockStateRef.current) {
+            return;
+        }
+        setActivated(true, ACTIVE_DELAY);
+        // намеренно выставляем lock, так как setActivated вызов отложен
+        // а у отложенного setActivated setParentStateLock тоже вызовится отложенно
+        // родитель сейчас тоже обработает это же событие PointerDown
+        // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние
+        setParentStateLock(true);
+    };
     const onPointerCancel = (e)=>{
         if (pointersUp.has(e.pointerId)) {
             pointersUp.delete(e.pointerId);
@@ -44,61 +81,97 @@ const ACTIVE_DELAY = 70;
     };
     const onPointerUp = (e)=>{
         pointersUp.add(e.pointerId);
+        if (lockStateRef.current) {
+            return;
+        }
         setActivated(true);
         setActivated(false, activeEffectDelay);
     };
+    const isActivated = calculateStateValue({
+        hasState: hasActive,
+        isLocked: lockStateRef.current,
+        stateValueControlled: Boolean(activated),
+        stateValueLocal: activatedState
+    });
     return {
-        active,
+        isActivated,
         onPointerLeave: hasActive ? onPointerCancel : noop,
         onPointerDown: hasActive ? onPointerDown : noop,
         onPointerCancel: hasActive ? onPointerCancel : noop,
         onPointerUp: hasActive ? onPointerUp : noop
     };
 }
-export const ClickableLockStateContext = /*#__PURE__*/ React.createContext(undefined);
+export const ClickableLockStateContext = /*#__PURE__*/ React.createContext({
+    lockHoverStateBubbling: undefined,
+    lockActiveStateBubbling: undefined
+});
 /**
  * Блокирует стейт на всплытие
- */ function useLockState() {
-    const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;
+ */ function useLockState(setParentStateLockBubbling) {
     const [lockState, setLockState] = React.useState(false);
-    const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);
+    const setStateLockBubblingImmediate = React.useCallback((isLock)=>{
+        setLockState(isLock);
+        setParentStateLockBubbling(isLock);
+    }, [
+        setParentStateLockBubbling
+    ]);
     return [
         lockState,
-        setLockBubbling,
-        setLockBubblingImmediate
+        setParentStateLockBubbling,
+        setStateLockBubblingImmediate
+    ];
+}
+function useLockRef(setParentStateLockBubbling) {
+    const lockStateRef = React.useRef(false);
+    const setStateLockBubblingImmediate = React.useCallback((isLock)=>{
+        lockStateRef.current = isLock;
+        setParentStateLockBubbling(isLock);
+    }, [
+        setParentStateLockBubbling
+    ]);
+    return [
+        lockStateRef,
+        setParentStateLockBubbling,
+        setStateLockBubblingImmediate
     ];
 }
 /**
  * Управляет состоянием компонента
  */ export function useState(_param) {
-    var { hasHover, hasActive } = _param, restProps = _object_without_properties(_param, [
+    var { hovered, hasHover, hasActive, unlockParentHover } = _param, restProps = _object_without_properties(_param, [
+        "hovered",
         "hasHover",
-        "hasActive"
+        "hasActive",
+        "unlockParentHover"
     ]);
-    const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
-    const props = _object_spread({
+    const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } = React.useContext(ClickableLockStateContext);
+    const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] = useLockState(unlockParentHover ? noop : lockHoverStateBubbling);
+    const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] = useLockRef(lockActiveStateBubbling);
+    const _useHover = useHover({
         hasHover,
-        hasActive,
-        lockState
-    }, restProps);
-    const _useHover = useHover(_object_spread({}, props)), { hover } = _useHover, hoverEvent = _object_without_properties(_useHover, [
-        "hover"
+        hovered,
+        lockState: lockHoverState,
+        setParentStateLock: setParentStateLockHoverBubbling
+    }), { isHovered } = _useHover, hoverEvent = _object_without_properties(_useHover, [
+        "isHovered"
     ]);
-    const _useActive = useActive(props), { active } = _useActive, activeEvent = _object_without_properties(_useActive, [
-        "active"
+    const _useActive = useActive(_object_spread_props(_object_spread({}, restProps), {
+        lockStateRef: lockActiveStateRef,
+        setParentStateLock: setParentStateLockActiveBubbling
+    })), { isActivated } = _useActive, activeEvent = _object_without_properties(_useActive, [
+        "isActivated"
     ]);
-    const stateClassName = classNames(hover, active);
+    const stateClassName = classNames(isHovered && restProps.hoverClassName, isActivated && restProps.activeClassName);
     const handlers = mergeCalls(hoverEvent, activeEvent);
-    React.useEffect(()=>{
-        setLockBubbling(!!stateClassName);
-    }, [
-        setLockBubbling,
-        stateClassName
-    ]);
     return _object_spread({
         stateClassName,
-        setLockBubblingImmediate
+        setLockHoverBubblingImmediate,
+        setLockActiveBubblingImmediate
     }, handlers);
 }
+// Общая функция для определения конечного состояния active/hovered
+function calculateStateValue({ hasState, isLocked, stateValueControlled, stateValueLocal }) {
+    return hasState && !isLocked && (stateValueControlled || stateValueLocal);
+}
 
 //# sourceMappingURL=useState.js.map

package/dist/components/Clickable/useState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\ninterface StateHookProps extends StateProps {\n  /**\n   * Блокирование активации состояний\n   */\n  lockState: boolean;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true, lockState }: StateHookProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    setHover(true);\n  };\n\n  const onPointerLeave = () => {\n    setHover(false);\n  };\n\n  return {\n    hover,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeClassName,\n  activeEffectDelay,\n  hasActive = true,\n  lockState,\n}: StateHookProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active =\n    hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;\n\n  const onPointerDown = () => setActivated(true, ACTIVE_DELAY);\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  return {\n    active,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\nexport const ClickableLockStateContext: React.Context<((v: boolean) => void) | undefined> =\n  React.createContext<undefined | ((v: boolean) => void)>(undefined);\n\n/**\n * Блокирует стейт на всплытие\n */\nfunction useLockState(): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n  const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;\n  const [lockState, setLockState] = React.useState(false);\n\n  const setLockBubblingImmediate = callMultiple(setLockState, setLockBubbling);\n\n  return [lockState, setLockBubbling, setLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({ hasHover, hasActive, ...restProps }: StateProps): {\n  stateClassName: string;\n  setLockBubblingImmediate: (...args: any[]) => void;\n} {\n  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover,\n    hasActive,\n    lockState,\n    ...restProps,\n  };\n\n  const { hover, ...hoverEvent } = useHover({ ...props });\n  const { active, ...activeEvent } = useActive(props);\n\n  const stateClassName = classNames(hover, active);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  React.useEffect(() => {\n    setLockBubbling(!!stateClassName);\n  }, [setLockBubbling, stateClassName]);\n\n  return {\n    stateClassName,\n    setLockBubblingImmediate,\n    ...handlers,\n  };\n}\n"],"names":["React","classNames","noop","callMultiple","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hoverClassName","hasHover","lockState","hoveredState","setHover","useState","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","ClickableLockStateContext","createContext","useLockState","setLockBubbling","useContext","setLockState","setLockBubblingImmediate","restProps","props","hoverEvent","activeEvent","stateClassName","handlers","useEffect"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Позволяет родительскому компоненту\n   * иметь hovered-cостояние при наведении\n   * на любой дочерний элемент.\n   * По умолчанию состояние hovered у родителя сбрасывается.\n   *\n   * Присваивается родителькому компоненту.\n   *\n   * @example\n   * <Tappable hasHoverWithChildren>\n   *   <IconButton />\n   *   <IconButton />\n   *   <IconButton />\n   * </Tappable>\n   */\n  hasHoverWithChildren?: boolean;\n\n  /**\n   * Позволяет родительскому компоненту показывать hovered-состояние при наведении\n   * на текущий дочерний компонент.\n   *\n   * Присваивается дочернему компоненту.\n   *\n   * @example\n   * <Tappable>\n   *   <IconButton unlockParentHover />\n   *   <IconButton unlockParentHover />\n   *   <IconButton />\n   * </Tappable>\n   */\n  unlockParentHover?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {\n  /**\n   * Блокирование активации состояний\n   */\n  lockState: boolean;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n  const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n  const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n  const handleHover = React.useCallback(\n    (isHover: boolean) => {\n      setHoveredStateLocal(isHover);\n\n      const isHovered = calculateStateValue({\n        hasState: hasHover,\n        isLocked: lockState,\n        stateValueControlled: Boolean(hovered),\n        stateValueLocal: isHover,\n      });\n\n      // проверка сделана чтобы реже вызывать обновление состояния\n      // контекста родителя\n      if (isHovered !== prevIsHoveredRef.current) {\n        prevIsHoveredRef.current = isHovered;\n        setParentStateLock(isHovered);\n      }\n    },\n    [setParentStateLock, hasHover, hovered, lockState],\n  );\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    handleHover(true);\n  };\n\n  const onPointerLeave = () => {\n    handleHover(false);\n  };\n\n  const isHovered = calculateStateValue({\n    hasState: hasHover,\n    isLocked: lockState,\n    stateValueControlled: Boolean(hovered),\n    stateValueLocal: hoveredStateLocal,\n  });\n\n  return {\n    isHovered,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDelay' | 'hasActive'> {\n  /**\n   * Блокирование активации состояний\n   */\n  lockStateRef: React.MutableRefObject<boolean>;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeEffectDelay,\n  hasActive = true,\n  lockStateRef,\n  setParentStateLock,\n}: UseActiveProps) {\n  // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n  // если установка отложена c помощью delay, то и вызов будет отложен\n  const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const onPointerDown = () => {\n    if (lockStateRef.current) {\n      return;\n    }\n\n    setActivated(true, ACTIVE_DELAY);\n    // намеренно выставляем lock, так как setActivated вызов отложен\n    // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n    // родитель сейчас тоже обработает это же событие PointerDown\n    // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n    setParentStateLock(true);\n  };\n\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n\n    if (lockStateRef.current) {\n      return;\n    }\n\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  const isActivated = calculateStateValue({\n    hasState: hasActive,\n    isLocked: lockStateRef.current,\n    stateValueControlled: Boolean(activated),\n    stateValueLocal: activatedState,\n  });\n\n  return {\n    isActivated,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\ninterface ClickableLockStateContextInterface {\n  lockHoverStateBubbling?: (v: boolean) => void;\n  lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n  React.createContext<ClickableLockStateContextInterface>({\n    lockHoverStateBubbling: undefined,\n    lockActiveStateBubbling: undefined,\n  });\n\n/**\n * Блокирует стейт на всплытие\n */\nfunction useLockState(\n  setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n  const [lockState, setLockState] = React.useState(false);\n\n  const setStateLockBubblingImmediate = React.useCallback(\n    (isLock: boolean) => {\n      setLockState(isLock);\n      setParentStateLockBubbling(isLock);\n    },\n    [setParentStateLockBubbling],\n  );\n\n  return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n  setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.MutableRefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n  const lockStateRef = React.useRef(false);\n\n  const setStateLockBubblingImmediate = React.useCallback(\n    (isLock: boolean) => {\n      lockStateRef.current = isLock;\n      setParentStateLockBubbling(isLock);\n    },\n    [setParentStateLockBubbling],\n  );\n\n  return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({\n  hovered,\n  hasHover,\n  hasActive,\n  unlockParentHover,\n  ...restProps\n}: StateProps): {\n  stateClassName: string;\n  setLockHoverBubblingImmediate: (...args: any[]) => void;\n  setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n  const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n    React.useContext(ClickableLockStateContext);\n\n  const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n    useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n  const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n    useLockRef(lockActiveStateBubbling);\n\n  const { isHovered, ...hoverEvent } = useHover({\n    hasHover,\n    hovered,\n    lockState: lockHoverState,\n    setParentStateLock: setParentStateLockHoverBubbling,\n  });\n\n  const { isActivated, ...activeEvent } = useActive({\n    ...restProps,\n    lockStateRef: lockActiveStateRef,\n    setParentStateLock: setParentStateLockActiveBubbling,\n  });\n\n  const stateClassName = classNames(\n    isHovered && restProps.hoverClassName,\n    isActivated && restProps.activeClassName,\n  );\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  return {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...handlers,\n  };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n  hasState,\n  isLocked,\n  stateValueControlled,\n  stateValueLocal,\n}: {\n  hasState: boolean;\n  isLocked: boolean;\n  stateValueControlled: boolean;\n  stateValueLocal: boolean;\n}): boolean {\n  return hasState && !isLocked && (stateValueControlled || stateValueLocal);\n}\n"],"names":["React","classNames","noop","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","useState","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueControlled","Boolean","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","restProps","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","hoverClassName","activeClassName","handlers"],"mappings":"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"}

package/dist/components/Clickable/useStateWithDelay.d.ts

@@ -13,7 +13,25 @@ type DispatchWithDelay<S> = (value: S, delay?: number) => void;
  *   setCount(count + 1, 500)
  * }
  * ```
+ *
+ * Есть возможность передать функцию-коллбэк, которая будет
+ * вызвана сразу после вызова setState с новым значением стейта
+ * в качестве аргумента.
+ *
+ * ```ts
+ * const onCountChange = React.useCallback((count) => {
+ *   // обработчик нового значения count
+ *   // будет вызван через 500мс
+ * }, []);
+ *
+ *
+ * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);
+ *
+ * const click = () => {
+ *   setCount(count + 1, 500)
+ * }
+ * ```
  */
-export declare function useStateWithDelay<S>(initialState: S | (() => S), defaultDelay?: number): [S, DispatchWithDelay<React.SetStateAction<S>>];
+export declare function useStateWithDelay<S>(initialState: S | (() => S), defaultDelay?: number, onStateChange?: (v: S) => void): [S, DispatchWithDelay<React.SetStateAction<S>>];
 export {};
 //# sourceMappingURL=useStateWithDelay.d.ts.map

package/dist/components/Clickable/useStateWithDelay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStateWithDelay.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/useStateWithDelay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,YAAY,SAAI,GACf,CAAC,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAkBjD"}
+{"version":3,"file":"useStateWithDelay.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/useStateWithDelay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,YAAY,SAAI,EAChB,aAAa,GAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAW,GACnC,CAAC,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAmCjD"}

package/dist/components/Clickable/useStateWithDelay.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isFunction, noop } from '@vkontakte/vkjs';
 /**
  * Возвращает значение с состоянием и функции на обновление состояния
  * без и с задержкой.
@@ -12,18 +13,51 @@ import * as React from 'react';
  *   setCount(count + 1, 500)
  * }
  * ```
- */ export function useStateWithDelay(initialState, defaultDelay = 0) {
+ *
+ * Есть возможность передать функцию-коллбэк, которая будет
+ * вызвана сразу после вызова setState с новым значением стейта
+ * в качестве аргумента.
+ *
+ * ```ts
+ * const onCountChange = React.useCallback((count) => {
+ *   // обработчик нового значения count
+ *   // будет вызван через 500мс
+ * }, []);
+ *
+ *
+ * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);
+ *
+ * const click = () => {
+ *   setCount(count + 1, 500)
+ * }
+ * ```
+ */ export function useStateWithDelay(initialState, defaultDelay = 0, onStateChange = noop) {
     const [value, setValue] = React.useState(initialState);
     const timeout = React.useRef();
+    const handleSetValue = React.useCallback((nextValue)=>{
+        if (isFunction(nextValue)) {
+            setValue((prevValue)=>{
+                const value = nextValue(prevValue);
+                onStateChange(value);
+                return value;
+            });
+        } else {
+            setValue(nextValue);
+            onStateChange(nextValue);
+        }
+    }, [
+        onStateChange
+    ]);
     const setValueWithDelay = React.useCallback((newValue, delay = defaultDelay)=>{
         clearTimeout(timeout.current);
         if (delay === 0) {
-            setValue(newValue);
+            handleSetValue(newValue);
             return;
         }
-        timeout.current = setTimeout(()=>setValue(newValue), delay);
+        timeout.current = setTimeout(()=>handleSetValue(newValue), delay);
     }, [
-        defaultDelay
+        defaultDelay,
+        handleSetValue
     ]);
     return [
         value,

package/dist/components/Clickable/useStateWithDelay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype DispatchWithDelay<S> = (value: S, delay?: number) => void;\n\n/**\n * Возвращает значение с состоянием и функции на обновление состояния\n * без и с задержкой.\n *\n * # Пример\n *\n * ```ts\n * const [count, setCount] = useStateWithDelay(initialState);\n *\n * const click = () => {\n *   setCount(count + 1, 500)\n * }\n * ```\n */\nexport function useStateWithDelay<S>(\n  initialState: S | (() => S),\n  defaultDelay = 0,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n  const [value, setValue] = React.useState(initialState);\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n\n  const setValueWithDelay = React.useCallback(\n    (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n      clearTimeout(timeout.current);\n      if (delay === 0) {\n        setValue(newValue);\n        return;\n      }\n\n      timeout.current = setTimeout(() => setValue(newValue), delay);\n    },\n    [defaultDelay],\n  );\n\n  return [value, setValueWithDelay];\n}\n"],"names":["React","useStateWithDelay","initialState","defaultDelay","value","setValue","useState","timeout","useRef","setValueWithDelay","useCallback","newValue","delay","clearTimeout","current","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC;IAEhB,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAACJ;IACzC,MAAMK,UAAUP,MAAMQ,MAAM;IAE5B,MAAMC,oBAAoBT,MAAMU,WAAW,CACzC,CAACC,UAAmCC,QAAgBT,YAAY;QAC9DU,aAAaN,QAAQO,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfP,SAASM;YACT;QACF;QAEAJ,QAAQO,OAAO,GAAGC,WAAW,IAAMV,SAASM,WAAWC;IACzD,GACA;QAACT;KAAa;IAGhB,OAAO;QAACC;QAAOK;KAAkB;AACnC"}
+{"version":3,"sources":["../../../src/components/Clickable/useStateWithDelay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\n\ntype DispatchWithDelay<S> = (value: S, delay?: number) => void;\n\n/**\n * Возвращает значение с состоянием и функции на обновление состояния\n * без и с задержкой.\n *\n * # Пример\n *\n * ```ts\n * const [count, setCount] = useStateWithDelay(initialState);\n *\n * const click = () => {\n *   setCount(count + 1, 500)\n * }\n * ```\n *\n * Есть возможность передать функцию-коллбэк, которая будет\n * вызвана сразу после вызова setState с новым значением стейта\n * в качестве аргумента.\n *\n * ```ts\n * const onCountChange = React.useCallback((count) => {\n *   // обработчик нового значения count\n *   // будет вызван через 500мс\n * }, []);\n *\n *\n * const [count, setCount] = useStateWithDelay(initialState, 0, onCountChange);\n *\n * const click = () => {\n *   setCount(count + 1, 500)\n * }\n * ```\n */\nexport function useStateWithDelay<S>(\n  initialState: S | (() => S),\n  defaultDelay = 0,\n  onStateChange: (v: S) => void = noop,\n): [S, DispatchWithDelay<React.SetStateAction<S>>] {\n  const [value, setValue] = React.useState(initialState);\n  const timeout = React.useRef<ReturnType<typeof setTimeout>>();\n\n  const handleSetValue = React.useCallback(\n    (nextValue: React.SetStateAction<S>) => {\n      if (isFunction(nextValue)) {\n        setValue((prevValue) => {\n          const value = nextValue(prevValue);\n          onStateChange(value);\n\n          return value;\n        });\n      } else {\n        setValue(nextValue);\n        onStateChange(nextValue);\n      }\n    },\n    [onStateChange],\n  );\n\n  const setValueWithDelay = React.useCallback(\n    (newValue: React.SetStateAction<S>, delay: number = defaultDelay) => {\n      clearTimeout(timeout.current);\n      if (delay === 0) {\n        handleSetValue(newValue);\n        return;\n      }\n\n      timeout.current = setTimeout(() => handleSetValue(newValue), delay);\n    },\n    [defaultDelay, handleSetValue],\n  );\n\n  return [value, setValueWithDelay];\n}\n"],"names":["React","isFunction","noop","useStateWithDelay","initialState","defaultDelay","onStateChange","value","setValue","useState","timeout","useRef","handleSetValue","useCallback","nextValue","prevValue","setValueWithDelay","newValue","delay","clearTimeout","current","setTimeout"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AAInD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,kBACdC,YAA2B,EAC3BC,eAAe,CAAC,EAChBC,gBAAgCJ,IAAI;IAEpC,MAAM,CAACK,OAAOC,SAAS,GAAGR,MAAMS,QAAQ,CAACL;IACzC,MAAMM,UAAUV,MAAMW,MAAM;IAE5B,MAAMC,iBAAiBZ,MAAMa,WAAW,CACtC,CAACC;QACC,IAAIb,WAAWa,YAAY;YACzBN,SAAS,CAACO;gBACR,MAAMR,QAAQO,UAAUC;gBACxBT,cAAcC;gBAEd,OAAOA;YACT;QACF,OAAO;YACLC,SAASM;YACTR,cAAcQ;QAChB;IACF,GACA;QAACR;KAAc;IAGjB,MAAMU,oBAAoBhB,MAAMa,WAAW,CACzC,CAACI,UAAmCC,QAAgBb,YAAY;QAC9Dc,aAAaT,QAAQU,OAAO;QAC5B,IAAIF,UAAU,GAAG;YACfN,eAAeK;YACf;QACF;QAEAP,QAAQU,OAAO,GAAGC,WAAW,IAAMT,eAAeK,WAAWC;IAC/D,GACA;QAACb;QAAcO;KAAe;IAGhC,OAAO;QAACL;QAAOS;KAAkB;AACnC"}

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

@@ -6,9 +6,10 @@ 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 };
-export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, Omit<FormFieldProps, 'maxHeight'>, TrackerOptionsProps, Pick<CustomSelectDropdownProps, 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'> {
+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
      */
@@ -25,7 +26,7 @@ export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterfac
     /**
      * Событие изменения текстового поля
      */
-    onInputChange?: (e: React.ChangeEvent) => void;
+    onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     options: OptionInterfaceT[];
     /**
      * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.

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

@@ -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;AASnC,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;IACH;;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,KAAK,IAAI,CAAC;IAC/C,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"}
+{"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

@@ -18,7 +18,7 @@ import { CustomSelectInput } from './CustomSelectInput';
 import { calculateInputValueFromOptions, defaultRenderOptionFn, findIndexAfter, findIndexBefore, findSelectedIndex } from './helpers';
 const sizeYClassNames = {
     none: "vkuiCustomSelect--sizeY-none",
-    ['compact']: "vkuiCustomSelect--sizeY-compact"
+    compact: "vkuiCustomSelect--sizeY-compact"
 };
 const warn = warnOnce('CustomSelect');
 const checkOptionsValueType = (options)=>{
@@ -36,7 +36,7 @@ const filter = (options, inputValue, filterFn)=>{
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */ export function CustomSelect(props) {
     const [opened, setOpened] = React.useState(false);
-    const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, onInputChange: onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', autoHideScrollbar, autoHideScrollbarDelay, searchable = false, renderOption: renderOptionProp = defaultRenderOptionFn, options: optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, icon: iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, ['aria-labelledby']: ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior } = props, restProps = _object_without_properties(props, [
+    const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', autoHideScrollbar, autoHideScrollbarDelay, searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior } = props, restProps = _object_without_properties(props, [
         "before",
         "name",
         "className",
@@ -46,7 +46,7 @@ const filter = (options, inputValue, filterFn)=>{
         "style",
         "onChange",
         "children",
-        "onInputChange",
+        'onInputChange',
         "renderDropdown",
         "onOpen",
         "onClose",
@@ -56,11 +56,11 @@ const filter = (options, inputValue, filterFn)=>{
         "autoHideScrollbar",
         "autoHideScrollbarDelay",
         "searchable",
-        "renderOption",
-        "options",
+        'renderOption',
+        'options',
         "emptyText",
         "filterFn",
-        "icon",
+        'icon',
         "ClearButton",
         "allowClearButton",
         "dropdownOffsetDistance",
@@ -608,7 +608,7 @@ const filter = (options, inputValue, filterFn)=>{
         'role': 'combobox',
         'aria-controls': popupAriaId,
         'aria-expanded': opened,
-        ['aria-activedescendant']: ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
+        'aria-activedescendant': ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
         'aria-labelledby': ariaLabelledBy,
         'aria-haspopup': 'listbox',
         'aria-autocomplete': 'none'