@dss-kit/ui-kit 1.0.1 → 1.0.3

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;
+};

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

@@ -0,0 +1,135 @@
+import { css as o } from "@emotion/css";
+import { SHEET_HANDLE_HEIGHT as n, SHEET_OVERDRAG_LIMIT as a, SHEET_SNAP_POINT_VAR as i } from "./Sheet.const.js";
+import { getDialogPartSelector as r } from "../Dialog/Dialog.const.js";
+import { theme as t } from "../../../utils/theme/index.js";
+const e = "env(safe-area-inset-top, 0px)", l = "env(safe-area-inset-bottom, 0px)", c = {
+  content: o({
+    maxHeight: [
+      `calc(100vh - ${e})`,
+      `calc(100dvh - ${e})`
+    ]
+  }),
+  full: o({
+    height: ["100vh", "100dvh"],
+    paddingTop: e,
+    borderRadius: 0
+  }),
+  // Значение с var() браузер не отбросит при разборе даже без поддержки dvh,
+  // поэтому фолбэк через @supports, а не повтором свойства
+  snap: o({
+    height: `calc(var(${i}) * (100vh - ${e}))`,
+    "@supports (height: 100dvh)": {
+      height: `calc(var(${i}) * (100dvh - ${e}))`
+    }
+  })
+}, f = {
+  bottom: {
+    panel: o({
+      right: 0,
+      bottom: 0,
+      left: 0,
+      flexDirection: "column",
+      paddingBottom: l,
+      borderTopLeftRadius: t.cornerRadius.md,
+      borderTopRightRadius: t.cornerRadius.md,
+      boxShadow: `0 -4px 20px 0 ${t.color.effect.shadow_s}`,
+      // Продолжение фона за нижним краем: при перетягивании вверх за открытое
+      // положение («резинка») у края экрана не появляется просвет. Нахлёст
+      // в 1px убирает шов на дробных смещениях
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: "calc(100% - 1px)",
+        right: 0,
+        left: 0,
+        height: a + 1,
+        backgroundColor: "inherit"
+      }
+    }),
+    handle: o({
+      alignItems: "flex-start",
+      paddingTop: t.spacing.sm
+    }),
+    handleBar: o({
+      width: 36,
+      height: 4
+    }),
+    sizing: c
+  }
+}, u = {
+  root: o({
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1
+  }),
+  // Пока Sheet уезжает, страница под ним уже доступна для кликов
+  rootClosing: o({
+    pointerEvents: "none"
+  }),
+  backdrop: o({
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: t.color.fill.bg_overlay_primary,
+    backdropFilter: "blur(5px)"
+  }),
+  panel: o({
+    position: "absolute",
+    display: "flex",
+    outline: "none",
+    // Шапка — зона перетаскивания: жест не прокручивает страницу и не выделяет текст
+    [`& ${r("header")}`]: {
+      touchAction: "none",
+      userSelect: "none"
+    },
+    // Main занимает свободное место (в режимах full и snap футер прижат к низу)
+    // и не передаёт прокрутку странице, когда доходит до края
+    [`& ${r("main")}`]: {
+      flex: "1 1 auto",
+      overscrollBehavior: "contain"
+    },
+    // У футера `flex: 1` (Box): у Modal высота по контенту и это незаметно,
+    // у Sheet высота бывает фиксированной — футер не растягиваем
+    [`& ${r("footer")}`]: {
+      flex: "0 0 auto"
+    }
+  }),
+  // Первым сжимается Main. Если шапка и футер всё равно не помещаются
+  // (мелкая точка фиксации, низкий экран в landscape), прокручивается всё
+  // содержимое — футер остаётся достижимым
+  content: o({
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    minWidth: 0,
+    minHeight: 0,
+    overflowX: "hidden",
+    overflowY: "auto",
+    overscrollBehavior: "contain"
+  }),
+  handle: o({
+    display: "flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    height: n,
+    cursor: "grab",
+    touchAction: "none",
+    userSelect: "none",
+    "&:active": {
+      cursor: "grabbing"
+    }
+  }),
+  handleBar: o({
+    borderRadius: t.cornerRadius.fullRound,
+    backgroundColor: t.color.icon.tertiary
+  })
+};
+export {
+  f as positionStyles,
+  u as styles
+};

package/dist/components/builders/Table/Table.js

@@ -1,25 +1,25 @@
-import { jsx as o, jsxs as H } from "react/jsx-runtime";
-import { cx as p, css as b } from "@emotion/css";
-import { useReactTable as Pe, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as _e, flexRender as P, createColumnHelper as ke } from "@tanstack/react-table";
-import { useMemo as ze, useImperativeHandle as Ie } from "react";
-import Ve from "../../../assets/svg/table/search.svg.js";
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { cx as h, css as u } from "@emotion/css";
+import { useReactTable as ve, getPaginationRowModel as Pe, getSortedRowModel as Me, getCoreRowModel as Ee, flexRender as v, createColumnHelper as Ie } from "@tanstack/react-table";
+import { useMemo as ke, useImperativeHandle as ze } from "react";
+import De from "../../../assets/svg/table/search.svg.js";
 import { typography as Le } from "../../../styles/utils/typography.js";
-import { useControllableState as m } from "./Table.hooks.js";
-import { getColumnPinningStyles as f } from "./Table.utils.js";
-import { TablePlaceholder as We } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as Ee } from "./TableWrapper/TableWrapper.js";
-import { TableHeadRow as Fe } from "./TableHeadRow/TableHeadRow.js";
-import { TablePagination as je } from "./TablePagination/TablePagination.js";
-import { TableHeadCell as Be } from "./TableHeadCell/TableHeadCell.js";
-import { TableBodyCell as De } from "./TableBodyCell/TableBodyCell.js";
+import { useControllableState as r } from "./Table.hooks.js";
+import { getColumnPinningStyles as b } from "./Table.utils.js";
+import { TablePlaceholder as Ve } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as We } from "./TableWrapper/TableWrapper.js";
+import { TableHeadRow as Be } from "./TableHeadRow/TableHeadRow.js";
+import { TablePagination as Fe } from "./TablePagination/TablePagination.js";
+import { TableHeadCell as $e } from "./TableHeadCell/TableHeadCell.js";
+import { TableBodyCell as je } from "./TableBodyCell/TableBodyCell.js";
 import { TableBodyRow as Ae } from "./TableBodyRow/TableBodyRow.js";
-import { TableBodyCellContent as _ } from "./TableBodyCellContent/TableBodyCellContent.js";
+import { TableBodyCellContent as E } from "./TableBodyCellContent/TableBodyCellContent.js";
 import { Skeleton as Ke } from "../../shared/Skeleton/Skeleton.js";
 import { TableHeadCellContent as Oe } from "./TableHeadCellContent/TableHeadCellContent.js";
-import { TableHeadCellContentSortable as $e } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
-import { theme as qe } from "../../../utils/theme/index.js";
-import { Box as Ge } from "../Box/Box.js";
-const { spacing: M, color: l } = qe, Je = b({
+import { TableHeadCellContentSortable as Ge } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
+import { theme as Ue } from "../../../utils/theme/index.js";
+import { Box as qe } from "../Box/Box.js";
+const { spacing: P, color: n } = Ue, Je = u({
   ...Le.body2,
   fontWeight: 500,
   width: "100%",
@@ -27,36 +27,36 @@ const { spacing: M, color: l } = qe, Je = b({
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
-  backgroundColor: l.fill.bg_primary
-}), Qe = b({
-  backgroundColor: l.fill.bg_secondary,
-  color: l.text.tertiary
-}), Ue = b({
+  backgroundColor: n.fill.bg_primary
+}), Qe = u({
+  backgroundColor: n.fill.bg_secondary,
+  color: n.text.tertiary
+}), Xe = u({
   pointerEvents: "none",
   userSelect: "none"
-}), N = ["70%", "55%", "80%", "60%"], c = ({
-  ref: k,
-  data: h,
-  columns: u,
-  showBorders: g = !0,
-  enableSorting: z = !1,
-  enablePagination: S = !1,
-  enableRowSelection: I = !1,
-  enableMultiRowSelection: V = !1,
-  enableColumnPinning: d = !1,
+}), M = ["70%", "55%", "80%", "60%"], Ye = `linear-gradient(${n.fill.accent_tint_low}, ${n.fill.accent_tint_low}), ${n.fill.bg_primary}`, m = ({
+  ref: I,
+  data: C,
+  columns: S,
+  showBorders: c = !0,
+  enableSorting: k = !1,
+  enablePagination: y = !1,
+  enableRowSelection: z = !1,
+  enableMultiRowSelection: D = !1,
+  enableColumnPinning: g = !1,
   columnPinning: L,
-  onColumnPinningChange: W,
-  sorting: E,
-  onSortingChange: F,
-  manualSorting: j,
-  columnFilters: B,
-  onColumnFiltersChange: D,
+  onColumnPinningChange: V,
+  sorting: W,
+  onSortingChange: B,
+  manualSorting: F,
+  columnFilters: $,
+  onColumnFiltersChange: j,
   columnVisibility: A,
   onColumnVisibilityChange: K,
   pagination: O,
-  onPaginationChange: $,
-  rowSelection: q,
-  onRowSelectionChange: G,
+  onPaginationChange: G,
+  rowSelection: U,
+  onRowSelectionChange: q,
   totalCount: s,
   loading: i = !1,
   loadingRowCount: J = 10,
@@ -65,199 +65,203 @@ const { spacing: M, color: l } = qe, Je = b({
     description: "Try adjusting your search or filters",
     action: "Reset"
   },
-  className: U,
-  containerClassName: y,
-  theadClassName: X,
-  tbodyClassName: Y,
-  emptyStateClassName: Z,
-  emptyStateTitleClassName: ee,
-  emptyStateDescriptionClassName: oe,
+  className: X,
+  containerClassName: w,
+  theadClassName: Y,
+  tbodyClassName: Z,
+  emptyStateClassName: ee,
+  emptyStateTitleClassName: oe,
+  emptyStateDescriptionClassName: te,
   paginationClassName: ne,
-  tableOptions: te = {},
-  onRowClick: w,
-  getRowId: le,
-  headCellComponent: ie = Be,
-  bodyCellComponent: x = De,
-  headRowComponent: ae = Fe,
-  bodyRowComponent: R = Ae,
-  onReset: re,
+  tableOptions: le = {},
+  onRowClick: R,
+  getRowId: ie,
+  headCellComponent: ae = $e,
+  bodyCellComponent: T = je,
+  headRowComponent: re = Be,
+  bodyRowComponent: x = Ae,
+  onReset: se,
   paginationVariant: me,
-  paginationLabels: se,
-  renderPageSizeSelectorDropdownItem: ce,
-  renderPageSizeSelectorInputItem: ge
+  paginationLabels: ce,
+  renderPageSizeSelectorDropdownItem: ge,
+  renderPageSizeSelectorInputItem: de
 }) => {
-  const [de, pe] = m(
-    E,
-    F,
-    []
-  ), [he, Ce] = m(
+  const [pe, he] = r(
+    W,
     B,
-    D,
     []
-  ), [fe, be] = m(
+  ), [Ce, fe] = r(
+    $,
+    j,
+    []
+  ), [be, ue] = r(
     A,
     K,
     {}
-  ), [a, C] = m(
+  ), [a, f] = r(
     O,
-    $,
+    G,
     { pageIndex: 0, pageSize: 10 }
-  ), [ue, Se] = m(q, G, {}), [ye, we] = m(
+  ), [Se, ye] = r(U, q, {}), [we, Re] = r(
     L,
-    W,
+    V,
     { left: [], right: [] }
-  ), T = j ?? !!s, xe = ze(
-    () => u.map((e) => ({
+  ), _ = F ?? !!s, Te = ke(
+    () => S.map((e) => ({
       enableSorting: !1,
       ...e
     })),
-    [u]
-  ), t = Pe({
-    data: h,
-    columns: xe,
+    [S]
+  ), l = ve({
+    data: C,
+    columns: Te,
     state: {
-      sorting: de,
-      columnFilters: he,
-      columnVisibility: fe,
+      sorting: pe,
+      columnFilters: Ce,
+      columnVisibility: be,
       pagination: a,
-      rowSelection: ue,
-      columnPinning: ye
+      rowSelection: Se,
+      columnPinning: we
     },
-    onSortingChange: pe,
-    onColumnFiltersChange: Ce,
-    onColumnVisibilityChange: be,
-    onPaginationChange: C,
-    onRowSelectionChange: Se,
-    onColumnPinningChange: we,
-    getCoreRowModel: _e(),
-    getSortedRowModel: z && !T ? Ne() : void 0,
-    getPaginationRowModel: S ? Me() : void 0,
-    enableRowSelection: I,
-    enableMultiRowSelection: V,
-    enableColumnPinning: d,
-    getRowId: le,
-    manualSorting: T,
+    onSortingChange: he,
+    onColumnFiltersChange: fe,
+    onColumnVisibilityChange: ue,
+    onPaginationChange: f,
+    onRowSelectionChange: ye,
+    onColumnPinningChange: Re,
+    getCoreRowModel: Ee(),
+    getSortedRowModel: k && !_ ? Me() : void 0,
+    getPaginationRowModel: y ? Pe() : void 0,
+    enableRowSelection: z,
+    enableMultiRowSelection: D,
+    enableColumnPinning: g,
+    getRowId: ie,
+    manualSorting: _,
     manualPagination: !!s,
     pageCount: s ? Math.ceil(s / a.pageSize) : void 0,
-    ...te
+    ...le
   });
-  Ie(k, () => t);
-  const { rows: v } = t.getRowModel(), Re = (e, n) => {
-    w && w(e.original, n);
-  }, Te = (e) => /* @__PURE__ */ o(
-    ie,
+  ze(I, () => l);
+  const { rows: H } = l.getRowModel(), xe = (e, t) => {
+    R && R(e.original, t);
+  }, _e = (e) => /* @__PURE__ */ o(
+    ae,
     {
       style: {
         width: e.getSize(),
-        ...d && f(
-          t,
+        ...g && b(
+          l,
           e.column,
-          l.fill.bg_secondary
+          n.fill.bg_secondary
         )
       },
       onClick: i ? void 0 : e.column.getToggleSortingHandler(),
-      children: e.isPlaceholder ? null : P(e.column.columnDef.header, e.getContext())
-    },
-    e.id
-  ), ve = (e, n) => /* @__PURE__ */ o(
-    R,
-    {
-      showBorders: g,
-      onClick: () => Re(e, n),
-      children: e.getVisibleCells().map((r) => /* @__PURE__ */ o(
-        x,
-        {
-          style: d ? f(
-            t,
-            r.column,
-            l.fill.bg_primary
-          ) : void 0,
-          children: P(r.column.columnDef.cell, r.getContext())
-        },
-        r.id
-      ))
+      children: e.isPlaceholder ? null : v(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), He = (e) => /* @__PURE__ */ o(
-    R,
+  ), He = (e, t) => {
+    const d = e.getIsSelected();
+    return /* @__PURE__ */ o(
+      x,
+      {
+        showBorders: c,
+        selected: d,
+        onClick: () => xe(e, t),
+        children: e.getVisibleCells().map((p) => /* @__PURE__ */ o(
+          T,
+          {
+            style: g ? b(
+              l,
+              p.column,
+              d ? Ye : n.fill.bg_primary
+            ) : void 0,
+            children: v(p.column.columnDef.cell, p.getContext())
+          },
+          p.id
+        ))
+      },
+      e.id
+    );
+  }, Ne = (e) => /* @__PURE__ */ o(
+    x,
     {
-      showBorders: g,
-      children: t.getVisibleLeafColumns().map((n, r) => /* @__PURE__ */ o(
-        x,
+      showBorders: c,
+      children: l.getVisibleLeafColumns().map((t, d) => /* @__PURE__ */ o(
+        T,
         {
-          style: d ? f(t, n, l.fill.bg_primary) : void 0,
-          children: /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(
+          style: g ? b(l, t, n.fill.bg_primary) : void 0,
+          children: /* @__PURE__ */ o(E, { children: /* @__PURE__ */ o(
             Ke,
             {
               variant: "text",
               height: 16,
-              width: N[r % N.length]
+              width: M[d % M.length]
             }
           ) })
         },
-        n.id
+        t.id
       ))
     },
     `skeleton-row-${e}`
   );
-  return !i && !v.length ? /* @__PURE__ */ o(
-    We,
+  return !i && !H.length ? /* @__PURE__ */ o(
+    Ve,
     {
       icon: /* @__PURE__ */ o(
-        Ve,
+        De,
         {
           width: 24,
           height: 24,
-          style: { color: l.icon.tertiary, marginBottom: M.sm }
+          style: { color: n.icon.tertiary, marginBottom: P.sm }
         }
       ),
       labels: Q,
-      onReset: re,
-      className: p(y, Z),
-      titleClassName: ee,
-      descriptionClassName: oe
+      onReset: se,
+      className: h(w, ee),
+      titleClassName: oe,
+      descriptionClassName: te
     }
-  ) : /* @__PURE__ */ H(Ge, { w: "full", gap: M.xl, className: p(y), children: [
-    /* @__PURE__ */ o(Ee, { data: h, showBorders: g, children: /* @__PURE__ */ H("table", { className: p(Je, U), children: [
+  ) : /* @__PURE__ */ N(qe, { w: "full", gap: P.xl, className: h(w), children: [
+    /* @__PURE__ */ o(We, { data: C, showBorders: c, children: /* @__PURE__ */ N("table", { className: h(Je, X), children: [
       /* @__PURE__ */ o(
         "thead",
         {
-          className: p(
+          className: h(
             Qe,
-            { [Ue]: i },
-            X
+            { [Xe]: i },
+            Y
           ),
           "aria-busy": i,
-          children: t.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Te) }, e.id))
+          children: l.getHeaderGroups().map((e) => /* @__PURE__ */ o(re, { showBorders: c, children: e.headers.map(_e) }, e.id))
         }
       ),
-      /* @__PURE__ */ o("tbody", { className: Y, children: i ? Array.from(
+      /* @__PURE__ */ o("tbody", { className: Z, children: i ? Array.from(
         { length: J },
-        (e, n) => He(n)
-      ) : v.map((e, n) => ve(e, n)) })
+        (e, t) => Ne(t)
+      ) : H.map((e, t) => He(e, t)) })
     ] }) }),
-    S && !i && /* @__PURE__ */ o(
-      je,
+    y && !i && /* @__PURE__ */ o(
+      Fe,
       {
         pageIndex: a.pageIndex,
         pageSize: a.pageSize,
-        totalCount: s || h.length,
+        totalCount: s || C.length,
         variant: me,
-        labels: se,
-        renderPageSizeSelectorDropdownItem: ce,
-        renderPageSizeSelectorInputItem: ge,
-        onPageChange: (e) => C({ ...a, pageIndex: e }),
-        onPageSizeChange: (e) => C({ ...a, pageSize: e, pageIndex: 0 }),
+        labels: ce,
+        renderPageSizeSelectorDropdownItem: ge,
+        renderPageSizeSelectorInputItem: de,
+        onPageChange: (e) => f({ ...a, pageIndex: e }),
+        onPageSizeChange: (e) => f({ ...a, pageSize: e, pageIndex: 0 }),
         className: ne
       }
     )
   ] });
 };
-c.displayName = "Table";
-c.HeadCellContent = Oe;
-c.BodyCellContent = _;
-c.HeadCellContentSortable = $e;
-c.createColumnHelper = ke;
+m.displayName = "Table";
+m.HeadCellContent = Oe;
+m.BodyCellContent = E;
+m.HeadCellContentSortable = Ge;
+m.createColumnHelper = Ie;
 export {
-  c as Table
+  m as Table
 };

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

@@ -128,7 +128,11 @@ export interface TableProps<TData> {
     bodyCellComponent?: ComponentType<TableBodyCellProps>;
     /** Компонент для строки заголовка */
     headRowComponent?: ComponentType<TableHeadRowProps>;
-    /** Компонент для строки тела */
+    /**
+     * Компонент для строки тела. Выбранные строки (`row.getIsSelected()`)
+     * подсвечиваются автоматически; в кастомный компонент признак выбранной
+     * строки приходит пропсом `selected`.
+     */
     bodyRowComponent?: ComponentType<TableBodyRowProps>;
     /** Callback при сбросе фильтров */
     onReset?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;

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

@@ -4,5 +4,10 @@ export interface TableBodyRowProps extends React.HTMLAttributes<HTMLTableRowElem
      * @default false
      */
     showBorders?: boolean;
+    /**
+     * Подсвечивать ли строку как выбранную
+     * @default false
+     */
+    selected?: boolean;
 }
 export declare const TableBodyRow: import('react').ForwardRefExoticComponent<TableBodyRowProps & import('react').RefAttributes<HTMLTableRowElement>>;