@dss-kit/ui-kit 1.0.2 → 1.0.3

package/dist/components/builders/Sheet/Sheet.utils.d.ts

@@ -0,0 +1,34 @@
+/** Положение указателя вдоль оси в момент события */
+export interface PointerSample {
+    /** `event.timeStamp`, мс */
+    time: number;
+    /** Координата вдоль оси, px */
+    position: number;
+}
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** Оставляет точки из диапазона (0, 1], сортирует по возрастанию и убирает дубли */
+export declare function normalizeSnapPoints(snapPoints?: readonly number[]): number[];
+/** Ближайшая к `value` точка фиксации */
+export declare function getClosestSnapPoint(snapPoints: readonly number[], value: number): number;
+/**
+ * Соседняя точка в направлении свайпа: `1` — следующая бо́льшая,
+ * `-1` — следующая меньшая. Если дальше точек нет — крайняя.
+ */
+export declare function getNextSnapPoint(snapPoints: readonly number[], value: number, direction: 1 | -1): number;
+/**
+ * «Резинка» при перетягивании за границу: смещение растёт всё медленнее
+ * и никогда не превышает `limit`.
+ */
+export declare function rubberband(distance: number, limit?: number): number;
+/**
+ * Скорость (px/s) по движениям указателя за последние
+ * `SHEET_VELOCITY_WINDOW` мс. Если указатель перед отпусканием стоял,
+ * скорость нулевая.
+ */
+export declare function getVelocity(samples: readonly PointerSample[]): number;
+/**
+ * Можно ли начать перетаскивание с этого элемента: он внутри панели,
+ * в зоне перетаскивания (drag handle или Sheet.Header) и не на интерактивном
+ * элементе вроде кнопки или поля ввода.
+ */
+export declare function isDragZoneTarget(target: EventTarget | null, panel: HTMLElement): boolean;

package/dist/components/builders/Sheet/Sheet.utils.js

@@ -0,0 +1,50 @@
+import { SHEET_NO_DRAG_SELECTOR as o, SHEET_DRAG_ZONE_SELECTOR as f, SHEET_VELOCITY_WINDOW as c, SHEET_OVERDRAG_LIMIT as u } from "./Sheet.const.js";
+const E = (t, n, e) => Math.min(Math.max(t, n), e);
+function g(t) {
+  if (!t?.length) return [];
+  const n = t.filter(
+    (e) => Number.isFinite(e) && e > 0 && e <= 1
+  );
+  return Array.from(new Set(n)).sort((e, i) => e - i);
+}
+function h(t, n) {
+  return t.length ? t.reduce(
+    (e, i) => Math.abs(i - n) < Math.abs(e - n) ? i : e
+  ) : n;
+}
+function S(t, n, e) {
+  if (e === 1)
+    return t.find((r) => r > n + 1e-3) ?? t[t.length - 1];
+  for (let r = t.length - 1; r >= 0; r--)
+    if (t[r] < n - 1e-3) return t[r];
+  return t[0];
+}
+function _(t, n = u) {
+  return n * (1 - 1 / (t * 0.55 / n + 1));
+}
+function T(t) {
+  if (!t.length) return 0;
+  const n = t[t.length - 1];
+  let e = n;
+  for (let r = t.length - 1; r >= 0 && !(n.time - t[r].time > c); r--)
+    e = t[r];
+  const i = n.time - e.time;
+  return i > 0 ? (n.position - e.position) / i * 1e3 : 0;
+}
+function d(t, n) {
+  if (!t || typeof t.closest != "function" || !n.contains(t))
+    return !1;
+  const e = t, i = e.closest(o);
+  if (i && n.contains(i)) return !1;
+  const r = e.closest(f);
+  return r !== null && n.contains(r);
+}
+export {
+  E as clamp,
+  h as getClosestSnapPoint,
+  S as getNextSnapPoint,
+  T as getVelocity,
+  d as isDragZoneTarget,
+  g as normalizeSnapPoints,
+  _ as rubberband
+};

package/dist/components/builders/Sheet/SheetLayer.d.ts

@@ -0,0 +1,22 @@
+import { SheetProps, SheetSizing } from './Sheet.types';
+export type SheetLayerProps = Omit<SheetProps, "sizeMode" | "snapPoints" | "closeOnEsc" | "disableBodyScroll" | "showBorders"> & Required<Pick<SheetProps, "position" | "backgroundColor" | "closeThreshold" | "closeOnDrag" | "closeOnBackdropClick">> & {
+    /** Итоговый режим размера */
+    sizing: SheetSizing;
+    /** Нормализованные точки фиксации; пусто, если режим не `snap` */
+    snapPoints: number[];
+    /** Анимация закрытия завершилась: Sheet можно размонтировать */
+    onExited: () => void;
+};
+/**
+ * Подложка и панель Sheet. Монтируется на время показа (включая анимацию
+ * закрытия), поэтому состояние жестов и точек фиксации сбрасывается при
+ * каждом открытии.
+ */
+export declare const SheetLayer: import('react').ForwardRefExoticComponent<Omit<SheetProps, "showBorders" | "closeOnEsc" | "disableBodyScroll" | "snapPoints" | "sizeMode"> & Required<Pick<SheetProps, "position" | "backgroundColor" | "closeOnBackdropClick" | "closeOnDrag" | "closeThreshold">> & {
+    /** Итоговый режим размера */
+    sizing: SheetSizing;
+    /** Нормализованные точки фиксации; пусто, если режим не `snap` */
+    snapPoints: number[];
+    /** Анимация закрытия завершилась: Sheet можно размонтировать */
+    onExited: () => void;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/builders/Sheet/SheetLayer.js

@@ -0,0 +1,115 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { css as A, cx as t } from "@emotion/css";
+import { useMergeRefs as F } from "@floating-ui/react";
+import { motion as v } from "framer-motion";
+import { forwardRef as G, useRef as L, useState as q, useMemo as J } from "react";
+import { SHEET_POSITION_CONFIG as K, SHEET_SNAP_POINT_VAR as Q } from "./Sheet.const.js";
+import { getClosestSnapPoint as U } from "./Sheet.utils.js";
+import { styles as e, positionStyles as W } from "./styles.js";
+import { useSheetMotion as X } from "./hooks/useSheetMotion.js";
+import { useSheetGesture as Y } from "./hooks/useSheetGesture.js";
+import { useBackdropClose as Z } from "../Dialog/hooks/useBackdropClose.js";
+import { DialogCloseButton as $ } from "../Dialog/DialogCloseButton/DialogCloseButton.js";
+const ee = G(
+  ({
+    isOpen: n,
+    onClose: m,
+    onExited: P,
+    position: c,
+    backgroundColor: d,
+    sizing: k,
+    snapPoints: r,
+    defaultSnapPoint: C,
+    onSnapPointChange: M,
+    closeThreshold: R,
+    closeOnDrag: g,
+    closeOnBackdropClick: x,
+    showAbsoluteCloseButton: _,
+    overlayClassName: b,
+    sheetClassName: w,
+    handleClassName: B,
+    absoluteCloseButtonClassName: D,
+    children: E
+  }, H) => {
+    const { axis: p, direction: i } = K[c], a = W[c], u = L(null), I = F([u, H]), [T, O] = q(
+      C ?? r[0] ?? 1
+    ), f = U(r, T), s = X({
+      isOpen: n,
+      onExited: P,
+      direction: i,
+      snapPoint: f
+    }), { onPointerDown: V } = Y({
+      axis: p,
+      direction: i,
+      panelRef: u,
+      isOpen: n,
+      snapPoints: r,
+      closeOnDrag: g,
+      closeThreshold: R,
+      motion: s,
+      onClose: m,
+      onSnapPointSettle: (l) => {
+        l !== f && (O(l), M?.(l));
+      }
+    }), S = Z(x, m), j = J(
+      () => A({ backgroundColor: d }),
+      [d]
+    ), h = i === 1, z = {
+      [p]: s.translate,
+      [Q]: s.snapSize
+    }, N = /* @__PURE__ */ o(
+      "div",
+      {
+        "data-sheet-handle": "",
+        "aria-hidden": !0,
+        className: t(e.handle, a.handle, B),
+        children: /* @__PURE__ */ o("div", { className: t(e.handleBar, a.handleBar) })
+      }
+    );
+    return /* @__PURE__ */ y("div", { className: t(e.root, !n && e.rootClosing), children: [
+      /* @__PURE__ */ o(
+        v.div,
+        {
+          "aria-hidden": !0,
+          className: t(e.backdrop, b),
+          style: { opacity: s.backdropOpacity },
+          onMouseDown: S.onMouseDown,
+          onClick: S.onClick
+        }
+      ),
+      /* @__PURE__ */ y(
+        v.div,
+        {
+          ref: I,
+          role: "dialog",
+          "aria-modal": "true",
+          className: t(
+            e.panel,
+            a.panel,
+            a.sizing[k],
+            j,
+            w
+          ),
+          style: z,
+          onPointerDown: V,
+          children: [
+            h && N,
+            /* @__PURE__ */ o("div", { className: e.content, children: E }),
+            !h && N,
+            _ && /* @__PURE__ */ o(
+              $,
+              {
+                absolute: !0,
+                className: D
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+ee.displayName = "SheetLayer";
+export {
+  ee as SheetLayer
+};

package/dist/components/builders/Sheet/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useSheetGesture } from './useSheetGesture';
+export { useSheetMotion } from './useSheetMotion';

package/dist/components/builders/Sheet/hooks/useSheetGesture.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+import { SheetPositionConfig } from '../Sheet.types';
+import { SheetMotion } from './useSheetMotion';
+interface UseSheetGestureOptions extends SheetPositionConfig {
+    panelRef: RefObject<HTMLElement>;
+    isOpen: boolean;
+    /** Нормализованные точки фиксации; пусто, если их нет */
+    snapPoints: number[];
+    closeOnDrag: boolean;
+    closeThreshold: number;
+    motion: SheetMotion;
+    onClose: () => void;
+    /** Sheet доведён до точки фиксации после жеста */
+    onSnapPointSettle: (snapPoint: number) => void;
+}
+/**
+ * Перетаскивание Sheet: переводит смещение указателя в положение и размер
+ * панели, а при отпускании решает — закрыть Sheet, вернуть его на место или
+ * довести до точки фиксации. Возвращает обработчик для панели Sheet.
+ */
+export declare function useSheetGesture({ axis, direction, panelRef, isOpen, snapPoints, closeOnDrag, closeThreshold, motion, onClose, onSnapPointSettle, }: UseSheetGestureOptions): {
+    onPointerDown: (event: import('react').PointerEvent<HTMLElement>) => void;
+};
+export {};

package/dist/components/builders/Sheet/hooks/useSheetGesture.js

@@ -0,0 +1,67 @@
+import { useRef as z, useEffect as y } from "react";
+import { SHEET_AXIS_KEYS as F, SHEET_FLICK_VELOCITY as H, SHEET_FLICK_MIN_DISTANCE as K } from "../Sheet.const.js";
+import { getNextSnapPoint as L, getClosestSnapPoint as N, clamp as A, rubberband as T } from "../Sheet.utils.js";
+import { useSheetPointer as R } from "./useSheetPointer.js";
+function J({
+  axis: h,
+  direction: S,
+  panelRef: E,
+  isOpen: d,
+  snapPoints: o,
+  closeOnDrag: V,
+  closeThreshold: _,
+  motion: I,
+  onClose: p,
+  onSnapPointSettle: v
+}) {
+  const { offset: c, snapSize: b, animateTo: C, snapTo: D, releaseToClose: x } = I, l = o.length > 0, u = z(null);
+  return y(() => {
+    d || (u.current = null);
+  }, [d]), R({
+    axis: h,
+    panelRef: E,
+    onDragStart: () => {
+      const a = E.current;
+      if (!a || !d) return;
+      c.stop(), b.stop();
+      const t = a.getBoundingClientRect()[F[h].size], i = l ? t / b.get() : t, r = t * (1 - c.get());
+      u.current = {
+        plane: i,
+        minVisible: l ? o[0] * i : t,
+        maxVisible: l ? o[o.length - 1] * i : t,
+        startVisible: r,
+        visible: r
+      };
+    },
+    onDragMove: (a) => {
+      const t = u.current;
+      if (!t) return;
+      const { plane: i, minVisible: r, maxVisible: n } = t;
+      let e = t.startVisible - S * a;
+      e > n ? e = n + T(e - n) : e < r && !V && (e = r - T(r - e)), e = Math.max(e, 0), t.visible = e;
+      const s = A(e, r, n);
+      l && b.set(s / i), c.set(s > 0 ? (s - e) / s : 0);
+    },
+    onDragEnd: (a, t) => {
+      const i = u.current;
+      if (u.current = null, !i || !d) return;
+      const { plane: r, minVisible: n, maxVisible: e, visible: s } = i, f = -S * t, M = Math.abs(f) > H && Math.abs(a) > K;
+      if (s < n) {
+        const g = -f / n, m = (n - s) / n;
+        if (V && (M ? f < 0 : m > _)) {
+          x(g), p();
+          return;
+        }
+        C(c, 0, { velocity: g }), l && (D(o[0]), v(o[0]));
+        return;
+      }
+      if (C(c, 0), l) {
+        const g = Math.min(s, e) / r, m = M ? L(o, g, f > 0 ? 1 : -1) : N(o, g);
+        D(m, f / r), v(m);
+      }
+    }
+  });
+}
+export {
+  J as useSheetGesture
+};

package/dist/components/builders/Sheet/hooks/useSheetMotion.d.ts

@@ -0,0 +1,31 @@
+import { MotionValue } from 'framer-motion';
+interface UseSheetMotionOptions {
+    isOpen: boolean;
+    /** Анимация закрытия завершилась: Sheet можно размонтировать */
+    onExited: () => void;
+    /** Направление закрытия вдоль оси */
+    direction: 1 | -1;
+    /** Активная точка фиксации; без snap-points не используется */
+    snapPoint: number;
+}
+interface AnimateOptions {
+    /** Начальная скорость; без неё продолжается текущее движение значения */
+    velocity?: number;
+    onComplete?: () => void;
+}
+/**
+ * Анимации Sheet: выезд и уезд, доводка до точки фиксации, затемнение
+ * подложки. Положение и размер хранятся в motion values, поэтому жест
+ * меняет их напрямую, без ререндеров.
+ */
+export declare function useSheetMotion({ isOpen, onExited, direction, snapPoint, }: UseSheetMotionOptions): {
+    offset: MotionValue<number>;
+    snapSize: MotionValue<number>;
+    translate: MotionValue<string>;
+    backdropOpacity: MotionValue<number>;
+    animateTo: (value: MotionValue<number>, target: number, { velocity, onComplete }?: AnimateOptions) => void;
+    snapTo: (target: number, velocity?: number) => void;
+    releaseToClose: (velocity: number) => void;
+};
+export type SheetMotion = ReturnType<typeof useSheetMotion>;
+export {};

package/dist/components/builders/Sheet/hooks/useSheetMotion.js

@@ -0,0 +1,74 @@
+import { useReducedMotion as y, useMotionValue as F, useTransform as M, animate as C } from "framer-motion";
+import { useRef as m, useCallback as l, useEffect as p } from "react";
+import { useLatestRef as V } from "../../../../utils/hooks/useLatestRef.js";
+import { SHEET_SPRING as S } from "../Sheet.const.js";
+import { clamp as q } from "../Sheet.utils.js";
+function N({
+  isOpen: u,
+  onExited: A,
+  direction: b,
+  snapPoint: o
+}) {
+  const d = y(), t = F(1), n = F(o), h = M(
+    t,
+    (e) => `${e * b * 100}%`
+  ), k = M(
+    t,
+    (e) => q(1 - e, 0, 1)
+  ), R = m(o), s = m(void 0), a = m(0), c = V({ isOpen: u, onExited: A }), r = l(
+    (e, i, { velocity: T, onComplete: E } = {}) => {
+      if (d) {
+        e.stop(), e.set(i), E?.();
+        return;
+      }
+      const x = T === void 0 ? S : { ...S, velocity: T };
+      C(e, i, { ...x, onComplete: E });
+    },
+    [d]
+  ), f = l(
+    (e, i) => {
+      R.current = e, r(n, e, { velocity: i });
+    },
+    [r, n]
+  );
+  p(() => {
+    const e = s.current;
+    if (s.current = void 0, u) {
+      r(t, 0, { velocity: e });
+      return;
+    }
+    r(t, 1, {
+      velocity: e,
+      onComplete: () => {
+        c.current.isOpen || c.current.onExited();
+      }
+    });
+  }, [u, r, t, c]), p(() => {
+    R.current !== o && f(o);
+  }, [o, f]), p(
+    () => () => {
+      cancelAnimationFrame(a.current), t.stop(), n.stop();
+    },
+    [t, n]
+  );
+  const v = l(
+    (e) => {
+      s.current = e, cancelAnimationFrame(a.current), a.current = requestAnimationFrame(() => {
+        s.current = void 0, c.current.isOpen && r(t, 0);
+      });
+    },
+    [r, t, c]
+  );
+  return {
+    offset: t,
+    snapSize: n,
+    translate: h,
+    backdropOpacity: k,
+    animateTo: r,
+    snapTo: f,
+    releaseToClose: v
+  };
+}
+export {
+  N as useSheetMotion
+};

package/dist/components/builders/Sheet/hooks/useSheetPointer.d.ts

@@ -0,0 +1,31 @@
+import { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+import { SheetAxis } from '../Sheet.types';
+export interface SheetPointerHandlers {
+    /** Нажатие стало перетаскиванием: указатель сдвинулся вдоль оси */
+    onDragStart: () => void;
+    /** Смещение указателя вдоль оси от точки нажатия, px */
+    onDragMove: (offset: number) => void;
+    /** Отпускание: итоговое смещение (px) и скорость (px/s) вдоль оси */
+    onDragEnd: (offset: number, velocity: number) => void;
+}
+interface UseSheetPointerOptions extends SheetPointerHandlers {
+    /** Ось перетаскивания */
+    axis: SheetAxis;
+    /** Панель Sheet: перетаскивание начинается только внутри неё */
+    panelRef: RefObject<HTMLElement>;
+}
+/**
+ * Отслеживает жест указателя в зонах перетаскивания (drag handle,
+ * Sheet.Header): смещение и скорость вдоль оси. Построено на Pointer Events,
+ * поэтому мышь, касание и перо обрабатываются одинаково. Возвращает
+ * обработчик для панели Sheet.
+ *
+ * Свой трекинг вместо `drag`/`onPan` из framer-motion: обработчики `onPan*`
+ * вызываются асинхронно (после отрисовки кадра), а здесь нужно решить по
+ * нажатию, начинать ли жест, и менять не только `transform`, но и высоту
+ * (snap-points).
+ */
+export declare function useSheetPointer({ axis, panelRef, ...handlers }: UseSheetPointerOptions): {
+    onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+};
+export {};

package/dist/components/builders/Sheet/hooks/useSheetPointer.js

@@ -0,0 +1,81 @@
+import { useRef as y, useEffect as L, useCallback as H } from "react";
+import { useLatestRef as O } from "../../../../utils/hooks/useLatestRef.js";
+import { SHEET_AXIS_KEYS as C, SHEET_DRAG_START_THRESHOLD as P, SHEET_VELOCITY_WINDOW as R } from "../Sheet.const.js";
+import { isDragZoneTarget as E, getVelocity as A } from "../Sheet.utils.js";
+function k({
+  axis: h,
+  panelRef: s,
+  ...T
+}) {
+  const a = O(T), c = y(null);
+  L(() => () => c.current?.(), []);
+  const b = H(
+    (r) => {
+      const i = s.current;
+      if (!i || !r.isPrimary || r.button !== 0 || !E(r.target, i))
+        return;
+      c.current?.();
+      const { client: e, crossClient: w } = C[h], { pointerId: p, pointerType: M } = r, _ = r.target, m = r[e], I = r[w];
+      let o = [
+        { time: r.timeStamp, position: m }
+      ], d = !1, l = 0;
+      function g() {
+        window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u), c.current = null;
+      }
+      function S(t, n) {
+        g(), d && a.current.onDragEnd(t, n);
+      }
+      function D(t) {
+        if (t.pointerId !== p) return;
+        if (M === "mouse" && t.buttons === 0) {
+          S(l, 0);
+          return;
+        }
+        const n = t[e] - m;
+        if (!d) {
+          const f = t[w] - I;
+          if (Math.max(Math.abs(n), Math.abs(f)) < P)
+            return;
+          if (Math.abs(f) > Math.abs(n)) {
+            g();
+            return;
+          }
+          d = !0;
+          try {
+            _.setPointerCapture(p);
+          } catch {
+          }
+          a.current.onDragStart();
+        }
+        l = n, o = o.filter(
+          (f) => t.timeStamp - f.time <= R
+        ), o.push({
+          time: t.timeStamp,
+          position: t[e]
+        }), a.current.onDragMove(n);
+      }
+      function u(t) {
+        if (t.pointerId === p) {
+          if (t.type === "pointercancel") {
+            S(l, 0);
+            return;
+          }
+          o.push({ time: t.timeStamp, position: t[e] }), S(t[e] - m, A(o));
+        }
+      }
+      window.addEventListener("pointermove", D), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u), c.current = g;
+    },
+    [h, s, a]
+  );
+  return L(() => {
+    const r = s.current;
+    if (!r) return;
+    const i = (e) => {
+      E(e.target, r) && e.preventDefault();
+    };
+    return r.addEventListener("dragstart", i), () => r.removeEventListener("dragstart", i);
+  }, [s]), { onPointerDown: b };
+}
+export {
+  k as useSheetPointer
+};

package/dist/components/builders/Sheet/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, RefAttributes } from 'react';
+import { DialogParts } from '../Dialog';
+import { SheetProps } from './Sheet.types';
+/**
+ * Тип составного компонента `Sheet` — по аналогии с `Modal`: без служебных
+ * полей `ForwardRefExoticComponent` в автодополнении `<Sheet.`.
+ *
+ * `Header` / `Main` / `Footer` — те же компоненты, что `Modal.Header` /
+ * `Modal.Main` / `Modal.Footer` (общие части диалогов, см. `../Dialog`).
+ */
+type SheetComponent = ((props: SheetProps & RefAttributes<HTMLDivElement>) => ReactNode) & DialogParts;
+declare const SheetWithSubComponents: SheetComponent;
+export { SheetWithSubComponents as Sheet };
+export type { DialogFooterProps as SheetFooterProps, DialogHeaderProps as SheetHeaderProps, DialogMainProps as SheetMainProps, } from '../Dialog';
+export type { SheetPosition, SheetProps, SheetSizeMode } from './Sheet.types';

package/dist/components/builders/Sheet/index.js

@@ -0,0 +1,9 @@
+import { Sheet as t } from "./Sheet.js";
+import { dialogParts as e } from "../Dialog/Dialog.parts.js";
+const s = Object.assign(
+  t,
+  e
+);
+export {
+  s as Sheet
+};

package/dist/components/builders/Sheet/styles.d.ts

@@ -0,0 +1,17 @@
+import { SheetPosition, SheetSizing } from './Sheet.types';
+/** Стили, зависящие от позиции: прижатие к краю, скругления, ручка, размеры */
+export declare const positionStyles: Record<SheetPosition, {
+    panel: string;
+    handle: string;
+    handleBar: string;
+    sizing: Record<SheetSizing, string>;
+}>;
+export declare const styles: {
+    root: string;
+    rootClosing: string;
+    backdrop: string;
+    panel: string;
+    content: string;
+    handle: string;
+    handleBar: string;
+};