fuse-importer 0.25.7 → 0.25.9

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

@@ -35,6 +35,7 @@ import { Spinner } from "../../Spinner";
 import { defaultTableRowHeightPx, defaultTableHeaderHeightPx } from "./common";
 import { TableHeaders } from "./TableHeaders";
 import { Cell, DraggableCell } from "./TableCells";
+import { CustomScrollbarsVirtualList } from "./CustomScrollbar";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
@@ -46,7 +47,7 @@ export var TableViewWrapper = styled(Div)(templateObject_3 || (templateObject_3
 }, function (p) { return p.theme.css.scrollbarDark; });
 var SpinnerWrapper = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  pointer-events: none;\n  z-index: 100;\n"], ["\n  pointer-events: none;\n  z-index: 100;\n"])));
 var tableHeaderId = "tableHeaderId";
-var StyledGrid = styled(Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"], ["\n  ::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n\n  -ms-overflow-style: none;\n  overflow: -moz-scrollbars-none;\n  scrollbar-width: none;\n"])));
+var StyledGrid = styled(Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  scrollbar-width: thin;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"], ["\n  scrollbar-width: thin;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background-color: #b1b1b2;\n    border-radius: 3px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])));
 var buildGridStyles = function (rowWidth) {
     /* using style={{ willChange: "unset" }} is important for having items
               like backdrops with position fixed inside of the table working as
@@ -58,18 +59,20 @@ var buildGridStyles = function (rowWidth) {
     if (rowWidth === 1)
         gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden", overflowY: "auto" });
     else if (rowWidth > 1)
-        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
+        gridStyles = __assign(__assign({}, gridStyles), { overflowX: "hidden" });
     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.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, _p = _a.isInsideImporter, isInsideImporter = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "isInsideImporter", "checkboxColumnWidth"]);
+    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.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, _p = _a.shouldHaveCustomScrollbar, shouldHaveCustomScrollbar = _p === void 0 ? false : _p, checkboxColumnWidth = _a.checkboxColumnWidth, _q = _a.isFiltering, isFiltering = _q === void 0 ? false : _q, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable", "shouldHaveCustomScrollbar", "checkboxColumnWidth", "isFiltering"]);
     /*
     multiply the rowWidth by 0.95 to let the user know they can scroll
     horizontally (will display partial column on the right)
   */
     var _rowWidth = rowWidth > 1 ? rowWidth * 0.95 : rowWidth;
     var headerContainerRef = useRef();
-    var tableHeadersUI = data.length > 0 && (_jsx(TableHeaders, { id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, rowWidth: _rowWidth, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy, isSpreadsheetTable: isInsideImporter }));
+    var listRef = useRef();
+    var canRenderTableHeaders = isFiltering ? true : data.length > 0;
+    var tableHeadersUI = canRenderTableHeaders && (_jsx(TableHeaders, { id: tableHeaderId, containerRef: headerContainerRef, height: tableHeadersHeight, rowHeight: rowHeight, rowWidth: _rowWidth, scrollLeft: 0, columns: columns, sortBy: sortBy, setSortBy: setSortBy, shouldHaveCustomScrollbar: shouldHaveCustomScrollbar }));
     var onScroll = function (_a) {
         var scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
         if (headerContainerRef.current && headerContainerRef.current.scrollTo) {
@@ -100,18 +103,45 @@ export var TableView = React.memo(function (_a) {
         highlightFirstRow: highlightFirstRow,
         rowHeight: rowHeight,
         getItemKey: getItemKey,
-        isSpreadsheetTable: isInsideImporter,
+        shouldHaveCustomScrollbar: shouldHaveCustomScrollbar,
     }); }, [
         data,
         onRowClick,
         columns,
         highlightFirstRow,
         rowHeight,
-        isInsideImporter,
+        shouldHaveCustomScrollbar,
     ]);
-    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth }, (!isInsideImporter ? { h: tableHeight } : {}), props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
+    var buildGridProps = function (width, isDraggable, columnWidth, height) { return ({
+        style: buildGridStyles(_rowWidth),
+        width: width,
+        columnCount: 1,
+        itemData: itemData,
+        onItemsRendered: onItemsRendered,
+        onScroll: onScroll,
+        columnWidth: isDraggable ? Math.floor(width * _rowWidth) : columnWidth,
+        height: height - tableHeadersHeight,
+        rowHeight: rowHeight,
+        rowCount: data.length,
+    }); };
+    return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, checkboxColumnWidth: checkboxColumnWidth }, (!shouldHaveCustomScrollbar ? { h: tableHeight } : {}), props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
-                    return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(StyledGrid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })))] }));
+                    var canUseCustomScrollbar = shouldHaveCustomScrollbar && !shouldBeDraggable;
+                    var gridProps = {
+                        style: buildGridStyles(_rowWidth),
+                        width: width,
+                        columnCount: 1,
+                        itemData: itemData,
+                        onItemsRendered: onItemsRendered,
+                        onScroll: onScroll,
+                        columnWidth: Math.floor(width * _rowWidth),
+                        height: height - tableHeadersHeight,
+                        rowHeight: rowHeight,
+                        rowCount: data.length,
+                    };
+                    return (_jsx(_Fragment, { children: shouldBeDraggable ? (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(StyledGrid, __assign({}, gridProps, { children: DraggableCell })) }))) : (_jsx(StyledGrid, __assign({}, gridProps, { ref: canUseCustomScrollbar ? listRef : undefined, outerElementType: canUseCustomScrollbar
+                                ? CustomScrollbarsVirtualList
+                                : undefined }, { children: Cell }))) }));
                 } })] })));
 }, areEqual);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/inputs/Checkbox.js

@@ -38,7 +38,7 @@ var Checkbox = function (_a) {
     var handleOnChange = function (event) {
         if (!onChange)
             return;
-        if (event.shiftKey && onShiftKeyPressed) {
+        if ((event.shiftKey || event.nativeEvent.metaKey) && onShiftKeyPressed) {
             onShiftKeyPressed();
             return;
         }

package/lib/esm/common/inputs/TextInput.js

@@ -31,7 +31,7 @@ import { FormInputLabel } from "..";
 import { useDebounce } from "../../hooks";
 import { Div } from "../../styled/utils";
 import Tooltip from "./tooltip";
-export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding: ", ";\n  height: 68px;\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n  padding: ", ";\n  height: 68px;\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+export var HTMLInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n\n  padding: ", ";\n  height: 68px;\n  margin: 0px;\n  box-shadow: none;\n\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  :hover {\n    box-shadow: none;\n    background: transparent;\n  }\n\n  ", "\n  ", "\n"], ["\n  position: relative;\n\n  padding: ", ";\n  height: 68px;\n  margin: 0px;\n  box-shadow: none;\n\n  outline: none;\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  width: 100%;\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  /* Firefox */\n  -moz-appearance: textfield;\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", ";\n\n    /* 3d at the end adds .24 opacity (using 8 digit hex)*/\n    box-shadow: 0px 0px 8px ", "3d;\n  }\n\n  :hover {\n    box-shadow: none;\n    background: transparent;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var padding = _a.padding;
     return (padding ? padding : "20px 16px");
 }, function (props) { return props.theme.colors.gray300; }, function (props) { return props.theme.css.body1; }, function (props) { return props.theme.colors.placeholder; }, function (props) { return props.theme.colors.blue500; }, function (props) { return props.theme.colors.blue500; }, function (props) {

package/lib/esm/index.d.ts

@@ -6,12 +6,18 @@ declare class FuseImporter {
     zIndex: number;
     options: ImporterOptions;
     constructor(apiToken: string, templateSlug: string, options?: ImporterOptions);
+    private cleanupIframe;
     formatRecord: FormatRecord;
     onValidateRecord: OnValidateRecord;
     onSubmit: OnSubmit;
     onClose: () => void;
     close(): void;
     show(): Promise<void>;
+    private renderImporterComponent;
+    private createDivComponent;
+    private createIframe;
+    private createImporterComponent;
+    private configureIframe;
     private configureI18n;
 }
 export default FuseImporter;

package/lib/esm/index.js

@@ -45,16 +45,27 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
 import { Importer } from "./Importer";
 import { fuseImporterId } from "./common";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import * as locales from "./locales";
+import { StyleSheetManager } from "styled-components";
+import { fontsURL } from "./styled/fontsURL";
+var addLinkToHead = function (document, head, href, rel, crossOrigin) {
+    if (crossOrigin === void 0) { crossOrigin = ""; }
+    var link = document.createElement("link");
+    link.href = href;
+    link.rel = rel;
+    link.crossOrigin = crossOrigin;
+    head.appendChild(link);
+};
 var FuseImporter = /** @class */ (function () {
     function FuseImporter(apiToken, templateSlug, options) {
         if (options === void 0) { options = {}; }
+        this.cleanupIframe = null;
         this.apiToken = apiToken;
         this.templateSlug = templateSlug;
         this.options = __assign({ env: "production", zIndex: 1000, batchValidationDelayMs: 500 }, options);
@@ -62,39 +73,82 @@ var FuseImporter = /** @class */ (function () {
     FuseImporter.prototype.close = function () {
         var _a;
         (_a = this.onClose) === null || _a === void 0 ? void 0 : _a.call(this);
-        var importerRoot = document.getElementById(fuseImporterId);
-        ReactDOM.unmountComponentAtNode(importerRoot);
-        document.body.removeChild(importerRoot);
+        if (this.cleanupIframe) {
+            this.cleanupIframe();
+            this.cleanupIframe = null;
+        }
+        var iframe = document.getElementById(fuseImporterId);
+        document.body.removeChild(iframe);
     };
     FuseImporter.prototype.show = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var div;
-            var _this = this;
+            var isRunningTest, iframe, importerComponent;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this.configureI18n()];
                     case 1:
                         _a.sent();
-                        div = document.createElement("div");
-                        div.setAttribute("id", fuseImporterId);
-                        document.body.appendChild(div);
-                        ReactDOM.render(React.createElement(Importer, {
-                            apiToken: this.apiToken,
-                            templateSlug: this.templateSlug,
-                            options: this.options,
-                            formatRecord: this.formatRecord,
-                            onValidateRecord: this.onValidateRecord,
-                            onSubmit: this.onSubmit,
-                            onClose: function () {
-                                _this.close();
-                            },
-                        }), document.getElementById(fuseImporterId));
-                        i18n.reloadResources();
+                        isRunningTest = typeof (window === null || window === void 0 ? void 0 : window.Cypress) !== "undefined";
+                        if (isRunningTest) {
+                            this.renderImporterComponent();
+                            i18n.reloadResources();
+                            return [2 /*return*/];
+                        }
+                        iframe = this.createIframe();
+                        importerComponent = this.createImporterComponent();
+                        this.configureIframe(iframe, importerComponent);
                         return [2 /*return*/];
                 }
             });
         });
     };
+    FuseImporter.prototype.renderImporterComponent = function () {
+        var importerDiv = this.createDivComponent();
+        var importerComponent = this.createImporterComponent();
+        ReactDOM.render(importerComponent, importerDiv);
+    };
+    FuseImporter.prototype.createDivComponent = function () {
+        var div = document.createElement("div");
+        div.setAttribute("id", fuseImporterId);
+        document.body.appendChild(div);
+        return div;
+    };
+    FuseImporter.prototype.createIframe = function () {
+        var iframe = document.createElement("iframe");
+        iframe.setAttribute("id", fuseImporterId);
+        iframe.style.cssText =
+            "border: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000;";
+        document.body.appendChild(iframe);
+        return iframe;
+    };
+    FuseImporter.prototype.createImporterComponent = function () {
+        var _this = this;
+        return (_jsx(Importer, { apiToken: this.apiToken, templateSlug: this.templateSlug, options: this.options, formatRecord: this.formatRecord, onValidateRecord: this.onValidateRecord, onSubmit: this.onSubmit, onClose: function () {
+                _this.close();
+            } }));
+    };
+    FuseImporter.prototype.configureIframe = function (iframe, importerComponent) {
+        var onLoadCallback = function () {
+            var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+            iframeDocument.body.style.margin = "0";
+            iframeDocument.body.style.padding = "0";
+            var head = iframeDocument.getElementsByTagName("head")[0];
+            for (var _i = 0, fontsURL_1 = fontsURL; _i < fontsURL_1.length; _i++) {
+                var link = fontsURL_1[_i];
+                addLinkToHead(iframeDocument, head, link.href, link.rel, link.crossOrigin);
+            }
+            ReactDOM.render(_jsx(StyleSheetManager, __assign({ target: iframeDocument.head }, { children: importerComponent })), iframeDocument.body);
+            i18n.reloadResources();
+            iframe.removeEventListener("load", onLoadCallback);
+        };
+        iframe.addEventListener("load", onLoadCallback);
+        iframe.src = "about:blank";
+        var cleanup = function () {
+            iframe.removeEventListener("load", onLoadCallback);
+        };
+        this.cleanupIframe = cleanup;
+        return cleanup;
+    };
     FuseImporter.prototype.configureI18n = function () {
         return __awaiter(this, void 0, void 0, function () {
             var browserLanguage, language;

package/lib/esm/styled/fontsURL.d.ts

@@ -0,0 +1,9 @@
+export declare const fontsURL: ({
+    href: string;
+    rel: string;
+    crossOrigin?: undefined;
+} | {
+    href: string;
+    rel: string;
+    crossOrigin: string;
+})[];

package/lib/esm/styled/fontsURL.js

@@ -0,0 +1,27 @@
+export var fontsURL = [
+    {
+        href: "https://fonts.googleapis.com",
+        rel: "preconnect",
+    },
+    {
+        href: "https://fonts.gstatic.com",
+        rel: "preconnect",
+        crossOrigin: "",
+    },
+    {
+        href: "https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap",
+        rel: "stylesheet",
+    },
+    {
+        href: "https://fonts.googleapis.com/css?family=DM+Serif+Text:300,400,500,600&display=swap",
+        rel: "stylesheet",
+    },
+    {
+        href: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&family=DM+Serif+Text&display=swap",
+        rel: "stylesheet",
+    },
+    {
+        href: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Text&display=swap",
+        rel: "stylesheet",
+    },
+];

package/lib/esm/utils/hooks/useWindowSize.d.ts

@@ -0,0 +1,11 @@
+type WindowDimentions = {
+    width: number | undefined;
+    height: number | undefined;
+};
+type IsOnMobileDevice = boolean;
+interface UseWindowDimensions {
+    isOnSmallScreens: IsOnMobileDevice;
+    windowDimensions: WindowDimentions;
+}
+declare const useWindowDimensions: () => UseWindowDimensions;
+export default useWindowDimensions;

package/lib/esm/utils/hooks/useWindowSize.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+var useWindowDimensions = function () {
+    var _a = useState({
+        width: undefined,
+        height: undefined,
+    }), windowDimensions = _a[0], setWindowDimensions = _a[1];
+    useEffect(function () {
+        var handleResize = function () {
+            setWindowDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, []);
+    var isOnSmallScreens = windowDimensions.width
+        ? windowDimensions.width <= 1050
+        : false;
+    return { windowDimensions: windowDimensions, isOnSmallScreens: isOnSmallScreens };
+};
+export default useWindowDimensions;

package/lib/esm/utils/hooks.d.ts

@@ -0,0 +1 @@
+export * from "./hooks/useWindowSize";

package/lib/esm/utils/hooks.js

@@ -0,0 +1 @@
+export * from "./hooks/useWindowSize";