fuse-importer 0.0.8-testing → 0.1.1-testing

package/lib/esm/common/Table/TableView/common/index.js

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from "styled-components";
+import { Div } from "../../../../styled/utils";
+export var defaultTableRowHeightPx = 60;
+export var defaultTableHeaderHeightPx = 60;
+export var getColumnWidthsPx = function (columns, rowWidth) {
+    var round4 = function (n) { return Number((Math.floor(n * 10000) / 10000).toFixed(4)); };
+    var totalColumnWidthCount = columns.reduce(function (sum, c) {
+        return sum + (c.width ? c.width : 1);
+    }, 0);
+    var remainingPercentage = 1;
+    var percentages = columns.map(function (column, index) {
+        if (index === columns.length - 1) {
+            // for the last column, just use the remaining percentage
+            // to avoid floating point errors
+            return round4(remainingPercentage);
+        }
+        var percentage = (column.width || 1) / totalColumnWidthCount;
+        percentage = round4(percentage);
+        remainingPercentage -= percentage;
+        remainingPercentage = round4(remainingPercentage);
+        return percentage;
+    });
+    var res = percentages.map(function (p) { return Math.floor(p * rowWidth); });
+    return res.map(function (r) { return r + "px"; });
+};
+export var TableViewCellContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n"], ["\n  display: flex;\n  padding-left: 16px;\n  align-items: center;\n  color: ", ";\n\n  ", "\n  ", ";\n"])), function (p) { return p.theme.colors.textPrim; }, function (_a) {
+    var onClick = _a.onClick;
+    return onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      :hover {\n        cursor: pointer;\n      }\n    "], ["\n      :hover {\n        cursor: pointer;\n      }\n    "])));
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.css.body3;
+});
+var templateObject_1, templateObject_2;

package/lib/esm/common/Table/TableView/index.js

@@ -0,0 +1,132 @@
+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 __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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import React, { Fragment, useCallback, useRef } from "react";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeGrid as Grid, areEqual } from "react-window";
+import styled, { css } from "styled-components";
+import { Div } from "../../../styled/utils";
+import { Spinner } from "../../Spinner";
+import { TableHeaders } from "./TableHeaders";
+import { Row } from "./TableRows";
+import { defaultTableHeaderHeightPx, defaultTableRowHeightPx } from "./common";
+export * from "./TableHeaders";
+export * from "./TableRows/TableRow";
+export * from "./common";
+export var TableViewWrapper = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  ", "\n  overflow: hidden;\n\n  ", "\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n"], ["\n  ", "\n  ", "\n  overflow: hidden;\n\n  ", "\n\n  // prevents clipped dropdowns\n  .ReactVirtualized__Grid__innerScrollContainer {\n    overflow: visible !important;\n  }\n  .ReactVirtualized__Table__row {\n    overflow: visible !important;\n  }\n"])), function (p) {
+    return p.isLoading && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      opacity: 0.5;\n    "], ["\n      opacity: 0.5;\n    "])));
+}, function (p) {
+    return !p.isLoading && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: 0 0 0 1px ", ";\n    "], ["\n      box-shadow: 0 0 0 1px ", ";\n    "])), function (p) { return p.theme.colors.gray300; });
+}, function (_a) {
+    var checkboxColumnWidth = _a.checkboxColumnWidth;
+    return checkboxColumnWidth && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      max-width: calc(100vw - ", "px);\n    "], ["\n      max-width: calc(100vw - ", "px);\n    "])), checkboxColumnWidth);
+});
+var SpinnerWrapper = styled(Div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  pointer-events: none;\n  z-index: 100;\n"], ["\n  pointer-events: none;\n  z-index: 100;\n"])));
+var tableHeaderId = "tableHeaderId";
+var VirtualizedGrid = styled(Grid)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
+var loadingUI = (_jsx(SpinnerWrapper, __assign({ pRelative: true }, { children: _jsx(Div, __assign({ w100: true, h100: true, centered: true, h: 400, pAbsolute: true }, { children: _jsx(Spinner, {}) })) })));
+var buildGridStyles = function (rowWidthScalingFactor) {
+    /* using style={{ willChange: "unset" }} is important for having items
+              like backdrops with position fixed inside of the table working as
+              expected. Required for dropdowns in cells */
+    var gridStyles = {
+        outline: "none",
+        willChange: "unset",
+        boxSizing: "border-box",
+    };
+    if (rowWidthScalingFactor === 1)
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
+    else if (rowWidthScalingFactor > 1)
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "auto" });
+    return gridStyles;
+};
+export var TableView = React.memo(function (_a) {
+    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.setSortBy, setSortBy = _e === void 0 ? null : _e, _f = _a.rowWidthScalingFactor, rowWidthScalingFactor = _f === void 0 ? 1 : _f, onSectionRendered = _a.onSectionRendered, _g = _a.tableHeadersHeight, tableHeadersHeight = _g === void 0 ? defaultTableHeaderHeightPx : _g, _h = _a.rowHeight, rowHeight = _h === void 0 ? defaultTableRowHeightPx : _h, _j = _a.h, h = _j === void 0 ? 500 : _j, _k = _a.onTableScroll, onTableScroll = _k === void 0 ? null : _k, _l = _a.getItemKey, getItemKey = _l === void 0 ? null : _l, _m = _a.isDraggable, isDraggable = _m === void 0 ? false : _m, checkboxColumnWidth = _a.checkboxColumnWidth, _o = _a.isFiltering, isFiltering = _o === void 0 ? false : _o, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "setSortBy", "rowWidthScalingFactor", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "isDraggable", "checkboxColumnWidth", "isFiltering"]);
+    var headerContainerRef = useRef();
+    var onScroll = function (_a) {
+        var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
+        if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
+            requestAnimationFrame(function () {
+                var _a;
+                (_a = headerContainerRef === null || headerContainerRef === void 0 ? void 0 : headerContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                    left: scrollLeft,
+                });
+            });
+        }
+        if (onTableScroll) {
+            onTableScroll(scrollTop);
+        }
+    };
+    var onItemsRendered = useCallback(function (_a) {
+        var rowStartIndex = _a.overscanRowStartIndex, rowStopIndex = _a.overscanRowStopIndex;
+        if (onSectionRendered) {
+            onSectionRendered({
+                rowStartIndex: rowStartIndex,
+                rowStopIndex: rowStopIndex,
+                data: data.slice(rowStartIndex, rowStopIndex + 1),
+            });
+        }
+    }, [data, onSectionRendered]);
+    var tableHeight = pageSize
+        ? pageSize * rowHeight + tableHeadersHeight
+        : h;
+    var canRenderTableHeaders = isFiltering ? true : data.length > 0;
+    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth, h: tableHeight }, props, { children: [isLoading && loadingUI, _jsx(AutoSizer, { children: function (_a) {
+                    var autosizerWidth = _a.width, autosizerHeight = _a.height;
+                    // using Math.floor to avoid floating point errors with the grid and table cell widths
+                    var rowWidth = Math.floor(autosizerWidth * rowWidthScalingFactor);
+                    var gridProps = {
+                        itemData: {
+                            items: data,
+                            isDraggable: isDraggable,
+                            rowWidth: rowWidth,
+                            onRowClick: onRowClick,
+                            columns: columns,
+                            rowHeight: rowHeight,
+                            getItemKey: getItemKey,
+                        },
+                        style: buildGridStyles(rowWidthScalingFactor),
+                        width: autosizerWidth,
+                        columnCount: 1,
+                        onItemsRendered: onItemsRendered,
+                        onScroll: onScroll,
+                        columnWidth: rowWidth,
+                        height: autosizerHeight - tableHeadersHeight,
+                        rowHeight: rowHeight,
+                        rowCount: data.length,
+                    };
+                    var GridContainer = isDraggable
+                        ? SortableContext
+                        : Fragment;
+                    var gridContainerProps = isDraggable
+                        ? { items: data, strategy: verticalListSortingStrategy }
+                        : {};
+                    return (_jsxs(_Fragment, { children: [canRenderTableHeaders && (_jsx(TableHeaders, { rowWidth: rowWidth, containerWidth: autosizerWidth, id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy })), _jsx(GridContainer, __assign({}, gridContainerProps, { children: _jsx(VirtualizedGrid, __assign({}, gridProps, { children: Row })) }))] }));
+                } })] })));
+}, areEqual);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/common/Table/TableView/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/common/Table/icons.js

@@ -0,0 +1,15 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var chevronDown = (_jsx("svg", __assign({ width: "9", height: "5", viewBox: "0 0 9 5", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M4.31848 4.93945L0.421366 0.439453L8.2156 0.439454L4.31848 4.93945Z", fill: "#102622" }) })));
+export var chevronRight = (_jsx("svg", __assign({ width: "6", height: "8", viewBox: "0 0 6 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M5.31848 4.06738L0.818482 7.9645L0.818482 0.170269L5.31848 4.06738Z", fill: "#102622" }) })));
+export var spreedSheetIcon = (_jsxs("svg", __assign({ width: "376", height: "256", viewBox: "0 0 376 256", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", __assign({ filter: "url(#filter0_d_4260_84132)" }, { children: [_jsx("rect", { x: "12", y: "8", width: "352", height: "231.997", rx: "4", fill: "white" }), _jsxs("g", __assign({ clipPath: "url(#clip0_4260_84132)" }, { children: [_jsx("path", { d: "M364 40.2222H12V236C12 238.209 13.7909 240 16 240H360C362.209 240 364 238.209 364 236V40.2222Z", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 224.239H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 208.937H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 193.655H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 178.355H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 163.052H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 147.752H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 132.47H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 117.169H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 101.867H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 86.5674H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 71.2844H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M12.1463 55.9827H364.146", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M305.004 40.6831V239.54", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M246.511 40.6831V239.54", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M188 40.6831V239.54", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M129.489 40.6831V239.54", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("path", { d: "M70.9966 40.6831V239.54", stroke: "#E6DBDB", strokeWidth: "0.5", strokeMiterlimit: "10" }), _jsx("rect", { x: "17.2543", y: "61.252", width: "49.9104", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "61.252", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "92.7949", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "105.938", width: "49.9105", height: "5.2573", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "137.482", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "153.254", width: "49.9105", height: "5.25734", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "137.482", width: "49.9104", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "153.254", width: "49.9104", height: "5.25734", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "169.026", width: "49.9104", height: "5.25732", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "184.798", width: "49.9104", height: "5.25732", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "197.942", width: "49.9104", height: "5.25729", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "213.713", width: "49.9104", height: "5.25729", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "229.485", width: "49.9104", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "121.71", width: "49.9104", height: "5.25733", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "182.169", width: "49.9104", height: "5.25733", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "182.169", width: "49.9105", height: "5.25733", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "121.71", width: "49.9105", height: "5.25733", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "58.623", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "137.482", width: "49.9104", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "197.942", width: "49.9104", height: "5.25729", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "197.942", width: "49.9105", height: "5.25729", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "137.482", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "74.3953", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "153.254", width: "49.9104", height: "5.25734", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "213.713", width: "49.9104", height: "5.25729", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "213.713", width: "49.9105", height: "5.25729", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "153.254", width: "49.9105", height: "5.25734", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "90.1672", width: "49.9105", height: "5.2573", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "169.026", width: "49.9104", height: "5.25732", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "193.253", y: "229.485", width: "49.9104", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "229.485", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "169.026", width: "49.9105", height: "5.25732", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "251.044", y: "105.938", width: "49.9105", height: "5.2573", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "45.48", width: "49.9104", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "45.48", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "75.045", y: "77.0229", width: "49.9105", height: "5.25731", rx: "1", fill: "#E6DBDB" }), _jsx("rect", { x: "17.2543", y: "121.71", width: "49.9104", height: "5.25733", rx: "1", fill: "#E6DBDB" })] }))] })), _jsx("path", { d: "M12 12.0015C12 9.79233 13.7909 8.00146 16 8.00146H360C362.209 8.00146 364 9.79233 364 12.0015V40.2237H12V12.0015Z", fill: "#00D085" }), _jsx("circle", { cx: "306.77", cy: "24.0002", r: "6", fill: "#025F40" }), _jsx("circle", { cx: "324.77", cy: "24.0002", r: "6", fill: "#025F40" }), _jsx("circle", { cx: "342.77", cy: "24.0002", r: "6", fill: "#025F40" }), _jsxs("defs", { children: [_jsxs("filter", __assign({ id: "filter0_d_4260_84132", x: "0", y: "0", width: "376", height: "256", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, { children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "4" }), _jsx("feGaussianBlur", { stdDeviation: "6" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_4260_84132" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_4260_84132", result: "shape" })] })), _jsx("clipPath", __assign({ id: "clip0_4260_84132" }, { children: _jsx("path", { d: "M12 40.2222H364V236C364 238.209 362.209 240 360 240H16C13.7909 240 12 238.209 12 236V40.2222Z", fill: "white" }) }))] })] })));

package/lib/esm/common/Table/index.js

@@ -0,0 +1,140 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, closestCenter, } from "@dnd-kit/core";
+import { restrictToVerticalAxis, restrictToWindowEdges, } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { Div } from "../../styled/utils";
+import { Pagination } from "./Pagination";
+import { useTableContext } from "./TableDataProvider";
+import { TableView as TableViewBase } from "./TableView";
+import { useReorderRows } from "./useReorderRows";
+import { addToast } from "../../common/Toast";
+var TableContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: auto;\n  width: calc(100% + 2px);\n  ", ";\n"], ["\n  overflow-x: auto;\n  width: calc(100% + 2px);\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
+var TableWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 1000px;\n  border: solid 1px ", ";\n"], ["\n  min-width: 1000px;\n  border: solid 1px ", ";\n"])), function (p) { return p.theme.colors.gray300; });
+var TableView = styled(TableViewBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return p.withPagination && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: 0px;\n    "], ["\n      border-radius: 0px;\n    "])));
+});
+var Table = function (_a) {
+    var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, templateSlug = _a.templateSlug, _d = _a.isDraggable, isDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "isDraggable"]);
+    var _e = useTableContext(), data = _e.data, isLoading = _e.isLoading, sortBy = _e.sortBy, setSortBy = _e.setSortBy, totalPages = _e.totalPages;
+    var reorderRows = useReorderRows(templateSlug).reorderRows;
+    var withPagination = data.length > 0 && totalPages > 1;
+    var sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    var paginationUI = (_jsx(_Fragment, { children: withPagination && (_jsx(Div, __assign({ dflex: true, justifyCenter: true, pb: 50 }, { children: _jsx(Pagination, {}) }))) }));
+    var handleDragEnd = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var active, over, overIndex, overIndexIsFalsyButNotZero, error_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    active = event.active, over = event.over;
+                    overIndex = (_c = (_b = (_a = over === null || over === void 0 ? void 0 : over.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.sortable) === null || _c === void 0 ? void 0 : _c.index;
+                    overIndexIsFalsyButNotZero = !overIndex && overIndex !== 0;
+                    if (!(active === null || active === void 0 ? void 0 : active.id) || overIndexIsFalsyButNotZero || active.id === over.id) {
+                        return [2 /*return*/];
+                    }
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, reorderRows(active.id, overIndex + 1)];
+                case 2:
+                    _d.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _d.sent();
+                    addToast("Failed to reorder rows", "error");
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var dndContextValues = {
+        sensors: isDraggable ? sensors : undefined,
+        collisionDetection: isDraggable ? closestCenter : undefined,
+        onDragEnd: isDraggable ? handleDragEnd : undefined,
+        modifiers: isDraggable
+            ? [restrictToVerticalAxis, restrictToWindowEdges]
+            : undefined,
+    };
+    var Container = data.length > 0 ? TableContainer : Div;
+    var Wrapper = data.length > 0 ? TableWrapper : Div;
+    return (_jsx(Container, { children: _jsx(Wrapper, { children: _jsxs(Div, __assign({}, props, { children: [data.length || isLoading ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination, isDraggable: isDraggable }, {
+                            isLoading: isLoading,
+                            data: data,
+                            columns: columns,
+                            sortBy: sortBy,
+                            setSortBy: setSortBy,
+                            onRowClick: onRowClick,
+                        })) }))) : (blankState), paginationUI] })) }) }));
+};
+export { Table };
+export * from "./TableDataProvider";
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Table/useReorderRows.js

@@ -0,0 +1,83 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addToast } from "..";
+import { api } from "../../api";
+import { Div } from "../../styled/utils";
+import { useTableContext } from "./TableDataProvider";
+export var useReorderRows = function (templateSlug, customMessage) {
+    var getData = useTableContext().getData;
+    var reorderRows = function (columnId, position) { return __awaiter(void 0, void 0, void 0, function () {
+        var apiUrl, defaultMessage, confirmationMessage, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    apiUrl = "/api/v1/templates/".concat(templateSlug, "/columns/").concat(columnId);
+                    defaultMessage = (_jsx(Div, __assign({ alignCenter: true }, { children: _jsx(Div, { children: "Columns reordered successfully" }) })));
+                    confirmationMessage = (_jsx(Div, __assign({ spaceBetween: true, alignCenter: true }, { children: customMessage || defaultMessage })));
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, api.patch(apiUrl, {
+                            position: position,
+                        })];
+                case 2:
+                    _a.sent();
+                    addToast(confirmationMessage, "success");
+                    getData();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    addToast("Failed to reorder rows", "error");
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return { reorderRows: reorderRows };
+};

package/lib/esm/common/Toast.js

@@ -0,0 +1,69 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import toast, { ToastBar, Toaster, } from "react-hot-toast";
+import styled from "styled-components";
+import { defaultCheckIcon, greenCheckIcon, redXIcon } from "./icons";
+import { colors } from "../styled/theme/colorPalette";
+import { Div } from "../styled/utils";
+var defaultDuration = 5000;
+var defaultPosition = "bottom-right";
+var toastBorderRadius = 4;
+var toastMaxWidth = "85%";
+export var addToast = function (msg, type, toastOptions) {
+    if (type === void 0) { type = "blank"; }
+    if (toastOptions === void 0) { toastOptions = {}; }
+    var _toastOptions = __assign({ duration: defaultDuration, position: defaultPosition }, toastOptions);
+    var toastFn = type === "blank" ? toast : toast[type];
+    toastFn(msg, _toastOptions);
+};
+var toastContainerCss = {
+    padding: 0,
+    marginRight: 72,
+    borderRadius: toastBorderRadius,
+    boxShadow: "none",
+    maxWidth: toastMaxWidth,
+};
+var toastTypeStyles = {
+    success: {
+        backgroundColor: colors.blue50,
+        color: colors.text,
+        icon: greenCheckIcon,
+    },
+    error: {
+        color: colors.red800,
+        backgroundColor: colors.red100,
+        icon: redXIcon,
+    },
+    blank: {
+        backgroundColor: colors.white,
+        color: colors.text,
+        icon: defaultCheckIcon,
+    },
+};
+var ToastWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"], ["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"])), toastBorderRadius, function (p) { return p.theme.css.alignCenter; });
+var Toast = function () {
+    return (_jsx(Toaster, __assign({ toastOptions: {
+            style: toastContainerCss,
+        } }, { children: function (t) { return (_jsx(ToastBar, __assign({ toast: t }, { children: function (_a) {
+                var message = _a.message, hotToastIcon = _a.icon;
+                var _b = toastTypeStyles[t.type] || {}, icon = _b.icon, color = _b.color, backgroundColor = _b.backgroundColor;
+                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor }, { children: [_jsx(Div, __assign({ alignCenter: true }, { children: icon || hotToastIcon })), _jsx(Div, __assign({ alignCenter: true }, { children: message })), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }))] })));
+            } }))); } })));
+};
+export { Toast };
+var closeIcon = (_jsxs("svg", __assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2.5 2.5L7.82258 7.82258", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 7.82251L7.82258 2.49993", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var templateObject_1;

package/lib/esm/common/TooltipProvider.js

@@ -0,0 +1,57 @@
+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 __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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { usePopper } from "react-popper";
+import styled from "styled-components";
+import { Div } from "../styled/utils";
+export var TooltipContent = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"], ["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"])), function (p) { return p.theme.css.body4; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.black; });
+export var TooltipProvider = function (_a) {
+    var tooltip = _a.tooltip, children = _a.children, tooltipMaxWidth = _a.tooltipMaxWidth, tooltipMinWidth = _a.tooltipMinWidth, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.flip, flip = _c === void 0 ? true : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, _f = _a.offset, offset = _f === void 0 ? [0, 4] : _f, props = __rest(_a, ["tooltip", "children", "tooltipMaxWidth", "tooltipMinWidth", "placement", "flip", "isDisabled", "isOpen", "offset"]);
+    var _g = useState(false), isDisplayingTooltip = _g[0], setIsDisplayingTooltip = _g[1];
+    var _h = useState(null), referenceElement = _h[0], setReferenceElement = _h[1];
+    var _j = useState(null), popperElement = _j[0], setPopperElement = _j[1];
+    var options = useMemo(function () { return ({
+        placement: placement,
+        modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: offset,
+                },
+            },
+            {
+                name: "flip",
+                enabled: flip,
+            },
+        ],
+    }); }, [placement, offset]);
+    var _k = usePopper(referenceElement, popperElement, options), styles = _k.styles, attributes = _k.attributes;
+    var showTooltip = isOpen || (isDisplayingTooltip && !!tooltip);
+    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return isDisabled || setIsDisplayingTooltip(true); }, onMouseOut: function () { return isDisabled || setIsDisplayingTooltip(false); } }, props, { children: [children, showTooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper, maxw: tooltipMaxWidth, minw: tooltipMinWidth }, attributes.popper, { children: tooltip })))] })));
+};
+var templateObject_1;