@dss-kit/ui-kit 1.0.1 → 1.0.2

package/README.md

@@ -1,29 +1,29 @@
-# Storybook
-
-Storybook для библиотеки React-компонентов **UI Kit** (`@dss-kit/ui-kit`) с дизайн-системой.
-Репозиторий хранит исходники компонентов и их Storybook, собирает контейнерный образ и
-разворачивает Storybook в Kubernetes.
-
-## Включает:
-
-- React компоненты и дизайн-систему (CSS переменные и токены, SCSS утилиты, TypeScript типы, SVG иконки)
-- Провайдеры тем (ThemeProviderScoped)
-- Storybook как витрину компонентов
-- CI/CD для сборки образа и деплоя в Kubernetes
-
-## Деплой
-
-- **Stable** — на merge в `main` создаётся релизный тег, собирается образ
-  `harbor.infra.dssnet.tech/dssnet/storybook` и разворачивается через ArgoCD.
-- **Trial-превью** — кнопка в CI (`deploy:trial`) на любой ветке кроме `main` публикует Storybook
-  этой ветки на `storybook-trials-<id>.staging.dssnet.tech` (живёт 7 дней, продлевается при
-  повторном деплое).
-
-## Документация
-
-Ссылки на более подробную документацию по разделам
-
-- **[Сборка](./docs/build/index.md)** — команды сборки, конфигурации Vite и т.д.
-- **[Использование](./docs/usage/index.md)** — подключение стилей, примеры компонентов
-- **[Стили](./docs/styles/index.md)** — подключение шрифтов, CSS переменных, базовые стили и миксины
-- **[Утилиты](./docs/utils/index.md)** — функции хелперы
+# Storybook
+
+Storybook для библиотеки React-компонентов **UI Kit** (`@dss-kit/ui-kit`) с дизайн-системой.
+Репозиторий хранит исходники компонентов и их Storybook, собирает контейнерный образ и
+разворачивает Storybook в Kubernetes.
+
+## Включает:
+
+- React компоненты и дизайн-систему (CSS переменные и токены, SCSS утилиты, TypeScript типы, SVG иконки)
+- Провайдеры тем (ThemeProviderScoped)
+- Storybook как витрину компонентов
+- CI/CD для сборки образа и деплоя в Kubernetes
+
+## Деплой
+
+- **Stable** — на merge в `main` создаётся релизный тег, собирается образ
+  `harbor.infra.dssnet.tech/dssnet/storybook` и разворачивается через ArgoCD.
+- **Trial-превью** — кнопка в CI (`deploy:trial`) на любой ветке кроме `main` публикует Storybook
+  этой ветки на `storybook-trials-<id>.staging.dssnet.tech` (живёт 7 дней, продлевается при
+  повторном деплое).
+
+## Документация
+
+Ссылки на более подробную документацию по разделам
+
+- **[Сборка](./docs/build/index.md)** — команды сборки, конфигурации Vite и т.д.
+- **[Использование](./docs/usage/index.md)** — подключение стилей, примеры компонентов
+- **[Стили](./docs/styles/index.md)** — подключение шрифтов, CSS переменных, базовые стили и миксины
+- **[Утилиты](./docs/utils/index.md)** — функции хелперы

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

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

@@ -1,17 +1,31 @@
-import { jsx as n } from "react/jsx-runtime";
-import { css as m, cx as c } from "@emotion/css";
-import { forwardRef as i } from "react";
-import { theme as d } from "../../../../utils/theme/index.js";
-const { color: o } = d, p = i(
-  ({ children: r, className: e, showBorders: t = !1, ...a }, l) => {
-    const s = m({
-      borderBottom: t ? `1px solid ${o.border.neutral_alpha_low}` : "none",
+import { jsx as d } from "react/jsx-runtime";
+import { css as e, cx as m } from "@emotion/css";
+import { forwardRef as f } from "react";
+import { theme as b } from "../../../../utils/theme/index.js";
+const { color: o } = b, p = f(
+  ({ children: t, className: l, showBorders: a = !1, selected: r = !1, ...n }, s) => {
+    const c = e({
+      borderBottom: a ? `1px solid ${o.border.neutral_alpha_low}` : "none",
       transition: "background-color 0.15s ease-in-out",
       "&:hover": {
         backgroundColor: o.fill.neutral_primary_hover
       }
+    }), i = e({
+      backgroundColor: o.fill.accent_tint_low,
+      "&:hover": {
+        backgroundColor: o.fill.accent_tint
+      }
     });
-    return /* @__PURE__ */ n("tr", { ref: l, className: c(s, e), ...a, children: r });
+    return /* @__PURE__ */ d(
+      "tr",
+      {
+        ref: s,
+        "data-selected": r || void 0,
+        className: m(c, { [i]: r }, l),
+        ...n,
+        children: t
+      }
+    );
   }
 );
 p.displayName = "TableBodyRow";

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

@@ -1,30 +1,30 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { Button as l } from "../../../controls/Button/Button.js";
-import { Box as s } from "../../Box/Box.js";
-import { theme as p } from "../../../../utils/theme/index.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cx as s, css as l } from "@emotion/css";
+import { Button as p } from "../../../controls/Button/Button.js";
+import { Box as h } from "../../Box/Box.js";
+import { theme as f } from "../../../../utils/theme/index.js";
 import { Text as r } from "../../Text/Text.js";
-const { spacing: e, cornerRadius: h } = p, f = ({
+const { spacing: o, cornerRadius: x } = f, u = ({
   icon: i,
   labels: t,
-  onReset: n,
-  className: c,
+  onReset: c,
+  className: n,
   titleClassName: m,
   descriptionClassName: a
 }) => /* @__PURE__ */ d(
-  s,
+  h,
   {
     w: "full",
-    borderRadius: h.md,
-    py: e["5xl"],
-    px: e["10xl"],
+    borderRadius: x.md,
+    py: o["5xl"],
     alignItems: "center",
-    className: c,
+    className: n,
     children: [
       i,
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ e(
         r,
         {
-          mb: e.xs,
+          mb: o.xs,
           variant: "title-3",
           fontWeight: "semibold",
           className: m,
@@ -32,23 +32,23 @@ const { spacing: e, cornerRadius: h } = p, f = ({
           children: t.title
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ e(
         r,
         {
-          mb: e.md,
+          mb: o.md,
           colorName: "tertiary",
           variant: "body-1",
           fontWeight: "medium",
-          className: a,
+          className: s(l({ maxWidth: 400 }), a),
           center: !0,
           children: t.description
         }
       ),
-      typeof t.action == "string" ? /* @__PURE__ */ o(
-        l,
+      typeof t.action == "string" ? /* @__PURE__ */ e(
+        p,
         {
           width: "auto",
-          onClick: n,
+          onClick: c,
           intensity: "secondary",
           color: "accent",
           children: t.action
@@ -57,7 +57,7 @@ const { spacing: e, cornerRadius: h } = p, f = ({
     ]
   }
 );
-f.displayName = "TablePlaceholder";
+u.displayName = "TablePlaceholder";
 export {
-  f as TablePlaceholder
+  u as TablePlaceholder
 };