@vkontakte/vkui 6.1.0 → 6.1.2

package/dist/cjs/components/Clickable/useState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,eAAO,MAAM,YAAY,KAAK,CAAC;AAsE/B,eAAO,MAAM,yBAAyB,qBAAwC,OAAO,KAAK,IAAI,cAE7F,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,uEAO3B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU;;;EAwBzE"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../../../../src/components/Clickable/useState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,eAAO,MAAM,YAAY,KAAK,CAAC;AAwE/B,eAAO,MAAM,yBAAyB,qBAAwC,OAAO,KAAK,IAAI,cAE7F,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,uEAO3B;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU;;;EAyBzE"}

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

@@ -37,9 +37,9 @@ const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
- */ function useHover({ hovered, hoverClassName, hasHover = true }) {
+ */ function useHover({ hovered, hoverClassName, hasHover = true, lockState }) {
     const [hoveredState, setHover] = _react.useState(false);
-    const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;
+    const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
     const onPointerEnter = (e)=>{
         if (e.pointerType === 'touch') {
             return;
@@ -57,11 +57,11 @@ const ACTIVE_DELAY = 70;
 }
 /**
  * Управляет активацией компонента
- */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true }) {
+ */ function useActive({ activated, activeClassName, activeEffectDelay, hasActive = true, lockState }) {
     const [activatedState, setActivated] = (0, _useStateWithDelay.useStateWithDelay)(false);
     // Список нажатий которые не требуется отменять
     const pointersUp = _react.useMemo(()=>new Set(), []);
-    const active = hasActive && (activated || activatedState) ? activeClassName : undefined;
+    const active = hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
     const onPointerDown = ()=>setActivated(true, ACTIVE_DELAY);
     const onPointerCancel = (e)=>{
         if (pointersUp.has(e.pointerId)) {
@@ -101,8 +101,9 @@ function useState(_param) {
     ]);
     const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
     const props = _object_spread._({
-        hasHover: hasHover && !lockState,
-        hasActive: hasActive && !lockState
+        hasHover,
+        hasActive,
+        lockState
     }, restProps);
     const _useHover = useHover(_object_spread._({}, props)), { hover } = _useHover, hoverEvent = _object_without_properties._(_useHover, [
         "hover"

package/dist/cjs/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\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nexport const ACTIVE_DELAY = 70;\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hoverClassName, hasHover = true }: StateProps) {\n  const [hoveredState, setHover] = React.useState(false);\n\n  const hover = hasHover && (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}: StateProps) {\n  const [activatedState, setActivated] = useStateWithDelay(false);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const active = hasActive && (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.createContext<undefined | ((v: boolean) => void)>(\n  undefined,\n);\n\n/**\n * Блокирует стейт на всплытие\n */\nexport function useLockState() {\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  const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();\n\n  const props = {\n    hasHover: hasHover && !lockState,\n    hasActive: hasActive && !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":["ACTIVE_DELAY","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useLockState","useState","useHover","hovered","hoverClassName","hasHover","hoveredState","setHover","React","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","noop","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","useStateWithDelay","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","createContext","setLockBubbling","useContext","lockState","setLockState","setLockBubblingImmediate","callMultiple","restProps","props","hoverEvent","activeEvent","stateClassName","classNames","handlers","mergeCalls","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { 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\nexport const 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.createContext<undefined | ((v: boolean) => void)>(\n  undefined,\n);\n\n/**\n * Блокирует стейт на всплытие\n */\nexport function useLockState() {\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  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":["ACTIVE_DELAY","ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useLockState","useState","useHover","hovered","hoverClassName","hasHover","lockState","hoveredState","setHover","React","hover","undefined","onPointerEnter","e","pointerType","onPointerLeave","noop","useActive","activated","activeClassName","activeEffectDelay","hasActive","activatedState","setActivated","useStateWithDelay","pointersUp","useMemo","Set","active","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","createContext","setLockBubbling","useContext","setLockState","setLockBubblingImmediate","callMultiple","restProps","props","hoverEvent","activeEvent","stateClassName","classNames","handlers","mergeCalls","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAenF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,4CA8KvB,CAAC"}
+{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAenF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,4CAmLvB,CAAC"}

package/dist/cjs/components/CustomScrollView/CustomScrollView.js

@@ -18,6 +18,7 @@ const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _useEventListener = require("../../hooks/useEventListener");
 const _useExternRef = require("../../hooks/useExternRef");
+const _useResizeObserver = require("../../hooks/useResizeObserver");
 const _dom = require("../../lib/dom");
 const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 const _utils = require("../../lib/utils");
@@ -55,6 +56,7 @@ const CustomScrollView = (_param)=>{
     const startY = _react.useRef(0);
     const trackerTop = _react.useRef(0);
     const boxRef = (0, _useExternRef.useExternRef)(externalBoxRef);
+    const boxContentRef = _react.useRef(null);
     const barY = _react.useRef(null);
     const trackerY = _react.useRef(null);
     const setTrackerPosition = (scrollTop)=>{
@@ -96,6 +98,7 @@ const CustomScrollView = (_param)=>{
         windowResize,
         window
     ]);
+    (0, _useResizeObserver.useResizeObserver)(boxContentRef, resize);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
         var _trackerY_current;
         let style = (_trackerY_current = trackerY.current) === null || _trackerY_current === void 0 ? void 0 : _trackerY_current.style;
@@ -171,7 +174,11 @@ const CustomScrollView = (_param)=>{
                 tabIndex: -1,
                 ref: boxRef,
                 onScroll: scroll,
-                children: children
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    ref: boxContentRef,
+                    className: "vkuiCustomScrollView__box-content",
+                    children: children
+                })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "vkuiCustomScrollView__barY",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case true:\n      return styles['CustomScrollView--hasPointer-true'];\n    case false:\n      return styles['CustomScrollView--hasPointer-false'];\n    case undefined:\n    default:\n      return styles['CustomScrollView--hasPointer-none'];\n  }\n}\n\nexport interface CustomScrollViewProps\n  extends React.AllHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n  getRootRef,\n  ...restProps\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n  const { hasPointer } = useAdaptivity();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div\n      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        {children}\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomScrollView","hasPointerClassName","hasPointer","undefined","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","useDOM","useAdaptivity","ratio","React","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","useExternRef","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","useEventListener","useIsomorphicLayoutEffect","add","prop","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","useTrackerVisibility","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","classNames","ref","tabIndex","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case true:\n      return styles['CustomScrollView--hasPointer-true'];\n    case false:\n      return styles['CustomScrollView--hasPointer-false'];\n    case undefined:\n    default:\n      return styles['CustomScrollView--hasPointer-none'];\n  }\n}\n\nexport interface CustomScrollViewProps\n  extends React.AllHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n  getRootRef,\n  ...restProps\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n  const { hasPointer } = useAdaptivity();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n  const boxContentRef = React.useRef<HTMLDivElement>(null);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useResizeObserver(boxContentRef, resize);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div\n      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        <div ref={boxContentRef} className={styles['CustomScrollView__box-content']}>\n          {children}\n        </div>\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomScrollView","hasPointerClassName","hasPointer","undefined","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","useDOM","useAdaptivity","ratio","React","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","useExternRef","boxContentRef","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","useEventListener","useIsomorphicLayoutEffect","add","useResizeObserver","prop","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","useTrackerVisibility","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","classNames","ref","tabIndex","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -4,11 +4,12 @@ export type DatePickerDateFormat = {
     month: number;
     year: number;
 };
-export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
+export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'value' | 'min' | 'max'> {
     min?: DatePickerDateFormat;
     max?: DatePickerDateFormat;
     name?: string;
     defaultValue?: DatePickerDateFormat;
+    value?: DatePickerDateFormat;
     popupDirection?: 'top' | 'bottom';
     monthNames?: string[];
     dayPlaceholder?: string;
@@ -20,5 +21,5 @@ export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
  */
-export declare const DatePicker: ({ defaultValue, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ onDateChange, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqB9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;IACvF,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0ID;;GAEG;AACH,eAAO,MAAM,UAAU,+BAAgC,eAAe,4CAkBrE,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAwB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqB9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAIF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,yBAAyB,CAAC,cAAc,CAAC,EACzC,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CACzC;IACD,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6KD;;GAEG;AACH,eAAO,MAAM,UAAU,+BAAgC,eAAe,4CASrE,CAAC"}

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -15,8 +15,11 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
+const _math = require("../../helpers/math");
 const _range = require("../../helpers/range");
 const _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+const _useEnsuredControl = require("../../hooks/useEnsuredControl");
+const _useNativeFormResetListener = require("../../hooks/useNativeFormResetListener");
 const _CustomSelect = require("../CustomSelect/CustomSelect");
 const _Input = require("../Input/Input");
 const _RootComponent = require("../RootComponent/RootComponent");
@@ -34,12 +37,24 @@ const DefaultMonths = [
     'Ноября',
     'Декабря'
 ];
+const DEFAULT_EMPTY_DATE = {
+    day: 0,
+    month: 0,
+    year: 0
+};
 // Переводим state к формату гг-мм-дд
-function convertToInputFormat({ day = 0, month = 0, year = 0 }) {
+function convertToInputFormat(value) {
+    if (!value) {
+        return undefined;
+    }
+    const { day = 0, month = 0, year = 0 } = value;
     return `${year}-${(0, _vkjs.leadingZero)(month)}-${(0, _vkjs.leadingZero)(day)}`;
 }
 // Переводим дату формата гг-мм-дд к объекту
 function parseInputDate(date) {
+    if (date.length === 0) {
+        return DEFAULT_EMPTY_DATE;
+    }
     const splited = date.split('-');
     return {
         day: Number(splited[2]),
@@ -59,7 +74,7 @@ const DatePickerCustom = (_param)=>{
         day: 31,
         month: 12,
         year: 2100
-    }, dayPlaceholder, monthPlaceholder, yearPlaceholder, popupDirection, defaultValue, monthNames, day = 0, month = 0, year = 0, onDateChange, disabled } = _param, restProps = _object_without_properties._(_param, [
+    }, dayPlaceholder, monthPlaceholder, yearPlaceholder, popupDirection, value, monthNames, onDateChange, disabled, defaultValue = DEFAULT_EMPTY_DATE } = _param, restProps = _object_without_properties._(_param, [
         "name",
         "min",
         "max",
@@ -67,23 +82,30 @@ const DatePickerCustom = (_param)=>{
         "monthPlaceholder",
         "yearPlaceholder",
         "popupDirection",
-        "defaultValue",
+        "value",
         "monthNames",
-        "day",
-        "month",
-        "year",
         "onDateChange",
-        "disabled"
+        "disabled",
+        "defaultValue"
     ]);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = (0, _useEnsuredControl.useCustomEnsuredControl)({
+        value,
+        defaultValue
+    });
+    const hiddenInput = _react.useRef(null);
     const onSelectChange = (e)=>{
-        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange({
-            day,
-            month,
-            year,
-            [e.target.name]: Number(e.target.value)
-        });
+        const nextDate = {
+            day: internalValue.day,
+            month: internalValue.month,
+            year: internalValue.year
+        };
+        nextDate[e.target.name] = Number(e.target.value);
+        nextDate.day = nextDate.day ? (0, _math.clamp)(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year)) : nextDate.day;
+        setInternalValue(nextDate);
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(nextDate);
     };
-    const dayOptions = (0, _range.range)(1, getMonthMaxDay(month, year)).map((value)=>({
+    const dayOptions = (0, _range.range)(1, getMonthMaxDay(internalValue.month, internalValue.year)).map((value)=>({
             label: String(value),
             value
         }));
@@ -95,6 +117,11 @@ const DatePickerCustom = (_param)=>{
             label: String(value),
             value: value
         }));
+    (0, _useNativeFormResetListener.useNativeFormResetListener)(hiddenInput, ()=>{
+        if (!isControlled) {
+            setInternalValue(defaultValue);
+        }
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         baseClassName: "vkuiDatePicker"
     }, restProps), {
@@ -106,7 +133,7 @@ const DatePickerCustom = (_param)=>{
                         className: "vkuiDatePicker__day",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
                             name: "day",
-                            value: day,
+                            value: internalValue.day,
                             options: dayOptions,
                             placeholder: dayPlaceholder,
                             popupDirection: popupDirection,
@@ -119,7 +146,7 @@ const DatePickerCustom = (_param)=>{
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
                             className: "vkuiDatePicker__monthSelect",
                             name: "month",
-                            value: month,
+                            value: internalValue.month,
                             options: monthOptions,
                             placeholder: monthPlaceholder,
                             popupDirection: popupDirection,
@@ -131,7 +158,7 @@ const DatePickerCustom = (_param)=>{
                         className: "vkuiDatePicker__year",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
                             name: "year",
-                            value: year,
+                            value: internalValue.year,
                             options: yearOptions,
                             placeholder: yearPlaceholder,
                             popupDirection: popupDirection,
@@ -144,11 +171,8 @@ const DatePickerCustom = (_param)=>{
             /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                 type: "hidden",
                 name: name,
-                value: convertToInputFormat({
-                    day,
-                    month,
-                    year
-                })
+                ref: hiddenInput,
+                value: convertToInputFormat(internalValue)
             })
         ]
     }));
@@ -162,7 +186,7 @@ const DatePickerNative = (_param)=>{
         day: 31,
         month: 12,
         year: 2100
-    }, monthNames, popupDirection, dayPlaceholder, monthPlaceholder, yearPlaceholder, defaultValue, day, month, year, onDateChange } = _param, restProps = _object_without_properties._(_param, [
+    }, monthNames, popupDirection, dayPlaceholder, monthPlaceholder, yearPlaceholder, value, defaultValue = DEFAULT_EMPTY_DATE, onDateChange } = _param, restProps = _object_without_properties._(_param, [
         "min",
         "max",
         "monthNames",
@@ -170,51 +194,41 @@ const DatePickerNative = (_param)=>{
         "dayPlaceholder",
         "monthPlaceholder",
         "yearPlaceholder",
+        "value",
         "defaultValue",
-        "day",
-        "month",
-        "year",
         "onDateChange"
     ]);
-    const defProps = day && month && year ? {
-        defaultValue: convertToInputFormat({
-            day,
-            month,
-            year
-        })
-    } : {};
     const onStringChange = _react.useCallback((e)=>{
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(parseInputDate(e.currentTarget.value));
     }, [
         onDateChange
     ]);
     const inputProps = restProps;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.Input, _object_spread._(_object_spread_props._(_object_spread._({}, inputProps), {
+    if (value) {
+        // контролируемый компонент
+        inputProps.value = convertToInputFormat(value);
+    } else {
+        // неконтролируемый компонент
+        inputProps.defaultValue = convertToInputFormat(defaultValue);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.Input, _object_spread_props._(_object_spread._({}, inputProps), {
         type: "date",
         onChange: onStringChange,
         min: convertToInputFormat(min),
         max: convertToInputFormat(max)
-    }), defProps));
+    }));
 };
 const DatePicker = (_param)=>{
-    var { defaultValue } = _param, props = _object_without_properties._(_param, [
-        "defaultValue"
+    var { onDateChange } = _param, props = _object_without_properties._(_param, [
+        "onDateChange"
     ]);
     const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
-    const [value, setValue] = _react.useState(()=>({
-            day: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.day) || 0,
-            month: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.month) || 0,
-            year: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.year) || 0
-        }));
-    const onDateChange = _react.useCallback((update)=>{
-        setValue(update);
-        props.onDateChange && props.onDateChange(_object_spread._({}, update));
-    }, [
-        props
-    ]);
+    const onChange = (update)=>{
+        onDateChange && onDateChange(_object_spread._({}, update));
+    };
     const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Cmp, _object_spread_props._(_object_spread._({}, props, value), {
-        onDateChange: onDateChange
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Cmp, _object_spread_props._(_object_spread._({}, props), {
+        onDateChange: onChange
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input, type InputProps } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nexport interface DatePickerProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\n  }));\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n  return (\n    <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n    </RootComponent>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  monthNames,\n  popupDirection,\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  const inputProps: HasOnlyExpectedProps<typeof restProps, InputProps> = restProps;\n  return (\n    <Input\n      {...inputProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n    day: defaultValue?.day || 0,\n    month: defaultValue?.month || 0,\n    year: defaultValue?.year || 0,\n  }));\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props],\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"names":["DatePicker","DefaultMonths","convertToInputFormat","day","month","year","leadingZero","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","restProps","onSelectChange","e","target","value","dayOptions","range","map","label","String","monthOptions","index","yearOptions","RootComponent","baseClassName","div","className","CustomSelect","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","React","useCallback","currentTarget","inputProps","Input","props","hasPointer","useAdaptivityHasPointer","setValue","useState","update","Cmp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input, type InputProps } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nconst DEFAULT_EMPTY_DATE = { day: 0, month: 0, year: 0 };\n\nexport interface DatePickerProps\n  extends Omit<\n    HTMLAttributesWithRootRef<HTMLDivElement>,\n    'defaultValue' | 'value' | 'min' | 'max'\n  > {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  value?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void; // TODO [>=7] заменить на onChange\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat(value: Partial<DatePickerDateFormat> | undefined) {\n  if (!value) {\n    return undefined;\n  }\n  const { day = 0, month = 0, year = 0 } = value;\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  if (date.length === 0) {\n    return DEFAULT_EMPTY_DATE;\n  }\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  value,\n  monthNames,\n  onDateChange,\n  disabled,\n  defaultValue = DEFAULT_EMPTY_DATE,\n  ...restProps\n}: DatePickerProps) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useCustomEnsuredControl({ value, defaultValue });\n  const hiddenInput = React.useRef<HTMLInputElement>(null);\n\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const nextDate = {\n      day: internalValue.day,\n      month: internalValue.month,\n      year: internalValue.year,\n    };\n    nextDate[e.target.name as keyof typeof nextDate] = Number(e.target.value);\n    nextDate.day = nextDate.day\n      ? clamp(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year))\n      : nextDate.day;\n    setInternalValue(nextDate);\n    onDateChange?.(nextDate);\n  };\n  const dayOptions = range(1, getMonthMaxDay(internalValue.month, internalValue.year)).map(\n    (value) => ({\n      label: String(value),\n      value,\n    }),\n  );\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n\n  useNativeFormResetListener(hiddenInput, () => {\n    if (!isControlled) {\n      setInternalValue(defaultValue);\n    }\n  });\n\n  return (\n    <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={internalValue.day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={internalValue.month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={internalValue.year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input\n        type=\"hidden\"\n        name={name}\n        ref={hiddenInput}\n        value={convertToInputFormat(internalValue)}\n      />\n    </RootComponent>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  monthNames,\n  popupDirection,\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  value,\n  defaultValue = DEFAULT_EMPTY_DATE,\n  onDateChange,\n  ...restProps\n}: DatePickerProps) => {\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  const inputProps: HasOnlyExpectedProps<\n    typeof restProps & Pick<InputProps, 'value' | 'defaultValue'>,\n    InputProps\n  > = restProps;\n\n  if (value) {\n    // контролируемый компонент\n    inputProps.value = convertToInputFormat(value);\n  } else {\n    // неконтролируемый компонент\n    inputProps.defaultValue = convertToInputFormat(defaultValue);\n  }\n\n  return (\n    <Input\n      {...inputProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ onDateChange, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  const onChange = (update: DatePickerDateFormat) => {\n    onDateChange && onDateChange({ ...update });\n  };\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} onDateChange={onChange} />;\n};\n"],"names":["DatePicker","DefaultMonths","DEFAULT_EMPTY_DATE","day","month","year","convertToInputFormat","value","undefined","leadingZero","parseInputDate","date","length","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","monthNames","onDateChange","disabled","defaultValue","restProps","isControlled","internalValue","setInternalValue","useCustomEnsuredControl","hiddenInput","React","useRef","onSelectChange","e","nextDate","target","clamp","dayOptions","range","map","label","String","monthOptions","index","yearOptions","useNativeFormResetListener","RootComponent","baseClassName","div","className","CustomSelect","options","placeholder","onChange","input","type","ref","DatePickerNative","onStringChange","useCallback","currentTarget","inputProps","Input","props","hasPointer","useAdaptivityHasPointer","update","Cmp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { AllHTMLAttributes } from 'react';
 import { HasComponent, HasRootRef } from '../../types';
-export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends React.AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
+export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
     autoFocus?: boolean;
     restoreFocus?: boolean | (() => boolean);
     timeout?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sIASnB,eAAe,CAAC,CAAC,4CA0InB,CAAC"}
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAW9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC1B,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,sIASnB,eAAe,CAAC,CAAC,4CA2KnB,CAAC"}

package/dist/cjs/components/FocusTrap/FocusTrap.js

@@ -8,12 +8,11 @@ Object.defineProperty(exports, "FocusTrap", {
         return FocusTrap;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react = require("react");
 const _useExternRef = require("../../hooks/useExternRef");
 const _accessibility = require("../../lib/accessibility");
 const _dom = require("../../lib/dom");
@@ -31,15 +30,20 @@ const FocusTrap = (_param)=>{
         "children"
     ]);
     const ref = (0, _useExternRef.useExternRef)(getRootRef);
-    const { keyboardInput } = _react.useContext(_AppRootContext.AppRootContext);
-    const focusableNodesRef = _react.useRef([]);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function collectFocusableNodesRef() {
-        if (!ref.current) {
-            return;
+    const { document } = (0, _dom.useDOM)();
+    const { keyboardInput } = (0, _react.useContext)(_AppRootContext.AppRootContext);
+    const focusableNodesRef = (0, _react.useRef)([]);
+    const focusNodeByIndex = (nodeIndex)=>{
+        const element = focusableNodesRef.current[nodeIndex];
+        if (element) {
+            element.focus();
         }
-        const nodes = [];
+    };
+    const recalculateFocusableNodesRef = (parentNode)=>{
         // eslint-disable-next-line no-restricted-properties
-        ref.current.querySelectorAll(FOCUSABLE_ELEMENTS).forEach((focusableEl)=>{
+        const newFocusableElements = parentNode.querySelectorAll(FOCUSABLE_ELEMENTS);
+        const nodes = [];
+        newFocusableElements.forEach((focusableEl)=>{
             const { display, visibility } = getComputedStyle(focusableEl);
             if (display !== 'none' && visibility !== 'hidden') {
                 nodes.push(focusableEl);
@@ -47,11 +51,32 @@ const FocusTrap = (_param)=>{
         });
         if (nodes.length === 0) {
             // Чтобы фокус был хотя бы на родителе
-            nodes.push(ref.current);
+            nodes.push(parentNode);
         }
         focusableNodesRef.current = nodes;
+    };
+    const onMutateParentHandler = (parentNode)=>{
+        recalculateFocusableNodesRef(parentNode);
+        if (document) {
+            const activeElement = document.activeElement;
+            const currentElementIndex = Math.max(document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1, 0);
+            focusNodeByIndex(currentElementIndex);
+        }
+    };
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function collectFocusableNodesRef() {
+        if (!ref.current) {
+            return;
+        }
+        const parentNode = ref.current;
+        const observer = new MutationObserver(()=>onMutateParentHandler(parentNode));
+        observer.observe(ref.current, {
+            subtree: true,
+            childList: true
+        });
+        recalculateFocusableNodesRef(parentNode);
+        return ()=>observer.disconnect();
     }, [
-        children
+        ref
     ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function tryToAutoFocusToFirstNode() {
         if (!ref.current || !autoFocus || !keyboardInput) {