@vendorflow/components 2.0.45 → 2.0.49

package/lib/TempHooks.d.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,25 @@
+"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

@@ -0,0 +1,16 @@
+/** @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

@@ -0,0 +1,159 @@
+"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, _d, _e;
+    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 _f = __read((0, react_2.useState)(false), 2), isScrollInit = _f[0], setScrollInit = _f[1];
+    var _g = __read((0, react_2.useState)(false), 2), isScrollLoad = _g[0], setScrollLoad = _g[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]);
+    // Ensures that when the chat initializes, it will scroll to the bottom
+    (0, react_2.useEffect)(function () {
+        if (!isLoading && hasScrollbar) {
+            prevPosition.current = null;
+            setScrollLoad(false);
+            scrollToStart();
+        }
+    }, [isLoading, hasScrollbar]);
+    // If a fetch happens that was not started by a scroll action (aka fetchNextPage),
+    // then this will track the prevPosition
+    (0, react_2.useEffect)(function () {
+        if (!isScrollLoad && scrollBody.current && isFetching) {
+            prevPosition.current = scrollBody.current.clientHeight;
+        }
+    }, [isFetching, isScrollLoad, (_d = scrollBody.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
+    // This will potentially scroll the page to the start when the page loads new data that did not
+    // originate from a fetchNextPage action
+    (0, react_2.useEffect)(function () {
+        if (!isScrollLoad &&
+            isReverse &&
+            scrollBody.current &&
+            prevPosition.current != null &&
+            scrollBody.current.clientHeight - prevPosition.current <= 200) {
+            prevPosition.current = null;
+            scrollToStart();
+        }
+    }, [isScrollLoad, (_e = scrollBody.current) === null || _e === void 0 ? void 0 : _e.clientHeight]);
+    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();
+                setScrollLoad(true);
+            }
+        }, {
+            root: (scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) || null,
+            threshold: 1.0,
+        });
+        if (node) {
+            if (isReverse && scrollParent.current && prevPosition.current != null && isScrollLoad) {
+                // 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;
+                setScrollLoad(false);
+            }
+            observer.current.observe(node);
+        }
+    }, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit, isScrollLoad]);
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/lib/components/InfiniteScroll/index.js

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,13 @@
+"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

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

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

@@ -0,0 +1,11 @@
+"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

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

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

@@ -0,0 +1,4 @@
+"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

@@ -0,0 +1,51 @@
+/// <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

@@ -0,0 +1,98 @@
+"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

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

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

@@ -0,0 +1,19 @@
+"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

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

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

@@ -0,0 +1,4 @@
+"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

@@ -0,0 +1,24 @@
+/// <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

@@ -0,0 +1,28 @@
+"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

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

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

@@ -0,0 +1,11 @@
+"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

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

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

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

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

@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export default function ActionsMenu(): jsx.JSX.Element;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var short_uuid_1 = __importDefault(require("short-uuid"));
+var hooks_1 = require("material-ui-popup-state/hooks");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var react_2 = require("react");
+function ActionsMenu() {
+    var popupId = (0, react_2.useRef)(short_uuid_1.default.generate());
+    var popupState = (0, hooks_1.usePopupState)({ variant: 'popover', popupId: popupId.current });
+    return ((0, react_1.jsx)("div", null,
+        (0, react_1.jsx)(material_1.Tooltip, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          font-size: 0.875rem;\n          background-color: #555;\n        "], ["\n          font-size: 0.875rem;\n          background-color: #555;\n        "]))), placement: "top", title: "Actions" },
+            (0, react_1.jsx)(material_1.IconButton, __assign({ css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            && {\n              background-color: transparent;\n            }\n          "], ["\n            && {\n              background-color: transparent;\n            }\n          "]))) }, (0, hooks_1.bindTrigger)(popupState)),
+                (0, react_1.jsx)(icons_material_1.MapsUgc, null))),
+        (0, react_1.jsx)(material_1.Menu, __assign({}, (0, hooks_1.bindMenu)(popupState), { anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'bottom', horizontal: 'right' } }),
+            (0, react_1.jsx)(material_1.MenuItem, null, "Template 1"),
+            (0, react_1.jsx)(material_1.MenuItem, null, "Template 2"),
+            (0, react_1.jsx)(material_1.MenuItem, null, "Template 3"))));
+}
+exports.default = ActionsMenu;
+var templateObject_1, templateObject_2;

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

@@ -40,6 +40,7 @@ var react_2 = require("react");
 var faker_1 = __importDefault(require("faker"));
 var short_uuid_1 = __importDefault(require("short-uuid"));
 var ChatInterface_1 = __importDefault(require("./ChatInterface"));
+var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
 // tslint:disable-next-line:no-console
 function ChatInterface() {
     var _a = __read((0, react_2.useState)(true), 2), isLoading = _a[0], setLoading = _a[1];
@@ -48,7 +49,7 @@ function ChatInterface() {
     var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
     var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
     (0, react_2.useEffect)(function () {
-        setMessages(new Array(5).fill(null).map(generateMessage));
+        setMessages(new Array(5).fill(null).map(generateMessage).concat([generateSystemMessage()]));
         setLoading(false);
         setFetching(false);
     }, []);
@@ -58,6 +59,16 @@ function ChatInterface() {
     function generateId() {
         return short_uuid_1.default.generate();
     }
+    function generateSystemMessage() {
+        return {
+            id: generateId(),
+            userId: Workspaces_constants_1.SYSTEM_IDENTITY_ID,
+            username: 'System',
+            initials: 'S',
+            timestamp: generateTimestamp(),
+            content: faker_1.default.lorem.sentence(5, 2),
+        };
+    }
     function generateMessage() {
         var user = faker_1.default.random.arrayElement([
             {

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

@@ -14,6 +14,7 @@ var react_2 = require("react");
 var react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
 var material_1 = require("@mui/material");
 var icons_material_1 = require("@mui/icons-material");
+var ActionsMenu_1 = __importDefault(require("./ActionsMenu"));
 var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
     var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, isSubmitting = _a.isSubmitting;
     function handleOnChange(_a) {
@@ -42,8 +43,11 @@ var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
                 var _a, _b;
                 return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n              'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            resize: none;\n            width: calc(100% - 3.5rem);\n            outline: 0 none transparent;\n            font-size: 16px;\n            margin: 0.5rem;\n            padding: 0.5rem;\n            box-sizing: border-box;\n            border-radius: 5px;\n            border-color: ", ";\n          "], ["\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n              'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            resize: none;\n            width: calc(100% - 3.5rem);\n            outline: 0 none transparent;\n            font-size: 16px;\n            margin: 0.5rem;\n            padding: 0.5rem;\n            box-sizing: border-box;\n            border-radius: 5px;\n            border-color: ", ";\n          "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(0, 0%, 89%)');
             }, placeholder: placeholder || 'Type your message here...', value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
-        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            height: 2rem;\n            width: 2rem;\n            padding-right: ", ";\n          "], ["\n            height: 2rem;\n            width: 2rem;\n            padding-right: ", ";\n          "])), isSubmitting ? '0.5rem' : '0.25rem') }, isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                height: 100%;\n                width: 100%;\n              "], ["\n                height: 100%;\n                width: 100%;\n              "]))), onClick: handleOnClickSend, disabled: isSubmitting },
-            (0, react_1.jsx)(icons_material_1.Send, null))))));
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            align-items: center;\n            padding-right: 0.5rem;\n            overflow: hidden;\n          "], ["\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            align-items: center;\n            padding-right: 0.5rem;\n            overflow: hidden;\n          "]))) },
+            (0, react_1.jsx)(ActionsMenu_1.default, null),
+            isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                margin: 8px;\n              "], ["\n                margin: 8px;\n              "]))), size: "1.5rem" })) : ((0, react_1.jsx)(material_1.Tooltip, { title: "Send Now", placement: "bottom" },
+                (0, react_1.jsx)(material_1.IconButton, { onClick: handleOnClickSend, disabled: isSubmitting },
+                    (0, react_1.jsx)(icons_material_1.Send, null)))))));
 });
 exports.default = MessageInput;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -27,6 +27,7 @@ var date_fns_1 = require("date-fns");
 var icons_material_1 = require("@mui/icons-material");
 var material_1 = require("@mui/material");
 var react_2 = require("react");
+var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
 function MessageItem(_a) {
     var userId = _a.userId, message = _a.message, colors = _a.colors;
     var _b = __read((0, react_2.useState)(getUnixTimestamp()), 2), displayUpdateAt = _b[0], setDisplayUpdateAt = _b[1];
@@ -56,7 +57,7 @@ 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            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
+                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            visibility: ", ";\n            background-color: ", ";\n          }\n        "], ["\n          && {\n            font-size: 1rem;\n            height: 2rem;\n            width: 2rem;\n            margin-right: 0.5rem;\n            visibility: ", ";\n            background-color: ", ";\n          }\n        "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hidden' : 'visible', 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%)');
             } }, message.initials === '' ? (0, react_1.jsx)(icons_material_1.Person, null) : message.initials),
@@ -64,7 +65,7 @@ function MessageItem(_a) {
             (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),
                 (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              display: inline-block;\n            "], ["\n              font-size: 0.75rem;\n              display: inline-block;\n            "]))) }, timeDisplay)),
-            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "], ["\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "]))) }, message.content))));
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            color: ", ";\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "], ["\n            color: ", ";\n            font-size: 0.875rem;\n            white-space: break-spaces;\n          "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hsl(0, 0%, 65%)' : 'inherit') }, message.content))));
 }
 exports.default = MessageItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,5 @@
+/// <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

@@ -0,0 +1,67 @@
+"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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.45",
+  "version": "2.0.49",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -46,7 +46,7 @@
     "@emotion/babel-plugin": "^11.3.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.0.3",
+    "@mui/icons-material": "^5.2.1",
     "@mui/lab": "^5.0.0-alpha.50",
     "@mui/material": "^5.0.3",
     "@mui/styles": "^5.0.1",
@@ -62,6 +62,7 @@
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
+    "@vendorflow/common": "^1.0.36",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.2.2",
@@ -96,6 +97,7 @@
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
     "lodash": "^4.17.15",
+    "material-ui-popup-state": "^2.0.0",
     "mini-css-extract-plugin": "0.9.0",
     "nanoid": "^3.1.30",
     "optimize-css-assets-webpack-plugin": "5.0.3",