@via-profit/ui-kit 0.1.0-rc.1

package/dist/Menu/index.js

@@ -0,0 +1,452 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const react_window_1 = require("react-window");
+const react_popper_1 = require("react-popper");
+const popper_options_1 = __importDefault(require("./popper-options"));
+const MenuItem_1 = __importDefault(require("./MenuItem"));
+const MenuWrapper_1 = __importDefault(require("./MenuWrapper"));
+const reducer_1 = __importStar(require("./reducer"));
+const Menu = react_1.default.forwardRef((props, ref) => {
+    const { items, value, isOpen, estimatedItemSize = 30, endThreshold = 10, thresholdPercent = 30, autofocusDelay = 250, autofocus = true, closeOutsideClick = true, overscanCount = 1, zIndex = 1, tabIndex = -1, portalNode = typeof window !== 'undefined' ? window.document.body : undefined, outerRef, listRef, anchorElement, multiple, popperOptions, onSelectItem, onEndReached, getOptionSelected, renderItem, onRequestClose, } = props;
+    const getSelectedIndexes = react_1.default.useCallback(() => {
+        const idx = new Set();
+        if (typeof value === 'object' && value !== null) {
+            if (typeof getOptionSelected === 'function') {
+                if (Array.isArray(value)) {
+                    value.forEach(v => {
+                        idx.add(items.findIndex(item => getOptionSelected({ item, value: v })));
+                    });
+                }
+                if (!Array.isArray(value)) {
+                    idx.add(items.findIndex(item => getOptionSelected({ item, value: value })));
+                }
+            }
+            if (Array.isArray(value)) {
+                value.forEach(v => {
+                    idx.add(items.findIndex(item => JSON.stringify(item) === JSON.stringify(v)));
+                });
+            }
+            else {
+                idx.add(items.findIndex(item => JSON.stringify(item) === JSON.stringify(value)));
+            }
+        }
+        return [...idx];
+    }, [getOptionSelected, items, value]);
+    const [domLoaded, setDomLoaded] = react_1.default.useState(false);
+    const [menuIsOpen, setMenuOpen] = react_1.default.useState(Boolean(isOpen));
+    const [currentAnchorElement, setAnchorElement] = react_1.default.useState(anchorElement);
+    const isOpenRef = react_1.default.useRef(menuIsOpen);
+    const dimensionsRef = react_1.default.useRef({ width: 0, height: 0 });
+    const sizeMapRef = react_1.default.useRef(new Map());
+    const listVirtRef = react_1.default.useRef(null);
+    const listOuterRef = react_1.default.useRef(null);
+    const menuWrapperRef = react_1.default.useRef(null);
+    const [{ selectedIndexes, markedIndex, hoveredIndex }, dispatch] = react_1.default.useReducer(reducer_1.default, Object.assign(Object.assign({}, reducer_1.defaultState), { selectedIndexes: getSelectedIndexes(), markedIndex: -1 }));
+    const selectedIndexesRef = react_1.default.useRef(selectedIndexes);
+    const [popperElement, setPopperElement] = react_1.default.useState(null);
+    const timeoutRef = react_1.default.useRef(null);
+    const { styles, attributes, forceUpdate } = (0, react_popper_1.usePopper)(currentAnchorElement, popperElement, popperOptions || popper_options_1.default);
+    /**
+     * Client render detection
+     */
+    react_1.default.useEffect(() => {
+        setDomLoaded(true);
+    }, []);
+    /**
+     * Scroll to first of selected item
+     */
+    const scrollToFirstSelected = react_1.default.useCallback(() => {
+        var _a;
+        const indexes = getSelectedIndexes();
+        // Sort array of indexes by DESC and get the index
+        const index = indexes.length ? [...indexes.sort()][0] : -1;
+        dispatch({
+            type: 'setMenuState',
+            payload: {
+                markedIndex: index,
+            },
+        });
+        (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index);
+    }, [getSelectedIndexes]);
+    /**
+     * Select specified item by index
+     */
+    const selectItem = react_1.default.useCallback((index) => {
+        const item = items[index];
+        if (!item) {
+            return;
+        }
+        if (typeof onSelectItem === 'function') {
+            // For multiple
+            if (multiple && Array.isArray(value)) {
+                const selItems = new Set(value);
+                if (selectedIndexes.includes(index)) {
+                    selItems.delete(item);
+                }
+                else {
+                    selItems.add(item);
+                }
+                onSelectItem([...selItems]);
+            }
+            else {
+                // For single
+                onSelectItem(item);
+            }
+        }
+    }, [items, onSelectItem, selectedIndexes, value, multiple]);
+    /**
+     * Highlight specified item by index
+     */
+    const highlightIndex = react_1.default.useCallback((index) => {
+        dispatch({
+            type: 'setMenuState',
+            payload: {
+                markedIndex: items[index] ? index : -1,
+            },
+        });
+    }, [items]);
+    const hightlightPrevItem = react_1.default.useCallback(() => {
+        var _a;
+        const index = Math.max(markedIndex - 1, 0);
+        highlightIndex(index);
+        (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index);
+    }, [markedIndex, highlightIndex]);
+    const hightlightNextItem = react_1.default.useCallback(() => {
+        var _a;
+        const index = Math.min(markedIndex + 1, items.length);
+        highlightIndex(index);
+        (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index);
+    }, [markedIndex, items.length, highlightIndex]);
+    const hightlightFirstItem = react_1.default.useCallback(() => {
+        var _a;
+        const index = 0;
+        highlightIndex(index);
+        (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index);
+    }, [highlightIndex]);
+    const hightlightLastItem = react_1.default.useCallback(() => {
+        var _a;
+        const index = items.length - 1;
+        highlightIndex(index);
+        (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index);
+    }, [highlightIndex, items.length]);
+    const selectHightlightedItem = react_1.default.useCallback(() => {
+        if (markedIndex > -1) {
+            selectItem(markedIndex);
+        }
+    }, [markedIndex, selectItem]);
+    /**
+     * API
+     */
+    react_1.default.useImperativeHandle(ref, () => ({
+        focus: () => { var _a; return (_a = menuWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        scrollToItem: (index, align) => { var _a; return (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align); },
+        scrollTo: (scrollOffset) => { var _a; return (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(scrollOffset); },
+        scrollToFirstSelected,
+        selectItem: selectItem,
+        updatePopper: () => typeof forceUpdate === 'function' && forceUpdate(),
+        highlightIndex,
+        hightlightPrevItem,
+        hightlightNextItem,
+        hightlightFirstItem,
+        hightlightLastItem,
+        selectHightlightedItem,
+    }), [
+        scrollToFirstSelected,
+        selectItem,
+        highlightIndex,
+        hightlightPrevItem,
+        hightlightNextItem,
+        hightlightFirstItem,
+        hightlightLastItem,
+        selectHightlightedItem,
+        forceUpdate,
+    ]);
+    /**
+     * To write row height (size in px) into the cached map
+     * and fire re-render action of virtualized list
+     */
+    const setRowHeight = react_1.default.useCallback((index, height) => {
+        var _a;
+        sizeMapRef.current.set(index, height);
+        (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(index);
+    }, []);
+    /**
+     * Update achnor
+     */
+    react_1.default.useEffect(() => {
+        if (anchorElement !== currentAnchorElement) {
+            setAnchorElement(anchorElement);
+        }
+    }, [anchorElement, currentAnchorElement]);
+    const dimensions = react_1.default.useMemo(() => {
+        const dimensions = Object.assign({}, dimensionsRef.current);
+        menuIsOpen;
+        const MAX_HEIGHT = 360;
+        const MIN_WIDTH = 200;
+        let size = 0;
+        for (let index = 0; index < items.length; index++) {
+            if (index > 60) {
+                break;
+            }
+            size += sizeMapRef.current.get(index) || estimatedItemSize;
+        }
+        if (size > 0) {
+            dimensions.height = Math.min(size, MAX_HEIGHT);
+        }
+        if (currentAnchorElement) {
+            dimensions.width = Math.max(currentAnchorElement.getBoundingClientRect().width, MIN_WIDTH);
+        }
+        dimensionsRef.current = dimensions;
+        return dimensions;
+    }, [currentAnchorElement, items, estimatedItemSize, menuIsOpen]);
+    const onScroll = react_1.default.useCallback(({ scrollOffset, scrollDirection }) => {
+        if (typeof onEndReached !== 'function') {
+            return;
+        }
+        // Detect the end of the reached
+        if (listOuterRef.current && scrollDirection === 'forward') {
+            // The threshold is the number of items from the end of the list,
+            // upon reaching which the additional loading of new items will begin
+            const threshold = (endThreshold / 100) * thresholdPercent;
+            // const threshold = 10;
+            const offset = listOuterRef.current.scrollHeight - listOuterRef.current.clientHeight;
+            const lastItemsHeight = Array.from(items)
+                .slice(-threshold)
+                .reduce((totalHeight, _edge, index) => totalHeight + (sizeMapRef.current.get(index) || estimatedItemSize), 0);
+            if (scrollOffset >= offset - lastItemsHeight) {
+                onEndReached();
+            }
+        }
+    }, [onEndReached, endThreshold, thresholdPercent, items, estimatedItemSize]);
+    /**
+     * Keyboard events of menu list container.
+     * Note: Moved selection up and down while keys pressed
+     */
+    const listKeydownEvent = react_1.default.useCallback((event) => {
+        if (!menuIsOpen) {
+            return;
+        }
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Tab':
+                event.preventDefault();
+                if (markedIndex > -1) {
+                    selectItem(markedIndex);
+                }
+                break;
+            case 'ArrowUp':
+                {
+                    event.preventDefault();
+                    hightlightPrevItem();
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    event.preventDefault();
+                    hightlightNextItem();
+                }
+                break;
+            case 'Home':
+                {
+                    event.preventDefault();
+                    hightlightFirstItem();
+                }
+                break;
+            case 'End':
+                {
+                    event.preventDefault();
+                    hightlightLastItem();
+                }
+                break;
+            case 'PageUp':
+            case 'PageDown':
+            case 'Space':
+                event.preventDefault();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                onRequestClose(event);
+                break;
+            default:
+                // do nothing
+                break;
+        }
+    }, [
+        markedIndex,
+        menuIsOpen,
+        onRequestClose,
+        selectItem,
+        hightlightPrevItem,
+        hightlightNextItem,
+        hightlightFirstItem,
+        hightlightLastItem,
+    ]);
+    /**
+     * Invoked `renderItem` function if that passed,
+     * otherwise used another render method
+     */
+    const renderItemFn = react_1.default.useCallback(item => (typeof renderItem === 'function' ? renderItem(item) : JSON.stringify(item)), [renderItem]);
+    // eslint-disable-next-line arrow-body-style
+    react_1.default.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        const windowResizeEvent = (_event) => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(() => {
+                if (forceUpdate) {
+                    forceUpdate();
+                }
+            }, 100);
+        };
+        const mouseDownEvent = (event) => {
+            if (!menuIsOpen) {
+                return;
+            }
+            let parentElem = event.target;
+            let needToClose = true;
+            while (parentElem && 'parentNode' in parentElem) {
+                if (parentElem === popperElement) {
+                    needToClose = false;
+                    break;
+                }
+                parentElem = parentElem.parentNode;
+            }
+            if (needToClose) {
+                onRequestClose(event);
+            }
+        };
+        if (closeOutsideClick) {
+            window.document.addEventListener('mousedown', mouseDownEvent);
+        }
+        window.document.addEventListener('resize', windowResizeEvent);
+        return () => {
+            if (closeOutsideClick) {
+                window.document.removeEventListener('mousedown', mouseDownEvent);
+            }
+            window.document.removeEventListener('resize', windowResizeEvent);
+        };
+    }, [forceUpdate, menuIsOpen, popperElement, onRequestClose, closeOutsideClick]);
+    /**
+     * Toggle menu open
+     */
+    react_1.default.useEffect(() => {
+        var _a;
+        if (isOpenRef.current !== isOpen) {
+            isOpenRef.current = Boolean(isOpen);
+            setMenuOpen(Boolean(isOpen));
+            if (isOpen) {
+                scrollToFirstSelected();
+                if (autofocus) {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = menuWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, autofocusDelay);
+                }
+            }
+            // Reset indexes
+            if (!isOpen) {
+                (_a = listVirtRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(0);
+                dispatch({
+                    type: 'setMenuState',
+                    payload: {
+                        markedIndex: -1,
+                        hoveredIndex: -1,
+                    },
+                });
+            }
+        }
+    }, [
+        getSelectedIndexes,
+        scrollToFirstSelected,
+        isOpen,
+        autofocus,
+        popperElement,
+        autofocusDelay,
+    ]);
+    /**
+     * Mark selected items by values
+     */
+    react_1.default.useEffect(() => {
+        const indexes = getSelectedIndexes();
+        // If elements in selectedIndexesRef and indexes are not equale
+        if ((selectedIndexesRef.current.length === indexes.length &&
+            selectedIndexesRef.current.every(value => indexes.includes(value))) === false) {
+            selectedIndexesRef.current = indexes;
+            dispatch({
+                type: 'setMenuState',
+                payload: {
+                    selectedIndexes: indexes,
+                },
+            });
+        }
+    }, [value, getSelectedIndexes]);
+    return !domLoaded
+        ? null
+        : react_dom_1.default.createPortal(react_1.default.createElement("div", Object.assign({}, attributes.popper, { ref: setPopperElement, style: Object.assign(Object.assign({}, styles.popper), { zIndex }) }), menuIsOpen && (react_1.default.createElement(MenuWrapper_1.default, { isOpen: menuIsOpen, ref: menuWrapperRef, tabIndex: tabIndex, dimensions: dimensions, onKeyDown: listKeydownEvent },
+            react_1.default.createElement(react_window_1.VariableSizeList, { onScroll: onScroll, width: 300, height: 350, itemCount: items.length, overscanCount: overscanCount, itemSize: index => sizeMapRef.current.get(index) || estimatedItemSize, estimatedItemSize: estimatedItemSize, ref: elem => {
+                    listVirtRef.current = elem;
+                    if (listRef) {
+                        listRef.current = elem;
+                    }
+                }, outerRef: elem => {
+                    listOuterRef.current = elem;
+                    if (outerRef) {
+                        outerRef.current = elem;
+                    }
+                } }, ({ index, style }) => {
+                const item = items[index];
+                return (react_1.default.createElement(MenuItem_1.default, { index: index, style: style, setRowHeight: setRowHeight, selected: selectedIndexes.includes(index), hovered: hoveredIndex === index || markedIndex === index, onMouseEnter: () => {
+                        if (index !== hoveredIndex) {
+                            dispatch({
+                                type: 'setMenuState',
+                                payload: { hoveredIndex: index, markedIndex: -1 },
+                            });
+                        }
+                    }, onMouseLeave: () => {
+                        if (index === hoveredIndex) {
+                            dispatch({
+                                type: 'setMenuState',
+                                payload: { hoveredIndex: -1, markedIndex: -1 },
+                            });
+                        }
+                    }, onClick: () => selectItem(index) }, renderItemFn({ item, index })));
+            })))), typeof portalNode === 'function' ? portalNode() : portalNode || window.document.body);
+});
+Menu.displayName = 'Menu';
+exports.default = Menu;

package/dist/Menu/popper-options.d.ts

@@ -0,0 +1,4 @@
+import type { usePopper } from 'react-popper';
+export type PopperOptions = Parameters<typeof usePopper>[2];
+export declare const popperOptions: PopperOptions;
+export default popperOptions;

package/dist/Menu/popper-options.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperOptions = void 0;
+exports.popperOptions = {
+    placement: 'bottom',
+    modifiers: [
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 8],
+            },
+        },
+        {
+            name: 'flip',
+            enabled: true,
+            options: {
+                altBoundary: true,
+                padding: 8,
+            },
+        },
+        {
+            name: 'preventOverflow',
+            enabled: true,
+            options: {
+                altAxis: true,
+                altBoundary: true,
+                tether: true,
+                padding: 8,
+            },
+        },
+    ],
+};
+exports.default = exports.popperOptions;

package/dist/Menu/reducer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MenuState {
+    readonly selectedIndexes: readonly number[];
+    readonly markedIndex: number;
+    readonly hoveredIndex: number;
+}
+export type Actions = ActionSetMenuState;
+interface ActionSetMenuState {
+    readonly type: 'setMenuState';
+    readonly payload: Partial<MenuState>;
+}
+export declare const defaultState: MenuState;
+export declare const reducer: React.Reducer<MenuState, Actions>;
+export default reducer;

package/dist/Menu/reducer.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.defaultState = void 0;
+exports.defaultState = {
+    selectedIndexes: [],
+    markedIndex: -1,
+    hoveredIndex: -1,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setMenuState': {
+            return Object.assign(Object.assign({}, state), action.payload);
+        }
+        default:
+            return state;
+    }
+};
+exports.reducer = reducer;
+exports.default = exports.reducer;

package/dist/Modal/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/Modal/CloseIcon.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const CloseIcon = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
+    React.createElement("path", { style: {
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: 32,
+        }, d: "M368 368 144 144M368 144 144 368" })));
+const ForwardRef = (0, react_1.forwardRef)(CloseIcon);
+exports.default = ForwardRef;

package/dist/Modal/ModalConfirmBox.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import ReactModal from 'react-modal';
+export interface ModalConfirmBoxProps extends ReactModal.Props {
+    readonly title: string;
+    readonly message: React.ReactNode;
+    readonly onRequestYes: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalConfirmBoxProps & React.RefAttributes<ReactModal>>;
+export default _default;