@dss-kit/ui-kit 1.0.3 → 1.1.0

package/README.md

@@ -19,6 +19,25 @@ Storybook для библиотеки React-компонентов **UI Kit** (`
   этой ветки на `storybook-trials-<id>.staging.dssnet.tech` (живёт 7 дней, продлевается при
   повторном деплое).
 
+## Предзагрузка шрифтов
+
+Шрифт Inter приходит вместе с `ui-kit.css`, но браузер начинает его качать только
+после разбора CSS. Основные начертания (500 и 400) приложение может запросить
+заранее. В Vite-приложении достаточно сослаться на файл в `node_modules`, и Vite
+подставит тот же хешированный URL, что и в CSS:
+
+```html
+<link
+  rel="preload"
+  href="/node_modules/@dss-kit/ui-kit/dist/fonts/inter-latin-cyrillic-500.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+Подробнее, включая подмножества шрифта и предзагрузку из кода: [Шрифты](./docs/styles/fonts/index.md).
+
 ## Документация
 
 Ссылки на более подробную документацию по разделам

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { MotionValue } from 'framer-motion';
+import { RefObject } from 'react';
+/**
+ * Пишет motion value прямо в стиль элемента, как это делал `motion.div`, но
+ * без renderer'а framer-motion. Renderer грузится лениво (см. MotionProvider),
+ * а Sheet должен двигаться сразу и даже если чанк с фичами не загрузился.
+ */
+export declare function useMotionValueStyle<T>(ref: RefObject<HTMLElement>, value: MotionValue<T>, apply: (element: HTMLElement, latest: T) => void): void;

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

@@ -0,0 +1,14 @@
+import { useLayoutEffect as f } from "react";
+import { useLatestRef as s } from "../../../../utils/hooks/useLatestRef.js";
+function m(e, t, u) {
+  const n = s(u);
+  f(() => {
+    const o = e.current;
+    if (!o) return;
+    const r = (c) => n.current(o, c);
+    return r(t.get()), t.on("change", r);
+  }, [e, t, n]);
+}
+export {
+  m as useMotionValueStyle
+};

package/dist/components/builders/Table/TablePagination/TablePagination.d.ts

@@ -27,8 +27,11 @@ export interface TablePaginationProps {
     /** Вариант отображения пагинации */
     /** @default "numbered" */
     variant?: TablePaginationVariant;
-    /** Подписи кнопок навигации (используется в варианте `simple`) */
-    /** @default { prev: "Previous", next: "Next" } */
+    /**
+     * Подписи кнопок навигации (используется в варианте `simple`).
+     * Когда пагинация уже 576px, кнопки становятся иконками, а подписи — их `aria-label`.
+     * @default { prev: "Previous", next: "Next" }
+     */
     labels?: TablePaginationLabels;
     /** Доступные размеры страниц */
     /** @default [10, 20, 50, 100] */
@@ -42,8 +45,11 @@ export interface TablePaginationProps {
         value: string;
         label: string;
     }) => string;
-    /** Функция для рендера значения селектора размера страницы */
-    /** @default undefined */
+    /**
+     * Функция для рендера значения селектора размера страницы.
+     * Когда пагинация уже 576px, вместо неё в поле показывается только число.
+     * @default undefined
+     */
     renderPageSizeSelectorInputItem?: (selectedItem: {
         value: string;
         label: string;