@arcblock/ux 2.13.70 → 3.0.0

package/lib/Datatable/index.js

@@ -1,71 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
-import { css } from '@emotion/react';
-import isObject from 'lodash/isObject';
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
-import clsx from 'clsx';
-import CircularProgress from '@mui/material/CircularProgress';
-import Empty from '../Empty';
-import CustomToolbar from './CustomToolbar';
-import { DatatableProvider as DataTableProvider, useDatatableContext } from './DatatableContext';
-import { styled } from '../Theme';
-
-/**
- * @typedef {{
- *  icon: import('react').ReactElement,
- *  title: import('react').ReactElement | string,
- *  onClick?: () => void
- * }} DataTableCustomButton
- */
-
-/**
- * @typedef {{
- *  name: string,
- *  width?: number,
- *  align?: 'left' | 'center' | 'right',
- * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
- */
-
-/**
- * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
- */
-
-/**
- * @typedef {{
- *  title?: import('react').ReactElement | string, // The title of the table (optional)
- * } & Omit<import('mui-datatables').MUIDataTableProps, 'title'>} ModifiedMUIDataTableProps
- */
-
-/**
- * @typedef {{
- *  data: Array<object | number[] | string[]>,
- *  columns: Array<DataTableColumn>,
- *  locale?: import('../type').Locale,
- *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
- *  style?: import('react').CSSProperties,
- *  customButtons?: Array<DataTableCustomButton>,
- *  customPreButtons?: Array<DataTableCustomButton>,
- *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
- *  loading?: false | true,
- *  disabled?: false | true,
- *  stripped?: false | true,
- *  verticalKeyWidth?: number | string,
- *  hideTableHeader?: false | true,
- *  components?: ModifiedMUIDataTableProps['components'],
- *  emptyNode?: import('react').ReactNode,
- *  durable?: string,
- *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder',
- *  bgColor?: string,
- *  hoverColor?: string,
- *  stripColor?: string
- * } & ModifiedMUIDataTableProps} DataTableProps
- */
-
-const FilterLine = styled('div')`
+import { jsx as i, jsxs as te } from "react/jsx-runtime";
+import { useRef as oe, isValidElement as re } from "react";
+import o from "prop-types";
+import ae, { TableFilterList as le, TableFooter as ie } from "mui-datatables";
+import { TableFilterList as Ie, TableFooter as Ue } from "mui-datatables";
+import { css as H } from "@emotion/react";
+import F from "lodash/isObject";
+import se from "lodash/cloneDeep";
+import ne from "lodash/get";
+import P from "clsx";
+import { useCreation as de, useDeepCompareEffect as h } from "ahooks";
+import { CircularProgress as ce } from "@mui/material";
+import R from "../Empty/index.js";
+import pe from "./CustomToolbar.js";
+import { DatatableProvider as ue, useDatatableContext as M } from "./DatatableContext.js";
+import { styled as $ } from "../Theme/index.js";
+const fe = $("div")`
   display: flex;
   align-items: center;
   .toolbar-filter-content {
@@ -76,413 +25,217 @@ const FilterLine = styled('div')`
     font-size: 14px;
   }
 `;
-function WrapFilterList(props) {
-  const {
-    filterLabel
-  } = useDatatableContext();
-  const hasFilter = !!props.filterList.filter(e => e.length).length;
-  if (hasFilter) {
-    return /*#__PURE__*/_jsxs(FilterLine, {
-      children: [hasFilter && /*#__PURE__*/_jsx("div", {
-        className: "toolbar-filter-title",
-        children: filterLabel
-      }), /*#__PURE__*/_jsx("div", {
-        className: "toolbar-filter-content",
-        children: /*#__PURE__*/_jsx(TableFilterList, {
-          ...props
-        })
-      })]
-    });
-  }
-  return '';
+function N(e) {
+  const { filterLabel: a } = M(), r = !!(e.filterList ?? []).filter((n) => n.length).length;
+  return r ? /* @__PURE__ */ te(fe, { children: [
+    r && /* @__PURE__ */ i("div", { className: "toolbar-filter-title", children: a }),
+    /* @__PURE__ */ i("div", { className: "toolbar-filter-content", children: /* @__PURE__ */ i(le, { ...e }) })
+  ] }) : "";
 }
-WrapFilterList.propTypes = {
-  filterList: PropTypes.array
-};
-WrapFilterList.defaultProps = {
-  filterList: []
+N.propTypes = {
+  filterList: o.array
 };
-function WrapTableFooter(props) {
-  const {
-    loading,
-    disabled
-  } = useDatatableContext();
-  return /*#__PURE__*/_jsx(FooterContainer, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: `datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`,
-      children: /*#__PURE__*/_jsx(TableFooter, {
-        ...props
-      })
-    })
-  });
+function be(e) {
+  const { loading: a, disabled: r } = M();
+  return /* @__PURE__ */ i(he, { children: /* @__PURE__ */ i("div", { className: `datatable-footer ${a || r ? "datatable-footer-disabled" : ""}`, children: /* @__PURE__ */ i(ie, { ...e }) }) });
 }
-export const getDurableData = key => {
-  const durableKey = `datatable-durable-${key}`;
-  let localData = localStorage[durableKey];
-  if (localData) {
+const ge = (e) => {
+  const a = `datatable-durable-${e}`;
+  let r = localStorage[a];
+  if (r)
     try {
-      localData = JSON.parse(localData);
-    } catch (err) {
-      console.error(`parse durable data error (key:${key}) => `, err);
+      r = JSON.parse(r);
+    } catch (n) {
+      console.error(`parse durable data error (key:${e}) => `, n);
     }
-  }
-  return localData || {};
+  return r || {};
 };
-
-/**
- * @description
- * @export
- * @param {DataTableProps} props
- * @return {import('react').ReactComponentElement}
- */
-export default function DataTable(props) {
-  return /*#__PURE__*/_jsx(DataTableProvider, {
-    children: /*#__PURE__*/_jsx(ReDataTable, {
-      ...props
-    })
-  });
+function He(e) {
+  return /* @__PURE__ */ i(ue, { children: /* @__PURE__ */ i(A, { ...e }) });
 }
-const fixCellProp = (tempObj, cellProps) => {
-  const cellStyle = {};
-  if (tempObj.align) {
-    cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
-  }
-  if (tempObj.verticalKeyAlign) {
-    cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
-  }
-  if (tempObj.minWidth) {
-    cellStyle.minWidth = tempObj.minWidth;
-  }
-  cellProps.style = Object.assign({}, cellProps.style, cellStyle);
+const k = (e, a) => {
+  const r = {};
+  e.align && (a.className = P(a.className, `pc-align-${e.align}`)), e.verticalKeyAlign && (a.className = P(a.className, `vertical-align-${e.verticalKeyAlign}`)), e.minWidth && (r.minWidth = e.minWidth), a.style = Object.assign({}, a.style, r);
 };
-
-/**
- * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
- * @param {Array} props.customButtons Custom buttons for toolbar
- * @param {Function} props.onChange When onChange is present, serverSide mode is activated by default https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca#remote-data
- * @param {Boolean} props.loading For dynamic data, usually used with onChange
- * @returns
- */
-function ReDataTable({
-  data: originData,
-  columns: originColumns,
-  locale,
-  options,
+function A({
+  data: e = [],
+  columns: a,
+  locale: r = "en",
+  options: n = {},
   // The options object is usually a property supported by mui-datatable
-  style,
-  customPreButtons,
-  customButtons,
-  onChange,
-  loading,
-  disabled,
-  stripped,
-  verticalKeyWidth,
-  hideTableHeader,
-  components,
-  emptyNode,
-  durable,
-  durableKeys,
-  bgColor = 'transparent',
-  hoverColor,
-  stripColor,
-  ...rest
+  style: w = {},
+  customPreButtons: b = [],
+  customButtons: g = [],
+  onChange: m = "",
+  loading: c = !1,
+  disabled: C = !1,
+  stripped: I = !1,
+  verticalKeyWidth: U = "",
+  hideTableHeader: E = !1,
+  components: _ = {},
+  emptyNode: T = "",
+  durable: v = "",
+  durableKeys: j = ["page", "rowsPerPage", "searchText", "sortOrder"],
+  bgColor: B = "transparent",
+  hoverColor: O = "",
+  stripColor: W = "",
+  ...z
 }) {
-  const oldState = useRef(null);
-  const {
-    setCustomPreButtons,
-    setCustomButtons,
-    setFilterLabel,
-    setLoading,
-    setDisabled
-  } = useDatatableContext();
-  const disabledCellStyle = {
-    cursor: 'not-allowed',
-    pointerEvents: 'none'
-  };
-  const keys = [];
-
-  // Convert Columns fields to object sets to support the width function
-  const columns = originColumns.map(e => {
-    let tempObj;
-    if (!isObject(e)) {
-      tempObj = {
-        label: e,
-        name: e
+  const D = oe(null), { setCustomPreButtons: K, setCustomButtons: J, setFilterLabel: V, setLoading: q, setDisabled: G } = M(), Q = {
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  }, x = [], X = a.map((s) => {
+    let t;
+    F(s) ? t = se(s) : t = {
+      label: s,
+      name: s
+    }, x.push(t.name), t.align || (t.align = "left"), t.options || (t.options = {});
+    const { setCellHeaderProps: d, setCellProps: u } = t.options;
+    return t.options.setCellHeaderProps = (...f) => {
+      let l = {
+        className: ""
       };
-    } else {
-      tempObj = cloneDeep(e);
-    }
-    keys.push(tempObj.name);
-    if (!tempObj.align) {
-      // There must be an align default for setCellRender to take effect, this is a bug in mui-datatable
-      tempObj.align = 'left';
-    }
-    if (!tempObj.options) {
-      tempObj.options = {};
-    }
-    const {
-      setCellHeaderProps,
-      setCellProps
-    } = tempObj.options;
-    tempObj.options.setCellHeaderProps = (...args) => {
-      let cellProps = {
-        className: ''
+      return d && !d.__innerFunc && (l = {
+        ...l,
+        ...d(...f) || {}
+      }), (c || C) && (l = { ...l, style: Q }), t.width && (l.width = t.width), k(t, l), l;
+    }, t.options.setCellHeaderProps.__innerFunc = 1, (t.align || t.style) && (t.options.setCellProps = (...f) => {
+      let l = {
+        className: ""
       };
-
-      // Complementing width while inheriting old setCellHeaderProps
-      if (setCellHeaderProps && !setCellHeaderProps.__innerFunc) {
-        cellProps = {
-          ...cellProps,
-          ...(setCellHeaderProps(...args) || {})
-        };
-      }
-      if (loading || disabled) {
-        cellProps = {
-          ...cellProps,
-          style: disabledCellStyle
-        };
-      }
-      if (tempObj.width) {
-        cellProps.width = tempObj.width;
-      }
-      fixCellProp(tempObj, cellProps);
-      return cellProps;
-    };
-
-    // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
-    tempObj.options.setCellHeaderProps.__innerFunc = 1;
-    if (tempObj.align || tempObj.style) {
-      tempObj.options.setCellProps = (...args) => {
-        let cellProps = {
-          className: ''
-        };
-
-        // Complementing width while inheriting old setCellHeaderProps
-        if (setCellProps && !setCellProps.__innerFunc) {
-          cellProps = {
-            ...cellProps,
-            ...(setCellProps(...args) || {})
-          };
-        }
-        fixCellProp(tempObj, cellProps);
-        return cellProps;
-      };
-      tempObj.options.setCellProps.__innerFunc = 1;
-    }
-    return tempObj;
-  });
-
-  // Fixing object-type structures
-  const data = originData.map(e => {
-    if (!Array.isArray(e) && isObject(e)) {
-      return keys.map(key => get(e, key));
-    }
-    return e;
-  });
-  useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
-  useEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
-  useEffect(() => setLoading(loading), [loading]);
-  useEffect(() => setDisabled(disabled), [disabled]);
-  let emptyEl;
-  if (loading) {
-    emptyEl = /*#__PURE__*/_jsx(CircularProgress, {
-      color: "primary"
-    });
-  } else if (/*#__PURE__*/isValidElement(emptyNode)) {
-    emptyEl = emptyNode;
-  } else if (locale === 'zh') {
-    emptyEl = /*#__PURE__*/_jsx(Empty, {
-      children: emptyNode || '没有找到匹配的记录'
-    });
-  } else {
-    emptyEl = /*#__PURE__*/_jsx(Empty, {
-      children: emptyNode || 'No matching records found'
-    });
-  }
-  let textLabels = {
+      return u && !u.__innerFunc && (l = {
+        ...l,
+        ...u(...f) || {}
+      }), k(t, l), l;
+    }, t.options.setCellProps.__innerFunc = 1), t;
+  }), Y = de(() => e.map((s) => !Array.isArray(s) && F(s) ? x.map((t) => ne(s, t)) : s), [e, x]);
+  h(() => J(g || []), [g]), h(() => K(b || []), [b]), h(() => q(c), [c]), h(() => G(C), [C]);
+  let p;
+  c ? p = /* @__PURE__ */ i(ce, { color: "primary" }) : re(T) ? p = T : r === "zh" ? p = /* @__PURE__ */ i(R, { children: T || "没有找到匹配的记录" }) : p = /* @__PURE__ */ i(R, { children: T || "No matching records found" });
+  let y = {
     body: {
-      noMatch: emptyEl,
-      toolTip: 'Sort'
+      noMatch: p,
+      toolTip: "Sort"
     },
     pagination: {
-      next: 'Next Page',
-      previous: 'Previous Page',
-      rowsPerPage: 'Per page:',
-      displayRows: 'of',
-      jumpToPage: 'Jump to Page:'
+      next: "Next Page",
+      previous: "Previous Page",
+      rowsPerPage: "Per page:",
+      displayRows: "of",
+      jumpToPage: "Jump to Page:"
     },
     toolbar: {
-      search: 'Search',
-      downloadCsv: 'Download CSV',
-      print: 'Print',
-      viewColumns: 'View Columns',
-      filterTable: 'Filter Table'
+      search: "Search",
+      downloadCsv: "Download CSV",
+      print: "Print",
+      viewColumns: "View Columns",
+      filterTable: "Filter Table"
     },
-    filter: {
-      all: 'All',
-      title: 'FILTERS',
-      reset: 'RESET'
+    filter: { all: "All", title: "FILTERS", reset: "RESET" },
+    viewColumns: { title: "Show Columns", titleAria: "Show/Hide Table Columns" },
+    selectedRows: { text: "row(s) selected", delete: "Delete", deleteAria: "Delete Selected Rows" }
+  };
+  r === "zh" && (y = {
+    body: { noMatch: p, toolTip: "排序" },
+    pagination: {
+      next: "下一页",
+      previous: "上一页",
+      rowsPerPage: "每页行数",
+      displayRows: "/",
+      jumpToPage: "跳转到页面："
     },
-    viewColumns: {
-      title: 'Show Columns',
-      titleAria: 'Show/Hide Table Columns'
+    toolbar: {
+      search: "搜索",
+      downloadCsv: "下载CSV",
+      print: "打印",
+      viewColumns: "查看列",
+      filterTable: "筛选表格"
     },
-    selectedRows: {
-      text: 'row(s) selected',
-      delete: 'Delete',
-      deleteAria: 'Delete Selected Rows'
-    }
-  };
-  if (locale === 'zh') {
-    textLabels = {
-      body: {
-        noMatch: emptyEl,
-        toolTip: '排序'
-      },
-      pagination: {
-        next: '下一页',
-        previous: '上一页',
-        rowsPerPage: '每页行数',
-        displayRows: '/',
-        jumpToPage: '跳转到页面：'
-      },
-      toolbar: {
-        search: '搜索',
-        downloadCsv: '下载CSV',
-        print: '打印',
-        viewColumns: '查看列',
-        filterTable: '筛选表格'
-      },
-      filter: {
-        all: '全部',
-        title: '筛选器',
-        reset: '重置'
-      },
-      viewColumns: {
-        title: '显示的列',
-        titleAria: '显示/隐藏 表格的列'
-      },
-      selectedRows: {
-        text: '个已选项目',
-        delete: '删除',
-        deleteAria: '删除所选项目'
-      }
-    };
-  }
-  useEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
-  const durableData = getDurableData(durable);
-  const opts = {
-    selectableRows: 'none',
-    textLabels,
+    filter: { all: "全部", title: "筛选器", reset: "重置" },
+    viewColumns: { title: "显示的列", titleAria: "显示/隐藏 表格的列" },
+    selectedRows: { text: "个已选项目", delete: "删除", deleteAria: "删除所选项目" }
+  }), h(() => V(y.filter.title), [y.filter.title]);
+  const Z = ge(v), S = {
+    selectableRows: "none",
+    textLabels: y,
     rowsPerPage: 10,
     rowsPerPageOptions: [10, 20, 50],
-    ...durableData,
-    ...options,
+    ...Z,
+    ...n,
     // Wrap the more friendly onChange callback by listening to onTableChange,
     // which will only be triggered when the table key state changes
-    onTableChange: (action, tableState) => {
-      if (action === 'propsUpdate') {
+    onTableChange: (s, t) => {
+      if (s === "propsUpdate")
         return;
-      }
-      const state = {
-        count: tableState.count,
-        page: tableState.page,
-        rowsPerPage: tableState.rowsPerPage,
-        searchText: tableState.searchText,
-        sortOrder: tableState.sortOrder,
+      const d = {
+        count: t.count,
+        page: t.page,
+        rowsPerPage: t.rowsPerPage,
+        searchText: t.searchText,
+        sortOrder: t.sortOrder,
         //
-        filterList: tableState.filterList
+        filterList: t.filterList
       };
-      if (durable) {
-        const needSaveState = {};
-        durableKeys.forEach(key => {
-          needSaveState[key] = state[key];
-        });
-        localStorage.setItem(`datatable-durable-${durable}`, JSON.stringify(needSaveState));
-      }
-      const stateStr = JSON.stringify(state);
-      if (stateStr === oldState.current) {
-        return;
-      }
-      oldState.current = stateStr;
-      if (onChange) {
-        onChange(state, action);
+      if (v) {
+        const f = {};
+        j.forEach((l) => {
+          f[l] = d[l];
+        }), localStorage.setItem(`datatable-durable-${v}`, JSON.stringify(f));
       }
+      const u = JSON.stringify(d);
+      u !== D.current && (D.current = u, m && m(d, s));
     }
   };
-  if (onChange) {
-    opts.serverSide = true;
-  }
-  const props = {
-    options: opts,
-    ...rest,
+  m && (S.serverSide = !0);
+  const ee = {
+    options: S,
+    ...z,
     components: {
-      TableToolbar: CustomToolbar,
-      TableFooter: WrapTableFooter,
-      TableFilterList: WrapFilterList,
-      ...components
+      TableToolbar: pe,
+      TableFooter: be,
+      TableFilterList: N,
+      ..._
     }
   };
-  return /*#__PURE__*/_jsx(TableContainer, {
-    verticalKeyWidth: verticalKeyWidth,
-    bgColor: bgColor,
-    hoverColor: hoverColor,
-    stripColor: stripColor,
-    className: clsx({
-      'datatable-stripped': stripped,
-      'datatable-hide-header': hideTableHeader
-    }),
-    style: style,
-    children: /*#__PURE__*/_jsx(MUIDataTable, {
-      data: data,
-      columns: columns,
-      ...props
-    })
-  });
+  return /* @__PURE__ */ i(
+    me,
+    {
+      verticalKeyWidth: U,
+      bgColor: B,
+      hoverColor: O,
+      stripColor: W,
+      className: P({
+        "datatable-stripped": I,
+        "datatable-hide-header": E
+      }),
+      style: w,
+      children: /* @__PURE__ */ i(ae, { data: Y, columns: X, ...ee })
+    }
+  );
 }
-ReDataTable.propTypes = {
-  data: PropTypes.array.isRequired,
-  columns: PropTypes.array.isRequired,
-  options: PropTypes.object,
-  style: PropTypes.object,
-  locale: PropTypes.string,
-  loading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  customPreButtons: PropTypes.array,
-  customButtons: PropTypes.array,
-  onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  stripped: PropTypes.bool,
-  verticalKeyWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  hideTableHeader: PropTypes.bool,
-  components: PropTypes.object,
-  emptyNode: PropTypes.node,
-  durable: PropTypes.string,
-  durableKeys: PropTypes.array,
-  bgColor: PropTypes.string,
-  hoverColor: PropTypes.string,
-  stripColor: PropTypes.string
-};
-ReDataTable.defaultProps = {
-  options: {},
-  style: {},
-  locale: 'en',
-  loading: false,
-  disabled: false,
-  customPreButtons: [],
-  customButtons: [],
-  onChange: '',
-  stripped: false,
-  verticalKeyWidth: '',
-  hideTableHeader: false,
-  components: {},
-  emptyNode: '',
-  durable: '',
-  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
-  bgColor: 'transparent',
-  hoverColor: '',
-  stripColor: ''
+A.propTypes = {
+  data: o.array.isRequired,
+  columns: o.array.isRequired,
+  options: o.object,
+  style: o.object,
+  locale: o.string,
+  loading: o.bool,
+  disabled: o.bool,
+  customPreButtons: o.array,
+  customButtons: o.array,
+  onChange: o.oneOfType([o.func, o.string]),
+  stripped: o.bool,
+  verticalKeyWidth: o.oneOfType([o.number, o.string]),
+  hideTableHeader: o.bool,
+  components: o.object,
+  emptyNode: o.node,
+  durable: o.string,
+  durableKeys: o.array,
+  bgColor: o.string,
+  hoverColor: o.string,
+  stripColor: o.string
 };
-const alignCss = css`
+const L = H`
   .MuiTableCell-head {
     [class*='MUIDataTableHeadCell-toolButton'] {
       width: 100%;
@@ -515,35 +268,25 @@ const alignCss = css`
       text-align: right;
     }
   }
-`;
-const TableContainer = styled('div', {
-  shouldForwardProp: prop => !['verticalKeyWidth', 'bgColor', 'hoverColor', 'stripColor'].includes(prop)
-})(({
-  theme,
-  verticalKeyWidth,
-  bgColor,
-  hoverColor,
-  stripColor
-}) => {
-  const primaryTextColor = theme.palette.text.primary;
-  const defaultHoverColor = theme.palette.action.hover;
-  const defaultStripColor = theme.palette.grey[50];
-  const verticalKeyWidthStyle = verticalKeyWidth ? `
-      ${theme.breakpoints.down('md')} {
+`, me = $("div", {
+  shouldForwardProp: (e) => !["verticalKeyWidth", "bgColor", "hoverColor", "stripColor"].includes(e)
+})(({ theme: e, verticalKeyWidth: a, bgColor: r, hoverColor: n, stripColor: w }) => {
+  const b = e.palette.text.primary, g = e.palette.action.hover, m = e.palette.grey[50], c = a ? `
+      ${e.breakpoints.down("md")} {
         [class*='MUIDataTable-responsiveBase'] {
           tr:not([class*='responsiveSimple']) {
             td.MuiTableCell-body {
               > div {
                 &:first-of-type {
-                  width: ${verticalKeyWidth + (!/\D/.test(verticalKeyWidth) ? 'px' : '')};
+                  width: ${a + (/\D/.test(a) ? "" : "px")};
                 }
               }
             }
           }
         }
       }
-    ` : '';
-  return css`
+    ` : "";
+  return H`
     &.datatable-hide-header {
       thead.MuiTableHead-root {
         display: none;
@@ -569,9 +312,9 @@ const TableContainer = styled('div', {
       height: 100%;
       box-shadow: none;
       background: none;
-      background-color: ${bgColor};
+      background-color: ${r};
     }
-    ${theme.breakpoints.down('md')} {
+    ${e.breakpoints.down("md")} {
       td.MuiTableCell-body {
         padding-right: 0;
       }
@@ -597,53 +340,52 @@ const TableContainer = styled('div', {
         }
       }
     }
-    ${theme.breakpoints.up('md')} {
-      ${alignCss}
+    ${e.breakpoints.up("md")} {
+      ${L}
     }
-    ${theme.breakpoints.up('sm')} {
+    ${e.breakpoints.up("sm")} {
       [class*='responsiveSimple'] {
-        ${alignCss}
+        ${L}
       }
     }
 
-    ${verticalKeyWidthStyle}
+    ${c}
 
     .MuiTableCell-head {
-      color: ${primaryTextColor};
-      background-color: ${bgColor};
+      color: ${b};
+      background-color: ${r};
     }
 
     .MuiTableCell-root {
-      color: ${primaryTextColor};
+      color: ${b};
     }
 
     .MuiTableRow-root {
-      background-color: ${bgColor};
+      background-color: ${r};
       &:hover {
-        background-color: ${hoverColor || defaultHoverColor};
+        background-color: ${n || g};
       }
       &.MuiTableRow-footer {
-        background-color: ${bgColor};
+        background-color: ${r};
       }
     }
 
     &.datatable-stripped {
       .MuiTableRow-root:nth-of-type(odd) {
-        background-color: ${stripColor || defaultStripColor};
+        background-color: ${w || m};
         &:hover {
-          background-color: ${hoverColor || defaultHoverColor};
+          background-color: ${n || g};
         }
         &.MuiTableRow-head {
-          background-color: ${bgColor};
+          background-color: ${r};
         }
         &.MuiTableRow-footer {
-          background-color: ${bgColor};
+          background-color: ${r};
         }
       }
     }
   `;
-});
-const FooterContainer = styled('div')`
+}), he = $("div")`
   display: flex;
   align-items: center;
   .datatable-footer {
@@ -668,7 +410,7 @@ const FooterContainer = styled('div')`
     }
   }
 
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${(e) => e.theme.breakpoints.down("sm")} {
     .MuiTableCell-footer,
     .MuiToolbar-gutters {
       padding: 0;
@@ -684,4 +426,9 @@ const FooterContainer = styled('div')`
     }
   }
 `;
-export { TableFilterList, TableFooter };
+export {
+  Ie as TableFilterList,
+  Ue as TableFooter,
+  He as default,
+  ge as getDurableData
+};