@tint-ui/data-table 0.3.5

package/filter-adapter-type.js

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { invariant, warningOnce } from "@tint-ui/tools/proof";
+import { errorMessage } from "@tint-ui/tools/error-message";
+import { adapters as coreAdapters } from "./filter-adapters/index.js";
+import { useDataTableClasses } from "./classes.js";
+const adapters = new Map();
+const defaultAdapters = new Map();
+Object.entries(coreAdapters).forEach(([name, {
+  adapter
+}]) => {
+  defaultAdapters.set(name, {
+    adapter
+  });
+});
+const getAdapt = type => {
+  const adapter = adapters.get(type) || defaultAdapters.get(type);
+  if (!adapter) {
+    return null;
+  }
+  return adapter;
+};
+const privateTypes = [];
+const checkAdapt = type => {
+  if (!type) {
+    throw new Error(`Adapter type is empty`);
+  }
+  if (privateTypes.includes(type)) {
+    throw new Error(`The ${type} type is private`);
+  }
+  if (adapters.has(type)) {
+    throw new Error(`The ${type} form adapter already exists`);
+  }
+};
+const hasFilterAdapter = type => adapters.has(type);
+const addFilterAdapter = function (name, adapter) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter
+  });
+};
+const addFilterAdapterAsync = function (name, handler) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter: createAsyncAdapterCallback(name, handler)
+  });
+};
+const getAsyncAdapter = function (type, result) {
+  const adapter = result?.default;
+  invariant(typeof adapter === "function", `Async ${type} adapter failure: default is not function`);
+  return adapter;
+};
+const createAsyncAdapterCallback = function (type, handler) {
+  const adapt = {
+    waiters: new Set(),
+    handler,
+    error: null
+  };
+  const adapter = filter => {
+    return /*#__PURE__*/React.createElement(DataTableFilterAdapterAsync, {
+      adapt: adapt,
+      type: type,
+      filter: filter
+    });
+  };
+  adapt.adapter = adapter;
+  return adapter;
+};
+const createAsyncPromise = async (type, adapt) => {
+  try {
+    const result = await adapt.handler();
+    const adapter = getAsyncAdapter(type, result);
+    adapt.error = null;
+    adapt.adapter = adapter;
+    adapters.set(type, {
+      adapter
+    });
+  } catch (err) {
+    adapt.error = errorMessage(err).message;
+  }
+  let event;
+  if (adapt.error != null) {
+    event = {
+      error: adapt.error
+    };
+  } else if (adapt.adapter) {
+    event = {
+      adapter: adapt.adapter
+    };
+  } else {
+    return;
+  }
+  const handlers = Array.from(adapt.waiters.values());
+  adapt.waiters.clear();
+  handlers.forEach(handler => {
+    handler(event);
+  });
+};
+const DataTableFilterAdapterAsync = props => {
+  const classes = useDataTableClasses();
+  const {
+    adapt,
+    filter,
+    type
+  } = props;
+  const [state, setState] = React.useState(() => {
+    return adapt.adapter ? {
+      adapter: adapt.adapter
+    } : adapt.error != null ? {
+      error: adapt.error
+    } : null;
+  });
+  React.useEffect(() => {
+    const {
+      adapter,
+      error,
+      promise
+    } = adapt;
+    if (error != null || adapter != null) {
+      return;
+    }
+    if (promise == null) {
+      adapt.promise = createAsyncPromise(type, adapt);
+    }
+    adapt.waiters.add(setState);
+    return () => {
+      adapt.waiters.delete(setState);
+    };
+  }, [type, adapt]);
+  if (state == null) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.loader
+    });
+  }
+  if ("error" in state) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.error
+    }, state.error);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.adapter(filter));
+};
+DataTableFilterAdapterAsync.displayName = "DataTableFilterAdapterAsync";
+const renderDataTableFilter = function (filter) {
+  const {
+    type = "option"
+  } = filter;
+  const adapt = getAdapt(type);
+  if (!adapt) {
+    warningOnce(`table-filter:${type}`, false, `The ${type} filter type not found`);
+    return null;
+  }
+  return adapt.adapter(filter);
+};
+export { hasFilterAdapter, addFilterAdapter, addFilterAdapterAsync, renderDataTableFilter };

package/filter-adapters/index.d.ts

@@ -0,0 +1,5 @@
+import type { DataTableFilterAdapter } from "../types";
+declare const adapters: Record<string, {
+    adapter: DataTableFilterAdapter<any>;
+}>;
+export { adapters };

package/filter-adapters/index.js

@@ -0,0 +1,7 @@
+import { optionFilterAdapter } from "./option.js";
+const adapters = {
+  option: {
+    adapter: optionFilterAdapter
+  }
+};
+export { adapters };

package/filter-adapters/option.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableFilterAdapter, DataTableFilterOptionConfig } from "../types";
+declare const optionFilterAdapter: DataTableFilterAdapter<string, DataTableFilterOptionConfig>;
+export { optionFilterAdapter };

package/filter-adapters/option.js

@@ -0,0 +1,147 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import clsx from "clsx";
+import { isEmptyString } from "@tint-ui/tools/is-empty";
+import { Badge } from "@tint-ui/badge";
+import { Button } from "@tint-ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@tint-ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@tint-ui/popover";
+import { useOptionFilter } from "./use-option-filter.js";
+import { useDataTableFilterClasses } from "../filter-classes.js";
+const createOptionGroups = (options, groupBy) => {
+  const root = [];
+  const optionGroup = [];
+  const cache = new Map();
+  for (const option of options) {
+    const {
+      config
+    } = option;
+    if (config && groupBy in config && config[groupBy]) {
+      const heading = String(config[groupBy]).trim();
+      let options = cache.get(heading);
+      if (!options) {
+        options = [];
+        cache.set(heading, options);
+        optionGroup.push({
+          heading,
+          options
+        });
+      }
+      options.push(option);
+    } else {
+      root.push(option);
+    }
+  }
+  if (root.length) {
+    optionGroup.push({
+      options: root
+    });
+  }
+  return optionGroup;
+};
+const FilterOptionType = ({
+  filter
+}) => {
+  const classes = useDataTableFilterClasses();
+  const ctx = useOptionFilter(filter);
+  const column = ctx.column;
+  if (!column) {
+    return null;
+  }
+  const {
+    value,
+    options,
+    getSelectedOptions,
+    manual,
+    inputProps,
+    lexicon,
+    icon,
+    groupBy = null,
+    disableSearch = false
+  } = ctx;
+  const selectedOptions = getSelectedOptions();
+  const optionGroups = React.useMemo(() => groupBy ? createOptionGroups(options, groupBy) : [{
+    options
+  }], [options, groupBy]);
+  return /*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outline",
+    size: ctx.size,
+    className: classes.button,
+    iconLeft: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: icon || "data-table-add-filter"
+    })
+  }, /*#__PURE__*/React.createElement("span", null, filter.label), selectedOptions.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
+    variant: "secondary",
+    className: clsx(classes.badge, classes.mobile)
+  }, selectedOptions.length), /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.badges, classes.desktop)
+  }, selectedOptions.length > 2 ? /*#__PURE__*/React.createElement(Badge, {
+    variant: "secondary",
+    className: classes.badge
+  }, lexicon.filterSelected(selectedOptions.length)) : selectedOptions.map(option => /*#__PURE__*/React.createElement(Badge, {
+    variant: "secondary",
+    key: option.value,
+    className: classes.badge
+  }, option.label)))))), /*#__PURE__*/React.createElement(PopoverContent, {
+    className: classes.popover,
+    align: "start"
+  }, /*#__PURE__*/React.createElement(Command, null, (manual || options.length > 5 && !disableSearch) && /*#__PURE__*/React.createElement(CommandInput, _extends({
+    placeholder: lexicon.filterSearch(filter.label)
+  }, manual ? inputProps : null)), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, lexicon.filterNotFound), optionGroups.map(({
+    heading,
+    options
+  }, index) => /*#__PURE__*/React.createElement(CommandGroup, {
+    key: index,
+    heading: heading
+  }, options.map(option => {
+    const optionValue = option.value;
+    const isSelected = value.includes(optionValue);
+    const {
+      icon
+    } = option.config || {};
+    return /*#__PURE__*/React.createElement(CommandItem, {
+      key: option.value,
+      onSelect: () => {
+        const selectedValues = new Set(value);
+        if (isSelected) {
+          selectedValues.delete(optionValue);
+        } else {
+          if (!filter.multiple) {
+            selectedValues.clear();
+          }
+          selectedValues.add(optionValue);
+        }
+        column.setFilterValue(Array.from(selectedValues));
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: clsx(classes.checkbox, isSelected && classes.selected)
+    }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "check",
+      "aria-hidden": "true"
+    })), !isEmptyString(icon) && /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: icon,
+      className: classes.icon,
+      "aria-hidden": "true"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classes.label
+    }, option.label));
+  }))), value.length > 0 && /*#__PURE__*/React.createElement(CommandGroup, {
+    forceMount: true
+  }, /*#__PURE__*/React.createElement(CommandSeparator, null), /*#__PURE__*/React.createElement(CommandItem, {
+    onSelect: () => {
+      column.setFilterValue(undefined);
+    }
+  }, lexicon.filterClear))))));
+};
+FilterOptionType.displayName = "FilterOptionType";
+const optionFilterAdapter = filter => {
+  return /*#__PURE__*/React.createElement(FilterOptionType, {
+    filter: filter
+  });
+};
+export { optionFilterAdapter };

package/filter-adapters/use-option-filter.d.ts

@@ -0,0 +1,27 @@
+import type { Column } from "@tanstack/react-table";
+import type { InputSelectOption } from "@tint-ui/tools";
+import type { DataTableDisplayFilter, DataTableFilterOptionConfig } from "../types";
+declare const useOptionFilter: <TData>(filter: DataTableDisplayFilter<keyof TData, DataTableFilterOptionConfig>) => {
+    name: keyof TData extends infer T ? T extends keyof TData ? T extends string ? T : string : never : never;
+    column: Column<TData, unknown> | undefined;
+    inputProps: {
+        readonly value: string;
+        onValueChange(inputText: string): void;
+        onFocus(): void;
+    };
+    getSelectedOptions: () => InputSelectOption<object>[];
+    lexicon: import("../types").LexiconType;
+    size: import("../types").DataTableToolbarSize;
+    manual: boolean;
+    value: string[];
+    options: InputSelectOption<object>[];
+    inputText: string;
+    error: string | null;
+    loading: boolean;
+    type?: "string" | "number" | "boolean" | undefined;
+    icon?: string | undefined;
+    disableSearch?: boolean | undefined;
+    autoSelect?: boolean | undefined;
+    groupBy?: string | undefined;
+};
+export { useOptionFilter };

package/filter-adapters/use-option-filter.js

@@ -0,0 +1,192 @@
+"use client";
+
+import * as React from "react";
+import { useDataTableContext } from "../context.js";
+import { errorMessage } from "@tint-ui/tools/error-message";
+import { makeOption } from "@tint-ui/tools/make-option";
+const getOptions = (result, dump) => {
+  const options = [];
+  if (result.length) {
+    result.forEach(option => {
+      const item = makeOption(option, dump);
+      if (item) {
+        options.push(item);
+      }
+    });
+  }
+  return options;
+};
+const useOptionFilter = function (filter) {
+  const {
+    name,
+    config: {
+      options: filterOptions,
+      initialOptions,
+      ...rest
+    } = {}
+  } = filter;
+  const ctx = useDataTableContext();
+  const column = ctx.table.getColumn(name);
+  const refFn = React.useRef(null);
+  refFn.current = typeof filterOptions === "function" ? filterOptions : null;
+  const refDump = React.useRef({});
+  const filterValue = column ? column.getFilterValue() : null;
+  const value = filterValue == null ? [] : Array.isArray(filterValue) ? filterValue : [filterValue];
+  const refValue = React.useRef(value);
+  refValue.current = value;
+  const [state, setState] = React.useState(() => ({
+    options: Array.isArray(filterOptions) ? getOptions(filterOptions, refDump.current) : Array.isArray(initialOptions) ? getOptions(initialOptions, refDump.current) : [],
+    inputText: "",
+    text: "",
+    loading: false,
+    error: null
+  }));
+  const refState = React.useRef(state);
+  refState.current = state;
+  const {
+    onMount,
+    inputProps,
+    getSelectedOptions
+  } = React.useMemo(() => {
+    let localState = state;
+    let lazyId = null;
+    let mount = false;
+    let abortController = null;
+    const update = newState => {
+      if (!mount) {
+        return;
+      }
+      localState = {
+        ...localState,
+        ...newState
+      };
+      setState(localState);
+    };
+    const lazyClear = () => {
+      if (lazyId != null) {
+        window.clearTimeout(lazyId);
+        lazyId = null;
+      }
+    };
+    const abort = () => {
+      if (abortController != null) {
+        abortController.abort();
+        abortController = null;
+      }
+    };
+    const query = (force = false, mode = "search") => {
+      if (!mount) {
+        return;
+      }
+      const callback = refFn.current;
+      const text = localState.inputText.trim();
+      if (callback == null) {
+        return update({
+          loading: false,
+          error: null,
+          text
+        });
+      }
+      if (!force && localState.text === text) {
+        return;
+      }
+      abort();
+      update({
+        loading: true,
+        error: null,
+        text
+      });
+      abortController = new AbortController();
+      const signal = abortController.signal;
+      (async (...args) => callback(...args))(localState.text, refValue.current, mode, abortController).then(result => {
+        const options = [];
+        const resultDump = {};
+        result.forEach(option => {
+          const item = makeOption(option, resultDump);
+          if (item) {
+            options.push(item);
+          }
+        });
+        Object.assign(refDump.current, resultDump);
+        update({
+          options,
+          loading: false
+        });
+      }).catch(error => {
+        if (signal.aborted) {
+          return;
+        }
+        update({
+          loading: false,
+          error: errorMessage(error).message
+        });
+      }).finally(() => {
+        abortController = null;
+      });
+    };
+    const lazyLoad = () => {
+      if (refFn.current) {
+        return;
+      }
+      lazyClear();
+      lazyId = window.setTimeout(() => {
+        lazyId = null;
+        query();
+      }, 250);
+    };
+    return {
+      onMount() {
+        mount = true;
+        if (refValue.current.length) {
+          query(true, "initial");
+        }
+        return () => {
+          mount = false;
+          lazyClear();
+          abort();
+        };
+      },
+      getSelectedOptions() {
+        const options = [];
+        refValue.current.forEach(name => {
+          const option = refDump.current[name];
+          if (option) {
+            options.push(option);
+          }
+        });
+        return options;
+      },
+      inputProps: {
+        get value() {
+          return localState.inputText;
+        },
+        onValueChange(inputText) {
+          update({
+            inputText
+          });
+          lazyLoad();
+        },
+        onFocus() {
+          query(true);
+        }
+      }
+    };
+  }, []);
+  React.useEffect(onMount, [onMount]);
+  return {
+    ...rest,
+    name,
+    column,
+    inputProps,
+    getSelectedOptions,
+    lexicon: ctx.lexicon,
+    size: ctx.toolbar.size,
+    manual: refFn.current != null,
+    value: refValue.current,
+    options: state.options,
+    inputText: state.inputText,
+    error: state.error,
+    loading: state.loading
+  };
+};
+export { useOptionFilter };

package/filter-classes.d.ts

@@ -0,0 +1,32 @@
+declare const filterClasses: {
+    button: string;
+    popover: string;
+    badges: string;
+    badge: string;
+    mobile: string;
+    desktop: string;
+    checkbox: string;
+    icon: string;
+    label: string;
+    selected: string;
+    text: string;
+    textMobile: string;
+};
+declare const useDataTableFilterClasses: () => {
+    button: string;
+    popover: string;
+    badges: string;
+    badge: string;
+    mobile: string;
+    desktop: string;
+    checkbox: string;
+    icon: string;
+    label: string;
+    selected: string;
+    text: string;
+    textMobile: string;
+};
+type DataTableFilterClassesType = keyof typeof filterClasses;
+type DataTableFilterClasses = Record<DataTableFilterClassesType, string>;
+export { filterClasses, useDataTableFilterClasses };
+export type { DataTableFilterClassesType, DataTableFilterClasses };

package/filter-classes.js

@@ -0,0 +1,22 @@
+import { classGroup } from "@tint-ui/tools/class-group";
+import { useClasses } from "@tint-ui/theme";
+const {
+  base,
+  b
+} = classGroup("data-table-filter");
+const filterClasses = {
+  button: base,
+  popover: b("popover"),
+  badges: b("badges"),
+  badge: b("badge"),
+  mobile: b("mobile"),
+  desktop: b("desktop"),
+  checkbox: b("checkbox"),
+  icon: b("icon"),
+  label: b("label"),
+  selected: b("selected"),
+  text: b("text"),
+  textMobile: b("text", "mobile")
+};
+const useDataTableFilterClasses = () => useClasses("data-table-filter", filterClasses);
+export { filterClasses, useDataTableFilterClasses };

package/filter-fn.d.ts

@@ -0,0 +1,7 @@
+import type { FilterFn } from "@tanstack/react-table";
+declare const filterBoolean: FilterFn<any>;
+declare const filterNumber: FilterFn<any>;
+declare const filterNumberMultiple: FilterFn<any>;
+declare const filterString: FilterFn<any>;
+declare const filterStringMultiple: FilterFn<any>;
+export { filterBoolean, filterNumber, filterNumberMultiple, filterString, filterStringMultiple };

package/filter-fn.js

@@ -0,0 +1,76 @@
+const isEmpty = (value, filterValue) => value == null || Array.isArray(filterValue) && filterValue.length === 0;
+const filterBoolean = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  if (Array.isArray(filterValue)) {
+    filterValue = filterValue[0];
+  }
+  if (value == null) {
+    return filterValue === "";
+  }
+  if (typeof filterValue === "boolean") {
+    return value === filterValue;
+  }
+  if (filterValue === "1") {
+    return value === true;
+  }
+  if (filterValue === "0") {
+    return value === false;
+  }
+  return false;
+};
+const isNumberValue = (value, filterValue) => {
+  return value === (typeof filterValue === "number" ? filterValue : parseInt(String(filterValue)));
+};
+const filterNumber = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  if (isEmpty(value, filterValue)) {
+    return true;
+  }
+  if (typeof value !== "number") {
+    return false;
+  }
+  return isNumberValue(value, Array.isArray(filterValue) ? filterValue[0] : filterValue);
+};
+const filterNumberMultiple = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  if (isEmpty(value, filterValue)) {
+    return true;
+  }
+  if (typeof value !== "number") {
+    return false;
+  }
+  if (Array.isArray(filterValue)) {
+    for (const val of filterValue) {
+      if (isNumberValue(value, val)) {
+        return true;
+      }
+    }
+  } else if (isNumberValue(value, filterValue)) {
+    return true;
+  }
+  return false;
+};
+const filterString = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  if (isEmpty(value, filterValue)) {
+    return true;
+  }
+  return value === String(Array.isArray(filterValue) ? filterValue[0] : filterValue);
+};
+const filterStringMultiple = (row, columnId, filterValue) => {
+  const value = row.getValue(columnId);
+  if (isEmpty(value, filterValue)) {
+    return true;
+  }
+  if (Array.isArray(filterValue)) {
+    for (const val of filterValue) {
+      if (value === String(val)) {
+        return true;
+      }
+    }
+  } else if (value === String(filterValue)) {
+    return true;
+  }
+  return false;
+};
+export { filterBoolean, filterNumber, filterNumberMultiple, filterString, filterStringMultiple };

package/index.d.ts

@@ -0,0 +1,16 @@
+export * from "./classes";
+export * from "./filter-classes";
+export * from "./toolbar-classes";
+export * from "./pagination-classes";
+export * from "./context";
+export * from "./cell-adapter-type";
+export * from "./filter-adapter-type";
+export * from "./data-table-content";
+export * from "./data-table-pagination";
+export * from "./data-table-toolbar";
+export * from "./data-table-views-options";
+export * from "./data-table";
+export * from "./pagination-arrow";
+export * from "./pagination-number";
+export * from "./pagination-size-options";
+export * from "./types";