@vendorflow/components 2.0.41 → 2.0.45

package/lib/components/index.d.ts

@@ -10,5 +10,4 @@ export { default as InputCheckboxGroup } from './material-ui/InputCheckboxGroup'
 export { default as InputRadioGroup } from './material-ui/InputRadioGroup';
 export { default as InputSearchDropdown } from './material-ui/InputSearchDropdown';
 export { default as InputTime } from './material-ui/InputTime';
-export { default as InfiniteScroll } from './InfiniteScroll';
 export { default as Modal } from './material-ui/Modal';

package/lib/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.InfiniteScroll = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ChatInterface = exports.ButtonMenu = exports.Button = void 0;
+exports.Modal = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ChatInterface = exports.ButtonMenu = exports.Button = void 0;
 var Button_1 = require("./material-ui/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 var ButtonMenu_1 = require("./material-ui/ButtonMenu");
@@ -28,7 +28,5 @@ var InputSearchDropdown_1 = require("./material-ui/InputSearchDropdown");
 Object.defineProperty(exports, "InputSearchDropdown", { enumerable: true, get: function () { return __importDefault(InputSearchDropdown_1).default; } });
 var InputTime_1 = require("./material-ui/InputTime");
 Object.defineProperty(exports, "InputTime", { enumerable: true, get: function () { return __importDefault(InputTime_1).default; } });
-var InfiniteScroll_1 = require("./InfiniteScroll");
-Object.defineProperty(exports, "InfiniteScroll", { enumerable: true, get: function () { return __importDefault(InfiniteScroll_1).default; } });
 var Modal_1 = require("./material-ui/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });

package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts

@@ -3,6 +3,8 @@ export interface Message {
     id: string;
     userId: string;
     username: string;
+    /** use for building chat icon */
+    initials: string;
     timestamp: string;
     content: string;
 }

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

@@ -101,7 +101,7 @@ function ChatInterface(_a) {
             } }, function (_a) {
             var measureRef = _a.measureRef;
             return ((0, react_1.jsx)(react_2.Fragment, null,
-                (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, colors: colors }),
+                (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting, colors: colors }),
                 renderInputComponent ? (renderInputComponent(measureRef)) : ((0, react_1.jsx)(MessageInput_1.default, { ref: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, isSubmitting: isSubmitting, placeholder: placeholder }))));
         })));
 }

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

@@ -63,16 +63,24 @@ function ChatInterface() {
             {
                 id: 'user1',
                 name: 'Socorro Aguilar',
+                initials: 'SA',
             },
             {
                 id: 'user2',
                 name: 'Greg Bujak',
+                initials: 'GB',
+            },
+            {
+                id: 'user3',
+                name: 'xinyi@vendorflow.co',
+                initials: 'X',
             },
         ]);
         return {
             id: generateId(),
             userId: user.id,
             username: user.name,
+            initials: user.initials,
             timestamp: generateTimestamp(),
             content: faker_1.default.lorem.sentence(5, 2),
         };
@@ -80,15 +88,16 @@ function ChatInterface() {
     function generateMessagePage() {
         return new Array(10).fill(null).map(generateMessage);
     }
-    function loadMore() {
+    var fetchNextPage = (0, react_2.useCallback)(function () {
         setFetching(true);
         setTimeout(function () {
             setMessages(__spreadArray(__spreadArray([], __read(messages), false), __read(generateMessagePage()), false));
             setFetching(false);
         }, 100);
-    }
+    }, [messages, generateMessagePage, setMessages]);
     function handleSend(message) {
         setSubmitting(true);
+        setFetching(true);
         return new Promise(function (resolve) {
             setTimeout(function () {
                 setMessages(__spreadArray([
@@ -96,17 +105,19 @@ function ChatInterface() {
                         id: generateId(),
                         userId: 'user1',
                         username: 'Socorro Aguilar',
+                        initials: 'SA',
                         timestamp: generateTimestamp(),
                         content: message,
                     }
                 ], __read(messages), false));
                 setSubmitting(false);
+                setFetching(false);
                 resolve(true);
             }, 500);
         });
     }
-    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid #ededed;\n        height: 50rem;\n      "], ["\n        border: 1px solid #ededed;\n        height: 50rem;\n      "]))) },
-        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: loadMore, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
+    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        border: 1px solid #ededed;\n        height: 30rem;\n      "], ["\n        border: 1px solid #ededed;\n        height: 30rem;\n      "]))) },
+        (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, fetchNextPage: fetchNextPage, hasNextPage: hasMore, isLoading: isLoading, isFetching: isFetching, isSubmitting: isSubmitting })));
 }
 exports.ChatInterface = ChatInterface;
 var templateObject_1;

package/lib/components/material-ui/ChatInterface/MessageItem.js

@@ -56,11 +56,10 @@ function MessageItem(_a) {
     return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n        background: white;\n        margin-top: 0.5rem;\n        border-radius: 4px;\n        display: flex;\n        flex-direction: row;\n      "], ["\n        width: 100%;\n        background: white;\n        margin-top: 0.5rem;\n        border-radius: 4px;\n        display: flex;\n        flex-direction: row;\n      "]))) },
         (0, react_1.jsx)(material_1.Avatar, { css: function (theme) {
                 var _a, _b, _c, _d, _e;
-                return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          && {\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            background-color: ", ";\n          }\n        "], ["\n          && {\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            background-color: ", ";\n          }\n        "])), userId === message.userId
+                return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          && {\n            font-size: 1rem;\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            background-color: ", ";\n          }\n        "], ["\n          && {\n            font-size: 1rem;\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            background-color: ", ";\n          }\n        "])), userId === message.userId
                     ? (colors === null || colors === void 0 ? void 0 : colors.user) || ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.custom) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.tertiary) === null || _c === void 0 ? void 0 : _c.main) || 'hsl(0, 0%, 89%)'
                     : (colors === null || colors === void 0 ? void 0 : colors.others) || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) || 'hsl(0, 0%, 47%)');
-            } },
-            (0, react_1.jsx)(icons_material_1.Person, null)),
+            } }, message.initials === '' ? (0, react_1.jsx)(icons_material_1.Person, null) : message.initials),
         (0, react_1.jsx)("div", null,
             (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            align-items: flex-start;\n          "], ["\n            display: flex;\n            flex-direction: row;\n            justify-content: flex-start;\n            align-items: flex-start;\n          "]))) },
                 (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              font-weight: 700;\n              font-size: 0.75rem;\n              display: inline-block;\n              margin-right: 0.25rem;\n            "], ["\n              font-weight: 700;\n              font-size: 0.75rem;\n              display: inline-block;\n              margin-right: 0.25rem;\n            "]))) }, message.username),

package/lib/components/material-ui/ChatInterface/MessageThread.d.ts

@@ -1,6 +1,6 @@
 import { ChatInterfaceProps } from './ChatInterface';
-interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'colors'> {
+interface Props extends Pick<ChatInterfaceProps, 'userId' | 'messages' | 'hasNextPage' | 'fetchNextPage' | 'isLoading' | 'isFetching' | 'isSubmitting' | 'colors'> {
     inputHeight: number;
 }
-export default function MessageThread({ userId, messages, inputHeight, hasNextPage, fetchNextPage, isLoading, isFetching, colors, }: Props): JSX.Element;
+export default function MessageThread({ userId, messages, inputHeight, hasNextPage, fetchNextPage, isLoading, isFetching, isSubmitting, colors, }: Props): JSX.Element;
 export {};

package/lib/components/material-ui/ChatInterface/MessageThread.js

@@ -12,12 +12,108 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@emotion/react");
 var react_2 = require("react");
 var MessageItem_1 = __importDefault(require("./MessageItem"));
-var InfiniteScroll_1 = __importDefault(require("../../InfiniteScroll/InfiniteScroll"));
+var lodash_1 = require("lodash");
+var material_1 = require("@mui/material");
 function MessageThread(_a) {
-    var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, colors = _a.colors;
+    var _b;
+    var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
+    var isInitialized = (0, react_2.useRef)(false);
+    var isScrollLoad = (0, react_2.useRef)(false);
+    var hasSubmitted = (0, react_2.useRef)(false);
+    var prevScrollTop = (0, react_2.useRef)(null);
+    var prevScrollHeight = (0, react_2.useRef)(null);
+    var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
     var scrollParent = (0, react_2.useRef)(null);
+    var handleScrollEvent = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
+        var parent = evt.target;
+        if (parent.scrollTop === 0 && hasNextPage && fetchNextPage && !isLoading && !isFetching) {
+            isScrollLoad.current = true;
+            prevScrollHeight.current = parent.scrollHeight;
+            fetchNextPage();
+        }
+    }, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
+    (0, react_2.useEffect)(function () {
+        if (isSubmitting) {
+            hasSubmitted.current = true;
+        }
+    }, [isSubmitting]);
+    // This will handle the initial loading of messages, then scroll to bottom
+    (0, react_2.useEffect)(function () {
+        if (!isInitialized.current && !isFetching && scrollParent.current) {
+            var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
+            if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
+                fetchNextPage();
+                return;
+            }
+            isInitialized.current = true;
+            scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
+        }
+    }, [isFetching, isInitialized.current, hasNextPage, fetchNextPage]);
+    // Sets up the scroll event listener
+    (0, react_2.useEffect)(function () {
+        if (scrollParent.current) {
+            scrollParent.current.addEventListener('scroll', handleScrollEvent);
+        }
+        return function () {
+            if (scrollParent.current) {
+                scrollParent.current.removeEventListener('scroll', handleScrollEvent);
+            }
+        };
+    }, [scrollParent.current, hasNextPage, fetchNextPage, isLoading, isFetching]);
+    // Handles the scroll position adjustment after fetching the next page
+    (0, react_2.useEffect)(function () {
+        if (!isFetching &&
+            isInitialized.current &&
+            scrollParent.current &&
+            isScrollLoad.current &&
+            prevScrollHeight.current &&
+            scrollParent.current.scrollHeight !== prevScrollHeight.current) {
+            var delta = scrollParent.current.scrollHeight - prevScrollHeight.current;
+            scrollParent.current.scrollTo(0, delta);
+            isScrollLoad.current = false;
+            prevScrollHeight.current = 0;
+        }
+    }, [isFetching, prevScrollHeight.current]);
+    // Manages scroll position for data changes that are triggered from anything other than the scroll event
+    (0, react_2.useEffect)(function () {
+        var _a;
+        if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
+            var _b = scrollParent.current, scrollHeight = _b.scrollHeight, scrollTop = _b.scrollTop, clientHeight = _b.clientHeight;
+            if (isFetching) {
+                // track the current position
+                prevScrollHeight.current = scrollHeight;
+                prevScrollTop.current = scrollTop;
+                var distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+                if (!isSubmitting && distanceFromBottom > 200) {
+                    shouldScrollToPrevPosition.current = true;
+                }
+            }
+            else {
+                // init to scroll to bottom delta
+                var delta = scrollHeight - clientHeight;
+                if (hasSubmitted.current) {
+                    // scroll to bottom if this was triggered by the current user's sent message
+                    (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, delta);
+                }
+                else if (!isFetching && prevScrollHeight.current !== null && prevScrollTop.current !== null) {
+                    if (shouldScrollToPrevPosition.current) {
+                        delta = prevScrollTop.current;
+                    }
+                    scrollParent.current.scrollTo(0, delta);
+                }
+                // clean up
+                prevScrollHeight.current = null;
+                prevScrollTop.current = null;
+                hasSubmitted.current = false;
+                shouldScrollToPrevPosition.current = false;
+            }
+        }
+    }, [isFetching, (_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.scrollHeight]);
     return ((0, react_1.jsx)("div", { ref: scrollParent, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        box-sizing: border-box;\n        height: calc(100% - ", "px);\n        width: 100%;\n        padding: 0.5rem 1rem;\n        overflow-y: auto;\n      "], ["\n        box-sizing: border-box;\n        height: calc(100% - ", "px);\n        width: 100%;\n        padding: 0.5rem 1rem;\n        overflow-y: auto;\n      "])), inputHeight) },
-        (0, react_1.jsx)(InfiniteScroll_1.default, { scrollParent: scrollParent, isReverse: true, isLoading: isLoading, isFetching: isFetching, hasNextPage: hasNextPage, fetchNextPage: fetchNextPage }, messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }))));
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column-reverse;\n          justify-content: flex-start;\n          align-items: flex-start;\n        "], ["\n          display: flex;\n          flex-direction: column-reverse;\n          justify-content: flex-start;\n          align-items: flex-start;\n        "]))) },
+            messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }),
+            hasNextPage && ((0, react_1.jsx)("div", { key: "loader", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              width: 100%;\n              margin: 0.5rem 0;\n              height: auto;\n              display: flex;\n              justify-content: center;\n              align-items: center;\n\n              && {\n                visibility: ", ";\n              }\n            "], ["\n              width: 100%;\n              margin: 0.5rem 0;\n              height: auto;\n              display: flex;\n              justify-content: center;\n              align-items: center;\n\n              && {\n                visibility: ", ";\n              }\n            "])), isFetching && isScrollLoad ? 'visible' : 'hidden') },
+                (0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true }))))));
 }
 exports.default = MessageThread;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.41",
+  "version": "2.0.45",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/lib/TempHooks.d.ts

@@ -1,9 +0,0 @@
-import { RefObject } from 'react';
-interface UseInfiniteScrollProps {
-    parentEl?: RefObject<HTMLDivElement>;
-    isLoading?: boolean;
-    hasMore?: boolean;
-    loadMore?: () => Promise<void> | void;
-}
-export declare function useInfiniteScroll({ parentEl, isLoading, hasMore, loadMore }: UseInfiniteScrollProps): (node: any) => void;
-export {};

package/lib/TempHooks.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInfiniteScroll = void 0;
-var react_1 = require("react");
-function useInfiniteScroll(_a) {
-    var parentEl = _a.parentEl, isLoading = _a.isLoading, hasMore = _a.hasMore, loadMore = _a.loadMore;
-    var observer = (0, react_1.useRef)();
-    return (0, react_1.useCallback)(function (node) {
-        if (isLoading)
-            return;
-        if (observer.current)
-            observer.current.disconnect();
-        observer.current = new IntersectionObserver(function (entries) {
-            if (entries[0].isIntersecting && hasMore && loadMore) {
-                loadMore();
-            }
-        }, {
-            root: (parentEl === null || parentEl === void 0 ? void 0 : parentEl.current) || null,
-            threshold: 1.0,
-        });
-        if (node)
-            observer.current.observe(node);
-    }, [isLoading, hasMore, loadMore, parentEl]);
-}
-exports.useInfiniteScroll = useInfiniteScroll;

package/lib/components/InfiniteScroll/InfiniteScroll.d.ts

@@ -1,16 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { MutableRefObject, ReactElement } from 'react';
-interface Props {
-    children: ReactElement[];
-    scrollParent: MutableRefObject<HTMLDivElement | null>;
-    isLoading?: boolean;
-    isFetching?: boolean;
-    isReverse?: boolean;
-    hasNextPage?: boolean;
-    fetchNextPage?: () => Promise<any> | any;
-    Loader?: ReactElement;
-}
-export default function InfiniteScroll({ children, scrollParent, isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, Loader, }: Props): jsx.JSX.Element;
-export {};

package/lib/components/InfiniteScroll/InfiniteScroll.js

@@ -1,135 +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 __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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsxRuntime classic */
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
-var react_2 = require("react");
-var material_1 = require("@mui/material");
-function InfiniteScroll(_a) {
-    var children = _a.children, scrollParent = _a.scrollParent, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, Loader = _a.Loader;
-    var _b = __read((0, react_2.useState)(false), 2), isLoadMoreFetch = _b[0], setLoadMoreFetch = _b[1];
-    var scrollBody = (0, react_2.useRef)(null);
-    var loadMoreRef = useInfiniteScroll({
-        scrollParent: scrollParent,
-        scrollBody: scrollBody,
-        isReverse: isReverse,
-        isLoading: isLoading,
-        isFetching: isFetching,
-        hasNextPage: hasNextPage,
-        fetchNextPage: fetchNextPageAndSetFlag,
-    });
-    (0, react_2.useEffect)(function () {
-        if (!isFetching) {
-            setLoadMoreFetch(false);
-        }
-    }, [isFetching]);
-    function fetchNextPageAndSetFlag() {
-        if (fetchNextPage) {
-            fetchNextPage();
-            setLoadMoreFetch(true);
-        }
-    }
-    function renderLoader() {
-        if (!hasNextPage) {
-            return null;
-        }
-        if (Loader) {
-            return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
-                var css = _a.css;
-                return (0, react_2.cloneElement)(Loader, {
-                    ref: loadMoreRef,
-                    className: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                && {\n                  visibility: ", ";\n                }\n              "], ["\n                && {\n                  visibility: ", ";\n                }\n              "])), isFetching && isLoadMoreFetch ? 'visible' : 'hidden'),
-                });
-            }));
-        }
-        else {
-            return ((0, react_1.jsx)(DefaultLoader, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            && {\n              visibility: ", ";\n            }\n          "], ["\n            && {\n              visibility: ", ";\n            }\n          "])), isFetching && isLoadMoreFetch ? 'visible' : 'hidden'), ref: loadMoreRef }));
-        }
-    }
-    return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: ", ";\n        justify-content: flex-start;\n        align-items: flex-start;\n      "], ["\n        display: flex;\n        flex-direction: ", ";\n        justify-content: flex-start;\n        align-items: flex-start;\n      "])), isReverse ? 'column-reverse' : 'column'), ref: scrollBody },
-        children,
-        renderLoader()));
-}
-exports.default = InfiniteScroll;
-var DefaultLoader = (0, react_2.forwardRef)(function (_a, ref) {
-    var className = _a.className, style = _a.style;
-    return ((0, react_1.jsx)("div", { key: "loader", className: className, style: style, ref: ref, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: 100%;\n        margin: 0.5rem 0;\n        height: auto;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      "], ["\n        width: 100%;\n        margin: 0.5rem 0;\n        height: auto;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      "]))) },
-        (0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true })));
-});
-function useInfiniteScroll(_a) {
-    var _b, _c;
-    var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage;
-    var prevPosition = (0, react_2.useRef)();
-    var observer = (0, react_2.useRef)();
-    var _d = __read((0, react_2.useState)(false), 2), isScrollInit = _d[0], setScrollInit = _d[1];
-    var hasScrollbar = (0, react_2.useMemo)(function () {
-        if (scrollParent.current && scrollBody.current) {
-            return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
-        }
-        return false;
-    }, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
-    (0, react_2.useEffect)(function () {
-        if (!isLoading && hasScrollbar) {
-            prevPosition.current = null;
-            scrollToStart();
-        }
-    }, [isLoading, hasScrollbar]);
-    function scrollToStart() {
-        var _a;
-        var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
-        var scrollToValue = isReverse ? scrollHeight : 0;
-        (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, scrollToValue);
-        setScrollInit(true);
-    }
-    // this callback is used and fired based on the state of the element it is attached to
-    return (0, react_2.useCallback)(function (node) {
-        if (isLoading || isFetching) {
-            return;
-        }
-        if (observer.current) {
-            observer.current.disconnect();
-        }
-        observer.current = new IntersectionObserver(function (entries) {
-            if (entries[0].isIntersecting && hasNextPage && fetchNextPage) {
-                if (scrollBody.current && isReverse && isScrollInit) {
-                    // save the last element, so that we can scroll to it after the new data loads in
-                    prevPosition.current = scrollBody.current.clientHeight;
-                }
-                // load the next page
-                fetchNextPage();
-            }
-        }, {
-            root: (scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) || null,
-            threshold: 1.0,
-        });
-        if (node) {
-            if (isReverse && scrollParent.current && prevPosition.current != null) {
-                // If we had a prev position, then we want to scroll to it
-                scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
-                prevPosition.current = null;
-            }
-            observer.current.observe(node);
-        }
-    }, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit]);
-}
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/InfiniteScroll/index.d.ts

@@ -1 +0,0 @@
-export { default } from './InfiniteScroll';

package/lib/components/InfiniteScroll/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 InfiniteScroll_1 = require("./InfiniteScroll");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InfiniteScroll_1).default; } });

package/lib/components/blueprint/InputGroup/InputGroup.d.ts

@@ -1,20 +0,0 @@
-import { ChangeEvent } from 'react';
-import { IIntentProps, IInputGroupProps } from '@blueprintjs/core';
-interface Props {
-    id?: string;
-    className?: string;
-    disabled?: boolean;
-    fill?: boolean;
-    helperText?: string;
-    intent?: IIntentProps['intent'];
-    label?: string;
-    labelInfo?: string;
-    name?: string;
-    onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
-    placeholder?: string;
-    type?: string;
-    value: IInputGroupProps['value'];
-    hideCharCount?: boolean;
-}
-export default function InputGroup(props: Props): JSX.Element;
-export {};

package/lib/components/blueprint/InputGroup/InputGroup.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var core_1 = require("@blueprintjs/core");
-function InputGroup(props) {
-    var id = props.id, className = props.className, disabled = props.disabled, fill = props.fill, helperText = props.helperText, intent = props.intent, label = props.label, labelInfo = props.labelInfo, name = props.name, onChange = props.onChange, placeholder = props.placeholder, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value;
-    return (react_1.default.createElement(core_1.FormGroup, { className: className, helperText: helperText, intent: intent, label: label, labelFor: id, labelInfo: labelInfo, disabled: disabled },
-        react_1.default.createElement(core_1.InputGroup, { fill: fill, id: id, intent: intent, name: name, onChange: onChange, placeholder: placeholder, type: type, value: value })));
-}
-exports.default = InputGroup;

package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const InputGroup: () => JSX.Element;

package/lib/components/blueprint/InputGroup/InputGroup.story.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var addon_actions_1 = require("@storybook/addon-actions");
-var InputGroup_1 = __importDefault(require("./InputGroup"));
-exports.InputGroup = function () {
-    return (react_1.default.createElement(InputGroup_1.default, { name: "name", label: "First Name", labelInfo: "(required)", value: "", intent: "danger", onChange: addon_actions_1.action('changed') }));
-};

package/lib/components/blueprint/InputGroup/index.d.ts

@@ -1 +0,0 @@
-export { default } from './InputGroup';

package/lib/components/blueprint/InputGroup/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var InputGroup_1 = require("./InputGroup");
-exports.default = InputGroup_1.default;

package/lib/components/blueprint/InputSelect/InputSelect.d.ts

@@ -1,51 +0,0 @@
-/// <reference types="react" />
-import { IIntentProps } from '@blueprintjs/core';
-import { ItemRenderer } from '@blueprintjs/select';
-import { SimpleEvent, InputValueRender, TagRender } from '../../../types/Component.types';
-declare type Props<T> = InputSuggestProps<T> | InputMultiSelectProps<T>;
-declare type InputSuggestProps<T> = {
-    type: 'suggest';
-    className?: string;
-    disabled?: boolean;
-    fill?: boolean;
-    helperText?: string;
-    id?: string;
-    inputValueRenderer: InputValueRender<T>;
-    intent?: IIntentProps['intent'];
-    itemRenderer?: ItemRenderer<T>;
-    items: T[];
-    uniqueKey: string | ((item: T) => string | number);
-    label?: string;
-    labelInfo?: string;
-    multi?: boolean;
-    name?: string;
-    onChange: (evt: SimpleEvent<T | T[]>) => void;
-    placeholder?: string;
-    selectedItem: T | null;
-    selectedItems?: undefined;
-    tagRenderer?: undefined;
-};
-declare type InputMultiSelectProps<T> = {
-    type: 'multiselect';
-    className?: string;
-    disabled?: boolean;
-    fill?: boolean;
-    helperText?: string;
-    id?: string;
-    inputValueRenderer: InputValueRender<T>;
-    intent?: IIntentProps['intent'];
-    itemRenderer?: ItemRenderer<T>;
-    items: T[];
-    uniqueKey: string | ((item: T) => string | number);
-    label?: string;
-    labelInfo?: string;
-    multi?: boolean;
-    name?: string;
-    onChange: (evt: SimpleEvent<T | T[]>) => void;
-    placeholder?: string;
-    selectedItem?: undefined;
-    selectedItems: T[];
-    tagRenderer?: TagRender<T>;
-};
-export default function InputSelect<T>(props: Props<T>): JSX.Element;
-export {};

package/lib/components/blueprint/InputSelect/InputSelect.js

@@ -1,98 +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 __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var core_1 = require("@blueprintjs/core");
-var select_1 = require("@blueprintjs/select");
-var Select_service_1 = require("../../../services/Select.service");
-function InputSelect(props) {
-    var className = props.className, disabled = props.disabled, fill = props.fill, helperText = props.helperText, id = props.id, inputValueRenderer = props.inputValueRenderer, intent = props.intent, items = props.items, itemRenderer = props.itemRenderer, uniqueKey = props.uniqueKey, label = props.label, labelInfo = props.labelInfo, name = props.name, onChange = props.onChange, placeholder = props.placeholder, _a = props.selectedItem, selectedItem = _a === void 0 ? null : _a, tagRenderer = props.tagRenderer, type = props.type;
-    var _b = react_1.useState(''), query = _b[0], setQuery = _b[1];
-    var _c = react_1.useState(null), value = _c[0], setValue = _c[1];
-    var _d = react_1.useState([]), values = _d[0], setValues = _d[1];
-    react_1.useEffect(function () {
-        if (value !== selectedItem) {
-            setValue(selectedItem);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedItem]);
-    function handleOnChange(value, _) {
-        var newValue = null;
-        if (type === 'multiselect') {
-            if (isItemSelected(value)) {
-                newValue = values.filter(function (item) { return value !== item; });
-            }
-            else {
-                newValue = values.concat(value);
-            }
-            setValues(newValue);
-        }
-        else {
-            newValue = value;
-            setValue(newValue);
-        }
-        onChange({ target: { value: newValue, name: name } });
-    }
-    function handleOnTagRemove(_, index) {
-        var newValues = values.filter(function (_, valueIndex) { return index !== valueIndex; });
-        setValues(newValues);
-        onChange({ target: { value: newValues, name: name } });
-    }
-    function handleOnClear() {
-        setValues([]);
-        onChange({ target: { value: [], name: name } });
-    }
-    function isItemSelected(item) {
-        return values.indexOf(item) !== -1;
-    }
-    function getCommonProps() {
-        return {
-            disabled: disabled,
-            fill: fill,
-            itemPredicate: Select_service_1.getFilter(inputValueRenderer),
-            itemRenderer: itemRenderer ||
-                Select_service_1.getItemRenderer(uniqueKey, inputValueRenderer, type === 'multiselect' ? isItemSelected : undefined),
-            items: items,
-            noResults: react_1.default.createElement(core_1.MenuItem, { disabled: true, text: "No results." }),
-            onItemSelect: handleOnChange,
-            onQueryChange: setQuery,
-            query: query,
-            popoverProps: { minimal: true },
-        };
-    }
-    function renderClearButton() {
-        return values.length > 0 ? (react_1.default.createElement(core_1.Button, { icon: "cross", minimal: true, onClick: handleOnClear })) : undefined;
-    }
-    function renderSelectComponent() {
-        switch (type) {
-            case 'multiselect': {
-                return (react_1.default.createElement(select_1.MultiSelect, __assign({}, getCommonProps(), { resetOnSelect: true, selectedItems: values, tagRenderer: tagRenderer || inputValueRenderer, tagInputProps: {
-                        onRemove: handleOnTagRemove,
-                        rightElement: renderClearButton(),
-                        tagProps: {},
-                    } })));
-            }
-            default:
-                return (react_1.default.createElement(select_1.Suggest, __assign({}, getCommonProps(), { inputProps: { intent: intent, placeholder: placeholder }, inputValueRenderer: inputValueRenderer, resetOnSelect: false, selectedItem: value })));
-        }
-    }
-    return (react_1.default.createElement(core_1.FormGroup, { className: className, helperText: helperText, intent: intent, label: label, labelFor: id, labelInfo: labelInfo, disabled: disabled }, renderSelectComponent()));
-}
-exports.default = InputSelect;

package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const InputSuggest: () => JSX.Element;
-export declare const InputMultiselect: () => JSX.Element;

package/lib/components/blueprint/InputSelect/InputSelect.story.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var InputSelect_1 = __importDefault(require("./InputSelect"));
-var addon_actions_1 = require("@storybook/addon-actions");
-var items = [
-    { firstName: 'Alvin', lastName: 'Kamara' },
-    { firstName: 'Michael', lastName: 'Thomas' },
-    { firstName: 'Todd', lastName: 'Gurley' },
-    { firstName: 'Raheem', lastName: 'Mostert' },
-    { firstName: 'Tyeke', lastName: 'Hill' },
-    { firstName: 'Frank', lastName: 'Gore' },
-    { firstName: 'Patrick', lastName: 'Willis' },
-];
-exports.InputSuggest = function () { return (react_1.default.createElement(InputSelect_1.default, { type: "suggest", label: "Football Players", name: "player", inputValueRenderer: function (item) { return item.firstName + " " + item.lastName; }, uniqueKey: "lastName", labelInfo: "(required)", helperText: "Please select a player.", intent: "danger", items: items, onChange: addon_actions_1.action('onChange'), placeholder: "Select football player", selectedItem: null })); };
-exports.InputMultiselect = function () { return (react_1.default.createElement(InputSelect_1.default, { type: "multiselect", label: "Football Players", name: "player", inputValueRenderer: function (item) { return item.firstName + " " + item.lastName; }, uniqueKey: "lastName", labelInfo: "(required)", helperText: "Please select a player.", intent: "danger", items: items, onChange: addon_actions_1.action('onChange'), placeholder: "Select football player", selectedItems: [] })); };

package/lib/components/blueprint/InputSelect/index.d.ts

@@ -1 +0,0 @@
-export { default } from './InputSelect';

package/lib/components/blueprint/InputSelect/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var InputSelect_1 = require("./InputSelect");
-exports.default = InputSelect_1.default;

package/lib/components/blueprint/InputTime/InputTime.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { IIntentProps } from '@blueprintjs/core';
-import { TimePrecision } from '@blueprintjs/datetime';
-import { SimpleEvent } from '../../../types/Component.types';
-interface Props {
-    className?: string;
-    disabled?: boolean;
-    fill?: boolean;
-    helperText?: string;
-    intent?: IIntentProps['intent'];
-    label?: string;
-    labelInfo?: string;
-    maxTime?: Date;
-    minTime?: Date;
-    name?: string;
-    onChange: (evt: SimpleEvent<Date>) => void;
-    precision?: TimePrecision;
-    selectAllOnFocus?: boolean;
-    showArrowButtons?: boolean;
-    value: Date | null;
-    useAmPm?: boolean;
-}
-export default function InputTime(props: Props): JSX.Element;
-export {};

package/lib/components/blueprint/InputTime/InputTime.js

@@ -1,28 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var core_1 = require("@blueprintjs/core");
-var datetime_1 = require("@blueprintjs/datetime");
-function InputTime(props) {
-    var className = props.className, disabled = props.disabled, helperText = props.helperText, intent = props.intent, label = props.label, labelInfo = props.labelInfo, maxTime = props.maxTime, minTime = props.minTime, name = props.name, onChange = props.onChange, precision = props.precision, selectAllOnFocus = props.selectAllOnFocus, showArrowButtons = props.showArrowButtons, useAmPm = props.useAmPm;
-    var _a = react_1.useState(undefined), value = _a[0], setValue = _a[1];
-    react_1.useEffect(function () {
-        if (props.value) {
-            setValue(props.value);
-        }
-    }, []);
-    function handleOnChange(time) {
-        setValue(time);
-        onChange({ target: { name: name, value: time } });
-    }
-    return (react_1.default.createElement(core_1.FormGroup, { className: className, helperText: helperText, intent: intent, label: label, labelInfo: labelInfo, disabled: disabled },
-        react_1.default.createElement(datetime_1.TimePicker, { disabled: disabled, onChange: handleOnChange, maxTime: maxTime, minTime: minTime, precision: precision, selectAllOnFocus: selectAllOnFocus, showArrowButtons: showArrowButtons, value: value, useAmPm: useAmPm })));
-}
-exports.default = InputTime;

package/lib/components/blueprint/InputTime/InputTime.story.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const InputTime: () => JSX.Element;

package/lib/components/blueprint/InputTime/InputTime.story.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var addon_actions_1 = require("@storybook/addon-actions");
-var InputTime_1 = __importDefault(require("./InputTime"));
-exports.InputTime = function () {
-    return (react_1.default.createElement(InputTime_1.default, { name: "time", label: "Bedtime", labelInfo: "(required)", value: null, onChange: addon_actions_1.action('changed') }));
-};

package/lib/components/blueprint/InputTime/index.d.ts

@@ -1 +0,0 @@
-export { default } from './InputTime';

package/lib/components/blueprint/InputTime/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var InputTime_1 = require("./InputTime");
-exports.default = InputTime_1.default;

package/lib/services/Select.service.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { IItemRendererProps } from '@blueprintjs/select';
-import { UniqueKey, InputValueRender } from 'types/Component.types';
-export declare function getFilter<T>(inputValueRenderer: InputValueRender<T>): (query: string, item: T, index?: number | undefined, exactMatch?: boolean | undefined) => boolean;
-export declare function getItemRenderer<T>(uniqueKey: UniqueKey<T>, inputValueRenderer: InputValueRender<T>, isItemSelected?: (item: T) => boolean): (item: T, { handleClick, modifiers, query }: IItemRendererProps) => JSX.Element | null;

package/lib/services/Select.service.js

@@ -1,67 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var core_1 = require("@blueprintjs/core");
-function escapeRegExpChars(text) {
-    return text.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
-}
-function highlightText(text, query) {
-    var lastIndex = 0;
-    var words = query
-        .split(/\s+/)
-        .filter(function (word) { return word.length > 0; })
-        .map(escapeRegExpChars);
-    if (words.length === 0) {
-        return [text];
-    }
-    var regexp = new RegExp(words.join('|'), 'gi');
-    var tokens = [];
-    while (true) {
-        var match = regexp.exec(text);
-        if (!match) {
-            break;
-        }
-        var length_1 = match[0].length;
-        var before = text.slice(lastIndex, regexp.lastIndex - length_1);
-        if (before.length > 0) {
-            tokens.push(before);
-        }
-        lastIndex = regexp.lastIndex;
-        tokens.push(react_1.default.createElement("strong", { key: lastIndex }, match[0]));
-    }
-    var rest = text.slice(lastIndex);
-    if (rest.length > 0) {
-        tokens.push(rest);
-    }
-    return tokens;
-}
-function getFilter(inputValueRenderer) {
-    return function filterItems(query, item, index, exactMatch) {
-        return exactMatch
-            ? inputValueRenderer(item).toLowerCase() === query.toLowerCase()
-            : inputValueRenderer(item).toLowerCase().includes(query.toLowerCase());
-    };
-}
-exports.getFilter = getFilter;
-function getItemRenderer(uniqueKey, inputValueRenderer, isItemSelected) {
-    return function renderItem(item, _a) {
-        var handleClick = _a.handleClick, modifiers = _a.modifiers, query = _a.query;
-        if (!modifiers.matchesPredicate) {
-            return null;
-        }
-        var text = inputValueRenderer(item);
-        var key = null;
-        if (typeof uniqueKey === 'string') {
-            // @ts-ignore
-            key = item[uniqueKey];
-        }
-        else if (typeof uniqueKey === 'function') {
-            key = uniqueKey(item);
-        }
-        return (react_1.default.createElement(core_1.MenuItem, { active: modifiers.active, icon: isItemSelected && isItemSelected(item) ? 'tick' : 'blank', disabled: modifiers.disabled, label: undefined, key: key, onClick: handleClick, text: highlightText(text, query) }));
-    };
-}
-exports.getItemRenderer = getItemRenderer;