@infomaximum/ui-kit 0.18.2 → 0.20.0

package/dist/components/Slider/components/SliderTrack/SliderTrack.styles.js

@@ -0,0 +1,34 @@
+const getTrackStyle = ({
+  tokens,
+  startPercent,
+  endPercent,
+  vertical,
+  disabled,
+  active
+}) => (theme) => {
+  const color = disabled ? tokens.sliderDisabled : active ? tokens.sliderHover : tokens.sliderDefault;
+  const base = {
+    position: "absolute",
+    borderRadius: tokens.sliderBorderRadius,
+    background: color
+  };
+  const size = `${endPercent - startPercent}%`;
+  return vertical ? {
+    ...base,
+    width: theme.x1,
+    height: size,
+    bottom: `${startPercent}%`,
+    left: "50%",
+    transform: "translateX(-50%)"
+  } : {
+    ...base,
+    height: theme.x1,
+    width: size,
+    left: `${startPercent}%`,
+    top: "50%",
+    transform: "translateY(-50%)"
+  };
+};
+export {
+  getTrackStyle
+};

package/dist/components/Slider/components/SliderTrack/SliderTrack.types.d.ts

@@ -0,0 +1,7 @@
+import { SliderRendererBaseProps } from '../../Slider.types';
+export interface SliderTrackProps extends SliderRendererBaseProps {
+    disabled: boolean;
+    isActive: boolean;
+    startPercent: number;
+    endPercent: number;
+}

package/dist/components/Slider/components/SliderTrack/index.d.ts

@@ -0,0 +1 @@
+export { SliderTrack } from './SliderTrack';

package/dist/components/Slider/hooks/useSliderDrag/index.d.ts

@@ -0,0 +1 @@
+export { useSliderDrag } from './useSliderDrag';

package/dist/components/Slider/hooks/useSliderDrag/useSliderDrag.d.ts

@@ -0,0 +1,2 @@
+import { UseSliderDragParams, UseSliderDragResult } from './useSliderDrag.types';
+export declare function useSliderDrag(params: UseSliderDragParams): UseSliderDragResult;

package/dist/components/Slider/hooks/useSliderDrag/useSliderDrag.js

@@ -0,0 +1,148 @@
+import { useState, useRef } from "react";
+import { useEvent } from "../../../../hooks/useEvent/useEvent.js";
+import { validateStep, percentToValue } from "../../Slider.utils.js";
+import { isRangeValues } from "../../components/SliderInternal/SliderInternal.types.js";
+import { parseHandleIndex, getPercentFromPointer, computeRangeNext, getHoveringHandleIndex } from "./useSliderDrag.utils.js";
+function useSliderDrag(params) {
+  const {
+    containerRef,
+    min,
+    max,
+    step,
+    vertical,
+    disabled
+  } = params;
+  const validStep = validateStep(step) ?? 1;
+  const [draggingValues, setDraggingValues] = useState(null);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const dragStateRef = useRef(null);
+  const applyAndEmit = (rawValue, activeIdx) => {
+    var _a, _b;
+    if (isRangeValues(params.value)) {
+      const current = params.value;
+      const next2 = computeRangeNext({
+        rawValue,
+        activeIdx,
+        current,
+        min,
+        max,
+        step
+      });
+      setDraggingValues(next2);
+      if (next2[0] !== current[0] || next2[1] !== current[1]) {
+        (_a = params.onChange) == null ? void 0 : _a.call(params, next2);
+      }
+      return next2;
+    }
+    const next = [rawValue];
+    setDraggingValues(next);
+    if (next[0] !== params.value[0]) {
+      (_b = params.onChange) == null ? void 0 : _b.call(params, next);
+    }
+    return next;
+  };
+  const onPointerDown = useEvent((event) => {
+    var _a;
+    if (disabled) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    if (dragStateRef.current !== null) {
+      return;
+    }
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const handleEl = target.closest("[data-handle-index]");
+    const isHandle = handleEl !== null && container.contains(handleEl);
+    const indexHint = isHandle ? parseHandleIndex(handleEl == null ? void 0 : handleEl.dataset.handleIndex) : null;
+    const rect = container.getBoundingClientRect();
+    const percent = getPercentFromPointer(rect, event.clientX, event.clientY, vertical);
+    const newValue = percentToValue(percent, min, max, validStep);
+    let activeIdx;
+    if (indexHint !== null) {
+      activeIdx = indexHint;
+    } else if (isRangeValues(params.value)) {
+      const r = params.value;
+      activeIdx = Math.abs(newValue - r[0]) <= Math.abs(newValue - r[1]) ? 0 : 1;
+    } else {
+      activeIdx = 0;
+    }
+    try {
+      container.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      rect,
+      activeIndex: activeIdx
+    };
+    setActiveIndex(activeIdx);
+    if (indexHint !== null) {
+      setDraggingValues([...params.value]);
+    } else {
+      applyAndEmit(newValue, activeIdx);
+    }
+    (_a = params.onDragStart) == null ? void 0 : _a.call(params, isHandle ? "handle" : "rail");
+  });
+  const onPointerMove = useEvent((event) => {
+    const state = dragStateRef.current;
+    if (!state || state.pointerId !== event.pointerId) {
+      return;
+    }
+    const percent = getPercentFromPointer(state.rect, event.clientX, event.clientY, vertical);
+    const rawValue = percentToValue(percent, min, max, validStep);
+    applyAndEmit(rawValue, state.activeIndex);
+  });
+  const finishDrag = (event) => {
+    var _a, _b, _c;
+    const state = dragStateRef.current;
+    if (!state || state.pointerId !== event.pointerId) {
+      return;
+    }
+    const container = containerRef.current;
+    try {
+      container == null ? void 0 : container.releasePointerCapture(state.pointerId);
+    } catch {
+    }
+    const percent = getPercentFromPointer(state.rect, event.clientX, event.clientY, vertical);
+    const rawValue = percentToValue(percent, min, max, validStep);
+    const hoveringHandleIndex = getHoveringHandleIndex(container, event.clientX, event.clientY);
+    dragStateRef.current = null;
+    setDraggingValues(null);
+    setActiveIndex(null);
+    (_a = params.onDragEnd) == null ? void 0 : _a.call(params, hoveringHandleIndex);
+    if (isRangeValues(params.value)) {
+      const next = computeRangeNext({
+        rawValue,
+        activeIdx: state.activeIndex,
+        current: params.value,
+        min,
+        max,
+        step
+      });
+      (_b = params.onChangeComplete) == null ? void 0 : _b.call(params, next);
+    } else {
+      (_c = params.onChangeComplete) == null ? void 0 : _c.call(params, [rawValue]);
+    }
+  };
+  const onPointerUp = useEvent(finishDrag);
+  const onPointerCancel = useEvent(finishDrag);
+  return {
+    draggingValues,
+    activeIndex,
+    dragHandlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel
+    }
+  };
+}
+export {
+  useSliderDrag
+};

package/dist/components/Slider/hooks/useSliderDrag/useSliderDrag.types.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+import { Indices, RequiredDivHandlers } from '../../../../types';
+import { SliderValues } from '../../components/SliderInternal/SliderInternal.types';
+export type HandleIndex = Indices<SliderValues>;
+export interface UseSliderDragParams {
+    containerRef: RefObject<HTMLDivElement | null>;
+    min: number;
+    max: number;
+    step: number | null;
+    vertical: boolean;
+    disabled: boolean;
+    range: boolean;
+    value: SliderValues;
+    onChange?: (value: SliderValues) => void;
+    onChangeComplete?: (value: SliderValues) => void;
+    onDragStart?: (source: "handle" | "rail") => void;
+    /** Вызывается в pointerup. Содержит индекс ручки, над которой остался курсор (или null). */
+    onDragEnd?: (hoveringHandleIndex: HandleIndex | null) => void;
+}
+export type SliderDragHandlers = RequiredDivHandlers<"onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel">;
+export interface UseSliderDragResult {
+    draggingValues: SliderValues | null;
+    activeIndex: HandleIndex | null;
+    dragHandlers: SliderDragHandlers;
+}
+export interface DragState {
+    pointerId: number;
+    rect: DOMRect;
+    activeIndex: HandleIndex;
+}

package/dist/components/Slider/hooks/useSliderDrag/useSliderDrag.utils.d.ts

@@ -0,0 +1,17 @@
+import { HandleIndex } from './useSliderDrag.types';
+export declare const getPercentFromPointer: (rect: DOMRect, clientX: number, clientY: number, vertical: boolean) => number;
+export declare const parseHandleIndex: (raw: string | undefined) => HandleIndex | null;
+export declare const computeRangeNext: ({ rawValue, activeIdx, current, min, max, step, }: {
+    rawValue: number;
+    activeIdx: HandleIndex;
+    current: [number, number];
+    min: number;
+    max: number;
+    step: number | null;
+}) => [number, number];
+/**
+ * Возвращает индекс ручки, над которой сейчас pointer (по координатам), или null.
+ * Используется в `finishDrag`: с capture event.target — это контейнер, поэтому
+ * для определения hover'а ищем по координатам через `elementFromPoint`.
+ */
+export declare const getHoveringHandleIndex: (container: HTMLDivElement | null, clientX: number, clientY: number) => HandleIndex | null;

package/dist/components/Slider/hooks/useSliderDrag/useSliderDrag.utils.js

@@ -0,0 +1,49 @@
+import { clamp } from "lodash-es";
+import { clampToStepRange } from "../../Slider.utils.js";
+const getPercentFromPointer = (rect, clientX, clientY, vertical) => {
+  const rawPercent = vertical ? (rect.bottom - clientY) / rect.height * 100 : (clientX - rect.left) / rect.width * 100;
+  return clamp(rawPercent, 0, 100);
+};
+const parseHandleIndex = (raw) => {
+  if (raw === "0") {
+    return 0;
+  }
+  if (raw === "1") {
+    return 1;
+  }
+  return null;
+};
+const computeRangeNext = ({
+  rawValue,
+  activeIdx,
+  current,
+  min,
+  max,
+  step
+}) => {
+  const otherValue = current[1 - activeIdx];
+  const clamped = clampToStepRange({
+    nextValue: rawValue,
+    activeIndex: activeIdx,
+    otherValue,
+    min,
+    max,
+    step
+  });
+  return activeIdx === 0 ? [clamped, current[1]] : [current[0], clamped];
+};
+const getHoveringHandleIndex = (container, clientX, clientY) => {
+  var _a;
+  const elementUnderPointer = (_a = document.elementFromPoint) == null ? void 0 : _a.call(document, clientX, clientY);
+  const handleEl = elementUnderPointer instanceof Element ? elementUnderPointer.closest("[data-handle-index]") : null;
+  if (!handleEl || !(container == null ? void 0 : container.contains(handleEl))) {
+    return null;
+  }
+  return parseHandleIndex(handleEl.dataset.handleIndex);
+};
+export {
+  computeRangeNext,
+  getHoveringHandleIndex,
+  getPercentFromPointer,
+  parseHandleIndex
+};

package/dist/components/Slider/hooks/useSliderInteractionState/index.d.ts

@@ -0,0 +1 @@
+export { useSliderInteractionState } from './useSliderInteractionState';

package/dist/components/Slider/hooks/useSliderInteractionState/useSliderInteractionState.d.ts

@@ -0,0 +1,2 @@
+import { UseSliderInteractionStateResult } from './useSliderInteractionState.types';
+export declare function useSliderInteractionState(): UseSliderInteractionStateResult;

package/dist/components/Slider/hooks/useSliderInteractionState/useSliderInteractionState.js

@@ -0,0 +1,43 @@
+import { useState } from "react";
+function useSliderInteractionState() {
+  const [isRootHovered, setIsRootHovered] = useState(false);
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const [focusIndex, setFocusIndex] = useState(null);
+  const [keyboardFocusIndex, setKeyboardFocusIndex] = useState(null);
+  const rootHandlers = {
+    onPointerEnter: () => setIsRootHovered(true),
+    onPointerLeave: () => setIsRootHovered(false)
+  };
+  const getHandleHandlers = (index) => ({
+    onPointerEnter: () => setHoverIndex(index),
+    onPointerLeave: () => setHoverIndex(null),
+    onFocus: (event) => {
+      setFocusIndex(index);
+      if (event.currentTarget.matches(":focus-visible")) {
+        setKeyboardFocusIndex(index);
+      }
+    },
+    onBlur: () => {
+      setFocusIndex(null);
+      setKeyboardFocusIndex(null);
+    }
+  });
+  const resetKeyboardFocus = () => {
+    setKeyboardFocusIndex(null);
+  };
+  return {
+    state: {
+      isRootHovered,
+      hoverIndex,
+      focusIndex,
+      keyboardFocusIndex
+    },
+    rootHandlers,
+    getHandleHandlers,
+    resetKeyboardFocus,
+    setHoverIndex
+  };
+}
+export {
+  useSliderInteractionState
+};

package/dist/components/Slider/hooks/useSliderInteractionState/useSliderInteractionState.types.d.ts

@@ -0,0 +1,16 @@
+import { RequiredDivHandlers } from '../../../../types';
+export interface SliderInteractionState {
+    isRootHovered: boolean;
+    hoverIndex: number | null;
+    focusIndex: number | null;
+    keyboardFocusIndex: number | null;
+}
+export type SliderInteractionRootHandlers = RequiredDivHandlers<"onPointerEnter" | "onPointerLeave">;
+export type SliderInteractionHandleHandlers = RequiredDivHandlers<"onPointerEnter" | "onPointerLeave" | "onFocus" | "onBlur">;
+export interface UseSliderInteractionStateResult {
+    state: SliderInteractionState;
+    rootHandlers: SliderInteractionRootHandlers;
+    getHandleHandlers: (index: number) => SliderInteractionHandleHandlers;
+    resetKeyboardFocus: () => void;
+    setHoverIndex: (index: number | null) => void;
+}

package/dist/components/Slider/hooks/useSliderKeyboard/index.d.ts

@@ -0,0 +1 @@
+export { useSliderKeyboard } from './useSliderKeyboard';

package/dist/components/Slider/hooks/useSliderKeyboard/useSliderKeyboard.d.ts

@@ -0,0 +1,2 @@
+import { UseSliderKeyboardParams, UseSliderKeyboardResult } from './useSliderKeyboard.types';
+export declare function useSliderKeyboard(params: UseSliderKeyboardParams): UseSliderKeyboardResult;

package/dist/components/Slider/hooks/useSliderKeyboard/useSliderKeyboard.js

@@ -0,0 +1,94 @@
+import { useRef } from "react";
+import { useEvent } from "../../../../hooks/useEvent/useEvent.js";
+import { validateStep, clampToStep, clampToStepRange } from "../../Slider.utils.js";
+import { isRangeValues } from "../../components/SliderInternal/SliderInternal.types.js";
+import { isRelevantKey } from "./useSliderKeyboard.utils.js";
+function useSliderKeyboard(params) {
+  const {
+    min,
+    max,
+    step,
+    disabled
+  } = params;
+  const lastEmittedRef = useRef(null);
+  const handleKeyDown = useEvent((event) => {
+    var _a, _b;
+    if (disabled) {
+      return;
+    }
+    const {
+      key
+    } = event;
+    if (!isRelevantKey(key)) {
+      return;
+    }
+    event.preventDefault();
+    const validStep = validateStep(step) ?? 1;
+    const delta = key === "ArrowRight" || key === "ArrowUp" ? validStep : -validStep;
+    if (isRangeValues(params.value)) {
+      const currentRange = params.value;
+      const {
+        activeIndex
+      } = params;
+      const currentVal = currentRange[activeIndex];
+      const otherValue = currentRange[1 - activeIndex];
+      let nextActive;
+      if (key === "Home") {
+        nextActive = activeIndex === 0 ? min : otherValue + validStep;
+      } else if (key === "End") {
+        nextActive = activeIndex === 0 ? otherValue - validStep : max;
+      } else {
+        nextActive = clampToStep(currentVal + delta, min, max, validStep);
+      }
+      const clamped = clampToStepRange({
+        nextValue: nextActive,
+        activeIndex,
+        otherValue,
+        min,
+        max,
+        step
+      });
+      const next = activeIndex === 0 ? [clamped, currentRange[1]] : [currentRange[0], clamped];
+      lastEmittedRef.current = next;
+      (_a = params.onChange) == null ? void 0 : _a.call(params, next);
+    } else {
+      const currentVal = params.value[0];
+      let nextVal;
+      if (key === "Home") {
+        nextVal = min;
+      } else if (key === "End") {
+        nextVal = max;
+      } else {
+        nextVal = clampToStep(currentVal + delta, min, max, validStep);
+      }
+      const next = [nextVal];
+      lastEmittedRef.current = next;
+      (_b = params.onChange) == null ? void 0 : _b.call(params, next);
+    }
+  });
+  const handleKeyUp = useEvent((event) => {
+    var _a, _b;
+    if (disabled) {
+      return;
+    }
+    if (!isRelevantKey(event.key)) {
+      return;
+    }
+    const last = lastEmittedRef.current;
+    lastEmittedRef.current = null;
+    if (isRangeValues(params.value)) {
+      const final = last && last.length === 2 ? last : params.value;
+      (_a = params.onChangeComplete) == null ? void 0 : _a.call(params, final);
+    } else {
+      const final = last && last.length === 1 ? last : params.value;
+      (_b = params.onChangeComplete) == null ? void 0 : _b.call(params, final);
+    }
+  });
+  return {
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  };
+}
+export {
+  useSliderKeyboard
+};

package/dist/components/Slider/hooks/useSliderKeyboard/useSliderKeyboard.types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+import { SliderValues } from '../../components/SliderInternal/SliderInternal.types';
+import { HandleIndex } from '../useSliderDrag/useSliderDrag.types';
+export interface UseSliderKeyboardParams {
+    min: number;
+    max: number;
+    step: number | null;
+    disabled: boolean;
+    range: boolean;
+    value: SliderValues;
+    /** Какая ручка обрабатывает keyboard-события (для single всегда 0). */
+    activeIndex: HandleIndex;
+    onChange?: (value: SliderValues) => void;
+    onChangeComplete?: (value: SliderValues) => void;
+}
+export interface UseSliderKeyboardResult extends Required<Pick<HTMLAttributes<HTMLElement>, "onKeyDown" | "onKeyUp">> {
+}

package/dist/components/Slider/hooks/useSliderKeyboard/useSliderKeyboard.utils.d.ts

@@ -0,0 +1 @@
+export declare const isRelevantKey: (key: string) => boolean;

package/dist/components/Slider/hooks/useSliderKeyboard/useSliderKeyboard.utils.js

@@ -0,0 +1,16 @@
+const isRelevantKey = (key) => {
+  switch (key) {
+    case "ArrowLeft":
+    case "ArrowRight":
+    case "ArrowUp":
+    case "ArrowDown":
+    case "Home":
+    case "End":
+      return true;
+    default:
+      return false;
+  }
+};
+export {
+  isRelevantKey
+};

package/dist/components/Slider/index.d.ts

@@ -0,0 +1,3 @@
+export { Slider } from './Slider';
+export type { SliderProps, SingleSliderProps, RangeSliderProps, SliderTooltipProps, SliderStyles, } from './Slider.types';
+export type { SliderTokens } from './Slider.tokens';

package/dist/components/Table/features/tableRowSelection/components/CheckboxCellContentWrapper/CheckboxCellContentWrapper.utils.js

@@ -1,5 +1,7 @@
 function arrDel(list, value) {
-  if (!list) return [];
+  if (!list) {
+    return [];
+  }
   const clone = list.slice();
   const index = clone.indexOf(value);
   if (index >= 0) {

package/dist/components/Table/features/tableRowSelection/hooks/useTableRowSelection/useTableRowSelection.js

@@ -2,9 +2,9 @@ import { useMemo, useCallback } from "react";
 import { useEmitter } from "../../../typedEventBus/hooks.js";
 import { useEvent } from "../../../../../../hooks/useEvent/useEvent.js";
 import { compact } from "lodash-es";
+import { useControlledState } from "../../../../../../hooks/useControlledState/useControlledState.js";
 import { useMultipleSelect } from "../useMultipleSelect/useMultipleSelect.js";
 import { flattenData } from "./useTableRowSelection.utils.js";
-import { useControlledState } from "../../../../../../hooks/useControlledState/useControlledState.js";
 import { getRowKey } from "../../../../utils/getRowKey/getRowKey.js";
 import { useFirstMountLayoutEffect } from "../../../../../../hooks/useFirstMountLayoutEffect/useFirstMountLayoutEffect.js";
 const useTableRowSelection = (options) => {

package/dist/components/Table/hooks/useTableVisualParamsChange/utils.d.ts

@@ -1,4 +1,4 @@
 export declare const forceScroll: (scrollLeft: number, target: HTMLElement | null) => void;
 export declare const getHorizontalScrollPositionRange: (el: HTMLElement) => readonly [number, number];
 export declare const getVerticalScrollBarWidth: (el: HTMLElement) => number;
-export declare const pickedScrollTargetProps: ("clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth")[];
+export declare const pickedScrollTargetProps: ("clientWidth" | "clientHeight" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth")[];

package/dist/components/Tabs/Tabs.utils.d.ts

@@ -1,7 +1,7 @@
 import { DropdownItemKeyType } from 'components/Dropdown/Dropdown.types';
 import { TabItem } from './components/TabItem/TabItem.types';
 import { TabsRect } from './Tabs.types';
+export declare const intersectionThreshold = 0.95;
 export declare const getTabKeysWithoutOrdering: (items: TabItem[]) => DropdownItemKeyType[];
 export declare const getOrderedTabKeys: (currentOrderedTabKeys: DropdownItemKeyType[], newTabKeys: DropdownItemKeyType[]) => DropdownItemKeyType[];
-export declare const getIntersectionRatio: (targetRect: TabsRect, rootRect: TabsRect, rootMargin?: TabsRect) => number;
-export declare const intersectionThreshold = 0.95;
+export declare const getHorizontalIntersectionRatio: (targetRect: Pick<TabsRect, "left" | "right">, rootRect: Pick<TabsRect, "left" | "right">) => number;

package/dist/components/Tabs/Tabs.utils.js

@@ -1,3 +1,4 @@
+const intersectionThreshold = 0.95;
 const getTabKeysWithoutOrdering = (items) => items.map((item) => item.key);
 const getOrderedTabKeys = (currentOrderedTabKeys, newTabKeys) => {
   const updatedPrev = currentOrderedTabKeys.reduce((acc, key) => {
@@ -6,34 +7,20 @@ const getOrderedTabKeys = (currentOrderedTabKeys, newTabKeys) => {
   const uniqueKeys = /* @__PURE__ */ new Set([...updatedPrev, ...newTabKeys]);
   return Array.from(uniqueKeys);
 };
-const getIntersectionRatio = (targetRect, rootRect, rootMargin = {
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0
-}) => {
-  const expandedRootRect = {
-    top: rootRect.top - rootMargin.top,
-    bottom: rootRect.bottom + rootMargin.bottom,
-    left: rootRect.left - rootMargin.left,
-    right: rootRect.right + rootMargin.right
-  };
-  const intersect = {
-    top: Math.max(targetRect.top, expandedRootRect.top),
-    bottom: Math.min(targetRect.bottom, expandedRootRect.bottom),
-    left: Math.max(targetRect.left, expandedRootRect.left),
-    right: Math.min(targetRect.right, expandedRootRect.right)
-  };
-  if (intersect.top >= intersect.bottom || intersect.left >= intersect.right) {
+const getHorizontalIntersectionRatio = (targetRect, rootRect) => {
+  const intersectLeft = Math.max(targetRect.left, rootRect.left);
+  const intersectRight = Math.min(targetRect.right, rootRect.right);
+  if (intersectLeft >= intersectRight) {
+    return 0;
+  }
+  const targetWidth = targetRect.right - targetRect.left;
+  if (targetWidth === 0) {
     return 0;
   }
-  const intersectArea = (intersect.bottom - intersect.top) * (intersect.right - intersect.left);
-  const targetArea = (targetRect.bottom - targetRect.top) * (targetRect.right - targetRect.left);
-  return intersectArea / targetArea;
+  return (intersectRight - intersectLeft) / targetWidth;
 };
-const intersectionThreshold = 0.95;
 export {
-  getIntersectionRatio,
+  getHorizontalIntersectionRatio,
   getOrderedTabKeys,
   getTabKeysWithoutOrdering,
   intersectionThreshold