@tint-ui/data-table 0.3.5

package/data-table-content.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import clsx from "clsx";
+import { flexRender } from "@tanstack/react-table";
+import { Table, TableHeader, TableFooter, TableBody, TableRow, TableCell } from "@tint-ui/table";
+import { isEmpty } from "@tint-ui/tools/is-empty";
+import { useDataTableContext } from "./context.js";
+import { DataTableCell, DataTableHead } from "./cell-adapter-type.js";
+import { useDataTableClasses } from "./classes.js";
+const DataTableContent = /*#__PURE__*/React.forwardRef(({
+  themePropsType,
+  className,
+  wrapperProps = {},
+  ...props
+}, ref) => {
+  const context = useDataTableContext();
+  const classes = useDataTableClasses();
+  const {
+    table,
+    header: {
+      top,
+      bottom
+    },
+    invisible
+  } = context;
+  const rows = table.getRowModel().rows;
+  const widthArea = {
+    top: top,
+    bottom: bottom && !top,
+    cell: !top && !bottom
+  };
+  let notFound = "";
+  if (rows.length === 0) {
+    const {
+      lexicon
+    } = context;
+    const state = table.getState();
+    if (isEmpty(state.globalFilter) && state.columnFilters.length === 0 && state.pagination.pageIndex === 0) {
+      notFound = lexicon.notFound;
+    } else {
+      notFound = lexicon.notFoundFiltered;
+    }
+  }
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+    wrapperProps: {
+      ...wrapperProps,
+      className: clsx(wrapperProps.className, classes.dataTable)
+    },
+    className: clsx(className, classes.table),
+    themePropsType: themePropsType,
+    ref: ref
+  }), top && /*#__PURE__*/React.createElement(TableHeader, {
+    themePropsType: themePropsType
+  }, table.getHeaderGroups().map(group => /*#__PURE__*/React.createElement(TableRow, {
+    key: group.id,
+    themePropsType: themePropsType
+  }, group.headers.map(header => invisible[header.column.id] ? null : /*#__PURE__*/React.createElement(DataTableHead, {
+    key: header.id,
+    header: header,
+    themePropsType: themePropsType,
+    withWidth: widthArea.top
+  }))))), /*#__PURE__*/React.createElement(TableBody, {
+    themePropsType: themePropsType
+  }, rows.length === 0 ? /*#__PURE__*/React.createElement(TableRow, {
+    key: "empty",
+    themePropsType: themePropsType
+  }, /*#__PURE__*/React.createElement(TableCell, {
+    colSpan: table.getVisibleLeafColumns().filter(cell => invisible[cell.id] !== true).length,
+    className: classes.cellNotFound
+  }, notFound)) : rows.map((row, index) => {
+    const clickHandler = context.getRowClickHandler(row.original);
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: row.id,
+      themePropsType: themePropsType,
+      onClick: clickHandler,
+      "data-click": clickHandler != null
+    }, row.getVisibleCells().map(cell => {
+      return invisible[cell.column.id] ? null : /*#__PURE__*/React.createElement(DataTableCell, {
+        key: cell.id,
+        cell: cell,
+        themePropsType: themePropsType,
+        withWidth: widthArea.cell && index === 0
+      }, flexRender(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  })), bottom && /*#__PURE__*/React.createElement(TableFooter, {
+    themePropsType: themePropsType
+  }, table.getHeaderGroups().map(group => /*#__PURE__*/React.createElement(TableRow, {
+    key: group.id,
+    themePropsType: themePropsType
+  }, group.headers.map(header => invisible[header.column.id] ? null : /*#__PURE__*/React.createElement(DataTableHead, {
+    key: header.id,
+    header: header,
+    themePropsType: themePropsType,
+    withWidth: widthArea.bottom
+  }))))));
+});
+DataTableContent.displayName = "DataTableContent";
+export { DataTableContent };

package/data-table-pagination.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const DataTablePagination: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type DataTablePaginationProps = React.ComponentProps<typeof DataTablePagination>;
+export { DataTablePagination };
+export type { DataTablePaginationProps };

package/data-table-pagination.js

@@ -0,0 +1,31 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import clsx from "clsx";
+import { useDataTablePaginationClasses } from "./pagination-classes.js";
+import { useDataTableContext } from "./context.js";
+import { PaginationSizeOptions } from "./pagination-size-options.js";
+import { PaginationArrow } from "./pagination-arrow.js";
+import { PaginationNumber } from "./pagination-number.js";
+const DataTablePagination = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const classes = useDataTablePaginationClasses();
+  const {
+    navbar: {
+      mode,
+      size
+    }
+  } = useDataTableContext();
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    "data-navbar-size": size,
+    className: clsx(classes.pagination, className),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classes.divider
+  }), /*#__PURE__*/React.createElement(PaginationSizeOptions, null), mode === "arrow" ? /*#__PURE__*/React.createElement(PaginationArrow, null) : /*#__PURE__*/React.createElement(PaginationNumber, null));
+});
+DataTablePagination.displayName = "DataTablePagination";
+export { DataTablePagination };

package/data-table-text-filter.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const DataTableTextFilter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    isMobile?: boolean | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type DataTableTextFilterProps = React.ComponentProps<typeof DataTableTextFilter>;
+export { DataTableTextFilter };
+export type { DataTableTextFilterProps };

package/data-table-text-filter.js

@@ -0,0 +1,76 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { InputGroup, InputAddon, InputText } from "@tint-ui/input";
+import { useDataTableFilterClasses } from "./filter-classes.js";
+import { useDataTableContext } from "./context.js";
+import clsx from "clsx";
+const getFilterText = table => {
+  const text = table.getState().globalFilter;
+  return typeof text === "string" ? text : "";
+};
+const DataTableTextFilter = /*#__PURE__*/React.forwardRef(({
+  className,
+  isMobile = false,
+  ...props
+}, ref) => {
+  const classes = useDataTableFilterClasses();
+  const {
+    lexicon,
+    table,
+    toolbar: {
+      size
+    }
+  } = useDataTableContext();
+  const [text, setText] = React.useState(() => getFilterText(table));
+  const focusRef = React.useRef(false);
+  const {
+    resetHandler,
+    inputProps
+  } = React.useMemo(() => {
+    const resetHandler = () => {
+      setText(getFilterText(table));
+    };
+    return {
+      resetHandler,
+      inputProps: {
+        onFocus() {
+          focusRef.current = true;
+        },
+        onBlur() {
+          focusRef.current = false;
+          resetHandler();
+        }
+      }
+    };
+  }, [table]);
+  const filterText = getFilterText(table);
+  React.useEffect(() => {
+    if (filterText !== text && !focusRef.current) {
+      resetHandler();
+    }
+  }, [filterText]);
+  return /*#__PURE__*/React.createElement(InputGroup, _extends({}, props, {
+    size: size,
+    className: clsx(classes.text, isMobile && classes.textMobile, className),
+    ref: ref
+  }), /*#__PURE__*/React.createElement(InputAddon, {
+    size: size,
+    variant: "label"
+  }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+    icon: "search"
+  })), /*#__PURE__*/React.createElement(InputText, _extends({}, inputProps, {
+    size: size,
+    placeholder: lexicon.search,
+    value: text,
+    onChange: event => {
+      const value = event.target.value;
+      setText(value);
+      table.setGlobalFilter(value);
+    }
+  })));
+});
+DataTableTextFilter.displayName = "DataTableTextFilter";
+export { DataTableTextFilter };

package/data-table-toolbar.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const DataTableToolbar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type DataTableToolbarProps = React.ComponentProps<typeof DataTableToolbar>;
+export { DataTableToolbar };
+export type { DataTableToolbarProps };

package/data-table-toolbar.js

@@ -0,0 +1,95 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import clsx from "clsx";
+import { Button } from "@tint-ui/button";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { SlideNavigator, Slide } from "@tint-ui/slide-navigator";
+import { useMediaQuery } from "@tint-ui/tools/use-media-query";
+import { useDataTableContext } from "./context.js";
+import { useDataTableToolbarClasses } from "./toolbar-classes.js";
+import { DataTableViewOptions } from "./data-table-views-options.js";
+import { DataTableTextFilter } from "./data-table-text-filter.js";
+import { renderDataTableFilter } from "./filter-adapter-type.js"; // label
+const DataTableToolbar = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const classes = useDataTableToolbarClasses();
+  const {
+    lexicon,
+    table,
+    filterVisible,
+    toolbar: {
+      size,
+      resetIconOnly,
+      onFilterReset
+    }
+  } = useDataTableContext();
+  const isMobile = useMediaQuery("(max-width: 639px)", {
+    noSsr: true
+  });
+  const state = table.getState();
+  const isFiltered = state.columnFilters.length > 0 || String(state.globalFilter ?? "").length > 0;
+  const filters = filterVisible.getVisibleFilters();
+  const isHeading = filters.length === 0 && !filterVisible.filterText && !isFiltered;
+  let body;
+  if (isHeading) {
+    body = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", {
+      className: classes.heading
+    }, lexicon.title), /*#__PURE__*/React.createElement(DataTableViewOptions, null));
+  } else {
+    const col1 = filterVisible.filterText ? /*#__PURE__*/React.createElement("div", {
+      key: "search",
+      className: classes.search
+    }, /*#__PURE__*/React.createElement(DataTableTextFilter, {
+      isMobile: isMobile
+    })) : /*#__PURE__*/React.createElement("h2", {
+      key: "heading",
+      className: classes.heading
+    }, lexicon.title);
+    const col2 = filters.length > 0 ? /*#__PURE__*/React.createElement(SlideNavigator, {
+      key: "filters",
+      size: size,
+      arrow: "auto",
+      className: classes.filters
+    }, filters.map(filter => /*#__PURE__*/React.createElement(Slide, {
+      key: filter.name,
+      asChild: true
+    }, renderDataTableFilter(filter)))) : isMobile ? null : /*#__PURE__*/React.createElement("div", {
+      key: "empty-filters",
+      className: classes.filters
+    });
+    const col3 = /*#__PURE__*/React.createElement("div", {
+      key: "reset",
+      className: classes.reset
+    }, isFiltered && /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      "data-type": "toolbar-button-reset",
+      size: size,
+      onClick: onFilterReset,
+      iconLeft: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+        icon: "x",
+        "aria-hidden": "true"
+      }),
+      iconOnly: resetIconOnly
+    }, resetIconOnly ? null : lexicon.filterReset));
+    const col4 = /*#__PURE__*/React.createElement("div", {
+      key: "options",
+      className: classes.options
+    }, /*#__PURE__*/React.createElement(DataTableViewOptions, null));
+    body = isMobile ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classes.mobile
+    }, col1, col3, col4), col2 == null ? null : /*#__PURE__*/React.createElement("div", {
+      className: classes.mobile
+    }, col2)) : /*#__PURE__*/React.createElement(React.Fragment, null, col1, col2, col3, col4);
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    "data-size": size,
+    className: clsx(className, classes.toolbar, !isHeading && (isMobile ? classes.withFilterGroup : classes.withFilter)),
+    ref: ref
+  }), body);
+});
+DataTableToolbar.displayName = "DataTableToolbar";
+export { DataTableToolbar };

package/data-table-views-options.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function DataTableViewOptions<TData>(): React.JSX.Element | null;

package/data-table-views-options.js

@@ -0,0 +1,133 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@tint-ui/button";
+import { DropdownMenu, DropdownMenuSub, DropdownMenuGroup, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuContent, DropdownMenuSubContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuSubTrigger, DropdownMenuPortal } from "@tint-ui/dropdown-menu";
+import { useDataTableContext } from "./context.js";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+const preventHandler = event => {
+  event.preventDefault();
+};
+const menuColumns = function (table) {
+  return table.getAllColumns().filter(column => typeof column.accessorFn !== "undefined" && column.getCanHide()).map(column => {
+    const cell = column.columnDef.meta?._cell;
+    return /*#__PURE__*/React.createElement(DropdownMenuCheckboxItem, {
+      key: column.id,
+      checked: column.getIsVisible(),
+      onSelect: preventHandler,
+      onCheckedChange: value => {
+        column.toggleVisibility(value);
+      }
+    }, cell ? cell.label : column.id);
+  });
+};
+const menuSorts = function (table) {
+  return table.getAllColumns().filter(column => typeof column.accessorFn !== "undefined" && column.getCanSort()).map(column => {
+    const cell = column.columnDef.meta?._cell;
+    const direction = column.getIsSorted();
+    const fn = column.getToggleSortingHandler();
+    return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+      key: column.id,
+      onSelect: event => {
+        if (fn) {
+          fn(event);
+          event.preventDefault();
+        }
+      }
+    }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: !direction ? "selector" : direction === "desc" ? "sort-desc" : "sort-asc"
+    }), cell ? cell.label : column.id);
+  });
+};
+const menuFilters = function (filterVisible) {
+  return filterVisible.getFilters().map(filter => {
+    const {
+      name
+    } = filter;
+    return /*#__PURE__*/React.createElement(DropdownMenuCheckboxItem, {
+      key: name,
+      checked: filterVisible.hasFilterVisible(name),
+      onSelect: preventHandler,
+      onCheckedChange: value => {
+        filterVisible.onFilterVisibleChange(name, value);
+      }
+    }, filter.label);
+  });
+};
+const menuFilterText = function (filterVisible, label) {
+  return /*#__PURE__*/React.createElement(DropdownMenuCheckboxItem, {
+    key: "filter-text",
+    checked: filterVisible.filterText,
+    onSelect: preventHandler,
+    onCheckedChange: value => {
+      filterVisible.onFilterTextVisibleChange(value);
+    }
+  }, label);
+};
+export function DataTableViewOptions() {
+  const {
+    table,
+    filterVisible,
+    dynamic,
+    toolbar: {
+      size,
+      viewIconOnly
+    },
+    lexicon
+  } = useDataTableContext();
+  let count = 0;
+  if (dynamic.column) {
+    count++;
+  }
+  if (dynamic.filter) {
+    count++;
+  }
+  if (dynamic.filterText) {
+    count++;
+  }
+  if (dynamic.sort) {
+    count++;
+  }
+  if (count === 0) {
+    return null;
+  }
+  const getTitle = () => {
+    if (count > 1) {
+      return lexicon.viewOptions;
+    }
+    if (dynamic.sort) return lexicon.viewSortBy;
+    if (dynamic.column) return lexicon.viewColumn;
+    if (dynamic.filter) return lexicon.viewFilter;
+    if (dynamic.filterText) return lexicon.viewFilterText;
+    return null;
+  };
+  const renderOnce = () => {
+    if (dynamic.sort) return menuSorts(table);
+    if (dynamic.column) return menuColumns(table);
+    if (dynamic.filter) return menuFilters(filterVisible);
+    if (dynamic.filterText) return menuFilterText(filterVisible, lexicon.viewFilterText);
+    return null;
+  };
+  return /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownMenuTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outline",
+    "data-type": "toolbar-button-options",
+    size: size,
+    iconLeft: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "data-table-view"
+    }),
+    iconOnly: viewIconOnly
+  }, viewIconOnly ? null : lexicon.view)), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuContent, {
+    align: "end",
+    onCloseAutoFocus: event => {
+      event.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(DropdownMenuLabel, null, getTitle()), /*#__PURE__*/React.createElement(DropdownMenuSeparator, null), count > 1 ? /*#__PURE__*/React.createElement(DropdownMenuGroup, null, dynamic.column && /*#__PURE__*/React.createElement(DropdownMenuSub, null, /*#__PURE__*/React.createElement(DropdownMenuSubTrigger, null, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+    icon: "data-table-view-columns"
+  }), lexicon.viewColumn), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuSubContent, null, menuColumns(table)))), dynamic.sort && /*#__PURE__*/React.createElement(DropdownMenuSub, null, /*#__PURE__*/React.createElement(DropdownMenuSubTrigger, null, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+    icon: "data-table-view-sorts"
+  }), lexicon.viewSortBy), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuSubContent, null, menuSorts(table)))), dynamic.filter && /*#__PURE__*/React.createElement(DropdownMenuSub, null, /*#__PURE__*/React.createElement(DropdownMenuSubTrigger, null, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+    icon: "data-table-view-filters"
+  }), lexicon.viewFilter), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuSubContent, null, menuFilters(filterVisible)))), dynamic.filterText && menuFilterText(filterVisible, lexicon.viewFilterText)) : renderOnce())));
+}

package/data-table.d.ts

@@ -0,0 +1,18 @@
+import type { DataTableCoreProps } from "./types";
+import * as React from "react";
+type DataTablePropsNoRef<TData extends object> = Omit<React.HTMLAttributes<HTMLTableElement>, keyof DataTableCoreProps<TData>> & {
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    themePropsType?: string;
+} & DataTableCoreProps<TData>;
+declare const DataTable: (<TData extends object>(props: Omit<React.HTMLAttributes<HTMLTableElement>, keyof DataTableCoreProps<TData_1>> & {
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+    themePropsType?: string | undefined;
+} & DataTableCoreProps<TData> & {
+    ref?: React.Ref<HTMLTableElement> | undefined;
+}) => React.ReactElement) & {
+    readonly $$typeof: symbol;
+    displayName?: string | undefined;
+};
+type DataTableProps = React.ComponentProps<typeof DataTable>;
+export { DataTable };
+export type { DataTableProps };

package/data-table.js

@@ -0,0 +1,56 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import { useDataTable } from "./use-data-table.js";
+import { DataTableContext } from "./context.js";
+import { DataTableToolbar } from "./data-table-toolbar.js";
+import { DataTableContent } from "./data-table-content.js";
+import { DataTablePagination } from "./data-table-pagination.js";
+const DataTable = /*#__PURE__*/React.forwardRef(({
+  themePropsType = "data-table",
+  header = "top",
+  table: tableProp,
+  data,
+  navbar,
+  initialData,
+  limit,
+  offset,
+  lexicon,
+  total,
+  onRowClick,
+  filter,
+  filterText,
+  sortBy,
+  sortDir,
+  toolbar,
+  cacheable,
+  ...props
+}, ref) => {
+  const context = useDataTable({
+    table: tableProp,
+    data,
+    navbar,
+    toolbar,
+    initialData,
+    limit,
+    offset,
+    lexicon,
+    total,
+    filter,
+    filterText,
+    sortBy,
+    sortDir,
+    header,
+    onRowClick,
+    cacheable
+  });
+  return /*#__PURE__*/React.createElement(DataTableContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(DataTableToolbar, null), /*#__PURE__*/React.createElement(DataTableContent, _extends({}, props, {
+    themePropsType: themePropsType,
+    ref: ref
+  })), /*#__PURE__*/React.createElement(DataTablePagination, null));
+});
+DataTable.displayName = "DataTable";
+export { DataTable };

package/filter-adapter-type.d.ts

@@ -0,0 +1,9 @@
+import type { DataTableFilterAdapter, DataTableDisplayFilter } from "./types";
+import * as React from "react";
+declare const hasFilterAdapter: (type: string) => boolean;
+declare const addFilterAdapter: (name: string, adapter: DataTableFilterAdapter) => void;
+declare const addFilterAdapterAsync: (name: string, handler: () => Promise<{
+    default: DataTableFilterAdapter;
+}>) => void;
+declare const renderDataTableFilter: <TName = string, FConfig extends object = any>(filter: DataTableDisplayFilter<TName, FConfig>) => React.ReactNode;
+export { hasFilterAdapter, addFilterAdapter, addFilterAdapterAsync, renderDataTableFilter };