skillgrid 0.0.86 → 0.0.87

package/dist/assets/components/Dialog/Dialog.module-BvSBnHQm.css

@@ -0,0 +1 @@
+:root{--dialog-margin: 12px;--dialog-border-radius: 24px}._overlay_12slx_6{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;display:flex;flex-direction:column;background:#00000080;transition:opacity .2s ease-in-out}._container_12slx_19{position:absolute;overflow:hidden;overflow-y:auto;min-width:300px;background:var(--bg-primary);border-radius:var(--dialog-border-radius);box-shadow:0 4px 24px #0000001a}._placement-default_12slx_32{top:0;left:50%;translate:-50% 0;max-width:90dvw;max-height:90dvh;margin-right:auto;margin-left:auto;margin-block:80px}._placement-bottom-left_12slx_45{bottom:0;left:0;max-width:90dvw;max-height:90dvh;margin:12px}._placement-bottom-right_12slx_54{right:0;bottom:0;max-width:90dvw;max-height:90dvh;margin:12px}._placement-center_12slx_64{position:fixed;top:50%;left:50%;translate:-50% -50%;max-width:90dvw;max-height:90dvh;margin-right:auto;margin-left:auto}._placement-left-drawer_12slx_77{inset:0 auto 0 0;margin:12px;border-radius:16px}._placement-right-drawer_12slx_83{inset:0 0 0 auto;margin:12px;border-radius:16px}._placement-bottom-sheet_12slx_89{inset:auto 0 0;max-width:100dvw;max-height:90dvh;margin:0;border-radius:var(--dialog-border-radius) var(--dialog-border-radius) 0 0}._grabber_12slx_100{touch-action:none;position:absolute;z-index:1000;width:40px;height:4px;opacity:.7;background:var(--stroke-neutral);border-radius:4px}._grabber_12slx_100:before{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}._container_12slx_19:hover ._grabber_12slx_100{opacity:1}._grabber-top_12slx_127,._grabber-bottom_12slx_128{top:10px;left:50%;transform:translate(-50%)}._grabber-right_12slx_134{top:50%;left:10px;transform:translateY(-50%);width:4px;height:40px}._grabber-left_12slx_143{top:50%;right:10px;transform:translateY(-50%);width:4px;height:40px}

package/dist/components/Dialog/Dialog.js

@@ -1,18 +1,18 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
 import { useMergeRefs as w, FloatingPortal as V, FloatingOverlay as E, FloatingFocusManager as $ } from "@floating-ui/react";
-import o from "./Dialog.module.css.js";
+import a from "./Dialog.module.css.js";
 import { forwardRef as j } from "react";
 import { clsx as c } from "clsx";
 import { useDialogDraggable as I } from "./lib/use-dialog-draggable.js";
 import { useVisualViewportCenter as M } from "./lib/use-visual-viewport-center.js";
-const G = j((p, u) => {
+const B = j((f, u) => {
   const {
     placement: i = "default",
     open: d,
-    onOpenChange: m,
+    onOpenChange: g,
     overlayProps: e,
     portalProps: b,
-    focusManagement: a,
+    focusManagement: r,
     children: h,
     disableOutsideClick: N = !1,
     disableEscapeKey: O = !1,
@@ -22,29 +22,29 @@ const G = j((p, u) => {
     style: D,
     "data-testid": s,
     ...F
-  } = p;
+  } = f;
   d === void 0 && process.env.NODE_ENV !== "production" && console.error(
     "Dialog: компонент должен быть контролируемым. Используйте пропсы open и onOpenChange."
   );
-  const r = I({
+  const o = I({
     open: d,
-    onOpenChange: m,
+    onOpenChange: g,
     placement: i,
     disableEscapeKey: O,
     closeOnDrag: l
-  }), { isMounted: g, transitionStyles: t } = r, y = M(i === "center" && g), v = w([u, r.refs.setFloating]), k = () => {
-    N || m(!1);
+  }), { isMounted: m, transitionStyles: t } = o, y = M(i === "center" && m), v = w([u, o.refs.setFloating]), k = () => {
+    N || g(!1);
   };
-  return g ? (
+  return m ? (
     // `FloatingPortal` рендерит диалог в корне `document.body`,
     // чтобы избежать проблем с z-index и overflow.
-    /* @__PURE__ */ f(V, { ...b, children: [
+    /* @__PURE__ */ p(V, { ...b, children: [
       !x && /* @__PURE__ */ n(
         E,
         {
           onPointerDown: k,
           "data-testid": "dialog-overlay",
-          className: c(o.overlay, e == null ? void 0 : e.className),
+          className: c(a.overlay, e == null ? void 0 : e.className),
           lockScroll: (e == null ? void 0 : e.lockScroll) ?? !0,
           style: {
             // Стили для анимации прозрачности оверлея
@@ -58,35 +58,36 @@ const G = j((p, u) => {
         $,
         {
           initialFocus: 1 / 0,
-          ...a,
-          context: { ...r.context, ...a == null ? void 0 : a.context },
-          children: /* @__PURE__ */ f(
+          ...r,
+          context: { ...o.context, ...r == null ? void 0 : r.context },
+          children: /* @__PURE__ */ p(
             "section",
             {
               ref: v,
               "aria-modal": "true",
               role: "dialog",
-              className: c(C, o.container, o[`placement-${i}`]),
+              className: c(C, a.container, a[`placement-${i}`]),
               style: {
                 ...y ?? {},
                 ...D,
                 ...t
               },
               "data-testid": s,
-              ...r.getFloatingProps(F),
+              ...o.getFloatingProps(F),
               children: [
                 h,
                 l && /* @__PURE__ */ n(
                   "div",
                   {
                     className: c(
-                      o.grabber,
-                      o[`grabber-${l.direction}`]
+                      a.grabber,
+                      a[`grabber-${l.direction}`]
                       // classNames?.grabber,
                     ),
                     role: "presentation",
                     "aria-hidden": "true",
-                    "data-testid": s ? `${s}-grabber` : void 0
+                    "data-testid": s ? `${s}-grabber` : void 0,
+                    ...o.getGrabberProps()
                   }
                 )
               ]
@@ -98,5 +99,5 @@ const G = j((p, u) => {
   ) : null;
 });
 export {
-  G as Dialog
+  B as Dialog
 };

package/dist/components/Dialog/Dialog.module.css.js

@@ -1,18 +1,18 @@
-import '../../assets/components/Dialog/Dialog.module-OXi8ThCq.css';const e = "_overlay_1gisq_6", t = "_container_1gisq_19", r = "_grabber_1gisq_100", _ = {
+import '../../assets/components/Dialog/Dialog.module-BvSBnHQm.css';const e = "_overlay_12slx_6", t = "_container_12slx_19", r = "_grabber_12slx_100", _ = {
   overlay: e,
   container: t,
-  "placement-default": "_placement-default_1gisq_32",
-  "placement-bottom-left": "_placement-bottom-left_1gisq_45",
-  "placement-bottom-right": "_placement-bottom-right_1gisq_54",
-  "placement-center": "_placement-center_1gisq_64",
-  "placement-left-drawer": "_placement-left-drawer_1gisq_77",
-  "placement-right-drawer": "_placement-right-drawer_1gisq_83",
-  "placement-bottom-sheet": "_placement-bottom-sheet_1gisq_89",
+  "placement-default": "_placement-default_12slx_32",
+  "placement-bottom-left": "_placement-bottom-left_12slx_45",
+  "placement-bottom-right": "_placement-bottom-right_12slx_54",
+  "placement-center": "_placement-center_12slx_64",
+  "placement-left-drawer": "_placement-left-drawer_12slx_77",
+  "placement-right-drawer": "_placement-right-drawer_12slx_83",
+  "placement-bottom-sheet": "_placement-bottom-sheet_12slx_89",
   grabber: r,
-  "grabber-top": "_grabber-top_1gisq_118",
-  "grabber-bottom": "_grabber-bottom_1gisq_119",
-  "grabber-right": "_grabber-right_1gisq_125",
-  "grabber-left": "_grabber-left_1gisq_134"
+  "grabber-top": "_grabber-top_12slx_127",
+  "grabber-bottom": "_grabber-bottom_12slx_128",
+  "grabber-right": "_grabber-right_12slx_134",
+  "grabber-left": "_grabber-left_12slx_143"
 };
 export {
   t as container,

package/dist/components/Dialog/lib/use-dialog-draggable.d.ts

@@ -6,9 +6,12 @@ type UseDialogDraggableOptions = Pick<DialogProps, 'placement' | 'open' | 'disab
  * Оборачивает `useDialog` и добавляет обработчики событий указателя (`PointerEvents`)
  * для отслеживания перетаскивания и закрытия диалога при превышении порога.
  *
+ * Обработчики вешаются на граббер (`getGrabberProps`), а не на корень диалога: у контейнера
+ * есть `overflow-y: auto`, и на touch вертикальный жест иначе уходит в скролл.
+ *
  * @param {UseDialogDraggableOptions} options - Опции для конфигурации хука.
  * @returns Возвращает объект с данными и пропсами, аналогичный `useDialog`,
- * но с модифицированными `transitionStyles` и `getFloatingProps` для поддержки перетаскивания.
+ * но с модифицированными `transitionStyles` и `getGrabberProps` для поддержки перетаскивания.
  */
 export declare function useDialogDraggable({ open, onOpenChange, placement, disableEscapeKey, closeOnDrag, }: UseDialogDraggableOptions): {
     isMounted: boolean;
@@ -37,6 +40,7 @@ export declare function useDialogDraggable({ open, onOpenChange, placement, disa
         setFloating: (node: HTMLElement | null) => void;
     } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
     transitionStyles: CSSProperties;
-    getFloatingProps: (userProps: HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getGrabberProps: () => HTMLProps<HTMLDivElement> | undefined;
 };
 export {};

package/dist/components/Dialog/lib/use-dialog-draggable.js

@@ -1,97 +1,108 @@
-import { useRef as T, useState as w, useEffect as C, useCallback as d, useMemo as k } from "react";
-import { useDialog as L } from "./use-dialog.js";
-const R = 80;
-function v({
-  open: u,
-  onOpenChange: h,
-  placement: E = "center",
-  disableEscapeKey: F = !1,
-  closeOnDrag: i
+import { useRef as w, useState as A, useEffect as _, useCallback as p, useMemo as L } from "react";
+import { useDialog as F } from "./use-dialog.js";
+const G = 80;
+function U(s, a, u, h) {
+  switch (s) {
+    case "bottom":
+      return Math.max(0, u);
+    // Разрешаем движение только вниз
+    case "top":
+      return Math.max(0, -u);
+    // Движение вверх (отрицательный dy)
+    case "right":
+      return Math.max(0, a);
+    // Только вправо
+    case "left":
+      return Math.max(0, -a);
+    // Только влево (отрицательный dx)
+    default:
+      return h ? u : a;
+  }
+}
+function $({
+  open: s,
+  onOpenChange: a,
+  placement: u = "center",
+  disableEscapeKey: h = !1,
+  closeOnDrag: o
 }) {
-  const { getFloatingProps: b, transitionStyles: f, isMounted: p, context: P, refs: x } = L({
-    open: u,
-    onOpenChange: h,
-    placement: E,
-    disableEscapeKey: F
-  }), r = T({ startX: 0, startY: 0, dragging: !1 }), [o, g] = w(0), a = i == null ? void 0 : i.direction, M = (i == null ? void 0 : i.threshold) ?? R, l = a === "top" || a === "bottom", e = u && !!a;
-  C(() => {
-    u || (r.current.dragging = !1, g(0));
-  }, [u]);
-  const S = d(
+  const { getFloatingProps: M, transitionStyles: l, isMounted: X, context: Y, refs: y } = F({
+    open: s,
+    onOpenChange: a,
+    placement: u,
+    disableEscapeKey: h
+  }), r = w({ startX: 0, startY: 0, dragging: !1 }), f = w(0), [S, P] = A(!1), [g, d] = A(0), e = o == null ? void 0 : o.direction, D = (o == null ? void 0 : o.threshold) ?? G, i = e === "top" || e === "bottom", n = s && !!e;
+  _(() => {
+    s || (r.current.dragging = !1, P(!1), f.current = 0, d(0));
+  }, [s]);
+  const T = p(
     (t) => {
-      e && (r.current.dragging = !0, r.current.startX = t.clientX, r.current.startY = t.clientY, g(0));
+      if (n) {
+        t.preventDefault(), t.stopPropagation(), r.current.startX = t.clientX, r.current.startY = t.clientY, r.current.dragging = !0, f.current = 0, P(!0), d(0);
+        try {
+          t.currentTarget.setPointerCapture(t.pointerId);
+        } catch {
+        }
+      }
     },
-    [e]
-  ), y = d(
+    [n]
+  ), v = p(
     (t) => {
-      if (!r.current.dragging || !e) return;
-      const n = t.clientX - r.current.startX, s = t.clientY - r.current.startY;
-      let c;
-      switch (a) {
-        case "bottom":
-          c = Math.max(0, s);
-          break;
-        case "top":
-          c = Math.max(0, -s);
-          break;
-        case "right":
-          c = Math.max(0, n);
-          break;
-        case "left":
-          c = Math.max(0, -n);
-          break;
-        default:
-          c = l ? s : n;
-      }
-      g(c);
+      if (!r.current.dragging || !n) return;
+      const c = t.clientX - r.current.startX, b = t.clientY - r.current.startY, x = U(e, c, b, i);
+      f.current = x, d(x);
     },
-    [e, a, l]
-  ), m = d(
+    [n, e, i]
+  ), m = p(
     (t) => {
-      var n, s;
-      if (!(!r.current.dragging || !e)) {
-        r.current.dragging = !1;
-        try {
-          (s = (n = t.currentTarget).hasPointerCapture) != null && s.call(n, t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId);
-        } catch {
-        }
-        o >= M ? h(!1) : g(0);
+      var I, R;
+      if (!r.current.dragging || !n) return;
+      r.current.dragging = !1, P(!1);
+      try {
+        (R = (I = t.currentTarget).hasPointerCapture) != null && R.call(I, t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId);
+      } catch {
       }
+      const c = t.clientX - r.current.startX, b = t.clientY - r.current.startY;
+      Math.max(
+        f.current,
+        U(e, c, b, i)
+      ) >= D ? a(!1) : (f.current = 0, d(0));
     },
-    [o, M, h, e]
-  ), X = k(() => {
-    if (!e) return f;
-    if (r.current.dragging) {
-      const t = { ...f, transitionProperty: "none" };
-      if (o > 0) {
-        const n = a === "left" || a === "top" ? -o : o;
-        t.transform = l ? `translateY(${n}px)` : `translateX(${n}px)`;
+    [D, a, n, e, i]
+  ), C = L(() => {
+    if (!n) return l;
+    if (S) {
+      const t = { ...l, transitionProperty: "none" };
+      if (g > 0) {
+        const c = e === "left" || e === "top" ? -g : g;
+        t.transform = i ? `translateY(${c}px)` : `translateX(${c}px)`;
       }
       return t;
     }
-    return f;
-  }, [f, o, e, l, a]), Y = d(
-    (t) => b(e ? {
-      ...t,
-      onPointerDown: S,
-      onPointerUp: m,
-      onPointerMove: y,
-      onPointerCancel: m
-      // Отмена (например, уход фокуса) также завершает перетаскивание
-    } : t),
-    [b, S, y, m, e]
-  );
-  return k(
+    return l;
+  }, [l, g, n, i, e, S]), E = p(() => {
+    if (n)
+      return {
+        onPointerDown: T,
+        onPointerUp: m,
+        onPointerMove: v,
+        onPointerCancel: m,
+        // Отмена (например, уход фокуса) также завершает перетаскивание
+        style: { touchAction: "none" }
+      };
+  }, [T, v, m, n]);
+  return L(
     () => ({
-      isMounted: p,
-      context: P,
-      refs: x,
-      transitionStyles: X,
-      getFloatingProps: Y
+      isMounted: X,
+      context: Y,
+      refs: y,
+      transitionStyles: C,
+      getFloatingProps: M,
+      getGrabberProps: E
     }),
-    [p, X, Y, P, x]
+    [X, C, M, E, Y, y]
   );
 }
 export {
-  v as useDialogDraggable
+  $ as useDialogDraggable
 };

package/dist/components/Tabs/ScrollWrapper.js

@@ -1,15 +1,15 @@
 import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { useRef as W, useState as g, useEffect as w } from "react";
-import { clsx as i } from "clsx";
+import { clsx as a } from "clsx";
 import e from "./ScrollWrapper.module.css.js";
 import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 const B = "white", G = ({
   children: b,
-  withControls: a = !0,
+  withControls: i = !0,
   className: L,
   size: c
 }) => {
-  const s = W(null), [d, C] = g(!1), [h, k] = g(!1), { ref: x, bgColor: R } = M(), E = x ?? { current: null }, f = R ?? B, u = a && d, m = a && h, v = ({ direction: t }) => /* @__PURE__ */ r(
+  const s = W(null), [d, C] = g(!1), [h, k] = g(!1), { ref: x, bgColor: R } = M(), E = x ?? { current: null }, f = R ?? B, u = i && d, m = i && h, v = ({ direction: t }) => /* @__PURE__ */ r(
     "svg",
     {
       height: "12px",
@@ -49,11 +49,11 @@ const B = "white", G = ({
       return t.addEventListener("scroll", l, { passive: !0 }), window.addEventListener("resize", l), () => {
         t.removeEventListener("scroll", l), window.removeEventListener("resize", l);
       };
-  }, []), /* @__PURE__ */ N("div", { ref: E, className: i(e.wrapper, L), children: [
+  }, []), /* @__PURE__ */ N("div", { ref: E, className: a(e.wrapper, L), children: [
     u && /* @__PURE__ */ r(
       "div",
       {
-        className: i(e.mask, e.maskLeft, d && e.visible),
+        className: a(e.mask, e.maskLeft, d && e.visible),
         style: {
           background: `linear-gradient(to right, ${f} 17%, transparent 80%)`
         }
@@ -62,7 +62,7 @@ const B = "white", G = ({
     m && /* @__PURE__ */ r(
       "div",
       {
-        className: i(e.mask, e.maskRight, h && e.visible),
+        className: a(e.mask, e.maskRight, h && e.visible),
         style: {
           background: `linear-gradient(to left, ${f} 17%, transparent 80%)`
         }
@@ -75,7 +75,8 @@ const B = "white", G = ({
         type: "button",
         tabIndex: -1,
         "aria-hidden": "true",
-        className: i(e.control, e.left, e[c]),
+        "data-testid": "tabs-scroll-control-left",
+        className: a(e.control, e.left, e[c]),
         onClick: () => p("left"),
         children: /* @__PURE__ */ r(v, { direction: "left" })
       }
@@ -86,7 +87,8 @@ const B = "white", G = ({
         type: "button",
         tabIndex: -1,
         "aria-hidden": "true",
-        className: i(e.control, e.right, e[c]),
+        "data-testid": "tabs-scroll-control-right",
+        className: a(e.control, e.right, e[c]),
         onClick: () => p("right"),
         children: /* @__PURE__ */ r(v, { direction: "right" })
       }