fui-material 2.8.3 → 2.8.4

package/dist/f-ui-kit.es.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect, Fragment as Fragment$1, isValidElement, cloneElement, createContext, useContext, useDeferredValue } from "react";
+import React, { forwardRef, useRef, useState, useEffect, createContext, isValidElement, Children, Fragment as Fragment$1, cloneElement, useContext, useMemo, useLayoutEffect, useDeferredValue, useCallback, useId } from "react";
 import ReactDOM, { createPortal } from "react-dom";
 import JSZip from "jszip";
 import initializeModule from "allorion-exporting-html-to-docx";
@@ -712,26 +712,39 @@ const FPaper = ({
     }
   );
 };
-const bordered = "_bordered_1clfu_18";
-const left$1 = "_left_1clfu_40";
-const center = "_center_1clfu_43";
-const right = "_right_1clfu_46";
+const TableControlsContext = createContext({ query: "", sort: null });
+const left$1 = "_left_blx02_68";
+const center = "_center_blx02_71";
+const right = "_right_blx02_74";
+const justify = "_justify_blx02_77";
+const more = "_more_blx02_141";
 const styles$t = {
-  "f-table-component": "_f-table-component_1clfu_1",
-  "f-table-component__table": "_f-table-component__table_1clfu_7",
-  bordered,
-  "bordered-half": "_bordered-half_1clfu_22",
-  "f-table-component__table_header": "_f-table-component__table_header_1clfu_25",
-  "is-sticky": "_is-sticky_1clfu_29",
-  "f-table-component__table_header-cell": "_f-table-component__table_header-cell_1clfu_37",
+  "f-table-component": "_f-table-component_blx02_1",
+  "f-table-component__table": "_f-table-component__table_blx02_12",
+  "f-table-component__table_header": "_f-table-component__table_header_blx02_21",
+  "is-sticky": "_is-sticky_blx02_25",
+  "f-table-component__table_header-cell": "_f-table-component__table_header-cell_blx02_36",
+  "f-table-component__table_body-cell": "_f-table-component__table_body-cell_blx02_36",
+  "f-table-component__table_body": "_f-table-component__table_body_blx02_36",
+  "f-table-component__table_row": "_f-table-component__table_row_blx02_53",
+  "f-table-component__table_row_no-hover": "_f-table-component__table_row_no-hover_blx02_53",
+  "f-table-component__table_footer": "_f-table-component__table_footer_blx02_59",
   left: left$1,
   center,
   right,
-  "f-table-component__table_body": "_f-table-component__table_body_1clfu_65",
-  "f-table-component__table_row": "_f-table-component__table_row_1clfu_68",
-  "f-table-component__table_row_no-hover": "_f-table-component__table_row_no-hover_1clfu_68",
-  "f-table-component__table_body-cell": "_f-table-component__table_body-cell_1clfu_81",
-  "f-table-component__table_footer": "_f-table-component__table_footer_1clfu_97"
+  justify,
+  "cell-text": "_cell-text_blx02_81",
+  "cell-preview": "_cell-preview_blx02_105",
+  "cell-reveal": "_cell-reveal_blx02_116",
+  more,
+  "row-menu": "_row-menu_blx02_170",
+  "table-tools": "_table-tools_blx02_257",
+  "table-search": "_table-search_blx02_263",
+  "table-sort": "_table-sort_blx02_292",
+  "table-empty": "_table-empty_blx02_319",
+  "cell-tooltip-anchor": "_cell-tooltip-anchor_blx02_325",
+  "cell-tooltip": "_cell-tooltip_blx02_325",
+  "cell-tooltip-in": "_cell-tooltip-in_blx02_1"
 };
 const FTableHead = ({
   st,
@@ -752,99 +765,208 @@ const FTableHead = ({
     }
   );
 };
+const TruncateContext = createContext(void 0);
+function tableChildren(children, prefix = "") {
+  return Children.toArray(children).flatMap((child) => {
+    if (!isValidElement(child)) return [child];
+    const key = `${prefix}${child.key}`;
+    return child.type === Fragment$1 ? tableChildren(child.props.children, `${key}/`) : [cloneElement(child, { key })];
+  });
+}
+function cellText(children) {
+  return Children.toArray(children).map((child) => {
+    if (typeof child === "string" || typeof child === "number") return String(child);
+    if (!isValidElement(child) || child.props.hidden || child.props["aria-hidden"] === true || child.props["aria-hidden"] === "true") return "";
+    if (typeof child.type !== "string" && child.type !== Fragment$1) return "";
+    if (["button", "input", "select", "textarea", "svg"].includes(String(child.type))) return "";
+    return cellText(child.props.children);
+  }).join("");
+}
+const normalize = (text) => text.normalize("NFKC").toLocaleLowerCase("ru").replace(/\s+/g, " ").trim();
+const collator = new Intl.Collator("ru", { numeric: true, sensitivity: "base" });
+function indexTableRows(children) {
+  const rows = tableChildren(children);
+  const sections = [{ heading: [], groups: [] }];
+  let section = sections[0];
+  let group;
+  let spanEnd = 0;
+  let columnCount = 1;
+  let hasRowSpans = false;
+  rows.forEach((row, index) => {
+    const cells = isValidElement(row) ? tableChildren(row.props.children).filter(isValidElement) : [];
+    columnCount = Math.max(columnCount, cells.reduce((sum, cell) => sum + Math.max(1, cell.props.colSpan ?? cell.props.col ?? 1), 0));
+    const heading = index >= spanEnd && cells.length > 0 && cells.every((cell) => !cell.props.sortKey && (cell.props.colSpan ?? cell.props.col ?? 1) > 1);
+    if (heading) {
+      section = { heading: [row], groups: [] };
+      sections.push(section);
+      return;
+    }
+    if (!group || index >= spanEnd) {
+      group = { rows: [], text: "", values: /* @__PURE__ */ new Map() };
+      section.groups.push(group);
+    }
+    group.rows.push(row);
+    cells.forEach((cell) => {
+      const props = cell.props;
+      const span = props.rowSpan ?? props.row ?? 1;
+      if (span === 0 || span > 1) {
+        hasRowSpans = true;
+        spanEnd = Math.max(spanEnd, span === 0 ? rows.length : index + span);
+      }
+      const text = props.searchValue ?? cellText(props.children);
+      group.text += ` ${normalize(text)}`;
+      if (props.sortKey && !group.values.has(props.sortKey)) {
+        group.values.set(props.sortKey, props.sortValue ?? text);
+      }
+    });
+  });
+  return { rows, sections, columnCount, hasRowSpans };
+}
+function selectTableRows(index, query, sort) {
+  const needle = normalize(query);
+  if (!needle && !sort) return index.rows;
+  return index.sections.flatMap((section) => {
+    const groups = section.groups.filter((group) => !needle || group.text.includes(needle));
+    if (sort) groups.sort((a, b) => {
+      const left2 = a.values.get(sort.key);
+      const right2 = b.values.get(sort.key);
+      const empty = (value) => value === void 0 || String(value).trim() === "" || typeof value === "number" && !Number.isFinite(value);
+      if (empty(left2) || empty(right2)) return Number(empty(left2)) - Number(empty(right2));
+      const comparison = typeof left2 === "number" && typeof right2 === "number" ? left2 - right2 : collator.compare(String(left2), String(right2));
+      return sort.direction === "ascending" ? comparison : -comparison;
+    });
+    return groups.length ? [...section.heading, ...groups.flatMap((group) => group.rows)] : needle ? [] : section.heading;
+  });
+}
+function rowAt(offsets, position) {
+  let low = 0;
+  let high = offsets.length - 1;
+  while (low < high) {
+    const middle = Math.floor((low + high) / 2);
+    if (offsets[middle + 1] <= position) low = middle + 1;
+    else high = middle;
+  }
+  return Math.min(low, Math.max(0, offsets.length - 2));
+}
+function virtualRowRange(offsets, top, viewportHeight, minimumRows) {
+  const count = Math.max(0, offsets.length - 1);
+  if (!count) return { start: 0, end: 0 };
+  const first = rowAt(offsets, Math.max(0, top));
+  const last = rowAt(offsets, Math.max(0, top) + Math.max(0, viewportHeight));
+  const start = Math.max(0, Math.min(first - 3, count - Math.floor(minimumRows)));
+  const end = Math.min(count, Math.max(last + 4, start + Math.floor(minimumRows)));
+  return { start, end };
+}
 const FTableBody = ({
   st,
   children,
   textAlignment = "left",
-  // По умолчанию выравнивание слева
   tableWrapperRef,
-  visibleRowCount = void 0,
+  visibleRowCount,
+  truncateAt,
   ...props
 }) => {
   const tableBodyRef = useRef(null);
-  const flatChildren = useMemo(() => React.Children.toArray(children), [children]);
-  const totalRows = flatChildren.length;
-  const [startIdx, setStartIdx] = useState(0);
-  const [rowHeights, setRowHeights] = useState(Array(flatChildren.length).fill(0));
-  const virtualizationEnabled = typeof visibleRowCount === "number" && visibleRowCount > 0;
+  const { query, sort } = useContext(TableControlsContext);
+  const index = useMemo(() => indexTableRows(children), [children]);
+  const rows = useMemo(() => selectTableRows(index, query, sort), [index, query, sort]);
+  const [viewport, setViewport] = useState({ top: 0, height: 0 });
+  const [heights, setHeights] = useState(() => /* @__PURE__ */ new Map());
+  const virtual = Boolean(tableWrapperRef) && visibleRowCount !== void 0 && Number.isFinite(visibleRowCount) && visibleRowCount >= 1 && !index.hasRowSpans;
+  const keyOf = (row, index2) => React.isValidElement(row) ? String(row.key ?? index2) : String(index2);
+  const offsets = useMemo(() => {
+    const result = [0];
+    if (virtual) rows.forEach((row, index2) => result.push(result[index2] + (heights.get(keyOf(row, index2)) ?? 32)));
+    return result;
+  }, [rows, heights, virtual]);
+  const { start, end } = virtual ? virtualRowRange(offsets, viewport.top, viewport.height, visibleRowCount) : { start: 0, end: rows.length };
+  const visibleRows = useMemo(() => rows.slice(start, end), [rows, start, end]);
+  useLayoutEffect(() => {
+    setViewport((previous) => ({ ...previous, top: 0 }));
+    if (tableWrapperRef == null ? void 0 : tableWrapperRef.current) tableWrapperRef.current.scrollTop = 0;
+  }, [query, sort, tableWrapperRef]);
   useEffect(() => {
-    if (rowHeights.length < flatChildren.length) {
-      setRowHeights((prev) => [...prev, ...Array(flatChildren.length - prev.length).fill(0)]);
-    }
-  }, [flatChildren.length, rowHeights.length]);
-  const updateStartIdx = useCallback(() => {
-    if (!virtualizationEnabled) return;
-    if (!(tableWrapperRef == null ? void 0 : tableWrapperRef.current) || !tableBodyRef.current) return;
-    const wrapper = tableWrapperRef.current;
-    const scrollTop = wrapper.scrollTop;
-    let acc = 0;
-    let idx = 0;
-    for (let i = 0; i < rowHeights.length; i++) {
-      if (acc + rowHeights[i] > scrollTop) {
-        idx = i;
-        break;
-      }
-      acc += rowHeights[i];
-    }
-    setStartIdx(idx);
-  }, [rowHeights, tableWrapperRef, virtualizationEnabled]);
-  const handleScroll = useCallback(() => {
-    if (!virtualizationEnabled) return;
-    requestAnimationFrame(updateStartIdx);
-  }, [updateStartIdx, virtualizationEnabled]);
+    const keys = new Set(index.rows.map(keyOf));
+    setHeights((previous) => {
+      const next = new Map([...previous].filter(([key]) => keys.has(key)));
+      return next.size === previous.size ? previous : next;
+    });
+  }, [index]);
   useEffect(() => {
-    var _a;
-    if (!virtualizationEnabled) return;
-    const handleResize = () => requestAnimationFrame(updateStartIdx);
-    window.addEventListener("resize", handleResize);
-    (_a = tableWrapperRef == null ? void 0 : tableWrapperRef.current) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
-    handleResize();
-    return () => {
-      var _a2;
-      window.removeEventListener("resize", handleResize);
-      (_a2 = tableWrapperRef == null ? void 0 : tableWrapperRef.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
+    const wrapper = tableWrapperRef == null ? void 0 : tableWrapperRef.current;
+    if (!virtual || !wrapper) return;
+    let frame = 0;
+    let width = wrapper.clientWidth;
+    const measureScroll = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const body = tableBodyRef.current;
+        if (body) {
+          const top = Math.max(0, wrapper.getBoundingClientRect().top + wrapper.clientTop - body.getBoundingClientRect().top);
+          const height = wrapper.clientHeight;
+          setViewport((previous) => previous.top === top && previous.height === height ? previous : { top, height });
+        }
+      });
     };
-  }, [handleScroll, updateStartIdx, virtualizationEnabled]);
-  useLayoutEffect(() => {
-    if (!tableBodyRef.current) return;
-    const rows = tableBodyRef.current.querySelectorAll("tr[data-row-index]");
-    const newHeights = [...rowHeights];
-    let changed = false;
-    rows.forEach((row, idx) => {
-      const realIdx = virtualizationEnabled ? startIdx + idx : idx;
-      const h = row.getBoundingClientRect().height;
-      if (h > 0 && newHeights[realIdx] !== h) {
-        newHeights[realIdx] = h;
-        changed = true;
+    wrapper.addEventListener("scroll", measureScroll);
+    const resize = new ResizeObserver(() => {
+      var _a;
+      if (wrapper.clientWidth !== width) {
+        width = wrapper.clientWidth;
+        const renderedRows = ((_a = tableBodyRef.current) == null ? void 0 : _a.querySelectorAll(":scope > tr[data-table-row-key]")) ?? [];
+        setHeights(new Map(Array.from(renderedRows, (row) => [
+          row.getAttribute("data-table-row-key"),
+          row.getBoundingClientRect().height
+        ])));
       }
+      measureScroll();
     });
-    if (changed) setRowHeights(newHeights);
-  }, [flatChildren, rowHeights, startIdx, virtualizationEnabled]);
-  let visibleItems;
-  let topOffset = 0;
-  let bottomOffset = 0;
-  if (virtualizationEnabled) {
-    let getEstimatedHeight = function(index, heights) {
-      for (let i = index - 1; i >= 0; i--) {
-        if (heights[i] > 0) return heights[i];
-      }
-      for (let i = index + 1; i < heights.length; i++) {
-        if (heights[i] > 0) return heights[i];
-      }
-      return 0;
+    resize.observe(wrapper);
+    measureScroll();
+    return () => {
+      cancelAnimationFrame(frame);
+      wrapper.removeEventListener("scroll", measureScroll);
+      resize.disconnect();
     };
-    const endIdx = Math.min(startIdx + visibleRowCount, totalRows);
-    visibleItems = flatChildren.slice(startIdx, endIdx);
-    topOffset = rowHeights.slice(0, startIdx).reduce((a, b, i) => a + (b > 0 ? b : getEstimatedHeight(i, rowHeights)), 0);
-    bottomOffset = rowHeights.slice(endIdx).reduce((a, b, i) => a + (b > 0 ? b : getEstimatedHeight(endIdx + i, rowHeights)), 0);
-  } else {
-    visibleItems = flatChildren;
-  }
-  return /* @__PURE__ */ jsxs("tbody", { ref: tableBodyRef, style: st, ...props, className: `${styles$t["f-table-component__table_body"]} ${props.className || ""}  ${styles$t[textAlignment]}`, children: [
-    virtualizationEnabled && rowHeights.some((h) => h > 0) && /* @__PURE__ */ jsx("tr", { style: { height: topOffset } }),
-    visibleItems.map((child, idx) => React.isValidElement(child) ? React.cloneElement(child, { "data-row-index": virtualizationEnabled ? startIdx + idx : idx, key: virtualizationEnabled ? startIdx + idx : idx }) : child),
-    virtualizationEnabled && rowHeights.some((h) => h > 0) && /* @__PURE__ */ jsx("tr", { style: { height: bottomOffset } })
-  ] });
+  }, [tableWrapperRef, virtual, rows]);
+  useLayoutEffect(() => {
+    if (!virtual || !tableBodyRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      setHeights((previous) => {
+        const next = new Map(previous);
+        let changed = false;
+        entries.forEach(({ target }) => {
+          const key = target.getAttribute("data-table-row-key");
+          const height = target.getBoundingClientRect().height;
+          if (height > 0 && previous.get(key) !== height) {
+            next.set(key, height);
+            changed = true;
+          }
+        });
+        return changed ? next : previous;
+      });
+    });
+    tableBodyRef.current.querySelectorAll(":scope > tr[data-table-row-key]").forEach((row) => observer.observe(row));
+    return () => observer.disconnect();
+  }, [virtual, visibleRows]);
+  return /* @__PURE__ */ jsx(TruncateContext.Provider, { value: truncateAt, children: /* @__PURE__ */ jsxs(
+    "tbody",
+    {
+      ref: tableBodyRef,
+      style: st,
+      ...props,
+      className: `${styles$t["f-table-component__table_body"]} ${props.className || ""} ${styles$t[textAlignment]}`,
+      children: [
+        virtual && start > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, style: { height: offsets[start], padding: 0, border: 0 } }) }),
+        visibleRows.map((child, index2) => React.isValidElement(child) ? React.cloneElement(child, {
+          "data-row-index": start + index2,
+          "data-table-row-key": keyOf(child, start + index2)
+        }) : child),
+        query.trim() && rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, className: styles$t["table-empty"], children: /* @__PURE__ */ jsx("span", { role: "status", children: "Ничего не найдено" }) }) }),
+        virtual && end < rows.length && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: index.columnCount, style: { height: offsets[rows.length] - offsets[end], padding: 0, border: 0 } }) })
+      ]
+    }
+  ) });
 };
 const FTableBody$1 = React.memo(FTableBody);
 const FTable = ({
@@ -858,10 +980,18 @@ const FTable = ({
   // По умолчанию заголовок не "липкий"
   layout = "auto",
   // Добавляем новый пропс с дефолтным значением 'auto'
+  searchable = false,
   ...props
 }) => {
   const tableWrapperRef = useRef(null);
   const [isStickyState, setIsStickyState] = useState(false);
+  const [search, setSearch] = useState("");
+  const query = useDeferredValue(searchable ? search : "");
+  const [sort, setSort] = useState(null);
+  const toggleSort = useCallback((key) => {
+    setSort((current) => (current == null ? void 0 : current.key) !== key ? { key, direction: "ascending" } : current.direction === "ascending" ? { key, direction: "descending" } : null);
+  }, []);
+  const controls = useMemo(() => ({ query, sort, toggleSort }), [query, sort, toggleSort]);
   useEffect(() => {
     const handleScroll = () => {
       if (tableWrapperRef.current && isSticky) {
@@ -879,45 +1009,66 @@ const FTable = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: tableWrapperRef,
-      className: styles$t["f-table-component"],
-      style: { overflowX, overflowY },
-      children: /* @__PURE__ */ jsx(
-        "table",
+  return /* @__PURE__ */ jsxs(TableControlsContext.Provider, { value: controls, children: [
+    searchable && /* @__PURE__ */ jsx("div", { className: styles$t["table-tools"], children: /* @__PURE__ */ jsxs("label", { className: styles$t["table-search"], children: [
+      /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
         {
-          style: { ...st, tableLayout: layout },
-          ...props,
-          className: `table ${styles$t["f-table-component__table"]} ${styles$t["bordered"]} ${styles$t["bordered-half"]} ${props.className || ""}`,
-          children: React.Children.map(children, (child) => {
-            if (React.isValidElement(child) && child.type === FTableHead) {
-              const headProps = child.props;
-              return React.cloneElement(
-                child,
-                {
-                  ...headProps,
-                  isSticky: isStickyState
-                }
-              );
-            }
-            if (React.isValidElement(child) && child.type === FTableBody$1) {
-              const headProps = child.props;
-              return React.cloneElement(
-                child,
-                {
-                  ...headProps,
-                  tableWrapperRef
-                }
-              );
-            }
-            return child;
-          })
+          type: "search",
+          "aria-label": "Поиск по таблице",
+          placeholder: "Поиск",
+          value: search,
+          onChange: (event) => setSearch(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Escape") setSearch("");
+          }
         }
       )
-    }
-  );
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tableWrapperRef,
+        className: styles$t["f-table-component"],
+        style: { overflowX, overflowY },
+        children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            style: { ...st, tableLayout: layout },
+            ...props,
+            className: `table ${styles$t["f-table-component__table"]} ${props.className || ""}`,
+            children: React.Children.map(children, (child) => {
+              if (React.isValidElement(child) && child.type === FTableHead) {
+                const headProps = child.props;
+                return React.cloneElement(
+                  child,
+                  {
+                    ...headProps,
+                    isSticky: isStickyState
+                  }
+                );
+              }
+              if (React.isValidElement(child) && child.type === FTableBody$1) {
+                const headProps = child.props;
+                return React.cloneElement(
+                  child,
+                  {
+                    ...headProps,
+                    tableWrapperRef
+                  }
+                );
+              }
+              return child;
+            })
+          }
+        )
+      }
+    )
+  ] });
 };
 const FTableRow = ({
   st,
@@ -956,8 +1107,12 @@ const FTableHeaderCell = ({
   // По умолчанию выравнивания нет
   width = "auto",
   // По умолчанию ширина автоматическая
+  sortKey,
   ...props
 }) => {
+  const { sort, toggleSort } = useContext(TableControlsContext);
+  const sortable = Boolean(sortKey && toggleSort);
+  const direction = (sort == null ? void 0 : sort.key) === sortKey ? sort == null ? void 0 : sort.direction : void 0;
   const style = {
     textAlign: textAlignment,
     width,
@@ -969,12 +1124,101 @@ const FTableHeaderCell = ({
       rowSpan: row && row > 1 ? row : void 0,
       colSpan: col && col > 1 ? col : void 0,
       ...props,
+      "aria-sort": sortable ? direction ?? "none" : props["aria-sort"],
       className: `${styles$t["f-table-component__table_header-cell"]} ${props.className || ""}`,
       style,
-      children
+      children: sortable ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles$t["table-sort"],
+          onClick: () => toggleSort == null ? void 0 : toggleSort(sortKey),
+          title: direction === "ascending" ? "По убыванию" : direction === "descending" ? "Исходный порядок" : "По возрастанию",
+          children: [
+            children,
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: direction === "ascending" ? "↑" : direction === "descending" ? "↓" : "↕" })
+          ]
+        }
+      ) : children
     }
   );
 };
+function FTableTextTooltip({ text, enabled, children }) {
+  const id = useId();
+  const anchor = useRef(null);
+  const panel2 = useRef(null);
+  const timer = useRef();
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const visible2 = enabled && open;
+  const show = () => {
+    clearTimeout(timer.current);
+    setOpen(true);
+  };
+  const hide2 = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), 150);
+  };
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useEffect(() => {
+    if (!enabled) setOpen(false);
+  }, [enabled]);
+  useLayoutEffect(() => {
+    if (!visible2) return;
+    const update = () => {
+      if (!anchor.current || !panel2.current) return;
+      const rect = anchor.current.getBoundingClientRect();
+      const tip = panel2.current.getBoundingClientRect();
+      const top = rect.bottom + 8 + tip.height <= window.innerHeight - 10 ? rect.bottom + 8 : rect.top - tip.height - 8;
+      setPosition({
+        top: Math.max(10, Math.min(top, window.innerHeight - tip.height - 10)),
+        left: Math.max(10, Math.min(rect.left, window.innerWidth - tip.width - 10))
+      });
+    };
+    const escape = (event) => {
+      if (event.key === "Escape") {
+        clearTimeout(timer.current);
+        setOpen(false);
+      }
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    document.addEventListener("keydown", escape);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+      document.removeEventListener("keydown", escape);
+    };
+  }, [visible2, text]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: anchor,
+      className: styles$t["cell-tooltip-anchor"],
+      onMouseEnter: show,
+      onMouseLeave: hide2,
+      onFocus: show,
+      onBlur: hide2,
+      children: [
+        cloneElement(children, { "aria-describedby": visible2 ? id : void 0 }),
+        visible2 && createPortal(/* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: panel2,
+            id,
+            role: "tooltip",
+            className: styles$t["cell-tooltip"],
+            style: position,
+            onMouseEnter: show,
+            onMouseLeave: hide2,
+            children: text
+          }
+        ), document.body)
+      ]
+    }
+  );
+}
 const FTableDataCell = ({
   st,
   row,
@@ -984,8 +1228,20 @@ const FTableDataCell = ({
   // По умолчанию выравнивания нет
   height = "auto",
   // По умолчанию высота автоматическая
+  truncate,
+  sortKey: _sortKey,
+  sortValue: _sortValue,
+  searchValue: _searchValue,
   ...props
 }) => {
+  const truncateAt = useContext(TruncateContext);
+  const [expanded, setExpanded] = useState(false);
+  const textId = useId();
+  const limit = truncateAt !== void 0 && Number.isFinite(truncateAt) && truncateAt >= 1 ? Math.floor(truncateAt) : void 0;
+  const text = typeof children === "string" || typeof children === "number" ? String(children) : null;
+  const characters = text === null ? [] : Array.from(text);
+  const threshold = limit ?? 80;
+  const collapsible = truncate !== false && (truncate === true || limit !== void 0) && characters.length > threshold;
   const style = {
     textAlign: textAlignment,
     height,
@@ -999,7 +1255,24 @@ const FTableDataCell = ({
       ...props,
       className: `${styles$t["f-table-component__table_body-cell"]} ${props.className || ""}`,
       style,
-      children
+      children: collapsible ? /* @__PURE__ */ jsx(FTableTextTooltip, { text, enabled: !expanded, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles$t["cell-text"],
+          "aria-expanded": expanded,
+          "aria-controls": textId,
+          "data-expanded": expanded,
+          onClick: () => setExpanded((value) => !value),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: styles$t["cell-preview"], "aria-hidden": "true", children: [
+              characters.slice(0, threshold).join(""),
+              "…"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: styles$t["cell-reveal"], children: /* @__PURE__ */ jsx("span", { id: textId, children: text }) })
+          ]
+        }
+      ) }) : children
     }
   );
 };
@@ -4032,6 +4305,87 @@ const FSegmentedControl = ({
   ] }) });
 };
 FSegmentedControl.displayName = "FSegmentedControl";
+function FTableActions({ children, className, onClick, ...props }) {
+  const id = useId();
+  const menu = useRef(null);
+  const trigger = useRef(null);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const panel2 = menu.current;
+    const toggle = () => {
+      var _a, _b;
+      const visible2 = panel2.matches(":popover-open");
+      setOpen(visible2);
+      if (visible2) (_a = panel2.querySelector('button:not(:disabled), a[href], input, [tabindex="0"]')) == null ? void 0 : _a.focus();
+      else if (panel2.contains(document.activeElement)) (_b = trigger.current) == null ? void 0 : _b.focus();
+    };
+    panel2.addEventListener("toggle", toggle);
+    return () => panel2.removeEventListener("toggle", toggle);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: trigger,
+        type: "button",
+        "aria-label": "Действия",
+        ...props,
+        className: `${styles$t.more} ${className || ""}`,
+        "aria-expanded": open,
+        "aria-controls": id,
+        onClick: (event) => {
+          event.stopPropagation();
+          onClick == null ? void 0 : onClick(event);
+          if (event.defaultPrevented || !menu.current) return;
+          const rect = event.currentTarget.getBoundingClientRect();
+          const panel2 = menu.current;
+          panel2.style.maxHeight = `${Math.max(0, (rect.bottom > window.innerHeight / 2 ? rect.top : window.innerHeight - rect.bottom) - 12)}px`;
+          panel2.style.left = `${Math.max(8, Math.min(rect.right - 178, window.innerWidth - 186))}px`;
+          panel2.style.top = `${Math.max(8, rect.bottom + 4)}px`;
+          panel2.style.bottom = "auto";
+          if (rect.bottom > window.innerHeight / 2) {
+            panel2.style.top = "auto";
+            panel2.style.bottom = `${Math.max(8, window.innerHeight - rect.top + 4)}px`;
+          }
+          if (open) panel2.hidePopover();
+          else panel2.showPopover();
+        },
+        children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.6" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.6" }),
+          /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.6" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menu,
+        id,
+        ...{ popover: "auto" },
+        className: styles$t["row-menu"],
+        onKeyDown: (event) => {
+          var _a, _b;
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            (_a = trigger.current) == null ? void 0 : _a.focus();
+            (_b = menu.current) == null ? void 0 : _b.hidePopover();
+          }
+        },
+        onClick: (event) => {
+          var _a, _b;
+          event.stopPropagation();
+          if (!event.defaultPrevented && event.target.closest("button:not(:disabled), a[href]")) {
+            (_a = trigger.current) == null ? void 0 : _a.focus();
+            (_b = menu.current) == null ? void 0 : _b.hidePopover();
+          }
+        },
+        children
+      }
+    )
+  ] });
+}
 const FPlusIcon = React.forwardRef(({
   color = "primary",
   size = 30,
@@ -8954,6 +9308,7 @@ export {
   FStack,
   FTab,
   FTable,
+  FTableActions,
   FTableBody$1 as FTableBody,
   FTableDataCell,
   FTableFooter,