@vkontakte/vkui 6.2.2 → 6.3.0

package/dist/hooks/useDraggableWithDomApi/autoScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/autoScroll.ts"],"sourcesContent":["import { getNodeScroll, getScrollHeight, getScrollRect } from '../../lib/dom';\nimport { rafSchd } from '../../lib/rafSchd';\n\nconst SCROLL_SPEED = 10;\nexport const EDGE_SIZE = 50;\n\nexport const getAutoScrollingData = (clientY: number, scrollEl: Element | Window) => {\n  const scrollTop = Math.floor(getNodeScroll(scrollEl).scrollTop);\n\n  const { relative, edges } = getScrollRect(scrollEl);\n  const viewportHeight = relative.height;\n  const documentHeight = getScrollHeight(scrollEl);\n  const maxScrollY = documentHeight - viewportHeight;\n  const canScrollUp = scrollTop > 0;\n  const canScrollDown = scrollTop < maxScrollY;\n\n  const [edgeTop, edgeBottom] = edges.y;\n  const topDistance = clientY - edgeTop;\n  const bottomDistance = edgeBottom - clientY;\n  const isInTopEdge = topDistance <= EDGE_SIZE;\n  const isInBottomEdge = bottomDistance <= EDGE_SIZE;\n\n  const result = {\n    shouldScrolling: (canScrollUp && isInTopEdge) || (canScrollDown && isInBottomEdge),\n    y: 0,\n  };\n\n  // Inspired by https://github.com/SortableJS/Sortable/issues/1907#issuecomment-1495403785\n  if (isInTopEdge) {\n    result.y = -1 * ((EDGE_SIZE - topDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  } else if (isInBottomEdge) {\n    result.y = ((EDGE_SIZE - bottomDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  }\n\n  return result;\n};\n\nexport type AutoScrollingDataFn = () => { shouldScrolling: boolean; y: number };\n\nexport const createAutoScrollController = (scrollEl: Element | Window) => {\n  let isRunning = false;\n  const scheduledScroll = rafSchd(scroll);\n\n  function scroll(fn: AutoScrollingDataFn) {\n    const { shouldScrolling, y } = fn();\n    if (shouldScrolling) {\n      isRunning = true;\n      scrollEl.scrollBy(0, y);\n      scheduledScroll(fn);\n    } else {\n      isRunning = false;\n      scheduledScroll.cancel();\n    }\n  }\n\n  const tryAutoScroll = (fn: AutoScrollingDataFn) => {\n    scheduledScroll(fn);\n  };\n\n  const stop = () => {\n    isRunning = false;\n    scheduledScroll.cancel();\n  };\n\n  return {\n    tryAutoScroll,\n    stop,\n    get isRunning() {\n      return isRunning;\n    },\n  };\n};\n"],"names":["getNodeScroll","getScrollHeight","getScrollRect","rafSchd","SCROLL_SPEED","EDGE_SIZE","getAutoScrollingData","clientY","scrollEl","scrollTop","Math","floor","relative","edges","viewportHeight","height","documentHeight","maxScrollY","canScrollUp","canScrollDown","edgeTop","edgeBottom","y","topDistance","bottomDistance","isInTopEdge","isInBottomEdge","result","shouldScrolling","createAutoScrollController","isRunning","scheduledScroll","scroll","fn","scrollBy","cancel","tryAutoScroll","stop"],"mappings":"AAAA,SAASA,aAAa,EAAEC,eAAe,EAAEC,aAAa,QAAQ,gBAAgB;AAC9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,eAAe;AACrB,OAAO,MAAMC,YAAY,GAAG;AAE5B,OAAO,MAAMC,uBAAuB,CAACC,SAAiBC;IACpD,MAAMC,YAAYC,KAAKC,KAAK,CAACX,cAAcQ,UAAUC,SAAS;IAE9D,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGX,cAAcM;IAC1C,MAAMM,iBAAiBF,SAASG,MAAM;IACtC,MAAMC,iBAAiBf,gBAAgBO;IACvC,MAAMS,aAAaD,iBAAiBF;IACpC,MAAMI,cAAcT,YAAY;IAChC,MAAMU,gBAAgBV,YAAYQ;IAElC,MAAM,CAACG,SAASC,WAAW,GAAGR,MAAMS,CAAC;IACrC,MAAMC,cAAchB,UAAUa;IAC9B,MAAMI,iBAAiBH,aAAad;IACpC,MAAMkB,cAAcF,eAAelB;IACnC,MAAMqB,iBAAiBF,kBAAkBnB;IAEzC,MAAMsB,SAAS;QACbC,iBAAiB,AAACV,eAAeO,eAAiBN,iBAAiBO;QACnEJ,GAAG;IACL;IAEA,yFAAyF;IACzF,IAAIG,aAAa;QACfE,OAAOL,CAAC,GAAG,CAAC,IAAK,CAAA,AAACjB,CAAAA,YAAYkB,WAAU,IAAKlB,SAAQ,IAAKD;IAC5D,OAAO,IAAIsB,gBAAgB;QACzBC,OAAOL,CAAC,GAAG,AAAEjB,CAAAA,YAAYmB,cAAa,IAAKnB,YAAaD;IAC1D;IAEA,OAAOuB;AACT,EAAE;AAIF,OAAO,MAAME,6BAA6B,CAACrB;IACzC,IAAIsB,YAAY;IAChB,MAAMC,kBAAkB5B,QAAQ6B;IAEhC,SAASA,OAAOC,EAAuB;QACrC,MAAM,EAAEL,eAAe,EAAEN,CAAC,EAAE,GAAGW;QAC/B,IAAIL,iBAAiB;YACnBE,YAAY;YACZtB,SAAS0B,QAAQ,CAAC,GAAGZ;YACrBS,gBAAgBE;QAClB,OAAO;YACLH,YAAY;YACZC,gBAAgBI,MAAM;QACxB;IACF;IAEA,MAAMC,gBAAgB,CAACH;QACrBF,gBAAgBE;IAClB;IAEA,MAAMI,OAAO;QACXP,YAAY;QACZC,gBAAgBI,MAAM;IACxB;IAEA,OAAO;QACLC;QACAC;QACA,IAAIP,aAAY;YACd,OAAOA;QACT;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/autoScroll.ts"],"sourcesContent":["import { getNodeScroll, getScrollHeight, getScrollRect } from '../../lib/dom';\nimport { rafSchd } from '../../lib/rafSchd';\n\nconst SCROLL_SPEED = 10;\nexport const EDGE_SIZE = 50;\n\nexport const getAutoScrollingData = (\n  clientY: number,\n  scrollEl: Element | Window,\n): {\n  shouldScrolling: boolean;\n  y: number;\n} => {\n  const scrollTop = Math.floor(getNodeScroll(scrollEl).scrollTop);\n\n  const { relative, edges } = getScrollRect(scrollEl);\n  const viewportHeight = relative.height;\n  const documentHeight = getScrollHeight(scrollEl);\n  const maxScrollY = documentHeight - viewportHeight;\n  const canScrollUp = scrollTop > 0;\n  const canScrollDown = scrollTop < maxScrollY;\n\n  const [edgeTop, edgeBottom] = edges.y;\n  const topDistance = clientY - edgeTop;\n  const bottomDistance = edgeBottom - clientY;\n  const isInTopEdge = topDistance <= EDGE_SIZE;\n  const isInBottomEdge = bottomDistance <= EDGE_SIZE;\n\n  const result = {\n    shouldScrolling: (canScrollUp && isInTopEdge) || (canScrollDown && isInBottomEdge),\n    y: 0,\n  };\n\n  // Inspired by https://github.com/SortableJS/Sortable/issues/1907#issuecomment-1495403785\n  if (isInTopEdge) {\n    result.y = -1 * ((EDGE_SIZE - topDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  } else if (isInBottomEdge) {\n    result.y = ((EDGE_SIZE - bottomDistance) / EDGE_SIZE) * SCROLL_SPEED;\n  }\n\n  return result;\n};\n\nexport type AutoScrollingDataFn = () => { shouldScrolling: boolean; y: number };\n\nexport const createAutoScrollController = (\n  scrollEl: Element | Window,\n): {\n  tryAutoScroll: (fn: AutoScrollingDataFn) => void;\n  stop: () => void;\n  readonly isRunning: boolean;\n} => {\n  let isRunning = false;\n  const scheduledScroll = rafSchd(scroll);\n\n  function scroll(fn: AutoScrollingDataFn) {\n    const { shouldScrolling, y } = fn();\n    if (shouldScrolling) {\n      isRunning = true;\n      scrollEl.scrollBy(0, y);\n      scheduledScroll(fn);\n    } else {\n      isRunning = false;\n      scheduledScroll.cancel();\n    }\n  }\n\n  const tryAutoScroll = (fn: AutoScrollingDataFn) => {\n    scheduledScroll(fn);\n  };\n\n  const stop = () => {\n    isRunning = false;\n    scheduledScroll.cancel();\n  };\n\n  return {\n    tryAutoScroll,\n    stop,\n    get isRunning() {\n      return isRunning;\n    },\n  };\n};\n"],"names":["getNodeScroll","getScrollHeight","getScrollRect","rafSchd","SCROLL_SPEED","EDGE_SIZE","getAutoScrollingData","clientY","scrollEl","scrollTop","Math","floor","relative","edges","viewportHeight","height","documentHeight","maxScrollY","canScrollUp","canScrollDown","edgeTop","edgeBottom","y","topDistance","bottomDistance","isInTopEdge","isInBottomEdge","result","shouldScrolling","createAutoScrollController","isRunning","scheduledScroll","scroll","fn","scrollBy","cancel","tryAutoScroll","stop"],"mappings":"AAAA,SAASA,aAAa,EAAEC,eAAe,EAAEC,aAAa,QAAQ,gBAAgB;AAC9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,eAAe;AACrB,OAAO,MAAMC,YAAY,GAAG;AAE5B,OAAO,MAAMC,uBAAuB,CAClCC,SACAC;IAKA,MAAMC,YAAYC,KAAKC,KAAK,CAACX,cAAcQ,UAAUC,SAAS;IAE9D,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGX,cAAcM;IAC1C,MAAMM,iBAAiBF,SAASG,MAAM;IACtC,MAAMC,iBAAiBf,gBAAgBO;IACvC,MAAMS,aAAaD,iBAAiBF;IACpC,MAAMI,cAAcT,YAAY;IAChC,MAAMU,gBAAgBV,YAAYQ;IAElC,MAAM,CAACG,SAASC,WAAW,GAAGR,MAAMS,CAAC;IACrC,MAAMC,cAAchB,UAAUa;IAC9B,MAAMI,iBAAiBH,aAAad;IACpC,MAAMkB,cAAcF,eAAelB;IACnC,MAAMqB,iBAAiBF,kBAAkBnB;IAEzC,MAAMsB,SAAS;QACbC,iBAAiB,AAACV,eAAeO,eAAiBN,iBAAiBO;QACnEJ,GAAG;IACL;IAEA,yFAAyF;IACzF,IAAIG,aAAa;QACfE,OAAOL,CAAC,GAAG,CAAC,IAAK,CAAA,AAACjB,CAAAA,YAAYkB,WAAU,IAAKlB,SAAQ,IAAKD;IAC5D,OAAO,IAAIsB,gBAAgB;QACzBC,OAAOL,CAAC,GAAG,AAAEjB,CAAAA,YAAYmB,cAAa,IAAKnB,YAAaD;IAC1D;IAEA,OAAOuB;AACT,EAAE;AAIF,OAAO,MAAME,6BAA6B,CACxCrB;IAMA,IAAIsB,YAAY;IAChB,MAAMC,kBAAkB5B,QAAQ6B;IAEhC,SAASA,OAAOC,EAAuB;QACrC,MAAM,EAAEL,eAAe,EAAEN,CAAC,EAAE,GAAGW;QAC/B,IAAIL,iBAAiB;YACnBE,YAAY;YACZtB,SAAS0B,QAAQ,CAAC,GAAGZ;YACrBS,gBAAgBE;QAClB,OAAO;YACLH,YAAY;YACZC,gBAAgBI,MAAM;QACxB;IACF;IAEA,MAAMC,gBAAgB,CAACH;QACrBF,gBAAgBE;IAClB;IAEA,MAAMI,OAAO;QACXP,YAAY;QACZC,gBAAgBI,MAAM;IACxB;IAEA,OAAO;QACLC;QACAC;QACA,IAAIP,aAAY;YACd,OAAOA;QACT;IACF;AACF,EAAE"}

package/dist/hooks/useDraggableWithDomApi/constants.d.ts

@@ -2,6 +2,6 @@ export declare const AUTO_SCROLL_START_DELAY = 300;
 export declare const ITEM_INITIAL_INDEX = -1;
 export declare const DATA_DRAGGABLE_PLACEHOLDER_KEY = "data-draggable-placeholder";
 export declare const DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP: {
-    "data-draggable-placeholder": string;
+    'data-draggable-placeholder': string;
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/hooks/useDraggableWithDomApi/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggableWithDomApi/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,8BAA8B,+BAA+B,CAAC;AAE3E,eAAO,MAAM,qCAAqC;;CAA+C,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggableWithDomApi/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,8BAA8B,+BAA+B,CAAC;AAE3E,eAAO,MAAM,qCAAqC,EAAE;IAClD,4BAA4B,EAAE,MAAM,CAAC;CACS,CAAC"}

package/dist/hooks/useDraggableWithDomApi/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/constants.ts"],"sourcesContent":["export const AUTO_SCROLL_START_DELAY = 300;\n\nexport const ITEM_INITIAL_INDEX = -1;\n\nexport const DATA_DRAGGABLE_PLACEHOLDER_KEY = 'data-draggable-placeholder';\n\nexport const DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP = { [DATA_DRAGGABLE_PLACEHOLDER_KEY]: 'true' };\n"],"names":["AUTO_SCROLL_START_DELAY","ITEM_INITIAL_INDEX","DATA_DRAGGABLE_PLACEHOLDER_KEY","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP"],"mappings":"AAAA,OAAO,MAAMA,0BAA0B,IAAI;AAE3C,OAAO,MAAMC,qBAAqB,CAAC,EAAE;AAErC,OAAO,MAAMC,iCAAiC,6BAA6B;AAE3E,OAAO,MAAMC,wCAAwC;IAAE,CAACD,+BAA+B,EAAE;AAAO,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/constants.ts"],"sourcesContent":["export const AUTO_SCROLL_START_DELAY = 300;\n\nexport const ITEM_INITIAL_INDEX = -1;\n\nexport const DATA_DRAGGABLE_PLACEHOLDER_KEY = 'data-draggable-placeholder';\n\nexport const DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP: {\n  'data-draggable-placeholder': string;\n} = { [DATA_DRAGGABLE_PLACEHOLDER_KEY]: 'true' };\n"],"names":["AUTO_SCROLL_START_DELAY","ITEM_INITIAL_INDEX","DATA_DRAGGABLE_PLACEHOLDER_KEY","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP"],"mappings":"AAAA,OAAO,MAAMA,0BAA0B,IAAI;AAE3C,OAAO,MAAMC,qBAAqB,CAAC,EAAE;AAErC,OAAO,MAAMC,iCAAiC,6BAA6B;AAE3E,OAAO,MAAMC,wCAET;IAAE,CAACD,+BAA+B,EAAE;AAAO,EAAE"}

package/dist/hooks/useDraggableWithDomApi/useDraggableWithDomApi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggableWithDomApi.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAKV,YAAY,EACZ,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,WAAW,2CAGzD,iBAAiB,CAAC,CAAC,CAAC,KAAG,YAqQzB,CAAC"}
+{"version":3,"file":"useDraggableWithDomApi.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAKV,YAAY,EACZ,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,WAAW,2CAGzD,iBAAiB,CAAC,CAAC,CAAC,KAAG,YA2QzB,CAAC"}

package/dist/hooks/useDraggableWithDomApi/useDraggableWithDomApi.js

@@ -41,9 +41,12 @@ export const useDraggableWithDomApi = ({ elRef: draggingElRef, onDragFinish })=>
     const draggingItemRef = React.useRef(null);
     const placeholderItemRef = React.useRef(null);
     const siblingItemsRef = React.useRef([]);
+    const itemsGapRef = React.useRef(0);
     const initializeItems = (draggingEl)=>{
         const draggingElRect = getBoundingClientRect(draggingEl, true);
-        const { children } = draggingEl.parentElement || {
+        const parentElement = draggingEl.parentElement;
+        itemsGapRef.current = parentElement ? parseInt(parentElement.style.gridGap) : 0;
+        const { children } = parentElement || {
             children: []
         };
         Array.prototype.forEach.call(children, (el, index)=>{
@@ -75,7 +78,7 @@ export const useDraggableWithDomApi = ({ elRef: draggingElRef, onDragFinish })=>
         if (draggingItemRef.current) {
             setInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint
         }
-        siblingItemsRef.current.forEach(setInitialSiblingItemStyles); // 2. repaint
+        siblingItemsRef.current.forEach((sibling)=>setInitialSiblingItemStyles(sibling, itemsGapRef.current)); // 2. repaint
     };
     const cleanupItems = ()=>{
         if (placeholderItemRef.current) {
@@ -148,8 +151,8 @@ export const useDraggableWithDomApi = ({ elRef: draggingElRef, onDragFinish })=>
         ];
     };
     const setShiftAndUnshiftItemStyles = (shiftItemEls, unshiftItemEls)=>{
-        shiftItemEls.forEach(setSiblingItemsShiftStyles);
-        unshiftItemEls.forEach(setSiblingItemsShiftStyles);
+        shiftItemEls.forEach((item)=>setSiblingItemsShiftStyles(item, itemsGapRef.current));
+        unshiftItemEls.forEach((item)=>setSiblingItemsShiftStyles(item, itemsGapRef.current));
     };
     const schedulingAutoScrollTimeoutIdRef = React.useRef(null);
     const clearSchedulingAutoScrollTimeout = ()=>{

package/dist/hooks/useDraggableWithDomApi/useDraggableWithDomApi.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TouchEvent } from '../../components/Touch/Touch';\nimport { getBoundingClientRect, getNearestOverflowAncestor, getNodeScroll } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { createAutoScrollController, getAutoScrollingData } from './autoScroll';\nimport {\n  AUTO_SCROLL_START_DELAY,\n  DATA_DRAGGABLE_PLACEHOLDER_KEY,\n  ITEM_INITIAL_INDEX,\n} from './constants';\nimport type {\n  Direction,\n  DraggingItem,\n  PlaceholderItem,\n  SiblingItem,\n  UseDraggable,\n  UseDraggableProps,\n} from './types';\nimport {\n  getTargetIsOverOrUnderElData,\n  setDraggingItemShiftStyles,\n  setInitialDraggingItemStyles,\n  setInitialPlaceholderItemStyles,\n  setInitialSiblingItemStyles,\n  setSiblingItemsShiftStyles,\n  unsetInitialDraggingItemStyles,\n  unsetInitialPlaceholderItemStyles,\n  unsetInitialSiblingItemStyles,\n} from './utils';\n\nexport const useDraggableWithDomApi = <T extends HTMLElement>({\n  elRef: draggingElRef,\n  onDragFinish,\n}: UseDraggableProps<T>): UseDraggable => {\n  const [dragging, setDragging] = React.useState(false);\n  const lastClientYRef = React.useRef(0);\n  const lastDragShiftYRef = React.useRef(0);\n\n  const scrollElRef = React.useRef<Element | Window | null>(null);\n  const lastScrollTopRef = React.useRef<number>(0);\n  const scrollControllerRef = React.useRef<ReturnType<typeof createAutoScrollController> | null>(\n    null,\n  );\n  const initializeScrollRefs = (draggableEl: HTMLElement) => {\n    const node = getNearestOverflowAncestor(draggableEl);\n    if (node) {\n      scrollElRef.current = node;\n      lastScrollTopRef.current = getNodeScroll(node).scrollTop;\n      scrollControllerRef.current = createAutoScrollController(scrollElRef.current);\n    }\n  };\n  const cleanupScrollRefs = () => {\n    lastScrollTopRef.current = 0;\n    scrollControllerRef.current?.stop();\n    scrollElRef.current = scrollControllerRef.current = null;\n  };\n\n  const lastDragDirectionRef = React.useRef<Direction | undefined>(undefined);\n  const toggleDragDirection = (prevShiftY: number, nextShiftY: number) => {\n    const shiftYDiff = prevShiftY - nextShiftY;\n    if (shiftYDiff < 0) {\n      return 'down';\n    }\n    if (shiftYDiff > 0) {\n      return 'up';\n    }\n    return lastDragDirectionRef.current;\n  };\n\n  const itemStartIndexRef = React.useRef<number>(ITEM_INITIAL_INDEX);\n  const itemEndIndexRef = React.useRef<number>(ITEM_INITIAL_INDEX);\n  const draggingItemRef = React.useRef<DraggingItem | null>(null);\n  const placeholderItemRef = React.useRef<PlaceholderItem | null>(null);\n  const siblingItemsRef = React.useRef<SiblingItem[]>([]);\n  const initializeItems = (draggingEl: HTMLElement) => {\n    const draggingElRect = getBoundingClientRect(draggingEl, true);\n    const { children } = draggingEl.parentElement || { children: [] };\n    Array.prototype.forEach.call(children, (el: HTMLElement, index) => {\n      if (el === draggingEl) {\n        itemStartIndexRef.current = itemEndIndexRef.current = index;\n        draggingItemRef.current = { index, el, draggingElRect };\n      } else if (el.getAttribute(DATA_DRAGGABLE_PLACEHOLDER_KEY) !== null) {\n        placeholderItemRef.current = { index, el, draggingElRect };\n      } else {\n        siblingItemsRef.current.push({ index, el, shifted: itemStartIndexRef.current !== ITEM_INITIAL_INDEX && itemStartIndexRef.current < index, draggingElRect }); // prettier-ignore\n      }\n    });\n    if (placeholderItemRef.current) {\n      setInitialPlaceholderItemStyles(placeholderItemRef.current); // 1. reflow\n    }\n    if (draggingItemRef.current) {\n      setInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint\n    }\n    siblingItemsRef.current.forEach(setInitialSiblingItemStyles); // 2. repaint\n  };\n  const cleanupItems = () => {\n    if (placeholderItemRef.current) {\n      unsetInitialPlaceholderItemStyles(placeholderItemRef.current); // 1. reflow\n    }\n    if (draggingItemRef.current) {\n      unsetInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint\n    }\n    siblingItemsRef.current.forEach(unsetInitialSiblingItemStyles); // 2. repaint\n    siblingItemsRef.current = [];\n    placeholderItemRef.current = draggingItemRef.current = null;\n\n    const swappedItemIndexRange = { from: itemStartIndexRef.current, to: itemEndIndexRef.current };\n    itemStartIndexRef.current = itemEndIndexRef.current = ITEM_INITIAL_INDEX;\n    return swappedItemIndexRange;\n  };\n  const getShiftAndUnshiftItemsPreparedData = (\n    clientY: number,\n  ): [Array<[SiblingItem, Direction]>, Array<[SiblingItem, Direction]>] => {\n    const shiftItemEls: Array<[SiblingItem, Direction]> = [];\n    const unshiftItemEls: Array<[SiblingItem, Direction]> = [];\n    itemEndIndexRef.current = itemStartIndexRef.current;\n    siblingItemsRef.current.forEach((siblingItem) => {\n      const { isOverEl, isUnderEl } = getTargetIsOverOrUnderElData(\n        clientY,\n        getBoundingClientRect(siblingItem.el),\n      );\n      if (itemStartIndexRef.current < siblingItem.index) {\n        if (isOverEl) {\n          itemEndIndexRef.current = itemEndIndexRef.current + 1;\n          if (lastDragDirectionRef.current === 'down' && siblingItem.shifted) {\n            siblingItem.shifted = false;\n            shiftItemEls.push([siblingItem, 'up']);\n          }\n        }\n        if (isUnderEl) {\n          if (lastDragDirectionRef.current === 'up' && !siblingItem.shifted) {\n            siblingItem.shifted = true;\n            unshiftItemEls.push([siblingItem, 'down']);\n          }\n        }\n      } else if (itemStartIndexRef.current > siblingItem.index) {\n        if (isUnderEl) {\n          itemEndIndexRef.current = itemEndIndexRef.current - 1;\n          if (lastDragDirectionRef.current === 'up' && !siblingItem.shifted) {\n            siblingItem.shifted = true;\n            shiftItemEls.push([siblingItem, 'down']);\n          }\n        }\n        if (isOverEl) {\n          if (lastDragDirectionRef.current === 'down' && siblingItem.shifted) {\n            siblingItem.shifted = false;\n            unshiftItemEls.push([siblingItem, 'up']);\n          }\n        }\n      }\n    });\n    return [shiftItemEls, unshiftItemEls];\n  };\n  const setShiftAndUnshiftItemStyles = (\n    shiftItemEls: Array<[SiblingItem, Direction]>,\n    unshiftItemEls: Array<[SiblingItem, Direction]>,\n  ) => {\n    shiftItemEls.forEach(setSiblingItemsShiftStyles);\n    unshiftItemEls.forEach(setSiblingItemsShiftStyles);\n  };\n\n  const schedulingAutoScrollTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clearSchedulingAutoScrollTimeout = () => {\n    if (schedulingAutoScrollTimeoutIdRef.current) {\n      clearTimeout(schedulingAutoScrollTimeoutIdRef.current);\n      schedulingAutoScrollTimeoutIdRef.current = null;\n    }\n  };\n  const tryAutoScroll = () => {\n    if (scrollControllerRef.current) {\n      scrollControllerRef.current.tryAutoScroll(() => {\n        return scrollElRef.current\n          ? getAutoScrollingData(lastClientYRef.current, scrollElRef.current)\n          : {\n              shouldScrolling: false,\n              y: 0,\n            };\n      });\n    }\n  };\n  const schedulingAutoScroll = () => {\n    clearSchedulingAutoScrollTimeout();\n    schedulingAutoScrollTimeoutIdRef.current = setTimeout(() => {\n      schedulingAutoScrollTimeoutIdRef.current = null;\n      tryAutoScroll();\n    }, AUTO_SCROLL_START_DELAY);\n  };\n\n  const onDragStart = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const draggingEl = draggingElRef.current;\n\n    if (!draggingEl) {\n      return;\n    }\n\n    if (dragging) {\n      lastDragDirectionRef.current = toggleDragDirection(lastDragShiftYRef.current, event.shiftY);\n      lastDragShiftYRef.current = event.shiftY;\n      lastClientYRef.current = event.clientY;\n\n      if (scrollControllerRef.current && scrollControllerRef.current.isRunning) {\n        setDraggingItemShiftStyles(draggingEl, lastDragShiftYRef.current);\n      } else {\n        const [shiftItemEls, unshiftItemEls] = getShiftAndUnshiftItemsPreparedData(\n          lastClientYRef.current,\n        );\n        setDraggingItemShiftStyles(draggingEl, lastDragShiftYRef.current);\n        setShiftAndUnshiftItemStyles(shiftItemEls, unshiftItemEls);\n        schedulingAutoScroll();\n      }\n    } else {\n      setDragging((prevDragging) => {\n        // На случай, если onDragMove успеет вызваться ещё раз до того, как `dragging` выставится в\n        // `true`\n        if (prevDragging) {\n          return prevDragging;\n        }\n        initializeScrollRefs(draggingEl);\n        initializeItems(draggingEl);\n        return true;\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    clearSchedulingAutoScrollTimeout();\n    cleanupScrollRefs();\n\n    lastClientYRef.current = lastDragShiftYRef.current = 0;\n    lastDragDirectionRef.current = undefined;\n\n    if (dragging) {\n      const swappedItemRange = cleanupItems();\n      if (onDragFinish) {\n        onDragFinish(swappedItemRange);\n      }\n      setDragging(false);\n    }\n  };\n\n  const handleScroll = React.useCallback(() => {\n    if (!draggingElRef.current || !scrollElRef.current) {\n      return;\n    }\n\n    const nextScrollTop = getNodeScroll(scrollElRef.current).scrollTop;\n    lastDragDirectionRef.current = toggleDragDirection(lastScrollTopRef.current, nextScrollTop);\n    const scrollDiff = lastScrollTopRef.current - nextScrollTop;\n    const clientYWithScrollOffset = lastClientYRef.current + scrollDiff;\n    lastScrollTopRef.current = nextScrollTop;\n\n    const [shiftItemEls, unshiftItemEls] =\n      getShiftAndUnshiftItemsPreparedData(clientYWithScrollOffset);\n    setShiftAndUnshiftItemStyles(shiftItemEls, unshiftItemEls);\n  }, [draggingElRef]);\n\n  useIsomorphicLayoutEffect(\n    function recalculateOnScroll() {\n      const scrollEl = scrollElRef.current;\n      if (!dragging || !scrollEl) {\n        return;\n      }\n      scrollEl.addEventListener('scroll', handleScroll);\n      return () => {\n        if (scrollEl) {\n          scrollEl.removeEventListener('scroll', handleScroll);\n        }\n      };\n    },\n    [dragging, handleScroll],\n  );\n\n  useIsomorphicLayoutEffect(\n    () =>\n      function componentWillUnmount() {\n        if (placeholderItemRef.current) {\n          unsetInitialPlaceholderItemStyles(placeholderItemRef.current);\n        }\n      },\n    [],\n  );\n\n  return { dragging, onDragStart, onDragMove, onDragEnd };\n};\n"],"names":["React","getBoundingClientRect","getNearestOverflowAncestor","getNodeScroll","useIsomorphicLayoutEffect","createAutoScrollController","getAutoScrollingData","AUTO_SCROLL_START_DELAY","DATA_DRAGGABLE_PLACEHOLDER_KEY","ITEM_INITIAL_INDEX","getTargetIsOverOrUnderElData","setDraggingItemShiftStyles","setInitialDraggingItemStyles","setInitialPlaceholderItemStyles","setInitialSiblingItemStyles","setSiblingItemsShiftStyles","unsetInitialDraggingItemStyles","unsetInitialPlaceholderItemStyles","unsetInitialSiblingItemStyles","useDraggableWithDomApi","elRef","draggingElRef","onDragFinish","dragging","setDragging","useState","lastClientYRef","useRef","lastDragShiftYRef","scrollElRef","lastScrollTopRef","scrollControllerRef","initializeScrollRefs","draggableEl","node","current","scrollTop","cleanupScrollRefs","stop","lastDragDirectionRef","undefined","toggleDragDirection","prevShiftY","nextShiftY","shiftYDiff","itemStartIndexRef","itemEndIndexRef","draggingItemRef","placeholderItemRef","siblingItemsRef","initializeItems","draggingEl","draggingElRect","children","parentElement","Array","prototype","forEach","call","el","index","getAttribute","push","shifted","cleanupItems","swappedItemIndexRange","from","to","getShiftAndUnshiftItemsPreparedData","clientY","shiftItemEls","unshiftItemEls","siblingItem","isOverEl","isUnderEl","setShiftAndUnshiftItemStyles","schedulingAutoScrollTimeoutIdRef","clearSchedulingAutoScrollTimeout","clearTimeout","tryAutoScroll","shouldScrolling","y","schedulingAutoScroll","setTimeout","onDragStart","event","originalEvent","stopPropagation","preventDefault","onDragMove","shiftY","isRunning","prevDragging","onDragEnd","swappedItemRange","handleScroll","useCallback","nextScrollTop","scrollDiff","clientYWithScrollOffset","recalculateOnScroll","scrollEl","addEventListener","removeEventListener","componentWillUnmount"],"mappings":"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"}
+{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TouchEvent } from '../../components/Touch/Touch';\nimport { getBoundingClientRect, getNearestOverflowAncestor, getNodeScroll } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { createAutoScrollController, getAutoScrollingData } from './autoScroll';\nimport {\n  AUTO_SCROLL_START_DELAY,\n  DATA_DRAGGABLE_PLACEHOLDER_KEY,\n  ITEM_INITIAL_INDEX,\n} from './constants';\nimport type {\n  Direction,\n  DraggingItem,\n  PlaceholderItem,\n  SiblingItem,\n  UseDraggable,\n  UseDraggableProps,\n} from './types';\nimport {\n  getTargetIsOverOrUnderElData,\n  setDraggingItemShiftStyles,\n  setInitialDraggingItemStyles,\n  setInitialPlaceholderItemStyles,\n  setInitialSiblingItemStyles,\n  setSiblingItemsShiftStyles,\n  unsetInitialDraggingItemStyles,\n  unsetInitialPlaceholderItemStyles,\n  unsetInitialSiblingItemStyles,\n} from './utils';\n\nexport const useDraggableWithDomApi = <T extends HTMLElement>({\n  elRef: draggingElRef,\n  onDragFinish,\n}: UseDraggableProps<T>): UseDraggable => {\n  const [dragging, setDragging] = React.useState(false);\n  const lastClientYRef = React.useRef(0);\n  const lastDragShiftYRef = React.useRef(0);\n\n  const scrollElRef = React.useRef<Element | Window | null>(null);\n  const lastScrollTopRef = React.useRef<number>(0);\n  const scrollControllerRef = React.useRef<ReturnType<typeof createAutoScrollController> | null>(\n    null,\n  );\n  const initializeScrollRefs = (draggableEl: HTMLElement) => {\n    const node = getNearestOverflowAncestor(draggableEl);\n    if (node) {\n      scrollElRef.current = node;\n      lastScrollTopRef.current = getNodeScroll(node).scrollTop;\n      scrollControllerRef.current = createAutoScrollController(scrollElRef.current);\n    }\n  };\n  const cleanupScrollRefs = () => {\n    lastScrollTopRef.current = 0;\n    scrollControllerRef.current?.stop();\n    scrollElRef.current = scrollControllerRef.current = null;\n  };\n\n  const lastDragDirectionRef = React.useRef<Direction | undefined>(undefined);\n  const toggleDragDirection = (prevShiftY: number, nextShiftY: number) => {\n    const shiftYDiff = prevShiftY - nextShiftY;\n    if (shiftYDiff < 0) {\n      return 'down';\n    }\n    if (shiftYDiff > 0) {\n      return 'up';\n    }\n    return lastDragDirectionRef.current;\n  };\n\n  const itemStartIndexRef = React.useRef<number>(ITEM_INITIAL_INDEX);\n  const itemEndIndexRef = React.useRef<number>(ITEM_INITIAL_INDEX);\n  const draggingItemRef = React.useRef<DraggingItem | null>(null);\n  const placeholderItemRef = React.useRef<PlaceholderItem | null>(null);\n  const siblingItemsRef = React.useRef<SiblingItem[]>([]);\n  const itemsGapRef = React.useRef<number>(0);\n  const initializeItems = (draggingEl: HTMLElement) => {\n    const draggingElRect = getBoundingClientRect(draggingEl, true);\n    const parentElement = draggingEl.parentElement;\n    itemsGapRef.current = parentElement ? parseInt(parentElement.style.gridGap) : 0;\n\n    const { children } = parentElement || { children: [] };\n    Array.prototype.forEach.call(children, (el: HTMLElement, index) => {\n      if (el === draggingEl) {\n        itemStartIndexRef.current = itemEndIndexRef.current = index;\n        draggingItemRef.current = { index, el, draggingElRect };\n      } else if (el.getAttribute(DATA_DRAGGABLE_PLACEHOLDER_KEY) !== null) {\n        placeholderItemRef.current = { index, el, draggingElRect };\n      } else {\n        siblingItemsRef.current.push({ index, el, shifted: itemStartIndexRef.current !== ITEM_INITIAL_INDEX && itemStartIndexRef.current < index, draggingElRect }); // prettier-ignore\n      }\n    });\n    if (placeholderItemRef.current) {\n      setInitialPlaceholderItemStyles(placeholderItemRef.current); // 1. reflow\n    }\n    if (draggingItemRef.current) {\n      setInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint\n    }\n    siblingItemsRef.current.forEach((sibling) =>\n      setInitialSiblingItemStyles(sibling, itemsGapRef.current),\n    ); // 2. repaint\n  };\n  const cleanupItems = () => {\n    if (placeholderItemRef.current) {\n      unsetInitialPlaceholderItemStyles(placeholderItemRef.current); // 1. reflow\n    }\n    if (draggingItemRef.current) {\n      unsetInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint\n    }\n    siblingItemsRef.current.forEach(unsetInitialSiblingItemStyles); // 2. repaint\n    siblingItemsRef.current = [];\n    placeholderItemRef.current = draggingItemRef.current = null;\n\n    const swappedItemIndexRange = { from: itemStartIndexRef.current, to: itemEndIndexRef.current };\n    itemStartIndexRef.current = itemEndIndexRef.current = ITEM_INITIAL_INDEX;\n    return swappedItemIndexRange;\n  };\n  const getShiftAndUnshiftItemsPreparedData = (\n    clientY: number,\n  ): [Array<[SiblingItem, Direction]>, Array<[SiblingItem, Direction]>] => {\n    const shiftItemEls: Array<[SiblingItem, Direction]> = [];\n    const unshiftItemEls: Array<[SiblingItem, Direction]> = [];\n    itemEndIndexRef.current = itemStartIndexRef.current;\n    siblingItemsRef.current.forEach((siblingItem) => {\n      const { isOverEl, isUnderEl } = getTargetIsOverOrUnderElData(\n        clientY,\n        getBoundingClientRect(siblingItem.el),\n      );\n      if (itemStartIndexRef.current < siblingItem.index) {\n        if (isOverEl) {\n          itemEndIndexRef.current = itemEndIndexRef.current + 1;\n          if (lastDragDirectionRef.current === 'down' && siblingItem.shifted) {\n            siblingItem.shifted = false;\n            shiftItemEls.push([siblingItem, 'up']);\n          }\n        }\n        if (isUnderEl) {\n          if (lastDragDirectionRef.current === 'up' && !siblingItem.shifted) {\n            siblingItem.shifted = true;\n            unshiftItemEls.push([siblingItem, 'down']);\n          }\n        }\n      } else if (itemStartIndexRef.current > siblingItem.index) {\n        if (isUnderEl) {\n          itemEndIndexRef.current = itemEndIndexRef.current - 1;\n          if (lastDragDirectionRef.current === 'up' && !siblingItem.shifted) {\n            siblingItem.shifted = true;\n            shiftItemEls.push([siblingItem, 'down']);\n          }\n        }\n        if (isOverEl) {\n          if (lastDragDirectionRef.current === 'down' && siblingItem.shifted) {\n            siblingItem.shifted = false;\n            unshiftItemEls.push([siblingItem, 'up']);\n          }\n        }\n      }\n    });\n    return [shiftItemEls, unshiftItemEls];\n  };\n  const setShiftAndUnshiftItemStyles = (\n    shiftItemEls: Array<[SiblingItem, Direction]>,\n    unshiftItemEls: Array<[SiblingItem, Direction]>,\n  ) => {\n    shiftItemEls.forEach((item) => setSiblingItemsShiftStyles(item, itemsGapRef.current));\n    unshiftItemEls.forEach((item) => setSiblingItemsShiftStyles(item, itemsGapRef.current));\n  };\n\n  const schedulingAutoScrollTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const clearSchedulingAutoScrollTimeout = () => {\n    if (schedulingAutoScrollTimeoutIdRef.current) {\n      clearTimeout(schedulingAutoScrollTimeoutIdRef.current);\n      schedulingAutoScrollTimeoutIdRef.current = null;\n    }\n  };\n  const tryAutoScroll = () => {\n    if (scrollControllerRef.current) {\n      scrollControllerRef.current.tryAutoScroll(() => {\n        return scrollElRef.current\n          ? getAutoScrollingData(lastClientYRef.current, scrollElRef.current)\n          : {\n              shouldScrolling: false,\n              y: 0,\n            };\n      });\n    }\n  };\n  const schedulingAutoScroll = () => {\n    clearSchedulingAutoScrollTimeout();\n    schedulingAutoScrollTimeoutIdRef.current = setTimeout(() => {\n      schedulingAutoScrollTimeoutIdRef.current = null;\n      tryAutoScroll();\n    }, AUTO_SCROLL_START_DELAY);\n  };\n\n  const onDragStart = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const draggingEl = draggingElRef.current;\n\n    if (!draggingEl) {\n      return;\n    }\n\n    if (dragging) {\n      lastDragDirectionRef.current = toggleDragDirection(lastDragShiftYRef.current, event.shiftY);\n      lastDragShiftYRef.current = event.shiftY;\n      lastClientYRef.current = event.clientY;\n\n      if (scrollControllerRef.current && scrollControllerRef.current.isRunning) {\n        setDraggingItemShiftStyles(draggingEl, lastDragShiftYRef.current);\n      } else {\n        const [shiftItemEls, unshiftItemEls] = getShiftAndUnshiftItemsPreparedData(\n          lastClientYRef.current,\n        );\n        setDraggingItemShiftStyles(draggingEl, lastDragShiftYRef.current);\n        setShiftAndUnshiftItemStyles(shiftItemEls, unshiftItemEls);\n        schedulingAutoScroll();\n      }\n    } else {\n      setDragging((prevDragging) => {\n        // На случай, если onDragMove успеет вызваться ещё раз до того, как `dragging` выставится в\n        // `true`\n        if (prevDragging) {\n          return prevDragging;\n        }\n        initializeScrollRefs(draggingEl);\n        initializeItems(draggingEl);\n        return true;\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    clearSchedulingAutoScrollTimeout();\n    cleanupScrollRefs();\n\n    lastClientYRef.current = lastDragShiftYRef.current = 0;\n    lastDragDirectionRef.current = undefined;\n\n    if (dragging) {\n      const swappedItemRange = cleanupItems();\n      if (onDragFinish) {\n        onDragFinish(swappedItemRange);\n      }\n      setDragging(false);\n    }\n  };\n\n  const handleScroll = React.useCallback(() => {\n    if (!draggingElRef.current || !scrollElRef.current) {\n      return;\n    }\n\n    const nextScrollTop = getNodeScroll(scrollElRef.current).scrollTop;\n    lastDragDirectionRef.current = toggleDragDirection(lastScrollTopRef.current, nextScrollTop);\n    const scrollDiff = lastScrollTopRef.current - nextScrollTop;\n    const clientYWithScrollOffset = lastClientYRef.current + scrollDiff;\n    lastScrollTopRef.current = nextScrollTop;\n\n    const [shiftItemEls, unshiftItemEls] =\n      getShiftAndUnshiftItemsPreparedData(clientYWithScrollOffset);\n    setShiftAndUnshiftItemStyles(shiftItemEls, unshiftItemEls);\n  }, [draggingElRef]);\n\n  useIsomorphicLayoutEffect(\n    function recalculateOnScroll() {\n      const scrollEl = scrollElRef.current;\n      if (!dragging || !scrollEl) {\n        return;\n      }\n      scrollEl.addEventListener('scroll', handleScroll);\n      return () => {\n        if (scrollEl) {\n          scrollEl.removeEventListener('scroll', handleScroll);\n        }\n      };\n    },\n    [dragging, handleScroll],\n  );\n\n  useIsomorphicLayoutEffect(\n    () =>\n      function componentWillUnmount() {\n        if (placeholderItemRef.current) {\n          unsetInitialPlaceholderItemStyles(placeholderItemRef.current);\n        }\n      },\n    [],\n  );\n\n  return { dragging, onDragStart, onDragMove, onDragEnd };\n};\n"],"names":["React","getBoundingClientRect","getNearestOverflowAncestor","getNodeScroll","useIsomorphicLayoutEffect","createAutoScrollController","getAutoScrollingData","AUTO_SCROLL_START_DELAY","DATA_DRAGGABLE_PLACEHOLDER_KEY","ITEM_INITIAL_INDEX","getTargetIsOverOrUnderElData","setDraggingItemShiftStyles","setInitialDraggingItemStyles","setInitialPlaceholderItemStyles","setInitialSiblingItemStyles","setSiblingItemsShiftStyles","unsetInitialDraggingItemStyles","unsetInitialPlaceholderItemStyles","unsetInitialSiblingItemStyles","useDraggableWithDomApi","elRef","draggingElRef","onDragFinish","dragging","setDragging","useState","lastClientYRef","useRef","lastDragShiftYRef","scrollElRef","lastScrollTopRef","scrollControllerRef","initializeScrollRefs","draggableEl","node","current","scrollTop","cleanupScrollRefs","stop","lastDragDirectionRef","undefined","toggleDragDirection","prevShiftY","nextShiftY","shiftYDiff","itemStartIndexRef","itemEndIndexRef","draggingItemRef","placeholderItemRef","siblingItemsRef","itemsGapRef","initializeItems","draggingEl","draggingElRect","parentElement","parseInt","style","gridGap","children","Array","prototype","forEach","call","el","index","getAttribute","push","shifted","sibling","cleanupItems","swappedItemIndexRange","from","to","getShiftAndUnshiftItemsPreparedData","clientY","shiftItemEls","unshiftItemEls","siblingItem","isOverEl","isUnderEl","setShiftAndUnshiftItemStyles","item","schedulingAutoScrollTimeoutIdRef","clearSchedulingAutoScrollTimeout","clearTimeout","tryAutoScroll","shouldScrolling","y","schedulingAutoScroll","setTimeout","onDragStart","event","originalEvent","stopPropagation","preventDefault","onDragMove","shiftY","isRunning","prevDragging","onDragEnd","swappedItemRange","handleScroll","useCallback","nextScrollTop","scrollDiff","clientYWithScrollOffset","recalculateOnScroll","scrollEl","addEventListener","removeEventListener","componentWillUnmount"],"mappings":"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"}

package/dist/hooks/useDraggableWithDomApi/utils.d.ts

@@ -4,11 +4,11 @@ export declare const getTargetIsOverOrUnderElData: (clientY: number, elRect: DOM
     isOverEl: boolean;
 };
 export declare const setDraggingItemShiftStyles: (draggingEl: HTMLElement, nextShiftY: number) => void;
-export declare const setSiblingItemsShiftStyles: ([{ el, draggingElRect: { height }, }, direction,]: [Omit<SiblingItem, "shifted">, Direction]) => void;
+export declare const setSiblingItemsShiftStyles: ([{ el, draggingElRect: { height }, }, direction,]: [Omit<SiblingItem, "shifted">, Direction], additionalGap?: number) => void;
 export declare const setInitialDraggingItemStyles: ({ el, draggingElRect }: DraggingItem) => void;
 export declare const unsetInitialDraggingItemStyles: ({ el }: DraggingItem) => void;
 export declare const setInitialPlaceholderItemStyles: ({ el, draggingElRect }: PlaceholderItem) => void;
 export declare const unsetInitialPlaceholderItemStyles: ({ el }: PlaceholderItem) => void;
-export declare const setInitialSiblingItemStyles: ({ el, shifted, draggingElRect }: SiblingItem) => void;
+export declare const setInitialSiblingItemStyles: ({ el, shifted, draggingElRect }: SiblingItem, additionalGap?: number) => void;
 export declare const unsetInitialSiblingItemStyles: ({ el }: Omit<SiblingItem, "shifted">) => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/hooks/useDraggableWithDomApi/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggableWithDomApi/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErF,eAAO,MAAM,4BAA4B,YAAa,MAAM,UAAU,OAAO;;;CAM5E,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgB,WAAW,cAAc,MAAM,SAIrF,CAAC;AAEF,eAAO,MAAM,0BAA0B,sDAMpC,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,SAU3C,CAAC;AAEF,eAAO,MAAM,4BAA4B,2BAA4B,YAAY,SAchF,CAAC;AAEF,eAAO,MAAM,8BAA8B,WAAY,YAAY,SAYlE,CAAC;AAEF,eAAO,MAAM,+BAA+B,2BAA4B,eAAe,SAWtF,CAAC;AAEF,eAAO,MAAM,iCAAiC,WAAY,eAAe,SAIxE,CAAC;AAEF,eAAO,MAAM,2BAA2B,oCAAqC,WAAW,SAUvF,CAAC;AAEF,eAAO,MAAM,6BAA6B,WAAY,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,SAMjF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggableWithDomApi/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErF,eAAO,MAAM,4BAA4B,YAC9B,MAAM,UACP,OAAO,KACd;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAOnB,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgB,WAAW,cAAc,MAAM,KAAG,IAIxF,CAAC;AAEF,eAAO,MAAM,0BAA0B,sDAOlC,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,6BAE3C,IAUF,CAAC;AAEF,eAAO,MAAM,4BAA4B,2BAA4B,YAAY,KAAG,IAcnF,CAAC;AAEF,eAAO,MAAM,8BAA8B,WAAY,YAAY,KAAG,IAYrE,CAAC;AAEF,eAAO,MAAM,+BAA+B,2BAA4B,eAAe,KAAG,IAYzF,CAAC;AAEF,eAAO,MAAM,iCAAiC,WAAY,eAAe,KAAG,IAM3E,CAAC;AAEF,eAAO,MAAM,2BAA2B,oCACL,WAAW,6BAE3C,IAUF,CAAC;AAEF,eAAO,MAAM,6BAA6B,WAAY,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,KAAG,IAMpF,CAAC"}

package/dist/hooks/useDraggableWithDomApi/utils.js

@@ -10,14 +10,14 @@ export const setDraggingItemShiftStyles = (draggingEl, nextShiftY)=>{
         draggingEl.style.transform = `translateY(${nextShiftY}px)`;
     });
 };
-export const setSiblingItemsShiftStyles = ([{ el, draggingElRect: { height } }, direction])=>{
+export const setSiblingItemsShiftStyles = ([{ el, draggingElRect: { height } }, direction], additionalGap = 0)=>{
     requestAnimationFrame(()=>{
         if (direction === 'up') {
             el.style.setProperty('transition', 'transform 0.3s ease-in 0s');
             el.style.removeProperty('transform');
         } else {
             el.style.setProperty('transition', 'transform 0.3s ease-out 0s');
-            el.style.setProperty('transform', `translateY(${height}px)`);
+            el.style.setProperty('transform', `translateY(${height + additionalGap}px)`);
         }
     });
 };
@@ -60,19 +60,22 @@ export const setInitialPlaceholderItemStyles = ({ el, draggingElRect })=>{
     node.style.setProperty('height', `${height}px`);
     node.style.setProperty('pointer-events', 'none');
     el.appendChild(node);
+    el.style.setProperty('display', 'block');
 };
 export const unsetInitialPlaceholderItemStyles = ({ el })=>{
+    el.style.display = '';
+    el.removeAttribute('style');
     if (el.firstElementChild) {
         el.firstElementChild.remove();
     }
 };
-export const setInitialSiblingItemStyles = ({ el, shifted, draggingElRect })=>{
+export const setInitialSiblingItemStyles = ({ el, shifted, draggingElRect }, additionalGap = 0)=>{
     const { height } = draggingElRect;
     requestAnimationFrame(()=>{
         el.style.setProperty('pointer-events', 'none');
         el.style.setProperty('transition', 'none 0s ease 0s');
         if (shifted) {
-            el.style.setProperty('transform', `translateY(${height}px)`);
+            el.style.setProperty('transform', `translateY(${height + additionalGap}px)`);
         }
     });
 };

package/dist/hooks/useDraggableWithDomApi/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/utils.ts"],"sourcesContent":["import type { Direction, DraggingItem, PlaceholderItem, SiblingItem } from './types';\n\nexport const getTargetIsOverOrUnderElData = (clientY: number, elRect: DOMRect) => {\n  const elRectHalfHeight = elRect.height / 2;\n  return {\n    isUnderEl: clientY <= elRect.bottom - elRectHalfHeight,\n    isOverEl: clientY >= elRect.top + elRectHalfHeight,\n  };\n};\n\nexport const setDraggingItemShiftStyles = (draggingEl: HTMLElement, nextShiftY: number) => {\n  requestAnimationFrame(() => {\n    draggingEl.style.transform = `translateY(${nextShiftY}px)`;\n  });\n};\n\nexport const setSiblingItemsShiftStyles = ([\n  {\n    el,\n    draggingElRect: { height },\n  },\n  direction,\n]: [Omit<SiblingItem, 'shifted'>, Direction]) => {\n  requestAnimationFrame(() => {\n    if (direction === 'up') {\n      el.style.setProperty('transition', 'transform 0.3s ease-in 0s');\n      el.style.removeProperty('transform');\n    } else {\n      el.style.setProperty('transition', 'transform 0.3s ease-out 0s');\n      el.style.setProperty('transform', `translateY(${height}px)`);\n    }\n  });\n};\n\nexport const setInitialDraggingItemStyles = ({ el, draggingElRect }: DraggingItem) => {\n  const { top, left, width, height } = draggingElRect;\n  requestAnimationFrame(() => {\n    // Inspired by https://github.com/hello-pangea/dnd\n    el.style.setProperty('pointer-events', 'none');\n    el.style.setProperty('position', 'fixed');\n    el.style.setProperty('top', `${top}px`);\n    el.style.setProperty('left', `${left}px`);\n    el.style.setProperty('width', `${width}px`);\n    el.style.setProperty('height', `${height}px`);\n    el.style.setProperty('z-index', 'var(--vkui_internal--z_index_cell_dragging)');\n    el.style.setProperty('box-sizing', 'border-box');\n    el.style.setProperty('transform', 'translateY(0)');\n  });\n};\n\nexport const unsetInitialDraggingItemStyles = ({ el }: DraggingItem) => {\n  requestAnimationFrame(() => {\n    el.style.removeProperty('pointer-events');\n    el.style.removeProperty('position');\n    el.style.removeProperty('top');\n    el.style.removeProperty('left');\n    el.style.removeProperty('width');\n    el.style.removeProperty('height');\n    el.style.removeProperty('z-index');\n    el.style.removeProperty('box-sizing');\n    el.style.removeProperty('transform');\n  });\n};\n\nexport const setInitialPlaceholderItemStyles = ({ el, draggingElRect }: PlaceholderItem) => {\n  if (el.firstElementChild) {\n    return;\n  }\n  const { width, height } = draggingElRect;\n  const node = el.cloneNode() as HTMLElement;\n  node.style.setProperty('display', 'block');\n  node.style.setProperty('width', `${width}px`);\n  node.style.setProperty('height', `${height}px`);\n  node.style.setProperty('pointer-events', 'none');\n  el.appendChild(node);\n};\n\nexport const unsetInitialPlaceholderItemStyles = ({ el }: PlaceholderItem) => {\n  if (el.firstElementChild) {\n    el.firstElementChild.remove();\n  }\n};\n\nexport const setInitialSiblingItemStyles = ({ el, shifted, draggingElRect }: SiblingItem) => {\n  const { height } = draggingElRect;\n  requestAnimationFrame(() => {\n    el.style.setProperty('pointer-events', 'none');\n    el.style.setProperty('transition', 'none 0s ease 0s');\n\n    if (shifted) {\n      el.style.setProperty('transform', `translateY(${height}px)`);\n    }\n  });\n};\n\nexport const unsetInitialSiblingItemStyles = ({ el }: Omit<SiblingItem, 'shifted'>) => {\n  requestAnimationFrame(() => {\n    el.style.removeProperty('pointer-events');\n    el.style.removeProperty('transition');\n    el.style.removeProperty('transform');\n  });\n};\n"],"names":["getTargetIsOverOrUnderElData","clientY","elRect","elRectHalfHeight","height","isUnderEl","bottom","isOverEl","top","setDraggingItemShiftStyles","draggingEl","nextShiftY","requestAnimationFrame","style","transform","setSiblingItemsShiftStyles","el","draggingElRect","direction","setProperty","removeProperty","setInitialDraggingItemStyles","left","width","unsetInitialDraggingItemStyles","setInitialPlaceholderItemStyles","firstElementChild","node","cloneNode","appendChild","unsetInitialPlaceholderItemStyles","remove","setInitialSiblingItemStyles","shifted","unsetInitialSiblingItemStyles"],"mappings":"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"}
+{"version":3,"sources":["../../../src/hooks/useDraggableWithDomApi/utils.ts"],"sourcesContent":["import type { Direction, DraggingItem, PlaceholderItem, SiblingItem } from './types';\n\nexport const getTargetIsOverOrUnderElData = (\n  clientY: number,\n  elRect: DOMRect,\n): {\n  isUnderEl: boolean;\n  isOverEl: boolean;\n} => {\n  const elRectHalfHeight = elRect.height / 2;\n  return {\n    isUnderEl: clientY <= elRect.bottom - elRectHalfHeight,\n    isOverEl: clientY >= elRect.top + elRectHalfHeight,\n  };\n};\n\nexport const setDraggingItemShiftStyles = (draggingEl: HTMLElement, nextShiftY: number): void => {\n  requestAnimationFrame(() => {\n    draggingEl.style.transform = `translateY(${nextShiftY}px)`;\n  });\n};\n\nexport const setSiblingItemsShiftStyles = (\n  [\n    {\n      el,\n      draggingElRect: { height },\n    },\n    direction,\n  ]: [Omit<SiblingItem, 'shifted'>, Direction],\n  additionalGap = 0,\n): void => {\n  requestAnimationFrame(() => {\n    if (direction === 'up') {\n      el.style.setProperty('transition', 'transform 0.3s ease-in 0s');\n      el.style.removeProperty('transform');\n    } else {\n      el.style.setProperty('transition', 'transform 0.3s ease-out 0s');\n      el.style.setProperty('transform', `translateY(${height + additionalGap}px)`);\n    }\n  });\n};\n\nexport const setInitialDraggingItemStyles = ({ el, draggingElRect }: DraggingItem): void => {\n  const { top, left, width, height } = draggingElRect;\n  requestAnimationFrame(() => {\n    // Inspired by https://github.com/hello-pangea/dnd\n    el.style.setProperty('pointer-events', 'none');\n    el.style.setProperty('position', 'fixed');\n    el.style.setProperty('top', `${top}px`);\n    el.style.setProperty('left', `${left}px`);\n    el.style.setProperty('width', `${width}px`);\n    el.style.setProperty('height', `${height}px`);\n    el.style.setProperty('z-index', 'var(--vkui_internal--z_index_cell_dragging)');\n    el.style.setProperty('box-sizing', 'border-box');\n    el.style.setProperty('transform', 'translateY(0)');\n  });\n};\n\nexport const unsetInitialDraggingItemStyles = ({ el }: DraggingItem): void => {\n  requestAnimationFrame(() => {\n    el.style.removeProperty('pointer-events');\n    el.style.removeProperty('position');\n    el.style.removeProperty('top');\n    el.style.removeProperty('left');\n    el.style.removeProperty('width');\n    el.style.removeProperty('height');\n    el.style.removeProperty('z-index');\n    el.style.removeProperty('box-sizing');\n    el.style.removeProperty('transform');\n  });\n};\n\nexport const setInitialPlaceholderItemStyles = ({ el, draggingElRect }: PlaceholderItem): void => {\n  if (el.firstElementChild) {\n    return;\n  }\n  const { width, height } = draggingElRect;\n  const node = el.cloneNode() as HTMLElement;\n  node.style.setProperty('display', 'block');\n  node.style.setProperty('width', `${width}px`);\n  node.style.setProperty('height', `${height}px`);\n  node.style.setProperty('pointer-events', 'none');\n  el.appendChild(node);\n  el.style.setProperty('display', 'block');\n};\n\nexport const unsetInitialPlaceholderItemStyles = ({ el }: PlaceholderItem): void => {\n  el.style.display = '';\n  el.removeAttribute('style');\n  if (el.firstElementChild) {\n    el.firstElementChild.remove();\n  }\n};\n\nexport const setInitialSiblingItemStyles = (\n  { el, shifted, draggingElRect }: SiblingItem,\n  additionalGap = 0,\n): void => {\n  const { height } = draggingElRect;\n  requestAnimationFrame(() => {\n    el.style.setProperty('pointer-events', 'none');\n    el.style.setProperty('transition', 'none 0s ease 0s');\n\n    if (shifted) {\n      el.style.setProperty('transform', `translateY(${height + additionalGap}px)`);\n    }\n  });\n};\n\nexport const unsetInitialSiblingItemStyles = ({ el }: Omit<SiblingItem, 'shifted'>): void => {\n  requestAnimationFrame(() => {\n    el.style.removeProperty('pointer-events');\n    el.style.removeProperty('transition');\n    el.style.removeProperty('transform');\n  });\n};\n"],"names":["getTargetIsOverOrUnderElData","clientY","elRect","elRectHalfHeight","height","isUnderEl","bottom","isOverEl","top","setDraggingItemShiftStyles","draggingEl","nextShiftY","requestAnimationFrame","style","transform","setSiblingItemsShiftStyles","el","draggingElRect","direction","additionalGap","setProperty","removeProperty","setInitialDraggingItemStyles","left","width","unsetInitialDraggingItemStyles","setInitialPlaceholderItemStyles","firstElementChild","node","cloneNode","appendChild","unsetInitialPlaceholderItemStyles","display","removeAttribute","remove","setInitialSiblingItemStyles","shifted","unsetInitialSiblingItemStyles"],"mappings":"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"}

package/dist/hooks/useEffectDev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEffectDev.d.ts","sourceRoot":"","sources":["../../src/hooks/useEffectDev.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,eAAO,MAAM,YAAY,kBAA4D,CAAC"}
+{"version":3,"file":"useEffectDev.d.ts","sourceRoot":"","sources":["../../src/hooks/useEffectDev.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,eAAO,MAAM,YAAY,EAAE,OAAO,SACyB,CAAC"}

package/dist/hooks/useEffectDev.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useEffectDev.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const useEffectDev = process.env.NODE_ENV === 'development' ? useEffect : noop;\n"],"names":["useEffect","noop","useEffectDev","process","env","NODE_ENV"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,eAAeC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBL,YAAYC,KAAK"}
+{"version":3,"sources":["../../src/hooks/useEffectDev.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const useEffectDev: typeof useEffect =\n  process.env.NODE_ENV === 'development' ? useEffect : noop;\n"],"names":["useEffect","noop","useEffectDev","process","env","NODE_ENV"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,eACXC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBL,YAAYC,KAAK"}

package/dist/hooks/useEventListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAKA,UAAU,mBAAmB;IAC3B,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC1E,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,EAAE,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,EAC9E,QAAQ,CAAC,EAAE,uBAAuB,GACjC,mBAAmB,CAAC;AACvB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAC9C,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,EACjD,QAAQ,CAAC,EAAE,uBAAuB,GACjC,mBAAmB,CAAC"}
+{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IAC3B,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAgDD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC1E,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,EAAE,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,EAC9E,QAAQ,CAAC,EAAE,uBAAuB,GACjC,mBAAmB,CAAC;AACvB,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAC9C,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,EACjD,QAAQ,CAAC,EAAE,uBAAuB,GACjC,mBAAmB,CAAC"}

package/dist/hooks/useEventListener.js

@@ -1,48 +1,68 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _class_private_field_get } from "@swc/helpers/_/_class_private_field_get";
+import { _ as _class_private_field_init } from "@swc/helpers/_/_class_private_field_init";
+import { _ as _class_private_field_set } from "@swc/helpers/_/_class_private_field_set";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { canUseDOM } from '../lib/dom';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
-export function useEventListener(event, _cb, _options) {
-    const cbRef = React.useRef(_cb);
-    useIsomorphicLayoutEffect(()=>{
-        cbRef.current = _cb;
-    }, [
-        _cb
-    ]);
-    const cb = React.useCallback((e)=>cbRef.current && cbRef.current(e), []);
-    const detach = React.useRef(noop);
-    const remove = React.useCallback(()=>{
-        detach.current();
-        detach.current = noop;
-    }, []);
-    const add = React.useCallback((el)=>{
-        if (!canUseDOM) {
-            return;
+var _target = /*#__PURE__*/ new WeakMap(), _listener = /*#__PURE__*/ new WeakMap();
+class EventListener {
+    constructor(type, callback, options){
+        _define_property(this, "callback", noop);
+        _define_property(this, "options", undefined);
+        _define_property(this, "eventType", void 0);
+        _class_private_field_init(this, _target, {
+            writable: true,
+            value: null
+        });
+        _class_private_field_init(this, _listener, {
+            writable: true,
+            value: (ev)=>{
+                this.callback(ev);
+            }
+        });
+        _define_property(this, "add", (el)=>{
+            if (!canUseDOM) {
+                return;
+            }
+            this.remove();
+            if (!el) {
+                return;
+            }
+            el.addEventListener(this.eventType, _class_private_field_get(this, _listener), this.options);
+            _class_private_field_set(this, _target, el);
+        });
+        _define_property(this, "remove", ()=>{
+            if (!canUseDOM || !_class_private_field_get(this, _target)) {
+                return;
+            }
+            _class_private_field_get(this, _target).removeEventListener(this.eventType, _class_private_field_get(this, _listener), this.options);
+            _class_private_field_set(this, _target, null);
+        });
+        this.options = options;
+        this.eventType = type;
+        if (callback) {
+            this.callback = callback;
         }
-        remove();
-        if (!el) {
-            return;
+    }
+}
+export function useEventListener(event, _cb, _options) {
+    const ref = React.useRef(null);
+    if (ref.current === null) {
+        ref.current = new EventListener(event, _cb, _options);
+    } else {
+        ref.current.eventType = event;
+        ref.current.options = _options;
+        if (_cb) {
+            ref.current.callback = _cb;
         }
-        const options = _object_spread({}, _options);
-        el.addEventListener(event, cb, options);
-        detach.current = ()=>el.removeEventListener(event, cb, options);
-    }, [
-        _options,
-        cb,
-        event,
-        remove
-    ]);
-    React.useEffect(()=>remove, [
-        remove
-    ]);
-    return React.useMemo(()=>({
-            add,
-            remove
-        }), [
-        add,
-        remove
-    ]);
+    }
+    React.useEffect(()=>{
+        var _ref_current;
+        const detach = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.remove.bind(ref.current);
+        return detach;
+    }, []);
+    return ref.current;
 }
 
 //# sourceMappingURL=useEventListener.js.map

package/dist/hooks/useEventListener.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useEventListener.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { canUseDOM } from '../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';\n\ninterface EventListenerHandle {\n  add: (el: HTMLElement | Document | Window) => void;\n  remove: () => void;\n}\n\nexport function useEventListener<K extends keyof GlobalEventHandlersEventMap>(\n  event: K,\n  _cb: false | null | undefined | ((ev: GlobalEventHandlersEventMap[K]) => void),\n  _options?: AddEventListenerOptions,\n): EventListenerHandle;\nexport function useEventListener<E extends Event>(\n  event: string,\n  _cb: false | null | undefined | ((ev: E) => void),\n  _options?: AddEventListenerOptions,\n): EventListenerHandle;\nexport function useEventListener<E extends Event, K extends keyof GlobalEventHandlersEventMap>(\n  event: string | K,\n  _cb: false | null | undefined | ((ev: E) => void),\n  _options?: AddEventListenerOptions,\n): EventListenerHandle {\n  const cbRef = React.useRef(_cb);\n  useIsomorphicLayoutEffect(() => {\n    cbRef.current = _cb;\n  }, [_cb]);\n  const cb = React.useCallback((e: any) => cbRef.current && cbRef.current(e), []);\n\n  const detach = React.useRef(noop);\n  const remove = React.useCallback(() => {\n    detach.current();\n    detach.current = noop;\n  }, []);\n  const add = React.useCallback(\n    (el: HTMLElement | Document | Window) => {\n      if (!canUseDOM) {\n        return;\n      }\n      remove();\n      if (!el) {\n        return;\n      }\n      const options = { ..._options };\n      el.addEventListener(event, cb, options);\n      detach.current = () => el.removeEventListener(event, cb, options);\n    },\n    [_options, cb, event, remove],\n  );\n  React.useEffect(() => remove, [remove]);\n\n  return React.useMemo(() => ({ add, remove }), [add, remove]);\n}\n"],"names":["React","noop","canUseDOM","useIsomorphicLayoutEffect","useEventListener","event","_cb","_options","cbRef","useRef","current","cb","useCallback","e","detach","remove","add","el","options","addEventListener","removeEventListener","useEffect","useMemo"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,yBAAyB,QAAQ,mCAAmC;AAiB7E,OAAO,SAASC,iBACdC,KAAiB,EACjBC,GAAiD,EACjDC,QAAkC;IAElC,MAAMC,QAAQR,MAAMS,MAAM,CAACH;IAC3BH,0BAA0B;QACxBK,MAAME,OAAO,GAAGJ;IAClB,GAAG;QAACA;KAAI;IACR,MAAMK,KAAKX,MAAMY,WAAW,CAAC,CAACC,IAAWL,MAAME,OAAO,IAAIF,MAAME,OAAO,CAACG,IAAI,EAAE;IAE9E,MAAMC,SAASd,MAAMS,MAAM,CAACR;IAC5B,MAAMc,SAASf,MAAMY,WAAW,CAAC;QAC/BE,OAAOJ,OAAO;QACdI,OAAOJ,OAAO,GAAGT;IACnB,GAAG,EAAE;IACL,MAAMe,MAAMhB,MAAMY,WAAW,CAC3B,CAACK;QACC,IAAI,CAACf,WAAW;YACd;QACF;QACAa;QACA,IAAI,CAACE,IAAI;YACP;QACF;QACA,MAAMC,UAAU,mBAAKX;QACrBU,GAAGE,gBAAgB,CAACd,OAAOM,IAAIO;QAC/BJ,OAAOJ,OAAO,GAAG,IAAMO,GAAGG,mBAAmB,CAACf,OAAOM,IAAIO;IAC3D,GACA;QAACX;QAAUI;QAAIN;QAAOU;KAAO;IAE/Bf,MAAMqB,SAAS,CAAC,IAAMN,QAAQ;QAACA;KAAO;IAEtC,OAAOf,MAAMsB,OAAO,CAAC,IAAO,CAAA;YAAEN;YAAKD;QAAO,CAAA,GAAI;QAACC;QAAKD;KAAO;AAC7D"}
+{"version":3,"sources":["../../src/hooks/useEventListener.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { canUseDOM } from '../lib/dom';\n\ninterface EventListenerHandle {\n  add: (el: HTMLElement | Document | Window) => void;\n  remove: () => void;\n}\n\nclass EventListener implements EventListenerHandle {\n  callback: (ev: any) => void = noop;\n  options: AddEventListenerOptions | boolean | undefined = undefined;\n  eventType: string;\n  #target: HTMLElement | Document | Window | null = null;\n\n  constructor(\n    type: string,\n    callback: false | null | undefined | ((ev: any) => void),\n    options?: AddEventListenerOptions | boolean,\n  ) {\n    this.options = options;\n    this.eventType = type;\n\n    if (callback) {\n      this.callback = callback;\n    }\n  }\n\n  readonly #listener = (ev: any) => {\n    this.callback(ev);\n  };\n\n  add = (el: HTMLElement | Document | Window) => {\n    if (!canUseDOM) {\n      return;\n    }\n    this.remove();\n    if (!el) {\n      return;\n    }\n\n    el.addEventListener(this.eventType, this.#listener, this.options);\n    this.#target = el;\n  };\n\n  remove = () => {\n    if (!canUseDOM || !this.#target) {\n      return;\n    }\n\n    this.#target.removeEventListener(this.eventType, this.#listener, this.options);\n    this.#target = null;\n  };\n}\n\nexport function useEventListener<K extends keyof GlobalEventHandlersEventMap>(\n  event: K,\n  _cb: false | null | undefined | ((ev: GlobalEventHandlersEventMap[K]) => void),\n  _options?: AddEventListenerOptions,\n): EventListenerHandle;\nexport function useEventListener<E extends Event>(\n  event: string,\n  _cb: false | null | undefined | ((ev: E) => void),\n  _options?: AddEventListenerOptions,\n): EventListenerHandle;\nexport function useEventListener<E extends Event, K extends keyof GlobalEventHandlersEventMap>(\n  event: string | K,\n  _cb: false | null | undefined | ((ev: E) => void),\n  _options?: AddEventListenerOptions,\n): EventListenerHandle {\n  const ref = React.useRef<EventListener | null>(null);\n  if (ref.current === null) {\n    ref.current = new EventListener(event, _cb, _options);\n  } else {\n    ref.current.eventType = event;\n    ref.current.options = _options;\n\n    if (_cb) {\n      ref.current.callback = _cb;\n    }\n  }\n\n  React.useEffect(() => {\n    const detach = ref.current?.remove.bind(ref.current);\n    return detach;\n  }, []);\n\n  return ref.current;\n}\n"],"names":["React","noop","canUseDOM","EventListener","constructor","type","callback","options","undefined","eventType","ev","add","el","remove","addEventListener","removeEventListener","useEventListener","event","_cb","_options","ref","useRef","current","useEffect","detach","bind"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,SAAS,QAAQ,aAAa;IAWrC,uCAeS;AAnBX,MAAMC;IAMJC,YACEC,IAAY,EACZC,QAAwD,EACxDC,OAA2C,CAC3C;QATFD,uBAAAA,YAA8BL;QAC9BM,uBAAAA,WAAyDC;QACzDC,uBAAAA,aAAAA,KAAAA;QACA,gCAAA;;mBAAkD;;QAelD,gCAAS;;mBAAY,CAACC;gBACpB,IAAI,CAACJ,QAAQ,CAACI;YAChB;;QAEAC,uBAAAA,OAAM,CAACC;YACL,IAAI,CAACV,WAAW;gBACd;YACF;YACA,IAAI,CAACW,MAAM;YACX,IAAI,CAACD,IAAI;gBACP;YACF;YAEAA,GAAGE,gBAAgB,CAAC,IAAI,CAACL,SAAS,2BAAE,IAAI,EAAC,YAAW,IAAI,CAACF,OAAO;2CAC3D,SAAUK;QACjB;QAEAC,uBAAAA,UAAS;YACP,IAAI,CAACX,aAAa,0BAAC,IAAI,EAAC,UAAS;gBAC/B;YACF;YAEA,yBAAA,IAAI,EAAC,SAAQa,mBAAmB,CAAC,IAAI,CAACN,SAAS,2BAAE,IAAI,EAAC,YAAW,IAAI,CAACF,OAAO;2CACxE,SAAU;QACjB;QAhCE,IAAI,CAACA,OAAO,GAAGA;QACf,IAAI,CAACE,SAAS,GAAGJ;QAEjB,IAAIC,UAAU;YACZ,IAAI,CAACA,QAAQ,GAAGA;QAClB;IACF;AA2BF;AAYA,OAAO,SAASU,iBACdC,KAAiB,EACjBC,GAAiD,EACjDC,QAAkC;IAElC,MAAMC,MAAMpB,MAAMqB,MAAM,CAAuB;IAC/C,IAAID,IAAIE,OAAO,KAAK,MAAM;QACxBF,IAAIE,OAAO,GAAG,IAAInB,cAAcc,OAAOC,KAAKC;IAC9C,OAAO;QACLC,IAAIE,OAAO,CAACb,SAAS,GAAGQ;QACxBG,IAAIE,OAAO,CAACf,OAAO,GAAGY;QAEtB,IAAID,KAAK;YACPE,IAAIE,OAAO,CAAChB,QAAQ,GAAGY;QACzB;IACF;IAEAlB,MAAMuB,SAAS,CAAC;YACCH;QAAf,MAAMI,UAASJ,eAAAA,IAAIE,OAAO,cAAXF,mCAAAA,aAAaP,MAAM,CAACY,IAAI,CAACL,IAAIE,OAAO;QACnD,OAAOE;IACT,GAAG,EAAE;IAEL,OAAOJ,IAAIE,OAAO;AACpB"}

package/dist/hooks/useExternRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExternRef.d.ts","sourceRoot":"","sources":["../../src/hooks/useExternRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,YAAY,CAAC,CAAC,EAC5B,GAAG,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,GACrD,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,CAoBlC"}
+{"version":3,"file":"useExternRef.d.ts","sourceRoot":"","sources":["../../src/hooks/useExternRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,wBAAgB,YAAY,CAAC,CAAC,EAC5B,GAAG,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,GACrD,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,CASlC"}

package/dist/hooks/useExternRef.js

@@ -1,21 +1,57 @@
+import { _ as _class_private_field_get } from "@swc/helpers/_/_class_private_field_get";
+import { _ as _class_private_field_init } from "@swc/helpers/_/_class_private_field_init";
+import { _ as _class_private_field_set } from "@swc/helpers/_/_class_private_field_set";
 import * as React from 'react';
 import { setRef } from '../lib/utils';
-export function useExternRef(...externRefs) {
-    const stableRef = React.useRef(null);
-    return React.useMemo(()=>({
-            get current () {
-                return stableRef.current;
-            },
-            set current (el){
-                stableRef.current = el;
-                externRefs.forEach((ref)=>{
-                    if (ref) {
-                        setRef(el, ref);
-                    }
-                });
+var _element = /*#__PURE__*/ new WeakMap(), _externRefs = /*#__PURE__*/ new WeakMap();
+class ExternalRef {
+    updateExternRefs(refs) {
+        refs.forEach((ref)=>{
+            if (!ref || _class_private_field_get(this, _externRefs).has(ref)) {
+                return;
+            }
+            setRef(_class_private_field_get(this, _element), ref);
+            _class_private_field_get(this, _externRefs).add(ref);
+        });
+    }
+    get current() {
+        return _class_private_field_get(this, _element);
+    }
+    set current(el) {
+        _class_private_field_set(this, _element, el);
+        _class_private_field_get(this, _externRefs).forEach((ref)=>setRef(el, ref));
+    }
+    /**
+   * React проверяет наличие свойства current у объектов через hasOwnProperty
+   *
+   * https://github.com/facebook/react/blob/c3cdbec0a78d39b5ff7329384cb41c4573a38212/packages/react-reconciler/src/ReactFiberCommitWork.js#L1612
+   */ hasOwnProperty(v) {
+        return v === 'current';
+    }
+    constructor(externRefs = []){
+        _class_private_field_init(this, _element, {
+            writable: true,
+            value: null
+        });
+        _class_private_field_init(this, _externRefs, {
+            writable: true,
+            value: new Set()
+        });
+        externRefs.forEach((ref)=>{
+            if (ref) {
+                _class_private_field_get(this, _externRefs).add(ref);
             }
-        }), // eslint-disable-next-line react-hooks/exhaustive-deps
-    externRefs);
+        });
+    }
+}
+export function useExternRef(...externRefs) {
+    const ref = React.useRef(null);
+    if (ref.current === null) {
+        ref.current = new ExternalRef(externRefs);
+    } else {
+        ref.current.updateExternRefs(externRefs);
+    }
+    return ref.current;
 }
 
 //# sourceMappingURL=useExternRef.js.map

package/dist/hooks/useExternRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useExternRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { setRef } from '../lib/utils';\n\nexport function useExternRef<T>(\n  ...externRefs: Array<React.Ref<T> | undefined | false>\n): React.MutableRefObject<T | null> {\n  const stableRef = React.useRef<T | null>(null);\n\n  return React.useMemo(\n    () => ({\n      get current() {\n        return stableRef.current;\n      },\n      set current(el) {\n        stableRef.current = el;\n        externRefs.forEach((ref) => {\n          if (ref) {\n            setRef(el, ref);\n          }\n        });\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    externRefs,\n  );\n}\n"],"names":["React","setRef","useExternRef","externRefs","stableRef","useRef","useMemo","current","el","forEach","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,eAAe;AAEtC,OAAO,SAASC,aACd,GAAGC,UAAmD;IAEtD,MAAMC,YAAYJ,MAAMK,MAAM,CAAW;IAEzC,OAAOL,MAAMM,OAAO,CAClB,IAAO,CAAA;YACL,IAAIC,WAAU;gBACZ,OAAOH,UAAUG,OAAO;YAC1B;YACA,IAAIA,SAAQC,GAAI;gBACdJ,UAAUG,OAAO,GAAGC;gBACpBL,WAAWM,OAAO,CAAC,CAACC;oBAClB,IAAIA,KAAK;wBACPT,OAAOO,IAAIE;oBACb;gBACF;YACF;QACF,CAAA,GACA,uDAAuD;IACvDP;AAEJ"}
+{"version":3,"sources":["../../src/hooks/useExternRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { setRef } from '../lib/utils';\n\nclass ExternalRef<T> implements React.MutableRefObject<T | null> {\n  #element: T | null = null;\n  readonly #externRefs = new Set<React.Ref<T>>();\n\n  constructor(externRefs: Array<React.Ref<T> | undefined | false> = []) {\n    externRefs.forEach((ref) => {\n      if (ref) {\n        this.#externRefs.add(ref);\n      }\n    });\n  }\n\n  updateExternRefs(refs: Array<React.Ref<T> | undefined | false>) {\n    refs.forEach((ref) => {\n      if (!ref || this.#externRefs.has(ref)) {\n        return;\n      }\n\n      setRef(this.#element, ref);\n      this.#externRefs.add(ref);\n    });\n  }\n\n  get current() {\n    return this.#element;\n  }\n\n  set current(el) {\n    this.#element = el;\n    this.#externRefs.forEach((ref) => setRef(el, ref));\n  }\n\n  /**\n   * React проверяет наличие свойства current у объектов через hasOwnProperty\n   *\n   * https://github.com/facebook/react/blob/c3cdbec0a78d39b5ff7329384cb41c4573a38212/packages/react-reconciler/src/ReactFiberCommitWork.js#L1612\n   */\n  hasOwnProperty(v: PropertyKey): v is keyof ExternalRef<T> {\n    return v === 'current';\n  }\n}\n\nexport function useExternRef<T>(\n  ...externRefs: Array<React.Ref<T> | undefined | false>\n): React.MutableRefObject<T | null> {\n  const ref = React.useRef<ExternalRef<T> | null>(null);\n  if (ref.current === null) {\n    ref.current = new ExternalRef(externRefs);\n  } else {\n    ref.current.updateExternRefs(externRefs);\n  }\n\n  return ref.current;\n}\n"],"names":["React","setRef","ExternalRef","updateExternRefs","refs","forEach","ref","has","add","current","el","hasOwnProperty","v","constructor","externRefs","Set","useExternRef","useRef"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,eAAe;IAGpC,wCACS;AAFX,MAAMC;IAYJC,iBAAiBC,IAA6C,EAAE;QAC9DA,KAAKC,OAAO,CAAC,CAACC;YACZ,IAAI,CAACA,OAAO,yBAAA,IAAI,EAAC,aAAYC,GAAG,CAACD,MAAM;gBACrC;YACF;YAEAL,gCAAO,IAAI,EAAC,WAAUK;YACtB,yBAAA,IAAI,EAAC,aAAYE,GAAG,CAACF;QACvB;IACF;IAEA,IAAIG,UAAU;QACZ,gCAAO,IAAI,EAAC;IACd;IAEA,IAAIA,QAAQC,EAAE,EAAE;uCACT,UAAWA;QAChB,yBAAA,IAAI,EAAC,aAAYL,OAAO,CAAC,CAACC,MAAQL,OAAOS,IAAIJ;IAC/C;IAEA;;;;GAIC,GACDK,eAAeC,CAAc,EAA6B;QACxD,OAAOA,MAAM;IACf;IAnCAC,YAAYC,aAAsD,EAAE,CAAE;QAHtE,gCAAA;;mBAAqB;;QACrB,gCAAS;;mBAAc,IAAIC;;QAGzBD,WAAWT,OAAO,CAAC,CAACC;YAClB,IAAIA,KAAK;gBACP,yBAAA,IAAI,EAAC,aAAYE,GAAG,CAACF;YACvB;QACF;IACF;AA8BF;AAEA,OAAO,SAASU,aACd,GAAGF,UAAmD;IAEtD,MAAMR,MAAMN,MAAMiB,MAAM,CAAwB;IAChD,IAAIX,IAAIG,OAAO,KAAK,MAAM;QACxBH,IAAIG,OAAO,GAAG,IAAIP,YAAYY;IAChC,OAAO;QACLR,IAAIG,OAAO,CAACN,gBAAgB,CAACW;IAC/B;IAEA,OAAOR,IAAIG,OAAO;AACpB"}

package/dist/hooks/useFocusVisible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusVisible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqC,MAAM,OAAO,CAAC;AAGtE,wBAAgB,eAAe,CAAC,sBAAsB,UAAO;;qBAKjD,UAAU,CAAC,WAAW,CAAC;oBAQvB,UAAU,CAAC,WAAW,CAAC;EAclC"}
+{"version":3,"file":"useFocusVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusVisible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqC,MAAM,OAAO,CAAC;AAGtE,wBAAgB,eAAe,CAAC,sBAAsB,UAAO,GAAG;IAC9D,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAClD,CA2BA"}

package/dist/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import { FocusEvent, useCallback, useContext, useState } from 'react';\nimport { AppRootContext } from '../components/AppRoot/AppRootContext';\n\nexport function useFocusVisible(withKeyboardInputCheck = true) {\n  const [isFocused, setIsFocused] = useState(false);\n  const { keyboardInput } = useContext(AppRootContext);\n\n  const onFocus = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(true);\n    },\n    [setIsFocused],\n  );\n\n  const onBlur = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(false);\n    },\n    [setIsFocused],\n  );\n\n  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;\n\n  return {\n    focusVisible,\n    onFocus,\n    onBlur,\n  };\n}\n"],"names":["useCallback","useContext","useState","AppRootContext","useFocusVisible","withKeyboardInputCheck","isFocused","setIsFocused","keyboardInput","onFocus","event","stopPropagation","onBlur","focusVisible"],"mappings":"AAAA,SAAqBA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AACtE,SAASC,cAAc,QAAQ,uCAAuC;AAEtE,OAAO,SAASC,gBAAgBC,yBAAyB,IAAI;IAC3D,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAC3C,MAAM,EAAEM,aAAa,EAAE,GAAGP,WAAWE;IAErC,MAAMM,UAAUT,YACd,CAACU;QACCA,MAAMC,eAAe;QACrBJ,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMK,SAASZ,YACb,CAACU;QACCA,MAAMC,eAAe;QACrBJ,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMM,eAAeR,yBAAyBG,iBAAiBF,YAAYA;IAE3E,OAAO;QACLO;QACAJ;QACAG;IACF;AACF"}
+{"version":3,"sources":["../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import { FocusEvent, useCallback, useContext, useState } from 'react';\nimport { AppRootContext } from '../components/AppRoot/AppRootContext';\n\nexport function useFocusVisible(withKeyboardInputCheck = true): {\n  focusVisible: boolean;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n} {\n  const [isFocused, setIsFocused] = useState(false);\n  const { keyboardInput } = useContext(AppRootContext);\n\n  const onFocus = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(true);\n    },\n    [setIsFocused],\n  );\n\n  const onBlur = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(false);\n    },\n    [setIsFocused],\n  );\n\n  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;\n\n  return {\n    focusVisible,\n    onFocus,\n    onBlur,\n  };\n}\n"],"names":["useCallback","useContext","useState","AppRootContext","useFocusVisible","withKeyboardInputCheck","isFocused","setIsFocused","keyboardInput","onFocus","event","stopPropagation","onBlur","focusVisible"],"mappings":"AAAA,SAAqBA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AACtE,SAASC,cAAc,QAAQ,uCAAuC;AAEtE,OAAO,SAASC,gBAAgBC,yBAAyB,IAAI;IAK3D,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAC3C,MAAM,EAAEM,aAAa,EAAE,GAAGP,WAAWE;IAErC,MAAMM,UAAUT,YACd,CAACU;QACCA,MAAMC,eAAe;QACrBJ,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMK,SAASZ,YACb,CAACU;QACCA,MAAMC,eAAe;QACrBJ,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMM,eAAeR,yBAAyBG,iBAAiBF,YAAYA;IAE3E,OAAO;QACLO;QACAJ;QACAG;IACF;AACF"}

package/dist/hooks/useFocusVisibleClassName.d.ts

@@ -1,8 +1,5 @@
 import { LiteralUnion } from '../types';
-export declare const focusVisiblePresetModeClassNames: {
-    inside: string;
-    outside: string;
-};
+export declare const focusVisiblePresetModeClassNames: Record<'inside' | 'outside', string>;
 type FocusVisiblePresetMode = keyof typeof focusVisiblePresetModeClassNames;
 export type FocusVisibleMode = LiteralUnion<FocusVisiblePresetMode, string>;
 export interface FocusVisibleModeProps {

package/dist/hooks/useFocusVisibleClassName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusVisibleClassName.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusVisibleClassName.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,eAAO,MAAM,gCAAgC;;;CAG5C,CAAC;AAEF,KAAK,sBAAsB,GAAG,MAAM,OAAO,gCAAgC,CAAC;AAE5E,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;AAK5E,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,WAAW,6BAA6B;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,YAAoB,EACpB,IAAe,GAChB,EAAE,6BAA6B,UAU/B"}
+{"version":3,"file":"useFocusVisibleClassName.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusVisibleClassName.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,QAAQ,GAAG,SAAS,EAAE,MAAM,CAGjF,CAAC;AAEF,KAAK,sBAAsB,GAAG,MAAM,OAAO,gCAAgC,CAAC;AAE5E,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;AAK5E,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,WAAW,6BAA6B;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,YAAoB,EACpB,IAAe,GAChB,EAAE,6BAA6B,GAAG,MAAM,CAUxC"}