argous 1.2.247 → 1.3.3

package/dist/components/ArgousComplexTableBody/ArgousComplexTableBody.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -44,66 +54,76 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomTooltip = void 0;
 var ArgousComplexTable_1 = require("../ArgousComplexTable/ArgousComplexTable");
-var core_1 = require("@material-ui/core");
-var clsx_1 = __importDefault(require("clsx"));
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var clsx_1 = require("clsx");
 var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var md_1 = require("react-icons/md");
-var dist_1 = require("react-trello/dist/");
-var useStyles = (0, core_1.makeStyles)(function (theme) { return ({
-    dragHandle: {
-        cursor: 'n-resize'
-    },
-    hover: {
-        '&:hover': {
-            backgroundColor: (0, core_1.alpha)(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
-        }
-    },
-    open: {
-        backgroundColor: (0, core_1.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-        '&:hover': {
-            backgroundColor: (0, core_1.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity * 2),
-        }
-    },
-    semDados: {
-        padding: theme.spacing(1),
-        paddingLeft: theme.spacing(2),
-        fontSize: '1rem',
-    },
-    group: {
-        '&>td': {
-            padding: '0px',
-            // '&:hover':{
-            //   backgroundColor: theme.palette.action.selected
-            // }
-        }
-    },
-    loading: {
-        textAlign: 'center',
-        padding: '7px'
-    },
-    ghost: {
-        borderBottom: '1px solid #0000',
-        userSelect: 'none',
-        '&:hover': {
-            backgroundColor: '#0000 !important'
-        }
-    },
-    tableCell: {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
-    }
-}); });
+var DragAndDrop_1 = require("./DragAndDrop");
+var classes = {
+    dragHandle: 'argous-complex-table-body-drag-handle',
+    hover: 'argous-complex-table-body-hover',
+    open: 'argous-complex-table-body-open',
+    semDados: 'argous-complex-table-body-sem-dados',
+    group: 'argous-complex-table-body-group',
+    loading: 'argous-complex-table-body-loading',
+    ghost: 'argous-complex-table-body-ghost',
+    tableCell: 'argous-complex-table-body-table-cell',
+};
+var tableBodyStyles = function (theme) {
+    var _a;
+    return (_a = {},
+        _a[".".concat(classes.dragHandle)] = {
+            cursor: 'n-resize'
+        },
+        _a[".".concat(classes.hover)] = {
+            '&:hover': {
+                backgroundColor: (0, styles_1.alpha)(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
+            }
+        },
+        _a[".".concat(classes.open)] = {
+            backgroundColor: (0, styles_1.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+            '&:hover': {
+                backgroundColor: (0, styles_1.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity * 2),
+            }
+        },
+        _a[".".concat(classes.semDados)] = {
+            padding: theme.spacing(1),
+            paddingLeft: theme.spacing(2),
+            fontSize: '1rem',
+        },
+        _a[".".concat(classes.group)] = {
+            '&>td': {
+                padding: '0px',
+                // '&:hover':{
+                //   backgroundColor: theme.palette.action.selected
+                // }
+            }
+        },
+        _a[".".concat(classes.loading)] = {
+            textAlign: 'center',
+            padding: '7px'
+        },
+        _a[".".concat(classes.ghost)] = {
+            borderBottom: '1px solid #0000',
+            userSelect: 'none',
+            '&:hover': {
+                backgroundColor: '#0000 !important'
+            }
+        },
+        _a[".".concat(classes.tableCell)] = {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis'
+        },
+        _a);
+};
 var ArgousComplexTableBody = (0, react_1.memo)(function (_a) {
     var children = _a.children, line = _a.line, lineStyle = _a.lineStyle, handleOpenClose = _a.handleOpenClose, lineClass = _a.lineClass, enableCheck = _a.enableCheck, disableCheckIf = _a.disableCheckIf, columnStyles = _a.columnStyles, head = _a.head, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, indexToSelect = _a.indexToSelect, open = _a.open, dadosMostrados = _a.dadosMostrados, columnOptions = _a.columnOptions, lineTitle = _a.lineTitle, customKey = _a.customKey, columnProps = _a.columnProps, rowProps = _a.rowProps, enableDrag = _a.enableDrag, onDrop = _a.onDrop;
-    var classes = useStyles();
     var _b = (0, react_1.useContext)(ArgousComplexTable_1.TableContext), lista = _b.lista, selected = _b.selected, dispatch = _b.dispatch, loading = _b.loading;
     var handleClick = function (name) {
         var selectedIndex = selected.indexOf(name);
@@ -127,49 +147,51 @@ var ArgousComplexTableBody = (0, react_1.memo)(function (_a) {
         }
         return coluna;
     };
-    return (react_1.default.createElement(dist_1.Container, { dragHandleSelector: ".".concat(classes.dragHandle), onDrop: onDrop, render: function (containerRef) {
-            var _a;
-            return (react_1.default.createElement(core_1.TableBody, { innerRef: containerRef }, loading ? (react_1.default.createElement(core_1.TableRow, null,
-                react_1.default.createElement(core_1.TableCell, { className: classes.loading, colSpan: (dadosMostrados === null || dadosMostrados === void 0 ? void 0 : dadosMostrados.length) && ((_a = line(dadosMostrados[0])) === null || _a === void 0 ? void 0 : _a.length) + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0) },
-                    react_1.default.createElement(core_1.CircularProgress, { disableShrink: true })))) : dadosMostrados.length ? dadosMostrados.map(function (linha, i) {
-                var isItemSelected = isSelected(linha[indexToSelect]);
-                var isItemOpen = i === open;
-                var ghostRow = ((0, lodash_1.isArray)(linha)) ? !linha.some(function (value) { return !!value; }) : false;
-                var _a = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {}, title = _a.title, rowProperties = __rest(_a, ["title"]);
-                return react_1.default.createElement(dist_1.Draggable, { key: customKey ? lista[i][customKey] : i, render: function (draggableRef) {
-                        var _a, _b;
-                        var _c;
-                        return (
-                        //TODO criar proprio draggable pois esse remove classes do filho
-                        react_1.default.createElement(react_1.Fragment, null,
-                            react_1.default.createElement(exports.CustomTooltip, { title: (ghostRow) ? '' : (lineTitle || title) },
-                                react_1.default.createElement(core_1.TableRow, __assign({ component: dist_1.Draggable }, rowProperties, { className: (0, clsx_1.default)((_a = {},
-                                        _a[classes.hover] = isItemSelected,
-                                        _a[classes.open] = (isItemOpen && !!children),
-                                        _a[classes.ghost] = ghostRow,
-                                        _a), (ghostRow) ? '' : lineClass(line(linha), linha, i), rowProperties.className), hover: true, role: 'checkbox', tabIndex: -1, selected: isItemSelected, style: (lineStyle && !ghostRow) ? lineStyle(linha, line(linha), i) : undefined, onClick: (ghostRow) ? undefined : (onClick) ? function (e) { return onClick(e, linha, line(linha), i); } : (children) ? function () { return handleOpenClose(i); } : undefined, onDoubleClick: (ghostRow) ? undefined : (onDoubleClick) ? function (e) { return onDoubleClick(e, linha, line(linha), i); } : undefined, innerRef: draggableRef }),
-                                    enableDrag && react_1.default.createElement(core_1.TableCell, { padding: 'checkbox' },
-                                        react_1.default.createElement(core_1.Tooltip, { title: 'Arrastar' },
-                                            react_1.default.createElement(core_1.IconButton, { size: 'small', className: classes.dragHandle },
-                                                react_1.default.createElement(md_1.MdDragHandle, null)))),
-                                    (enableCheck) && (react_1.default.createElement(core_1.TableCell, { padding: 'checkbox', className: (0, clsx_1.default)((_b = {}, _b[classes.ghost] = ghostRow, _b)) }, (!ghostRow) && (react_1.default.createElement(core_1.Checkbox, { checked: isItemSelected, disabled: (disableCheckIf) && disableCheckIf(linha, line(linha), i), onClick: function (event) {
-                                            event.stopPropagation();
-                                            handleClick(linha[indexToSelect]);
-                                        } })))),
-                                    (0, lodash_1.isArray)(line(linha)) && line(linha).map(function (coluna, j) { return ((ghostRow) ? (react_1.default.createElement(core_1.TableCell, { key: j, className: (0, clsx_1.default)(classes.tableCell, classes.ghost) }, "\u00A0")) : (react_1.default.createElement(core_1.TableCell, __assign({ key: j }, columnProps(j, coluna, linha, line(linha)), { style: columnStyles ? columnStyles[j] : undefined, className: classes.tableCell }), getCellContent(coluna, dadosMostrados[i], j, i)))); }))),
-                            children && (react_1.default.createElement(core_1.TableRow, { className: classes.group },
-                                react_1.default.createElement(core_1.TableCell, { colSpan: (dadosMostrados === null || dadosMostrados === void 0 ? void 0 : dadosMostrados.length) && ((_c = line(dadosMostrados[0])) === null || _c === void 0 ? void 0 : _c.length) + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0), style: { padding: open === i ? 8 : 0 }, className: 'argous-complex-table-group-cell' },
-                                    react_1.default.createElement(core_1.Collapse, { in: open === i, mountOnEnter: true, unmountOnExit: true }, typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children))))));
-                    } });
-            }) : react_1.default.createElement(core_1.TableRow, null,
-                react_1.default.createElement(core_1.Typography, { className: classes.semDados, component: 'td', variant: 'h6', colSpan: head.length + (enableCheck ? 1 : 0) }, "Nenhum dado a ser exibido"))));
-        } }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.GlobalStyles, { styles: tableBodyStyles }),
+        react_1.default.createElement(DragAndDrop_1.Container, { dragHandleSelector: ".".concat(classes.dragHandle), onDrop: onDrop, render: function (containerRef) {
+                var _a;
+                return (react_1.default.createElement(material_1.TableBody, { ref: containerRef }, loading ? (react_1.default.createElement(material_1.TableRow, null,
+                    react_1.default.createElement(material_1.TableCell, { className: classes.loading, colSpan: (dadosMostrados === null || dadosMostrados === void 0 ? void 0 : dadosMostrados.length) && ((_a = line(dadosMostrados[0])) === null || _a === void 0 ? void 0 : _a.length) + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0) },
+                        react_1.default.createElement(material_1.CircularProgress, { disableShrink: true })))) : dadosMostrados.length ? dadosMostrados.map(function (linha, i) {
+                    var isItemSelected = isSelected(linha[indexToSelect]);
+                    var isItemOpen = i === open;
+                    var ghostRow = ((0, lodash_1.isArray)(linha)) ? !linha.some(function (value) { return !!value; }) : false;
+                    var _a = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {}, title = _a.title, rowProperties = __rest(_a, ["title"]);
+                    return (react_1.default.createElement(DragAndDrop_1.Draggable, { key: customKey ? lista[i][customKey] : i, render: function (draggableRef) {
+                            var _a, _b;
+                            var _c;
+                            return (
+                            //TODO criar proprio draggable pois esse remove classes do filho
+                            (react_1.default.createElement(react_1.Fragment, null,
+                                react_1.default.createElement(exports.CustomTooltip, { title: (ghostRow) ? '' : (lineTitle || title) },
+                                    react_1.default.createElement(material_1.TableRow, __assign({ component: DragAndDrop_1.Draggable }, rowProperties, { className: (0, clsx_1.clsx)((_a = {},
+                                            _a[classes.hover] = isItemSelected,
+                                            _a[classes.open] = (isItemOpen && !!children),
+                                            _a[classes.ghost] = ghostRow,
+                                            _a), (ghostRow) ? '' : lineClass(line(linha), linha, i), rowProperties.className), hover: true, role: 'checkbox', tabIndex: -1, selected: isItemSelected, style: (lineStyle && !ghostRow) ? lineStyle(linha, line(linha), i) : undefined, onClick: (ghostRow) ? undefined : (onClick) ? function (e) { return onClick(e, linha, line(linha), i); } : (children) ? function () { return handleOpenClose(i); } : undefined, onDoubleClick: (ghostRow) ? undefined : (onDoubleClick) ? function (e) { return onDoubleClick(e, linha, line(linha), i); } : undefined, ref: draggableRef }),
+                                        enableDrag && react_1.default.createElement(material_1.TableCell, { padding: 'checkbox' },
+                                            react_1.default.createElement(material_1.Tooltip, { title: 'Arrastar' },
+                                                react_1.default.createElement(material_1.IconButton, { size: 'small', className: classes.dragHandle },
+                                                    react_1.default.createElement(md_1.MdDragHandle, null)))),
+                                        (enableCheck) && (react_1.default.createElement(material_1.TableCell, { padding: 'checkbox', className: (0, clsx_1.clsx)((_b = {}, _b[classes.ghost] = ghostRow, _b)) }, (!ghostRow) && (react_1.default.createElement(material_1.Checkbox, { checked: isItemSelected, disabled: (disableCheckIf) && disableCheckIf(linha, line(linha), i), onClick: function (event) {
+                                                event.stopPropagation();
+                                                handleClick(linha[indexToSelect]);
+                                            } })))),
+                                        (0, lodash_1.isArray)(line(linha)) && line(linha).map(function (coluna, j) { return ((ghostRow) ? (react_1.default.createElement(material_1.TableCell, { key: j, className: (0, clsx_1.clsx)(classes.tableCell, classes.ghost) }, "\u00A0")) : (react_1.default.createElement(material_1.TableCell, __assign({ key: j }, columnProps(j, coluna, linha, line(linha)), { style: columnStyles ? columnStyles[j] : undefined, className: classes.tableCell }), getCellContent(coluna, dadosMostrados[i], j, i)))); }))),
+                                children && (react_1.default.createElement(material_1.TableRow, { className: classes.group },
+                                    react_1.default.createElement(material_1.TableCell, { colSpan: (dadosMostrados === null || dadosMostrados === void 0 ? void 0 : dadosMostrados.length) && ((_c = line(dadosMostrados[0])) === null || _c === void 0 ? void 0 : _c.length) + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0), style: { padding: open === i ? 8 : 0 }, className: 'argous-complex-table-group-cell' },
+                                        react_1.default.createElement(material_1.Collapse, { in: open === i, mountOnEnter: true, unmountOnExit: true }, typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children)))))));
+                        } }));
+                }) : react_1.default.createElement(material_1.TableRow, null,
+                    react_1.default.createElement(material_1.Typography, { className: classes.semDados, component: 'td', variant: 'h6', colSpan: head.length + (enableCheck ? 1 : 0) }, "Nenhum dado a ser exibido"))));
+            } })));
 });
 exports.default = ArgousComplexTableBody;
 var CustomTooltip = function (_a) {
     var title = _a.title, children = _a.children;
     if (title)
-        return react_1.default.createElement(core_1.Tooltip, { arrow: true, title: title }, children);
+        return react_1.default.createElement(material_1.Tooltip, { arrow: true, title: title }, children);
     return children;
 };
 exports.CustomTooltip = CustomTooltip;

package/dist/components/ArgousComplexTableBody/DragAndDrop.d.ts

@@ -0,0 +1,37 @@
+export class Container extends React.Component<any, any, any> {
+    constructor(props: any);
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    previousContainer: any;
+    container: any;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    setRef: (element: any) => void;
+    containerElement: any;
+    getContainerOptions: () => {};
+    render(): any;
+}
+export namespace Container {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let render: PropTypes.Requireable<(...args: any[]) => any>;
+        let style: PropTypes.Requireable<object>;
+    }
+}
+export class Draggable extends React.Component<any, any, any> {
+    constructor(props: any);
+    constructor(props: any, context: any);
+    render(): React.JSX.Element;
+}
+export namespace Draggable {
+    export namespace propTypes_1 {
+        let children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export { children_1 as children };
+        export let className: PropTypes.Requireable<string>;
+        let render_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { render_1 as render };
+    }
+    export { propTypes_1 as propTypes };
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/ArgousComplexTableBody/DragAndDrop.js

@@ -0,0 +1,156 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Draggable = exports.Container = void 0;
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var trello_smooth_dnd_1 = __importStar(require("trello-smooth-dnd"));
+trello_smooth_dnd_1.default.dropHandler = trello_smooth_dnd_1.dropHandlers.reactDropHandler().handler;
+trello_smooth_dnd_1.default.wrapChild = function (child) { return child; };
+var Container = /** @class */ (function (_super) {
+    __extends(Container, _super);
+    function Container() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.setRef = function (element) {
+            _this.containerElement = element;
+        };
+        _this.getContainerOptions = function () {
+            var functionProps = {};
+            var callbacks = [
+                'onDragStart',
+                'onDragEnd',
+                'onDrop',
+                'getChildPayload',
+                'shouldAnimateDrop',
+                'shouldAcceptDrop',
+                'onDragEnter',
+                'onDragLeave',
+                'render',
+                'onDropReady',
+                'getGhostParent'
+            ];
+            callbacks.forEach(function (callback) {
+                if (_this.props[callback]) {
+                    functionProps[callback] = function () {
+                        var _a;
+                        var parameters = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            parameters[_i] = arguments[_i];
+                        }
+                        return (_a = _this.props)[callback].apply(_a, parameters);
+                    };
+                }
+            });
+            return __assign(__assign({}, _this.props), functionProps);
+        };
+        return _this;
+    }
+    Container.prototype.componentDidMount = function () {
+        this.previousContainer = this.containerElement;
+        this.container = (0, trello_smooth_dnd_1.default)(this.containerElement, this.getContainerOptions());
+    };
+    Container.prototype.componentDidUpdate = function () {
+        if (this.previousContainer && this.previousContainer !== this.containerElement) {
+            this.container.dispose();
+            this.container = (0, trello_smooth_dnd_1.default)(this.containerElement, this.getContainerOptions());
+            this.previousContainer = this.containerElement;
+        }
+    };
+    Container.prototype.componentWillUnmount = function () {
+        this.container.dispose();
+    };
+    Container.prototype.render = function () {
+        if (this.props.render) {
+            return this.props.render(this.setRef);
+        }
+        return react_1.default.createElement("div", { style: this.props.style, ref: this.setRef }, this.props.children);
+    };
+    return Container;
+}(react_1.Component));
+exports.Container = Container;
+Container.propTypes = {
+    children: prop_types_1.default.node,
+    render: prop_types_1.default.func,
+    style: prop_types_1.default.object
+};
+var Draggable = /** @class */ (function (_super) {
+    __extends(Draggable, _super);
+    function Draggable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Draggable.prototype.render = function () {
+        if (this.props.render) {
+            return react_1.default.cloneElement(this.props.render(), { className: trello_smooth_dnd_1.constants.wrapperClass });
+        }
+        var className = "".concat(this.props.className ? "".concat(this.props.className, " ") : '').concat(trello_smooth_dnd_1.constants.wrapperClass);
+        return react_1.default.createElement("div", __assign({}, this.props, { className: className }), this.props.children);
+    };
+    return Draggable;
+}(react_1.Component));
+exports.Draggable = Draggable;
+Draggable.propTypes = {
+    children: prop_types_1.default.node,
+    className: prop_types_1.default.string,
+    render: prop_types_1.default.func
+};

package/dist/components/ArgousComplexTableHead/ArgousComplexTableHead.js

@@ -15,46 +15,61 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var ArgousComplexTable_1 = require("../ArgousComplexTable/ArgousComplexTable");
-var core_1 = require("@material-ui/core");
-var clsx_1 = __importDefault(require("clsx"));
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var clsx_1 = require("clsx");
 var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
-var useStyles = (0, core_1.makeStyles)(function (theme) { return ({
-    highlight: {
-        color: theme.palette.type === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
-        backgroundColor: (0, core_1.alpha)(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
-    },
-    lighthighlight: {
-        background: (0, core_1.alpha)(theme.palette.secondary.main, theme.palette.action.selectedOpacity)
-    },
-    visuallyHidden: {
-        border: 0,
-        clip: 'rect(0 0 0 0)',
-        height: 1,
-        margin: -1,
-        overflow: 'hidden',
-        padding: 0,
-        position: 'absolute',
-        top: 20,
-        width: 1,
-    }
-}); });
+var classes = {
+    highlight: 'argous-complex-table-head-highlight',
+    lighthighlight: 'argous-complex-table-head-light-highlight',
+    visuallyHidden: 'argous-complex-table-head-visually-hidden',
+};
+var tableHeadStyles = function (theme) {
+    var _a;
+    return (_a = {},
+        _a[".".concat(classes.highlight)] = {
+            color: theme.palette.mode === 'light' ? theme.palette.secondary.main : theme.palette.text.primary,
+            backgroundColor: (0, styles_1.alpha)(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
+        },
+        _a[".".concat(classes.lighthighlight)] = {
+            background: (0, styles_1.alpha)(theme.palette.secondary.main, theme.palette.action.selectedOpacity)
+        },
+        _a[".".concat(classes.visuallyHidden)] = {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            height: 1,
+            margin: -1,
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            top: 20,
+            width: 1,
+        },
+        _a);
+};
 var ArgousComplexTableHead = (0, react_1.memo)(function (_a) {
     var _b;
     var numSelected = _a.numSelected, rowCount = _a.rowCount, head = _a.head, enableCheck = _a.enableCheck, disableCheckIf = _a.disableCheckIf, line = _a.line, size = _a.size, headerColumnStyles = _a.headerColumnStyles, disableSorting = _a.disableSorting, ordCols = _a.ordCols, cortaDados = _a.cortaDados, enableDrag = _a.enableDrag;
-    var classes = useStyles();
     var _c = (0, react_1.useContext)(ArgousComplexTable_1.TableContext), selected = _c.selected, order = _c.order, orderBy = _c.orderBy, dispatch = _c.dispatch, lista = _c.lista, indexToSelect = _c.indexToSelect, method = _c.method, externalCtrlPgn = _c.externalCtrlPgn;
     var handleRequestSort = function (property) {
         var isAsc = orderBy === property && order === 'asc';
@@ -74,19 +89,21 @@ var ArgousComplexTableHead = (0, react_1.memo)(function (_a) {
         else
             dispatch({ type: 'setSelected', value: [] });
     };
-    return (react_1.default.createElement(core_1.TableHead, null,
-        react_1.default.createElement(core_1.TableRow, { className: (0, clsx_1.default)((_b = {},
-                _b[classes.highlight] = (((numSelected === rowCount) || (numSelected === length) || (numSelected === (lista === null || lista === void 0 ? void 0 : lista.length))) && (rowCount && length)),
-                _b[classes.lighthighlight] = ((numSelected > 0) && ((method || externalCtrlPgn) ? (numSelected < (lista === null || lista === void 0 ? void 0 : lista.length)) : (numSelected < rowCount))),
-                _b)) },
-            enableDrag && react_1.default.createElement(core_1.TableCell, { padding: 'checkbox' }),
-            enableCheck && react_1.default.createElement(core_1.TableCell, { padding: 'checkbox' },
-                react_1.default.createElement(core_1.Checkbox, { disabled: !length, indeterminate: (method || externalCtrlPgn) ? ((numSelected > 0) && (numSelected < (lista === null || lista === void 0 ? void 0 : lista.length))) : ((numSelected > 0) && (numSelected < length)), checked: (method || externalCtrlPgn) ? ((rowCount > 0) && ((numSelected === rowCount) || (numSelected === (lista === null || lista === void 0 ? void 0 : lista.length)))) : ((rowCount > 0) && length && (numSelected === length)), onChange: handleSelectAllClick })),
-            (0, lodash_1.isArray)(head) && head.map(function (item, i) { return (react_1.default.createElement(core_1.TableCell, { key: i, style: headerColumnStyles ? headerColumnStyles[i] : undefined }, (disableSorting[i] || (ordCols && !ordCols[i])) ?
-                item
-                :
-                    react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === i, direction: orderBy === i ? order : 'asc', onClick: function () { return handleRequestSort(i); } },
-                        item,
-                        orderBy === i ? (react_1.default.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))); }))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.GlobalStyles, { styles: tableHeadStyles }),
+        react_1.default.createElement(material_1.TableHead, null,
+            react_1.default.createElement(material_1.TableRow, { className: (0, clsx_1.clsx)((_b = {},
+                    _b[classes.highlight] = (((numSelected === rowCount) || (numSelected === length) || (numSelected === (lista === null || lista === void 0 ? void 0 : lista.length))) && (rowCount && length)),
+                    _b[classes.lighthighlight] = ((numSelected > 0) && ((method || externalCtrlPgn) ? (numSelected < (lista === null || lista === void 0 ? void 0 : lista.length)) : (numSelected < rowCount))),
+                    _b)) },
+                enableDrag && react_1.default.createElement(material_1.TableCell, { padding: 'checkbox' }),
+                enableCheck && react_1.default.createElement(material_1.TableCell, { padding: 'checkbox' },
+                    react_1.default.createElement(material_1.Checkbox, { disabled: !length, indeterminate: (method || externalCtrlPgn) ? ((numSelected > 0) && (numSelected < (lista === null || lista === void 0 ? void 0 : lista.length))) : ((numSelected > 0) && (numSelected < length)), checked: (method || externalCtrlPgn) ? ((rowCount > 0) && ((numSelected === rowCount) || (numSelected === (lista === null || lista === void 0 ? void 0 : lista.length)))) : ((rowCount > 0) && length && (numSelected === length)), onChange: handleSelectAllClick })),
+                (0, lodash_1.isArray)(head) && head.map(function (item, i) { return (react_1.default.createElement(material_1.TableCell, { key: i, style: headerColumnStyles ? headerColumnStyles[i] : undefined }, (disableSorting[i] || (ordCols && !ordCols[i])) ?
+                    item
+                    :
+                        react_1.default.createElement(material_1.TableSortLabel, { active: orderBy === i, direction: orderBy === i ? order : 'asc', onClick: function () { return handleRequestSort(i); } },
+                            item,
+                            orderBy === i ? (react_1.default.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null))); })))));
 });
 exports.default = ArgousComplexTableHead;