@infomaximum/ui-kit 0.18.1 → 0.19.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/Tabs/components/TabBar/TabBar.styles.d.ts

@@ -27,7 +27,7 @@ export declare const getTabBarStyle: (size: TabsSizeType, border: boolean, iconO
         readonly flex: "1 1 auto";
         readonly zIndex: 1;
         readonly overflowY: "hidden";
-        readonly overflowX: "scroll" | "hidden";
+        readonly overflowX: "hidden" | "scroll";
         readonly scrollbarWidth: "none";
         readonly height: number;
         readonly "::-webkit-scrollbar": {

package/dist/components/Tabs/components/TabItem/TabItem.styles.d.ts

@@ -33,7 +33,7 @@ export declare const getTabItemStyle: (iconOnly: boolean, disabled: boolean, sel
     childrenWrapper: (theme: Theme) => {
         readonly color: "#262626";
         readonly padding: "12px 0";
-        readonly visibility: "visible" | "hidden";
+        readonly visibility: "hidden" | "visible";
         readonly position: "absolute" | "relative";
         readonly fontFamily: "Roboto";
         readonly fontSize: 14;

package/dist/index.d.ts

@@ -39,7 +39,7 @@ export { Breadcrumb } from './components/Breadcrumb';
 export type { BreadcrumbProps } from './components/Breadcrumb';
 export { Tag } from './components/Tag';
 export type { TagProps, CheckableProps } from './components/Tag';
-export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvider';
+export { ConfigProvider, useConfig, type Locale, type Tokens } from './components/ConfigProvider';
 export type { PickerLocale, RangePickerProps } from './components/InternalPicker';
 export { type FormProps, type FormItemProps, Form } from './components/Form';
 export { type PopconfirmProps, Popconfirm } from './components/Popconfirm';
@@ -51,4 +51,5 @@ export { ContextIsolator } from './components/ContextIsolator';
 export { type SpinProps, Spin } from './components/Spin';
 export { type TableProps, type DefaultRecord, type RenderFn, type Column, type ColumnWithChildren, Table, } from './components/Table';
 export { Collapse, type CollapseProps, type CollapseItemType, type CollapseKey, type CollapseExpandIconProps, } from './components/Collapse';
+export { Slider, type SliderProps, type SingleSliderProps, type RangeSliderProps, type SliderTooltipProps, type SliderStyles, type SliderTokens, } from './components/Slider';
 export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -40,6 +40,7 @@ import { ContextIsolator } from "./components/ContextIsolator/ContextIsolator.js
 import { Spin } from "./components/Spin/Spin.js";
 import { Table } from "./components/Table/Table.js";
 import { Collapse } from "./components/Collapse/Collapse.js";
+import { Slider } from "./components/Slider/Slider.js";
 export {
   Alert,
   Avatar,
@@ -62,6 +63,7 @@ export {
   Radio,
   Segmented,
   Select,
+  Slider,
   Spin,
   Switch,
   Table,

package/dist/types.d.ts

@@ -1,4 +1,12 @@
 import { Interpolation } from '@emotion/react';
+import { HTMLAttributes } from 'react';
 import { Theme } from './themes';
 type InterpolationWithTheme = Interpolation<Theme>;
-export type { InterpolationWithTheme };
+type PrimitiveWiden<T> = T extends string ? string : T extends number ? number : T extends boolean ? boolean : T extends bigint ? bigint : T extends symbol ? symbol : T;
+type Widen<T> = {
+    [K in keyof T]: PrimitiveWiden<T[K]>;
+};
+type Indices<T extends readonly unknown[]> = T extends readonly unknown[] ? Exclude<Partial<T>["length"], T["length"]> : never;
+type RequiredHandlers<E extends HTMLElement, K extends keyof HTMLAttributes<E> & `on${string}`> = Required<Pick<HTMLAttributes<E>, K>>;
+type RequiredDivHandlers<K extends keyof HTMLAttributes<HTMLDivElement> & `on${string}`> = RequiredHandlers<HTMLDivElement, K>;
+export type { Indices, InterpolationWithTheme, PrimitiveWiden, RequiredDivHandlers, Widen };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,26 +34,26 @@
     "update-icons": "node scripts/updateIcons/updateIcons.js"
   },
   "dependencies": {
-    "@dnd-kit/core": "6.0.5",
-    "@dnd-kit/sortable": "7.0.1",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.0.0",
-    "@floating-ui/react": "^0.27.6",
-    "@infomaximum/icons": "^1.3.3",
-    "@tanstack/react-virtual": "^3.13.6",
+    "@floating-ui/react": "^0.27.19",
+    "@infomaximum/icons": "^1.4.0",
+    "@tanstack/react-virtual": "^3.13.24",
     "@types/lodash-es": "^4.17.12",
     "classnames": "^2.5.1",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "rc-picker": "^4.11.3",
     "rc-resize-observer": "^1.4.3",
     "rc-util": "^5.44.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.16.0"
+    "react-intersection-observer": "^10.0.3"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6",
-    "@dnd-kit/sortable": "^7",
+    "@dnd-kit/sortable": "^10",
     "@dnd-kit/utilities": "^3",
     "@emotion/react": "^11.0.0",
     "dayjs": "^1.0.0",
@@ -79,6 +79,7 @@
     "@vitest/coverage-v8": "3.0.4",
     "dayjs": "^1.0.0",
     "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.11.2",