@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.263

package/components/elements/addons/lists/TuiList.js

@@ -0,0 +1,8 @@
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "../../../../commons/components/display/AppListEmpty.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "./TuiListBase.js";
+import { T } from "../../../../TuiList-D7-CH2oS.js";
+export {
+  T as default
+};

package/components/elements/addons/lists/TuiListBase.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { TuiListItem, TuiListItemOnSelect } from '.';
+export type TuiListItemsRenderer<T> = (items: TuiListItem<T>[], onSelect: TuiListItemOnSelect<T>) => ReactNode;
+type TuiListBaseProps<T> = {
+    keyboard?: boolean;
+    onSelect: TuiListItemOnSelect<T>;
+    children: TuiListItemsRenderer<T>;
+};
+declare const _default: import('react').MemoExoticComponent<(<T>({ keyboard, onSelect, children }: TuiListBaseProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

package/components/elements/addons/lists/TuiListBase.js

@@ -0,0 +1,82 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { styled, emphasize } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import "../../../../commons/components/app/AppContexts.js";
+import { memo, useRef, useContext, useCallback, useEffect, useLayoutEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppBar } from "../../../../commons/components/app/hooks/useAppBar.js";
+import { useAppBarHeight } from "../../../../commons/components/app/hooks/useAppBarHeight.js";
+import "../../../../i18n.js";
+import { useAppLayout } from "../../../../commons/components/app/hooks/useAppLayout.js";
+import "../../../../commons/components/app/hooks/useAppSitemap.js";
+import useTuiListKeyboard from "./hooks/useTuiListKeyboard.js";
+import { TuiListItemsContext, TuiListMethodContext } from "./TuiListProvider.js";
+const TuiListBaseRoot = styled("div")(({ theme }) => ({
+  outline: "none",
+  backgroundColor: theme.palette.background.default,
+  ".elementFocus": {
+    backgroundColor: emphasize(theme.palette.background.default, 0.02),
+    "& .actions": {
+      display: "flex",
+      backgroundColor: emphasize(theme.palette.background.default, 0.02)
+    }
+  },
+  ".elementHover": {
+    "&:hover": {
+      cursor: "pointer",
+      backgroundColor: emphasize(theme.palette.background.default, 0.03)
+    },
+    "&:hover .actions": {
+      display: "flex",
+      backgroundColor: emphasize(theme.palette.background.default, 0.03)
+    }
+  },
+  ".elementSelected": {
+    backgroundColor: emphasize(theme.palette.background.default, 0.04),
+    "& .actions": {
+      display: "flex",
+      backgroundColor: emphasize(theme.palette.background.default, 0.04)
+    }
+  }
+}));
+const TuiListBase = ({ keyboard = false, onSelect, children }) => {
+  const listEl = useRef();
+  const appbar = useAppBar();
+  const appbarHeight = useAppBarHeight();
+  const layout = useAppLayout();
+  const { items } = useContext(TuiListItemsContext);
+  const { select } = useContext(TuiListMethodContext);
+  const onItemSelect = useCallback(
+    (selection, index) => {
+      const newItem = select(selection, index);
+      if (onSelect) {
+        onSelect(newItem, index);
+      }
+    },
+    [select, onSelect]
+  );
+  const { register } = useTuiListKeyboard(onItemSelect);
+  useEffect(() => {
+    if (keyboard) {
+      return register(listEl.current);
+    }
+  }, [keyboard, register]);
+  useLayoutEffect(() => {
+    if (keyboard) {
+      listEl.current.focus({ preventScroll: true });
+    }
+  }, [keyboard]);
+  return /* @__PURE__ */ jsx(
+    TuiListBaseRoot,
+    {
+      ref: listEl,
+      tabIndex: -1,
+      "data-tuiappbar-height": appbarHeight,
+      "data-tuilayout": layout.current,
+      "data-tuiappbar-autohide": appbar.autoHide,
+      children: children(items, onItemSelect)
+    }
+  );
+};
+const TuiListBase$1 = memo(TuiListBase);
+export {
+  TuiListBase$1 as default
+};

package/components/elements/addons/lists/TuiListElement.d.ts

@@ -0,0 +1,9 @@
+import { TuiListItem, TuiListItemOnSelect, TuiListItemRenderer } from '.';
+type TuiListElementProps<T> = {
+    position: number;
+    item: TuiListItem<T>;
+    onSelect?: TuiListItemOnSelect<T>;
+    children: TuiListItemRenderer<T>;
+};
+declare const _default: import('react').MemoExoticComponent<(<T>({ position, item, onSelect: onClick, children }: TuiListElementProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

package/components/elements/addons/lists/TuiListElement.js

@@ -0,0 +1,8 @@
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { a } from "../../../../TuiList-D7-CH2oS.js";
+import "./TuiListProvider.js";
+import "../layout/vsbox/VSBoxElement.js";
+export {
+  a as default
+};

package/components/elements/addons/lists/TuiListMenu.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties, ReactElement } from 'react';
+declare const PLACEMENTS: {
+    right: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: any;
+    };
+    left: {
+        top: number;
+        right: any;
+        bottom: number;
+        left: number;
+    };
+    'top-left': {
+        top: number;
+        right: any;
+        bottom: any;
+        left: number;
+    };
+    'top-right': {
+        top: number;
+        right: number;
+        bottom: any;
+        left: any;
+    };
+    'bottom-left': {
+        top: any;
+        right: any;
+        bottom: number;
+        left: number;
+    };
+    'bottom-right': {
+        top: any;
+        right: number;
+        bottom: number;
+        left: any;
+    };
+};
+type TuiListMenuProps = {
+    permanent?: boolean;
+    placement?: TuiListMenuPlacement;
+    style?: CSSProperties;
+    className?: string;
+    children: ReactElement | ReactElement[];
+};
+export type TuiListMenuPlacement = keyof typeof PLACEMENTS;
+declare const _default: import('react').MemoExoticComponent<({ style, className, permanent, placement, children }: TuiListMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/components/elements/addons/lists/TuiListMenu.js

@@ -0,0 +1,45 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { styled } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const MY_PROPS = ["permanent", "placement"];
+const PLACEMENTS = {
+  right: { top: 0, right: 0, bottom: 0, left: null },
+  left: { top: 0, right: null, bottom: 0, left: 0 },
+  "top-left": { top: 0, right: null, bottom: null, left: 0 },
+  "top-right": { top: 0, right: 0, bottom: null, left: null },
+  "bottom-left": { top: null, right: null, bottom: 0, left: 0 },
+  "bottom-right": { top: null, right: 0, bottom: 0, left: null }
+};
+const TuiListMenuRoot = styled("div", { shouldForwardProp: (prop) => !MY_PROPS.includes(prop) })(({ theme, permanent, placement }) => {
+  const position = PLACEMENTS[placement];
+  return {
+    ...position || {},
+    zIndex: position ? 100 : null,
+    display: permanent ? "flex" : "none",
+    position: position ? "absolute" : "inherit",
+    alignItems: "center",
+    margin: "auto",
+    backgroundColor: theme.palette.background.default,
+    "& button": {
+      marginRight: theme.spacing(1),
+      boxShadow: theme.shadows[4]
+    }
+  };
+});
+const TuiListMenu = ({ style, className, permanent, placement, children }) => {
+  return /* @__PURE__ */ jsx(
+    TuiListMenuRoot,
+    {
+      permanent,
+      placement,
+      style,
+      className: `actions ${className || ""}`,
+      onClick: (event) => event.stopPropagation(),
+      children
+    }
+  );
+};
+const TuiListMenu$1 = memo(TuiListMenu);
+export {
+  TuiListMenu$1 as default
+};

package/components/elements/addons/lists/TuiListProvider.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TuiListItem } from '.';
+export type TuiListMethodsState<T> = {
+    load: (items: TuiListItem<T>[]) => void;
+    move: (index: number) => void;
+    select: (item: TuiListItem<T>, index: number) => TuiListItem<T>;
+    replace: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
+    replaceById: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
+    remove: (id: string) => void;
+};
+export type TuiListItemsState<T> = {
+    items: TuiListItem<T>[];
+    moveNext: () => void;
+    movePrevious: () => void;
+};
+export declare const TuiListMethodContext: import('react').Context<TuiListMethodsState<any>>;
+export declare const TuiListItemsContext: import('react').Context<TuiListItemsState<any>>;
+type TuiListProviderProps = {
+    children: ReactNode;
+};
+declare const TuiListProvider: <T>({ children }: TuiListProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default TuiListProvider;

package/components/elements/addons/lists/TuiListProvider.js

@@ -0,0 +1,125 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { createContext, useState, useCallback, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const DEFAULT_METHODS_STATE = {
+  load: () => null,
+  move: () => null,
+  select: () => null,
+  replace: () => null,
+  replaceById: () => null,
+  remove: () => null
+};
+const DEFAULT_ITEMS_STATE = {
+  size: 0,
+  items: [],
+  movePrevious: () => null,
+  moveNext: () => null
+};
+const TuiListMethodContext = createContext(DEFAULT_METHODS_STATE);
+const TuiListItemsContext = createContext(DEFAULT_ITEMS_STATE);
+const TuiListProvider = ({ children }) => {
+  const [items, setItems] = useState([]);
+  const load = useCallback((_items2) => {
+    setItems((current) => {
+      return _items2.map((i) => {
+        const previous = current.find((_i) => i.id === _i.id);
+        if (previous) {
+          return {
+            ...i,
+            cursor: i.cursor === void 0 ? previous.cursor : i.cursor,
+            selected: i.selected === void 0 ? previous.selected : i.selected,
+            details: i.details === void 0 ? previous.details : i.details
+          };
+        }
+        return i;
+      });
+    });
+  }, []);
+  const select = useCallback((item, index) => {
+    const newItem = { ...item, cursor: true, selected: item ? !item.selected : true };
+    setItems((current) => {
+      return current.map((_item, _index) => {
+        if (index === _index) {
+          return newItem;
+        } else if (_item.selected || _item.cursor) {
+          return { ..._item, cursor: false, selected: false };
+        }
+        return _item;
+      });
+    });
+    return newItem;
+  }, []);
+  const move = useCallback((index) => {
+    setItems((current) => {
+      return current.map((_item, _index) => {
+        if (index === _index) {
+          return { ..._item, cursor: true };
+        } else if (_item.cursor) {
+          return { ..._item, cursor: false };
+        }
+        return _item;
+      });
+    });
+  }, []);
+  const replace = useCallback((item, newItem) => {
+    setItems((current) => {
+      const index = current.findIndex((i) => i === item);
+      if (index > -1) {
+        current[index] = { ...current[index], ...newItem };
+      }
+      return [...current];
+    });
+  }, []);
+  const replaceById = useCallback((item, newItem) => {
+    setItems((current) => {
+      const index = current.findIndex((i) => i.id === item.id);
+      if (index > -1) {
+        current[index] = { ...current[index], ...newItem };
+      }
+      return [...current];
+    });
+  }, []);
+  const remove = useCallback((id) => {
+    setItems((current) => {
+      const index = current.findIndex((i) => i.id === id);
+      if (index > -1) {
+        return current.filter((i) => i.id !== id);
+      }
+      return [...current];
+    });
+  }, []);
+  const moveNext = useCallback(() => {
+    const cursor = items.findIndex((i) => !!i.cursor);
+    const next = cursor + 1 > items.length - 1 ? 0 : cursor + 1;
+    move(next);
+  }, [items, move]);
+  const movePrevious = useCallback(() => {
+    const cursor = items.findIndex((i) => !!i.cursor);
+    const next = cursor - 1 < 0 ? items.length - 1 : cursor - 1;
+    move(next);
+  }, [items, move]);
+  const _items = useMemo(
+    () => ({
+      items,
+      moveNext,
+      movePrevious
+    }),
+    [items, moveNext, movePrevious]
+  );
+  const _functions = useMemo(
+    () => ({
+      load,
+      move,
+      select,
+      replace,
+      replaceById,
+      remove
+    }),
+    [load, select, move, replace, replaceById, remove]
+  );
+  return /* @__PURE__ */ jsx(TuiListMethodContext.Provider, { value: _functions, children: /* @__PURE__ */ jsx(TuiListItemsContext.Provider, { value: _items, children }) });
+};
+export {
+  TuiListItemsContext,
+  TuiListMethodContext,
+  TuiListProvider as default
+};

package/components/elements/addons/lists/hooks/useTuiListKeyboard.d.ts

@@ -0,0 +1,5 @@
+import { TuiListItemOnSelect } from '..';
+declare const useTuiListKeyboard: <T>(onSelect: TuiListItemOnSelect<T>) => {
+    register: (element: HTMLElement) => () => void;
+};
+export default useTuiListKeyboard;

package/components/elements/addons/lists/hooks/useTuiListKeyboard.js

@@ -0,0 +1,43 @@
+import { isArrowUp, isArrowDown, isEnter } from "../../../../../commons/components/utils/keyboard.js";
+import { useContext, useCallback, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import Throttler from "../../../../../utils/Throttler.js";
+import { TuiListItemsContext } from "../TuiListProvider.js";
+const THROTTLER = new Throttler(10);
+const useTuiListKeyboard = (onSelect) => {
+  const { items, movePrevious, moveNext } = useContext(TuiListItemsContext);
+  const onKeyDown = useCallback(
+    (event) => {
+      if (isArrowUp(event.key)) {
+        event.preventDefault();
+        THROTTLER.debounce(() => movePrevious());
+      } else if (isArrowDown(event.key)) {
+        event.preventDefault();
+        THROTTLER.debounce(() => moveNext());
+      } else if (isEnter(event.key)) {
+        const index = items.findIndex((i) => !!i.cursor);
+        onSelect(items[index], index);
+      }
+    },
+    [items, movePrevious, moveNext, onSelect]
+  );
+  const register = useCallback(
+    (element) => {
+      if (element) {
+        element.addEventListener("keydown", onKeyDown);
+      }
+      return () => {
+        element.removeEventListener("keydown", onKeyDown);
+      };
+    },
+    [onKeyDown]
+  );
+  return useMemo(
+    () => ({
+      register
+    }),
+    [register]
+  );
+};
+export {
+  useTuiListKeyboard as default
+};

package/components/elements/addons/lists/index.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { default as TuiList } from './TuiList';
+import { default as TuiListElement } from './TuiListElement';
+import { default as TuiListProvider } from './TuiListProvider';
+export type TuiListItemOnSelect<T> = (selection: TuiListItem<T>, rowIndex: number) => void;
+export type TuiListItem<T> = {
+    id: string | number;
+    details?: boolean;
+    cursor?: boolean;
+    selected?: boolean;
+    item: T;
+};
+export type TuiListItemProps<T> = {
+    item: TuiListItem<T>;
+    position: number;
+};
+export type TuiListMenuRenderer<T> = (props: TuiListItemProps<T>) => ReactElement | ReactElement[];
+export type TuiListItemRenderer<T> = (props: TuiListItemProps<T>, classRenderer: () => string) => ReactElement;
+export { TuiList, TuiListElement, TuiListProvider };

package/components/elements/addons/lists/index.js

@@ -0,0 +1,7 @@
+import { T, a } from "../../../../TuiList-D7-CH2oS.js";
+import { default as default2 } from "./TuiListProvider.js";
+export {
+  T as TuiList,
+  a as TuiListElement,
+  default2 as TuiListProvider
+};

package/components/elements/addons/lists/table/TuiTable.d.ts

@@ -0,0 +1,14 @@
+import { TuiTableCellRenderer, TuiTableColumn, TuiTableRowDetailRenderer } from '.';
+import { TuiListItemOnSelect, TuiListMenuRenderer } from '..';
+type TuiTableProps<T> = {
+    keyboard?: boolean;
+    flexPort?: boolean;
+    headless?: boolean;
+    columns: TuiTableColumn[];
+    onRowSelect?: TuiListItemOnSelect<T>;
+    menuRenderer?: TuiListMenuRenderer<T>;
+    detailRenderer?: TuiTableRowDetailRenderer<T>;
+    children?: TuiTableCellRenderer<T>;
+};
+declare const TuiTable: <T>({ keyboard, flexPort, headless, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TuiTable;

package/components/elements/addons/lists/table/TuiTable.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { styled, emphasize, lighten, darken } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import FlexPort from "../../layout/FlexPort.js";
+import { useState, useRef, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useResizeDetector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-resize-detector@9.1.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-resize-detector/build/index.esm.js";
+import TuiTableBody from "./TuiTableBody.js";
+import TuiTableHead from "./TuiTableHead.js";
+import TuiTableLayout from "./TuiTableLayout.js";
+const TableRoot = styled("div")(({ theme }) => ({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  ".tui-table-row": {
+    wordBreak: "break-all",
+    borderBottom: "1px solid",
+    borderBottomColor: theme.palette.mode === "dark" ? lighten(theme.palette.background.default, 0.05) : darken(theme.palette.background.default, 0.05)
+  },
+  ".tui-table-cell": {
+    padding: theme.spacing(1)
+  },
+  ".tui-table-header": {
+    display: "flex",
+    alignItems: "center",
+    border: "1px dotted transparent",
+    padding: theme.spacing(1)
+  },
+  ".tui-table-header-active": {
+    border: "1px dotted",
+    borderColor: emphasize(theme.palette.background.default, 0.25),
+    backgroundColor: emphasize(theme.palette.background.default, 0.05)
+  },
+  ".tui-table-header-hover": {
+    "&:hover": {
+      cursor: "pointer",
+      backgroundColor: emphasize(theme.palette.background.default, 0.05)
+    },
+    "&:hover .tui-table-header-menu-btn": {
+      opacity: 1
+    }
+  },
+  ".tui-table-header-menu": {},
+  ".tui-table-header-menu-btn": {
+    opacity: 0
+  },
+  ".tui-table-head": {
+    display: "flex",
+    backgroundColor: theme.palette.background.default,
+    zIndex: theme.zIndex.appBar - 2
+  },
+  ".tui-table-divider": {
+    borderBottom: "1px solid",
+    borderBottomColor: theme.palette.divider
+  }
+}));
+const TuiTable = ({
+  keyboard,
+  flexPort,
+  headless,
+  columns,
+  onRowSelect,
+  menuRenderer,
+  detailRenderer,
+  children
+}) => {
+  const { width, ref } = useResizeDetector({ handleHeight: false });
+  const { width: bodyWidth, ref: bodyRef } = useResizeDetector({ handleHeight: false });
+  const [layout, setLayout] = useState();
+  const widthRef = useRef(width);
+  useEffect(() => {
+    if (!flexPort || !layout) {
+      if (width && width !== widthRef.current) {
+        setLayout(new TuiTableLayout(width, width, columns));
+      }
+      widthRef.current = width;
+    }
+  }, [flexPort, layout, width, columns]);
+  useEffect(() => {
+    if (flexPort && layout) {
+      if (bodyWidth && bodyWidth !== widthRef.current) {
+        setLayout(new TuiTableLayout(width, bodyWidth, columns));
+      }
+      widthRef.current = bodyWidth;
+    }
+  }, [flexPort, layout, width, bodyWidth, columns]);
+  return /* @__PURE__ */ jsxs(TableRoot, { ref, "data-tuitable": "true", children: [
+    !headless && layout && /* @__PURE__ */ jsx(TuiTableHead, { layout, columns }),
+    layout && (flexPort ? /* @__PURE__ */ jsx(FlexPort, { children: /* @__PURE__ */ jsx("div", { ref: bodyRef, children: /* @__PURE__ */ jsx(
+      TuiTableBody,
+      {
+        keyboard,
+        layout,
+        columns,
+        onRowSelect,
+        menuRenderer,
+        detailRenderer,
+        children
+      }
+    ) }) }) : /* @__PURE__ */ jsx(
+      TuiTableBody,
+      {
+        keyboard,
+        layout,
+        columns,
+        onRowSelect,
+        menuRenderer,
+        detailRenderer,
+        children
+      }
+    ))
+  ] });
+};
+export {
+  TuiTable as default
+};

package/components/elements/addons/lists/table/TuiTableBody.d.ts

@@ -0,0 +1,14 @@
+import { TuiTableCellRenderer, TuiTableColumn, TuiTableRowDetailRenderer } from '.';
+import { TuiListItemOnSelect, TuiListMenuRenderer } from '..';
+import { default as TuiTableLayout } from './TuiTableLayout';
+type TuiTableBodyProps<T> = {
+    keyboard?: boolean;
+    layout: TuiTableLayout;
+    columns: TuiTableColumn[];
+    onRowSelect?: TuiListItemOnSelect<T>;
+    menuRenderer?: TuiListMenuRenderer<T>;
+    detailRenderer?: TuiTableRowDetailRenderer<T>;
+    children?: TuiTableCellRenderer<T>;
+};
+declare const TuiTableBody: <T>({ keyboard, layout, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TuiTableBody;

package/components/elements/addons/lists/table/TuiTableBody.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Collapse } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import AppListEmpty from "../../../../../commons/components/display/AppListEmpty.js";
+import { get } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { a as TuiListElement } from "../../../../../TuiList-D7-CH2oS.js";
+import "../TuiListProvider.js";
+import TuiListBase from "../TuiListBase.js";
+const TuiTableBody = ({
+  keyboard,
+  layout,
+  columns,
+  onRowSelect,
+  menuRenderer,
+  detailRenderer,
+  children
+}) => {
+  const trowRenderer = useCallback(
+    (props, classRenderer) => {
+      return /* @__PURE__ */ jsxs("div", { className: `tui-table-row ${classRenderer()}`, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative" }, children: [
+          columns.map((column, columnIndex) => {
+            const value = get(props.item.item, column.path || column.column, "");
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "tui-table-cell",
+                style: { minWidth: layout.getWidth(column.column) },
+                children: children ? children(value, columnIndex, column, props) : /* @__PURE__ */ jsx("div", { children: value })
+              },
+              column.column
+            );
+          }),
+          menuRenderer && menuRenderer(props)
+        ] }),
+        detailRenderer && /* @__PURE__ */ jsx(Collapse, { in: props.item.details, unmountOnExit: true, children: detailRenderer(props) })
+      ] });
+    },
+    [layout, columns, menuRenderer, detailRenderer, children]
+  );
+  return /* @__PURE__ */ jsx(TuiListBase, { keyboard, onSelect: onRowSelect, children: (items, onClick) => {
+    return items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(TuiListElement, { item, position: index, onSelect: onClick, children: trowRenderer }, item.id)) : /* @__PURE__ */ jsx(AppListEmpty, { mt: 4 });
+  } });
+};
+export {
+  TuiTableBody as default
+};

package/components/elements/addons/lists/table/TuiTableHead.d.ts

@@ -0,0 +1,8 @@
+import { TuiTableColumn } from '.';
+import { default as TuiTableLayout } from './TuiTableLayout';
+type TuiTableHeaderProps = {
+    layout: TuiTableLayout;
+    columns: TuiTableColumn[];
+};
+declare const TuiTableHead: ({ layout, columns }: TuiTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TuiTableHead;