@arcblock/ux 2.9.90 → 2.10.0

package/lib/Datatable/CustomToolbar.js

@@ -1,52 +1,43 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CustomToolbar;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _muiDatatables = require("mui-datatables");
-var _reactToPrint = _interopRequireWildcard(require("react-to-print"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _CloudDownload = _interopRequireDefault(require("@mui/icons-material/CloudDownload"));
-var _Print = _interopRequireDefault(require("@mui/icons-material/Print"));
-var _ViewColumn = _interopRequireDefault(require("@mui/icons-material/ViewColumn"));
-var _FilterList = _interopRequireDefault(require("@mui/icons-material/FilterList"));
-var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
-var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
-var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
-var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _utils = require("./utils");
-var _TableSearch = _interopRequireDefault(require("./TableSearch"));
-var _DatatableContext = require("./DatatableContext");
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { useState, useRef, useEffect, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import { TableFilter, TableViewCol } from 'mui-datatables';
+import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import PrintIcon from '@mui/icons-material/Print';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterIcon from '@mui/icons-material/FilterList';
+import Popover from '@mui/material/Popover';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import LinearProgress from '@mui/material/LinearProgress';
+import { handleCSVDownload } from './utils';
+import TableSearch from './TableSearch';
+import { useDatatableContext } from './DatatableContext';
+import { styled, useTheme } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function useMobile() {
-  const theme = (0, _Theme.useTheme)();
-  return (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down('sm'));
 }
-function CustomToolbar(props) {
-  const [menuIconEl, setMenuIconEl] = (0, _react.useState)(null);
-  const moreBtn = (0, _react.useRef)(null);
+export default function CustomToolbar(props) {
+  const [menuIconEl, setMenuIconEl] = useState(null);
+  const moreBtn = useRef(null);
   const isMobile = useMobile();
-  const toolbarId = (0, _react.useRef)(Math.random().toString(32).slice(2));
-  const [searchOpened, setSearchOpened] = (0, _react.useState)(false);
+  const toolbarId = useRef(Math.random().toString(32).slice(2));
+  const [searchOpened, setSearchOpened] = useState(false);
   const {
     customButtons,
     loading,
     disabled
-  } = (0, _DatatableContext.useDatatableContext)();
+  } = useDatatableContext();
   const {
     data,
     options,
@@ -74,41 +65,41 @@ function CustomToolbar(props) {
   } = options.textLabels.toolbar;
   const hideSearch = options.search === false || options.search === 'false';
   const hidePrint = options.print === false || options.print === 'false';
-  const TableFilterComponent = components.TableFilter || _muiDatatables.TableFilter;
-  const TableViewColComponent = components.TableViewCol || _muiDatatables.TableViewCol;
-  (0, _react.useEffect)(() => {
+  const TableFilterComponent = components.TableFilter || TableFilter;
+  const TableViewColComponent = components.TableViewCol || TableViewCol;
+  useEffect(() => {
     if (loading || disabled) {
       setAllPopsEl({});
     }
   }, [loading, disabled]);
   const printArea = func => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToPrint.default, {
+    return /*#__PURE__*/_jsx(ReactToPrint, {
       content: () => props.tableRef(),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToPrint.PrintContextConsumer, {
+      children: /*#__PURE__*/_jsx(PrintContextConsumer, {
         children: func
       })
     });
   };
-  const getPopId = key => "toolbar-pop-".concat(toolbarId.current, "-").concat(key);
+  const getPopId = key => `toolbar-pop-${toolbarId.current}-${key}`;
   const defaultButtons = [];
 
   // download/viewColumns/filter button behaviours, rendered using custom button logic
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudDownload.default, {}),
+      icon: /*#__PURE__*/_jsx(DownloadIcon, {}),
       title: downloadCsv,
       onClick: () => {
-        (0, _utils.handleCSVDownload)(props);
+        handleCSVDownload(props);
       }
     });
   }
   if (!(options.viewColumns === false || options.viewColumns === 'false')) {
     defaultButtons.push({
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewColumn.default, {}),
+      icon: /*#__PURE__*/_jsx(ViewColumnIcon, {}),
       title: viewColumns,
       // eslint-disable-next-line react/no-unstable-nested-components
       popRender() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableViewColComponent, {
+        return /*#__PURE__*/_jsx(TableViewColComponent, {
           data: data,
           columns: columns,
           options: options,
@@ -121,11 +112,11 @@ function CustomToolbar(props) {
   }
   if (!(options.filter === false || options.filter === 'false')) {
     defaultButtons.push({
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterList.default, {}),
+      icon: /*#__PURE__*/_jsx(FilterIcon, {}),
       title: filterTable,
       // eslint-disable-next-line react/no-unstable-nested-components
       popRender() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableFilterComponent, {
+        return /*#__PURE__*/_jsx(TableFilterComponent, {
           customFooter: options.customFilterDialogFooter,
           columns: columns,
           options: options,
@@ -141,12 +132,12 @@ function CustomToolbar(props) {
   }
   const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
   const allPops = [];
-  const [allPopsEl, setAllPopsEl] = (0, _react.useState)({});
+  const [allPopsEl, setAllPopsEl] = useState({});
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode
   const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
+    if ( /*#__PURE__*/isValidElement(e)) {
       return e;
     }
     const popId = getPopId(index);
@@ -157,7 +148,7 @@ function CustomToolbar(props) {
       } = e;
       // When popRender is present, clicking the button will bubble up the content returned by the popRender
       if (popRender) {
-        allPops.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+        allPops.push( /*#__PURE__*/_jsx(Popover, {
           open: !!allPopsEl[popId],
           anchorEl: () => allPopsEl[popId],
           onClose: () => {
@@ -167,16 +158,16 @@ function CustomToolbar(props) {
             vertical: 'bottom',
             horizontal: 'right'
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/_jsx("div", {
             children: popRender()
           })
         }, popId));
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      return /*#__PURE__*/_jsx(Tooltip, {
         title: e.title,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-          "data-testid": "".concat(e.title, "-iconButton"),
-          id: "btn-".concat(popId),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          "data-testid": `${e.title}-iconButton`,
+          id: `btn-${popId}`,
           "aria-label": e.title,
           onClick: () => {
             if (e.onClick) {
@@ -185,11 +176,11 @@ function CustomToolbar(props) {
             if (popRender) {
               // On the large screen, the bubble is positioned at the corresponding button
               setAllPopsEl({
-                [popId]: document.getElementById("btn-".concat(popId))
+                [popId]: document.getElementById(`btn-${popId}`)
               });
             }
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/_jsx("div", {
             className: "custom-toolbar-icon",
             children: icon
           })
@@ -203,21 +194,21 @@ function CustomToolbar(props) {
   const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
     let content;
-    if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
+    if ( /*#__PURE__*/isValidElement(e)) {
       content = e;
     } else if (e.icon) {
       const {
         icon
       } = e;
-      content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+      content = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
           children: icon
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+        }), /*#__PURE__*/_jsx(ListItemText, {
           children: e.title
         })]
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+    return /*#__PURE__*/_jsx(MenuItem, {
       onClick: () => {
         setMenuIconEl(null);
         if (e.onClick) {
@@ -233,44 +224,41 @@ function CustomToolbar(props) {
       children: content
     }, popId);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "custom-toobar-title ".concat(isMobile && searchOpened && /*#__PURE__*/(0, _react.isValidElement)(title) ? 'toobar-title-hidden' : ''),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Container, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `custom-toobar-title ${isMobile && searchOpened && /*#__PURE__*/isValidElement(title) ? 'toobar-title-hidden' : ''}`,
+        children: /*#__PURE__*/_jsx("div", {
           className: "custom-toobar-title-inner",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: /*#__PURE__*/_jsx("span", {
             children: title
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "custom-toobar-btns ".concat(loading || disabled ? 'toobar-btns-disabled' : ''),
-        children: [!hideSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableSearch.default, {
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `custom-toobar-btns ${loading || disabled ? 'toobar-btns-disabled' : ''}`,
+        children: [!hideSearch && /*#__PURE__*/_jsx(TableSearch, {
           search: search,
           options: options,
           searchText: searchText,
           searchTextUpdate: searchTextUpdate,
           searchClose: searchClose,
           onSearchOpen: setSearchOpened
-        }), !showMore && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [!hidePrint && printArea(_ref => {
-            let {
-              handlePrint
-            } = _ref;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-                title: print,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-                  "data-testid": "".concat(print, "-iconButton"),
-                  "aria-label": print,
-                  disabled: options.print === 'disabled',
-                  onClick: handlePrint,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Print.default, {})
-                })
+        }), !showMore && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!hidePrint && printArea(({
+            handlePrint
+          }) => /*#__PURE__*/_jsx("span", {
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: print,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                "data-testid": `${print}-iconButton`,
+                "aria-label": print,
+                disabled: options.print === 'disabled',
+                onClick: handlePrint,
+                children: /*#__PURE__*/_jsx(PrintIcon, {})
               })
-            });
-          }), toolbarButtons]
-        }), showMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            })
+          })), toolbarButtons]
+        }), showMore && /*#__PURE__*/_jsx(IconButton, {
           ref: moreBtn,
           "aria-haspopup": "true",
           "aria-expanded": menuIconEl ? 'true' : undefined,
@@ -278,60 +266,57 @@ function CustomToolbar(props) {
           style: {
             flexShrink: 0
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
         })]
       }), customToolbarEle]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+    }), /*#__PURE__*/_jsxs(Menu, {
       anchorEl: menuIconEl,
       open: !!menuIconEl,
       onClose: () => setMenuIconEl(null),
       MenuListProps: {
         'aria-labelledby': 'more-button'
       },
-      children: [!hidePrint && printArea(_ref2 => {
-        let {
-          handlePrint
-        } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
-          onClick: () => {
-            setMenuIconEl(null);
-            handlePrint();
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Print.default, {
-              fontSize: "small"
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-            children: print
-          })]
-        });
-      }), menuItems]
-    }), allPops.map((e, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [!hidePrint && printArea(({
+        handlePrint
+      }) => /*#__PURE__*/_jsxs(MenuItem, {
+        onClick: () => {
+          setMenuIconEl(null);
+          handlePrint();
+        },
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(PrintIcon, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          children: print
+        })]
+      })), menuItems]
+    }), allPops.map((e, index) => /*#__PURE__*/_jsx("div", {
       children: e
-    }, getPopId(index))), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
-      children: loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
+    }, getPopId(index))), /*#__PURE__*/_jsx(ProgressContainer, {
+      children: loading && /*#__PURE__*/_jsx(LinearProgress, {
         className: "toolbar-progress"
       })
     })]
   });
 }
 CustomToolbar.propTypes = {
-  data: _propTypes.default.array,
-  options: _propTypes.default.object.isRequired,
-  components: _propTypes.default.object,
-  columns: _propTypes.default.array.isRequired,
-  filterList: _propTypes.default.array,
-  filterData: _propTypes.default.array,
-  filterUpdate: _propTypes.default.func.isRequired,
-  resetFilters: _propTypes.default.func.isRequired,
-  updateFilterByType: _propTypes.default.func.isRequired,
-  toggleViewColumn: _propTypes.default.func.isRequired,
-  updateColumns: _propTypes.default.func.isRequired,
-  title: _propTypes.default.any,
-  searchText: _propTypes.default.any,
-  searchTextUpdate: _propTypes.default.func.isRequired,
-  searchClose: _propTypes.default.func.isRequired,
-  tableRef: _propTypes.default.func.isRequired
+  data: PropTypes.array,
+  options: PropTypes.object.isRequired,
+  components: PropTypes.object,
+  columns: PropTypes.array.isRequired,
+  filterList: PropTypes.array,
+  filterData: PropTypes.array,
+  filterUpdate: PropTypes.func.isRequired,
+  resetFilters: PropTypes.func.isRequired,
+  updateFilterByType: PropTypes.func.isRequired,
+  toggleViewColumn: PropTypes.func.isRequired,
+  updateColumns: PropTypes.func.isRequired,
+  title: PropTypes.any,
+  searchText: PropTypes.any,
+  searchTextUpdate: PropTypes.func.isRequired,
+  searchClose: PropTypes.func.isRequired,
+  tableRef: PropTypes.func.isRequired
 };
 CustomToolbar.defaultProps = {
   data: [],
@@ -341,5 +326,71 @@ CustomToolbar.defaultProps = {
   title: '',
   searchText: null
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 56px;\n  .custom-toobar-title {\n    position: relative;\n    flex: 1;\n    font-size: 18px;\n    font-weight: 800;\n    height: 56px;\n    transition: all ease 0.3s;\n    &-inner {\n      line-height: 56px;\n      width: 100%;\n      height: 56px;\n      position: absolute;\n      left: 0;\n      top: 0;\n      span {\n        display: inline-block;\n        max-width: 100%;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    }\n  }\n  .custom-toobar-btns {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &.toobar-btns-disabled {\n      position: relative;\n      opacity: 0.5;\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n    .custom-toolbar-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 24px;\n      height: 24px;\n      font-size: 20px;\n      overflow: hidden;\n    }\n  }\n  .toobar-title-hidden {\n    opacity: 0;\n    cursor: none;\n  }\n"])));
-const ProgressContainer = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  .toolbar-progress {\n    height: 2px;\n  }\n"])));
+const Container = styled('div')`
+  display: flex;
+  align-items: center;
+  height: 56px;
+  .custom-toobar-title {
+    position: relative;
+    flex: 1;
+    font-size: 18px;
+    font-weight: 800;
+    height: 56px;
+    transition: all ease 0.3s;
+    &-inner {
+      line-height: 56px;
+      width: 100%;
+      height: 56px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      span {
+        display: inline-block;
+        max-width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+  .custom-toobar-btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.toobar-btns-disabled {
+      position: relative;
+      opacity: 0.5;
+      &:after {
+        position: absolute;
+        display: block;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        content: '';
+        cursor: not-allowed;
+      }
+    }
+    .custom-toolbar-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+      overflow: hidden;
+    }
+  }
+  .toobar-title-hidden {
+    opacity: 0;
+    cursor: none;
+  }
+`;
+const ProgressContainer = styled('div')`
+  width: 100%;
+  height: 2px;
+  .toolbar-progress {
+    height: 2px;
+  }
+`;

package/lib/Datatable/DatatableContext.js

@@ -1,26 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatatableProvider = DatatableProvider;
-exports.useDatatableContext = useDatatableContext;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const DatatableContext = /*#__PURE__*/(0, _react.createContext)({});
+import { createContext, useContext, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DatatableContext = /*#__PURE__*/createContext({});
 const {
   Provider
 } = DatatableContext;
 
 // eslint-disable-next-line react/prop-types
-function DatatableProvider(_ref) {
-  let {
-    children
-  } = _ref;
-  const [customButtons, setCustomButtons] = (0, _react.useState)([]);
-  const [loading, setLoading] = (0, _react.useState)(false);
-  const [disabled, setDisabled] = (0, _react.useState)(false);
-  const [filterLabel, setFilterLabel] = (0, _react.useState)('Filter');
+function DatatableProvider({
+  children
+}) {
+  const [customButtons, setCustomButtons] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const [filterLabel, setFilterLabel] = useState('Filter');
   const value = {
     customButtons,
     setCustomButtons,
@@ -31,11 +23,12 @@ function DatatableProvider(_ref) {
     disabled,
     setDisabled
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+  return /*#__PURE__*/_jsx(Provider, {
     value: value,
     children: children
   });
 }
 function useDatatableContext() {
-  return (0, _react.useContext)(DatatableContext);
-}
+  return useContext(DatatableContext);
+}
+export { DatatableProvider, useDatatableContext };