@vendorflow/components 2.1.0 → 3.0.4

package/lib/components/material-ui/ColorPicker/ColorPicker.js

@@ -1,86 +0,0 @@
-"use strict";
-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 __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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsxRuntime classic */
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
-var lodash_1 = require("lodash");
-var react_2 = require("react");
-var react_color_palette_1 = require("react-color-palette");
-var material_1 = require("@mui/material");
-var styles_1 = require("./styles");
-var InputGroup_1 = __importDefault(require("../InputGroup/InputGroup"));
-function ColorPicker(_a) {
-    var name = _a.name, value = _a.value, onChange = _a.onChange, restOfProps = __rest(_a, ["name", "value", "onChange"]);
-    var _b = __read((0, react_2.useState)(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
-    var _c = __read((0, react_color_palette_1.useColor)('hex', value || '#000'), 2), color = _c[0], setColor = _c[1];
-    var id = (0, react_2.useMemo)(function () { return "color-picker-popover-" + (0, lodash_1.random)(0, 9999999); }, []);
-    var open = !!anchorEl;
-    (0, react_2.useEffect)(function () {
-        if (value && value != color.hex) {
-            setColor((0, react_color_palette_1.toColor)('hex', value));
-        }
-    }, [value, setColor]);
-    var debouncedOnChange = (0, react_2.useCallback)((0, lodash_1.debounce)(function (value) {
-        if (onChange) {
-            // @ts-ignore
-            onChange({ target: { name: name, value: value } });
-        }
-    }, 300), [onChange, name]);
-    function handleColorChange(color) {
-        setColor(color);
-        debouncedOnChange(color.hex);
-    }
-    return ((0, react_1.jsx)(react_2.Fragment, null,
-        (0, react_1.jsx)(InputGroup_1.default, __assign({}, restOfProps, { "area-describedby": id, onClick: function (evt) {
-                setAnchorEl(evt.currentTarget);
-            }, onFocus: function (evt) {
-                setAnchorEl(evt.currentTarget);
-            }, value: color.hex, onChange: onChange })),
-        (0, react_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, disableAutoFocus: true, disableEnforceFocus: true, onClose: function () { return setAnchorEl(null); } },
-            (0, react_1.jsx)("div", { css: styles_1.colorPaletteStyles },
-                (0, react_1.jsx)(react_color_palette_1.ColorPicker, { width: 280, height: 200, color: color, 
-                    // @ts-ignore
-                    onChange: handleColorChange, hideHSV: true, hideRGB: true, alpha: false })))));
-}
-exports.default = ColorPicker;

package/lib/components/material-ui/ColorPicker/ColorPicker.story.js

@@ -1,47 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 (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 __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var ColorPicker_1 = __importDefault(require("./ColorPicker"));
-function ColorPicker() {
-    var _a = __read((0, react_1.useState)(null), 2), value = _a[0], setValue = _a[1];
-    return react_1.default.createElement(ColorPicker_1.default, { label: "Color Picker", value: value, onChange: function (evt) { return setValue(evt.target.value); } });
-}
-exports.default = ColorPicker;

package/lib/components/material-ui/ColorPicker/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var ColorPicker_1 = require("./ColorPicker");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });

package/lib/components/material-ui/ColorPicker/styles.js

@@ -1,24 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorPaletteStyles = void 0;
-var react_1 = require("@emotion/react");
-var Colors = {
-    light: {
-        background: '#ffffff',
-        inputText: '#111111',
-        inputBorder: 'rgba(0, 0, 0, 0.1)',
-        inputLabel: '#717171',
-    },
-    dark: {
-        background: '#181818',
-        inputText: '#f3f3f3',
-        inputBorder: 'rgba(255, 255, 255, 0.1)',
-        inputLabel: '#999999',
-    },
-};
-exports.colorPaletteStyles = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rcp {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    border-radius: 10px;\n    box-sizing: border-box;\n  }\n\n  .rcp.rcp-light {\n    background-color: ", ";\n  }\n\n  .rcp.rcp-dark {\n    background-color: ", ";\n  }\n\n  .rcp-body {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 20px;\n    width: 100%;\n    padding: 20px;\n  }\n\n  .rcp-saturation {\n    position: relative;\n    width: 100%;\n    background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n    border-radius: 10px 10px 0 0;\n    user-select: none;\n  }\n\n  .rcp-saturation-cursor {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border: 2px solid #ffffff;\n    border-radius: 50%;\n    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n    box-sizing: border-box;\n    transform: translate(-10px, -10px);\n  }\n\n  .rcp-hue {\n    position: relative;\n    width: 100%;\n    height: 12px;\n    background-image: linear-gradient(\n      to right,\n      rgb(255, 0, 0),\n      rgb(255, 255, 0),\n      rgb(0, 255, 0),\n      rgb(0, 255, 255),\n      rgb(0, 0, 255),\n      rgb(255, 0, 255),\n      rgb(255, 0, 0)\n    );\n    border-radius: 10px;\n    user-select: none;\n  }\n\n  .rcp-hue-cursor {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border: 2px solid #ffffff;\n    border-radius: 50%;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n    box-sizing: border-box;\n    transform: translate(-10px, -4px);\n  }\n\n  .rcp-alpha {\n    position: relative;\n    width: 100%;\n    height: 12px;\n    border-radius: 10px;\n    user-select: none;\n  }\n\n  .rcp-alpha-cursor {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border: 2px solid #ffffff;\n    border-radius: 50%;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n    box-sizing: border-box;\n    transform: translate(-10px, -4px);\n  }\n\n  .rcp-fields {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 10px;\n    width: 100%;\n  }\n\n  .rcp-fields-element {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n  }\n\n  .hex-element {\n    grid-row: 1;\n  }\n\n  .hex-element:nth-of-type(3n) {\n    grid-column: 1 / -1;\n  }\n\n  .rcp-fields-element-input {\n    width: 100%;\n    font-size: 14px;\n    font-weight: 600;\n    text-align: center;\n    background: none;\n    border: 2px solid;\n    border-radius: 5px;\n    box-sizing: border-box;\n    outline: none;\n    padding: 10px;\n  }\n\n  .rcp-light .rcp-fields-element-input {\n    color: ", ";\n    border-color: ", ";\n  }\n\n  .rcp-dark .rcp-fields-element-input {\n    color: ", ";\n    border-color: ", ";\n  }\n\n  .rcp-fields-element-label {\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n  }\n\n  .rcp-light .rcp-fields-element-label {\n    color: ", ";\n  }\n\n  .rcp-dark .rcp-fields-element-label {\n    color: ", ";\n  }\n"], ["\n  .rcp {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    border-radius: 10px;\n    box-sizing: border-box;\n  }\n\n  .rcp.rcp-light {\n    background-color: ", ";\n  }\n\n  .rcp.rcp-dark {\n    background-color: ", ";\n  }\n\n  .rcp-body {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 20px;\n    width: 100%;\n    padding: 20px;\n  }\n\n  .rcp-saturation {\n    position: relative;\n    width: 100%;\n    background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n    border-radius: 10px 10px 0 0;\n    user-select: none;\n  }\n\n  .rcp-saturation-cursor {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border: 2px solid #ffffff;\n    border-radius: 50%;\n    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n    box-sizing: border-box;\n    transform: translate(-10px, -10px);\n  }\n\n  .rcp-hue {\n    position: relative;\n    width: 100%;\n    height: 12px;\n    background-image: linear-gradient(\n      to right,\n      rgb(255, 0, 0),\n      rgb(255, 255, 0),\n      rgb(0, 255, 0),\n      rgb(0, 255, 255),\n      rgb(0, 0, 255),\n      rgb(255, 0, 255),\n      rgb(255, 0, 0)\n    );\n    border-radius: 10px;\n    user-select: none;\n  }\n\n  .rcp-hue-cursor {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border: 2px solid #ffffff;\n    border-radius: 50%;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n    box-sizing: border-box;\n    transform: translate(-10px, -4px);\n  }\n\n  .rcp-alpha {\n    position: relative;\n    width: 100%;\n    height: 12px;\n    border-radius: 10px;\n    user-select: none;\n  }\n\n  .rcp-alpha-cursor {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border: 2px solid #ffffff;\n    border-radius: 50%;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n    box-sizing: border-box;\n    transform: translate(-10px, -4px);\n  }\n\n  .rcp-fields {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 10px;\n    width: 100%;\n  }\n\n  .rcp-fields-element {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n  }\n\n  .hex-element {\n    grid-row: 1;\n  }\n\n  .hex-element:nth-of-type(3n) {\n    grid-column: 1 / -1;\n  }\n\n  .rcp-fields-element-input {\n    width: 100%;\n    font-size: 14px;\n    font-weight: 600;\n    text-align: center;\n    background: none;\n    border: 2px solid;\n    border-radius: 5px;\n    box-sizing: border-box;\n    outline: none;\n    padding: 10px;\n  }\n\n  .rcp-light .rcp-fields-element-input {\n    color: ", ";\n    border-color: ", ";\n  }\n\n  .rcp-dark .rcp-fields-element-input {\n    color: ", ";\n    border-color: ", ";\n  }\n\n  .rcp-fields-element-label {\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: uppercase;\n  }\n\n  .rcp-light .rcp-fields-element-label {\n    color: ", ";\n  }\n\n  .rcp-dark .rcp-fields-element-label {\n    color: ", ";\n  }\n"])), Colors.light.background, Colors.dark.background, Colors.light.inputText, Colors.light.inputBorder, Colors.dark.inputText, Colors.dark.inputBorder, Colors.light.inputLabel, Colors.dark.inputLabel);
-var templateObject_1;

package/lib/components/material-ui/DataTable/AppliedFilters.d.ts

@@ -1,12 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { Filters, UseFiltersInstanceProps } from 'react-table';
-import { SimpleMap } from '../../../types/Internal.types';
-interface Props<D extends object> {
-    columnNameById: SimpleMap<string>;
-    filters: Filters<D>;
-    setFilter: UseFiltersInstanceProps<D>['setFilter'];
-}
-export default function AppliedFilters<D extends object>({ columnNameById, filters, setFilter }: Props<D>): jsx.JSX.Element | null;
-export {};

package/lib/components/material-ui/DataTable/AppliedFilters.js

@@ -1,26 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsxRuntime classic */
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
-var material_1 = require("@mui/material");
-var SingleSelectFilter_1 = require("./FilterTool/Filters/SingleSelectFilter");
-var PADDING = 24;
-function AppliedFilters(_a) {
-    var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
-    if (!filters.length) {
-        return null;
-    }
-    return ((0, react_1.jsx)(material_1.Stack, { direction: "row", overflow: "none", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: calc(100% - ", "px);\n        padding: 8px ", "px;\n        flex-wrap: wrap;\n        gap: 0.25rem 0.25rem;\n      "], ["\n        width: calc(100% - ", "px);\n        padding: 8px ", "px;\n        flex-wrap: wrap;\n        gap: 0.25rem 0.25rem;\n      "])), PADDING * 2, PADDING) }, filters
-        .filter(function (filter) {
-        return (Array.isArray(filter.value) && !!filter.value.length) ||
-            (!Array.isArray(filter.value) && filter.value != null);
-    })
-        .map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
-}
-exports.default = AppliedFilters;
-var templateObject_1;

package/lib/components/material-ui/DataTable/Data.js

@@ -1,42 +0,0 @@
-"use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Data = exports.Columns = void 0;
-var faker_1 = __importDefault(require("faker"));
-var DataTable_1 = require("./DataTable");
-exports.Columns = [
-    {
-        id: 'fullName',
-        Header: 'Full Name',
-        columns: [
-            __assign({ Header: 'First Name', accessor: 'firstName' }, (0, DataTable_1.getColumnFilterConfig)('text')),
-            __assign({ Header: 'Last Name', accessor: 'lastName', filterName: 'Custom LN' }, (0, DataTable_1.getColumnFilterConfig)('multi-select')),
-        ],
-    },
-    __assign(__assign({ Header: 'Age', accessor: 'age', sortType: 'number', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('range')), { width: 100 }),
-    __assign({ Header: 'Occupation', accessor: 'occupation', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
-    __assign({ Header: 'Company', id: 'company', accessor: function (originalRow) { return originalRow.company.name; }, disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
-];
-exports.Data = new Array(20).fill(null).map(function () { return ({
-    id: faker_1.default.datatype.uuid(),
-    firstName: faker_1.default.name.firstName(),
-    lastName: faker_1.default.name.lastName(),
-    age: faker_1.default.datatype.number(60),
-    occupation: faker_1.default.name.jobTitle(),
-    company: {
-        name: faker_1.default.company.companyName(),
-    },
-}); });

package/lib/components/material-ui/DataTable/DataTable.js

@@ -1,363 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 (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 __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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColumnFilterConfig = exports.renderSingleLineCell = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = exports.ACTION_COLUMN_ID = void 0;
-/** @jsxRuntime classic */
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
-var immer_1 = __importDefault(require("immer"));
-var material_1 = require("@mui/material");
-var icons_material_1 = require("@mui/icons-material");
-var react_table_1 = require("react-table");
-var IndeterminateCheckbox_1 = __importStar(require("./TablePieces/IndeterminateCheckbox"));
-var Toolbar_1 = __importDefault(require("./TablePieces/Toolbar"));
-var react_2 = require("react");
-var AppliedFilters_1 = __importDefault(require("./TablePieces/AppliedFilters"));
-var lodash_1 = require("lodash");
-var SingleSelectFilter_1 = __importDefault(require("./FilterTool/Filters/SingleSelectFilter"));
-var MultiSelectFilter_1 = __importDefault(require("./FilterTool/Filters/MultiSelectFilter"));
-var RangeFilter_1 = __importDefault(require("./FilterTool/Filters/RangeFilter"));
-var TextFilter_1 = __importDefault(require("./FilterTool/Filters/TextFilter"));
-var hooks_1 = require("@vendorflow/common/lib/hooks");
-var react_scrollbar_size_1 = __importDefault(require("react-scrollbar-size"));
-var Table_1 = __importDefault(require("./TablePieces/Table"));
-var HeaderCell_1 = __importDefault(require("./TablePieces/HeaderCell"));
-var TableBodyContent_1 = __importDefault(require("./TablePieces/TableBodyContent"));
-exports.ACTION_COLUMN_ID = 'action-column';
-exports.CELL_PADDING = 4;
-var EXPAND_BTN_WIDTH = 24;
-var NO_MATCH_TEXT = 'Sorry, no matching records found';
-function DataTable(_a) {
-    var _b;
-    var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, ExpandedRow = _a.ExpandedRow, restOfProps = __rest(_a, ["title", "labels", "columns", "instance", "options", "renderActions", "renderRowSelectActions", "ExpandedRow"]);
-    var tableHeadRef = (0, react_2.useRef)(null);
-    var tableBodyRef = (0, react_2.useRef)(null);
-    var scrollContainerRef = (0, react_2.useRef)(null);
-    var _c = (0, hooks_1.useMeasure)(), tableBodyMeasureRefCallback = _c.ref, tableBodyContentRect = _c.contentRect;
-    var _d = (0, hooks_1.useMeasure)(), rootRef = _d.ref, rootContentRect = _d.contentRect;
-    var _e = (0, hooks_1.useMeasure)(), toolbarRef = _e.ref, toolbarContentRect = _e.contentRect;
-    var _f = (0, hooks_1.useMeasure)(), paginationRef = _f.ref, paginationContentRect = _f.contentRect;
-    var _g = (0, hooks_1.useHasScrollbar)(), hasScrollbarRefCallback = _g.ref, hasScrollbar = _g.hasScrollbar;
-    var scrollbarWidth = (0, react_scrollbar_size_1.default)().width;
-    var _h = __read((0, react_2.useState)(0), 2), scrollLeft = _h[0], setScrollLeft = _h[1];
-    var _j = (labels || { noMatchLabel: NO_MATCH_TEXT }).noMatchLabel, noMatchLabel = _j === void 0 ? NO_MATCH_TEXT : _j;
-    var _k = options || {}, rowExpandingConfig = _k.rowExpanding, filtersConfig = _k.filters, globalSearchConfig = _k.globalSearch, columnHidingConfig = _k.columnHiding, paginationConfig = _k.pagination, sortingConfig = _k.sorting, tableConfig = _k.table, virtualizeConfig = _k.virtualize;
-    var ExpandedComponent = ExpandedRow || (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.Component) || null;
-    var allColumns = instance.allColumns, getTableProps = instance.getTableProps, gotoPage = instance.gotoPage, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, rows = instance.rows, setAllFilters = instance.setAllFilters, setPageSize = instance.setPageSize, setFilter = instance.setFilter, setGlobalFilter = instance.setGlobalFilter, state = instance.state, totalColumnsWidth = instance.totalColumnsWidth;
-    var pageOptions = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rowsPerPageOptions) || instance.pageOptions;
-    var columnNameById = (0, react_2.useMemo)(function () {
-        var result = {};
-        function addNamesToMap(cols, result) {
-            cols.forEach(function (col, index) {
-                var id = col.id != null ? col.id : typeof col.accessor === 'string' ? col.accessor : null;
-                if (!id) {
-                    throw new Error("Please provide an id for column " + (typeof col.Header === 'string' && !!col.Header ? col.Header : col.name ? col.name : "at index " + index));
-                }
-                if (col.filterName) {
-                    result[id] = col.filterName;
-                }
-                else if (typeof col.Header === 'string') {
-                    result[id] = col.Header;
-                }
-                else if (!col.name) {
-                    throw new Error("Please provide a name for column with id = " + col.id + ".");
-                }
-                else {
-                    result[id] = col.name;
-                }
-                if (Array.isArray(col === null || col === void 0 ? void 0 : col.columns)) {
-                    addNamesToMap(col.columns, result);
-                }
-            });
-        }
-        addNamesToMap(columns, result);
-        return result;
-    }, [columns]);
-    var _l = state, filters = _l.filters, globalFilter = _l.globalFilter, pageIndex = _l.pageIndex, pageSize = _l.pageSize, selectedRowIds = _l.selectedRowIds;
-    var _m = (0, react_2.useMemo)(function () {
-        var hasRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).some(Boolean) : false;
-        var numRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).filter(Boolean).length : 0;
-        return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
-    }, [selectedRowIds]), hasRowsSelected = _m.hasRowsSelected, numRowsSelected = _m.numRowsSelected;
-    var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
-    var containerHeight = (rootContentRect.height || 0) - (toolbarContentRect.height || 0) - (paginationContentRect.height || 0);
-    var defaultRowHeight = (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.defaultRowHeight) || 50;
-    var getRowClassName = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowClassName;
-    (0, react_2.useEffect)(function () {
-        if (tableHeadRef.current) {
-            tableHeadRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
-        }
-        if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
-        }
-    }, [scrollLeft]);
-    return ((0, react_1.jsx)(material_1.Paper, __assign({ ref: rootRef, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: calc(100% - ", "px);\n        height: 100%;\n        position: relative;\n      "], ["\n        width: calc(100% - ", "px);\n        height: 100%;\n        position: relative;\n      "])), hasScrollbar.vertical ? scrollbarWidth : 0), className: "DataTable" }, restOfProps),
-        !(tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.hideToolbar) && ((0, react_1.jsx)("div", { ref: toolbarRef, className: "DataTable__Toolbar" },
-            (0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
-            (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter })))),
-        (0, react_1.jsx)("div", { className: "DataTable__TableContainer", css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          height: ", "px;\n        "], ["\n          height: ", "px;\n        "])), containerHeight) },
-            (0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            width: 100%;\n            display: grid;\n            grid-template-rows: auto 1fr;\n            grid-template-columns: calc(100% + ", "px);\n          "], ["\n            width: 100%;\n            display: grid;\n            grid-template-rows: auto 1fr;\n            grid-template-columns: calc(100% + ", "px);\n          "])), hasScrollbar.vertical ? scrollbarWidth : 0) },
-                (0, react_1.jsx)(material_1.TableHead, { ref: tableHeadRef, className: "DataTable__TableHead", component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              && {\n                display: block;\n                height: auto;\n                width: calc(100% - ", "px);\n                overflow-x: auto;\n                -ms-overflow-style: none; /* IE and Edge */\n                scrollbar-width: none; /* Firefox */\n\n                &::-webkit-scrollbar {\n                  /* Hide scrollbar for Chrome, Safari and Opera */\n                  display: none;\n                }\n              }\n            "], ["\n              && {\n                display: block;\n                height: auto;\n                width: calc(100% - ", "px);\n                overflow-x: auto;\n                -ms-overflow-style: none; /* IE and Edge */\n                scrollbar-width: none; /* Firefox */\n\n                &::-webkit-scrollbar {\n                  /* Hide scrollbar for Chrome, Safari and Opera */\n                  display: none;\n                }\n              }\n            "])), hasScrollbar.vertical ? scrollbarWidth : 0), onScroll: function (evt) {
-                        var scrollLeft = evt.target.scrollLeft;
-                        setScrollLeft(scrollLeft);
-                    } }, headerGroups.map(function (headerGroup) {
-                    return (
-                    // @ts-ignore
-                    // eslint-disable-next-line react/jsx-key
-                    (0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps(), { component: "div" }), headerGroup.headers.map(function (header) {
-                        var _a = header.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? header.getSortByToggleProps() : undefined), key = _a.key, restOfHeaderProps = __rest(_a, ["key"]);
-                        return ((0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false }));
-                    })));
-                })),
-                (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width, getRowClassName: getRowClassName }))),
-        (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { ref: paginationRef, className: "DataTable__Pagination", component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
-}
-exports.default = DataTable;
-function usePluginConfig(options) {
-    var filters = options.filters, globalSearch = options.globalSearch, pagination = options.pagination, rowExpanding = options.rowExpanding, sorting = options.sorting, rowSelect = options.rowSelect, columnHiding = options.columnHiding, columnResizing = options.columnResizing, virtualize = options.virtualize;
-    var actionColumnCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
-        ? exports.CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH
-        : Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + exports.CELL_PADDING * 2;
-    return (0, react_2.useMemo)(function () {
-        var _a;
-        var result = [];
-        if ((_a = options.table) === null || _a === void 0 ? void 0 : _a.flexLayoutEnabled) {
-            result.push(react_table_1.useFlexLayout);
-        }
-        else {
-            result.push(react_table_1.useBlockLayout);
-        }
-        if (filters === null || filters === void 0 ? void 0 : filters.enabled) {
-            result.push(react_table_1.useFilters);
-        }
-        if (globalSearch === null || globalSearch === void 0 ? void 0 : globalSearch.enabled) {
-            result.push(react_table_1.useGlobalFilter);
-        }
-        if (sorting === null || sorting === void 0 ? void 0 : sorting.enabled) {
-            result.push(react_table_1.useSortBy);
-        }
-        if (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) {
-            result.push(react_table_1.useExpanded);
-        }
-        if (pagination === null || pagination === void 0 ? void 0 : pagination.enabled) {
-            result.push(react_table_1.usePagination);
-        }
-        if (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) {
-            result.push(react_table_1.useRowSelect);
-        }
-        if (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.enabled) {
-            result.push(react_table_1.useResizeColumns);
-        }
-        // column customizations
-        if ((rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) || (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled)) {
-            result.push(function (hooks) {
-                hooks.visibleColumns.push(function (columns) { return __spreadArray([
-                    {
-                        id: exports.ACTION_COLUMN_ID,
-                        width: actionColumnCellWidth,
-                        minWidth: actionColumnCellWidth,
-                        maxWidth: actionColumnCellWidth,
-                        Header: function (props) {
-                            var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
-                            return ((0, react_1.jsx)(react_2.Fragment, null,
-                                (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                        padding: ", "px;\n                      "], ["\n                        padding: ", "px;\n                      "])), EXPAND_BTN_WIDTH / 2) })),
-                                (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
-                                // @ts-ignore
-                                (0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), { 
-                                    // @ts-ignore
-                                    size: "small" }))) : null));
-                        },
-                        Cell: function (props) {
-                            var _a = props.row, getToggleRowSelectedProps = _a.getToggleRowSelectedProps, getToggleRowExpandedProps = _a.getToggleRowExpandedProps, isExpanded = _a.isExpanded, index = _a.index;
-                            return ((0, react_1.jsx)(react_2.Fragment, null,
-                                (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
-                                // @ts-ignore
-                                (0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                        &.MuiIconButton-root {\n                          padding: 0;\n                        }\n                      "], ["\n                        &.MuiIconButton-root {\n                          padding: 0;\n                        }\n                      "]))), size: "small" }),
-                                    (0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                          transform: rotate3d(0, 0, 1, ", ");\n                          transition: transform 0.25s;\n                        "], ["\n                          transform: rotate3d(0, 0, 1, ", ");\n                          transition: transform 0.25s;\n                        "])), isExpanded ? '90deg' : '0deg') }))),
-                                (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), { 
-                                    // @ts-ignore
-                                    size: "small" })))));
-                        },
-                    }
-                ], __read(columns), false); });
-            });
-        }
-        return result;
-    }, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination, virtualize]);
-}
-exports.usePluginConfig = usePluginConfig;
-function useDefaultTableInstance(_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.initialState, initialState = _c === void 0 ? {} : _c, defaultColumn = _a.defaultColumn;
-    var filterTypes = (0, react_2.useMemo)(function () { return ({
-        equalsOneOf: function (rows, ids, filterValue) {
-            return rows.filter(function (row) {
-                var rowValue = row.values[ids[0]];
-                return !!filterValue && filterValue.length ? filterValue.includes(rowValue) : true;
-            });
-        },
-    }); }, []);
-    function stateReducer(newState, action) {
-        var _a, _b;
-        if (action.type === 'toggleRowExpanded') {
-            if (((_a = options === null || options === void 0 ? void 0 : options.rowExpanding) === null || _a === void 0 ? void 0 : _a.mode) === 'single') {
-                newState = (0, immer_1.default)(newState, function (draft) {
-                    var _a;
-                    // @ts-ignore
-                    ;
-                    draft.expanded = (_a = {},
-                        // since we are acting on the newState, we will just set this to its current value.
-                        // what's important is that no other expanded value will be set since this overwrites
-                        // the expanded object, so that it only contains this single entry.
-                        _a[action.id] = draft.expanded[action.id],
-                        _a);
-                });
-            }
-        }
-        if (action.type === 'toggleRowSelected') {
-            if (((_b = options === null || options === void 0 ? void 0 : options.rowSelect) === null || _b === void 0 ? void 0 : _b.mode) === 'single') {
-                newState = (0, immer_1.default)(newState, function (draft) {
-                    var _a;
-                    // @ts-ignore
-                    ;
-                    draft.selectedRowIds = (_a = {},
-                        _a[action.id] = action.value,
-                        _a);
-                });
-            }
-        }
-        if (action.type === 'manuallySetColumnWidth') {
-            var _c = action, columnId_1 = _c.columnId, width_1 = _c.width;
-            newState = (0, immer_1.default)(newState, function (draft) {
-                // @ts-ignore
-                ;
-                draft.columnResizing.columnWidths[columnId_1] = width_1;
-            });
-        }
-        return newState;
-    }
-    var plugins = usePluginConfig(options);
-    var _d = (options === null || options === void 0 ? void 0 : options.pagination) || {}, enabled = _d.enabled, pageSize = _d.pageSize, rowsPerPageOptions = _d.rowsPerPageOptions;
-    var state = initialState;
-    if (enabled) {
-        var initPageSize_1 = pageSize
-            ? pageSize
-            : rowsPerPageOptions && rowsPerPageOptions.length
-                ? rowsPerPageOptions[0]
-                : undefined;
-        if (initPageSize_1) {
-            state = (0, immer_1.default)(state, function (draft) {
-                draft.pageSize = initPageSize_1;
-            });
-        }
-    }
-    var getRowId = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowId;
-    var _e = ((options === null || options === void 0 ? void 0 : options.rowExpanding) || {}).autoResetExpanded, autoResetExpanded = _e === void 0 ? true : _e;
-    var instance = react_table_1.useTable.apply(void 0, __spreadArray([{
-            autoResetExpanded: autoResetExpanded,
-            autoResetGlobalFilter: false,
-            getRowId: getRowId,
-            columns: columns,
-            data: data,
-            defaultColumn: defaultColumn,
-            filterTypes: filterTypes,
-            stateReducer: stateReducer,
-            initialState: state,
-        }], __read(plugins), false));
-    function setColumnWidth(columnId, width) {
-        instance.dispatch({ type: 'manuallySetColumnWidth', columnId: columnId, width: width });
-    }
-    return __assign(__assign({}, instance), { setColumnWidth: setColumnWidth });
-}
-exports.useDefaultTableInstance = useDefaultTableInstance;
-function renderSingleLineCell(value) {
-    return ((0, react_1.jsx)(material_1.Tooltip, { title: value },
-        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          text-overflow: ellipsis;\n          overflow: hidden;\n        "], ["\n          text-overflow: ellipsis;\n          overflow: hidden;\n        "]))) }, value)));
-}
-exports.renderSingleLineCell = renderSingleLineCell;
-function getColumnFilterConfig(filterType) {
-    switch (filterType) {
-        case 'select':
-            return { filter: 'equals', Filter: SingleSelectFilter_1.default };
-        case 'multi-select':
-            return { filter: 'equalsOneOf', Filter: MultiSelectFilter_1.default };
-        case 'range':
-            return { filter: 'between', Filter: RangeFilter_1.default };
-        case 'text':
-        default:
-            return { filter: 'text', Filter: TextFilter_1.default };
-    }
-}
-exports.getColumnFilterConfig = getColumnFilterConfig;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;