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

package/dist/Menu/MenuItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 MenuItemInner_1 = __importDefault(require("./MenuItemInner"));
+const MenuItem = (props, ref) => {
+    const { style, setRowHeight, index, children, selected, hovered } = props, nativeProps = __rest(props, ["style", "setRowHeight", "index", "children", "selected", "hovered"]);
+    const itemRef = react_1.default.useRef(null);
+    const heightRef = react_1.default.useRef(0);
+    /**
+     * Update list of sizes if height changed
+     */
+    react_1.default.useEffect(() => {
+        if (itemRef.current) {
+            const height = itemRef.current.getBoundingClientRect().height;
+            if (heightRef.current !== height) {
+                heightRef.current = height;
+                setRowHeight(index, height);
+            }
+        }
+    }, [setRowHeight, index]);
+    return (react_1.default.createElement("div", { style: style },
+        react_1.default.createElement("div", Object.assign({}, nativeProps, { ref: el => {
+                itemRef.current = el;
+                if (ref && typeof ref === 'object') {
+                    ref.current = el;
+                }
+                if (ref && typeof ref === 'function') {
+                    ref(el);
+                }
+            } }),
+            react_1.default.createElement(MenuItemInner_1.default, { selected: selected, hovered: hovered }, children))));
+};
+exports.default = react_1.default.forwardRef(MenuItem);

package/dist/Menu/MenuItemInner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MenuItemInnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly selected: boolean;
+    readonly hovered: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<MenuItemInnerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/Menu/MenuItemInner.js

@@ -0,0 +1,48 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 styled_1 = __importDefault(require("@emotion/styled"));
+const InnerContainer = styled_1.default.div `
+  cursor: pointer;
+  user-select: none;
+  padding: 0.4em 0.8em;
+  transition: all 240ms ease-out;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
+  background-color: ${({ theme, selected, hovered }) => {
+    if (selected && hovered) {
+        return theme.colors.accentPrimary().darken(0.1).toString();
+    }
+    if (selected) {
+        return theme.colors.accentPrimary().toString();
+    }
+    if (hovered) {
+        return theme.colors.backgroundGrey().darken(0.04).toString();
+    }
+    return 'inherit';
+}};
+  color: ${({ theme, selected }) => {
+    if (selected) {
+        return theme.colors.accentPrimaryContrast().toString();
+    }
+    return 'inherit';
+}};
+`;
+const MenuItemInner = (props, ref) => {
+    const { children, selected, hovered } = props, nativeProps = __rest(props, ["children", "selected", "hovered"]);
+    return (react_1.default.createElement(InnerContainer, Object.assign({}, nativeProps, { selected: selected, hovered: hovered, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(MenuItemInner);

package/dist/Menu/MenuWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MenuWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly isOpen: boolean;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    };
+}
+declare const _default: React.ForwardRefExoticComponent<MenuWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/Menu/MenuWrapper.js

@@ -0,0 +1,77 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 styled_1 = __importDefault(require("@emotion/styled"));
+const StyledMenuWrapper = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  transition: visibility 120ms ease-out, opacity 120ms ease-out;
+  opacity: ${props => (props.$isOpen ? 1 : 0)};
+  visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  box-shadow: 0 4px 24px
+    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+  &:focus {
+    outline: none;
+  }
+  & ::-webkit-scrollbar {
+    width: 0.6rem;
+    height: 0.6rem;
+  }
+
+  & ::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  & ::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.isDark
+    ? theme.colors.backgroundPrimary().darken(0.1).toString()
+    : theme.colors.backgroundPrimary().darken(0.05).toString()};
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.isDark
+    ? theme.colors.backgroundSecondary().lighten(0.3).toString()
+    : theme.colors.backgroundSecondary().darken(0.3).toString()};
+    border-radius: 0.3rem;
+  }
+
+  & ::-webkit-scrollbar-thumb:horizontal:hover,
+  & ::-webkit-scrollbar-thumb:vertical:hover {
+    background: ${({ theme }) => theme.colors.accentPrimary().toString()};
+  }
+`;
+const MenuWrapperInner = styled_1.default.div `
+  padding: 0.4em;
+  box-sizing: content-box;
+  min-width: ${({ dimensions }) => dimensions.width}px;
+  min-height: ${({ dimensions }) => dimensions.height}px;
+`;
+const MenuWrapper = (props, ref) => {
+    const { isOpen, dimensions, children } = props, nativeProps = __rest(props, ["isOpen", "dimensions", "children"]);
+    const [isOpenState, setOpenState] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        setOpenState(isOpen);
+    }, [isOpen]);
+    return (react_1.default.createElement(StyledMenuWrapper, Object.assign({}, nativeProps, { ref: ref, "$isOpen": isOpenState }),
+        react_1.default.createElement(MenuWrapperInner, { dimensions: dimensions }, children)));
+};
+exports.default = react_1.default.forwardRef(MenuWrapper);

package/dist/Menu/index.d.ts

@@ -0,0 +1,196 @@
+import React from 'react';
+import { VariableSizeList as VirtualizedList } from 'react-window';
+import options from './popper-options';
+export interface MenuProps<T, Multiple extends boolean | undefined = undefined> {
+    /**
+     * List of items
+     */
+    readonly items: readonly T[];
+    /**
+     * Current value\
+     * If `Menu` component has `multiple` property then value must be an array of items
+     */
+    readonly value: Value<T, Multiple> | null;
+    /**
+     * Estimated item height. Need to calculate menu height\
+     * \
+     * **Default**: `50`
+     */
+    readonly estimatedItemSize?: number;
+    /**
+     * Menu open state
+     */
+    readonly isOpen?: boolean;
+    /**
+     * The threshold is the number of items from the end of the list,
+     * upon reaching which the additional loading of new items will begin\
+     * \
+     * **Default**: `10`
+     */
+    readonly endThreshold?: number;
+    /**
+     * The thresholdPercent is the persont of items from the end of the list in percents value\
+     * Dependent of `onEndReached` property\
+     * \
+     * **Default**: `30`
+     */
+    readonly thresholdPercent?: number;
+    /**
+     * Autofocus list after menu open\
+     * Dependent of `onEndReached` property\
+     * \
+     * **Default**: `true`
+     */
+    readonly autofocus?: boolean;
+    /**
+     * tabindex property for the list. Tabindex is required to be able to set focus on a list item\
+     * \
+     * **Default**: `-1`
+     */
+    readonly tabIndex?: number;
+    /**
+     * The delay in milliseconds before the focus moves to the list at the time of its opening.\
+     * Used only if `autofocus` property is true\
+     * \
+     * **Default**: `250`
+     */
+    readonly autofocusDelay?: number;
+    /**
+     * The number of items to render outside of the visible area. This property can be important for two reasons:
+     *
+     * - Overscanning by one row allows the tab key to focus on the next (not yet visible) item.
+     * - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.
+     *
+     * Note that overscanning too much can negatively impact performance.\
+     * \
+     * **Default**: `1`
+     */
+    readonly overscanCount?: number;
+    /**
+     * An HTML element. It's used to set the position of the menu.
+     */
+    readonly anchorElement: HTMLElement | null;
+    /**
+     * Close list if click outside of list\
+     * \
+     * **Default**: `true`
+     */
+    readonly closeOutsideClick?: boolean;
+    /**
+     * Allow the multiple selection
+     */
+    readonly multiple?: Multiple;
+    /**
+     * z-index property\
+     * \
+     * **Default**: `1`
+     */
+    readonly zIndex?: number;
+    /**
+     * @popperjs/core component options\
+     * \
+     * **Default**: used special preset
+     */
+    readonly popperOptions?: typeof options;
+    /**
+     * An element for the React.createPortal node\
+     * \
+     * **Default**: `document.body`
+     */
+    readonly portalNode?: (() => HTMLElement) | HTMLElement;
+    /**
+     * The reference of the outer list HTML element
+     */
+    readonly outerRef?: React.MutableRefObject<OuterListType | null>;
+    /**
+     * The API reference of the virtualized list
+     */
+    readonly listRef?: React.MutableRefObject<VirtualizedListType<T> | null>;
+    /**
+     * A function that determines which of the elements is currently selected
+     */
+    readonly getOptionSelected?: GetOptionSelected<T>;
+    /**
+     * The function that will be called when the list reaches the end
+     */
+    readonly onEndReached?: () => void;
+    /**
+     * Called when item selected
+     */
+    readonly onSelectItem?: OnSelectItem<T, Multiple>;
+    /**
+     * A function that renders each list item
+     */
+    readonly renderItem?: RenderItem<T>;
+    /**
+     * The function that will be called at the moment when you want to close the menu
+     */
+    readonly onRequestClose: OnRequestClose;
+}
+export type MenuRef<T> = {
+    /**
+     * Scroll to specified item index
+     */
+    scrollToItem: VirtualizedListType<T>['scrollToItem'];
+    /**
+     * Scroll by offset (px)
+     */
+    scrollTo: VirtualizedListType<T>['scrollTo'];
+    /**
+     * Scroll list to first of selected item
+     */
+    scrollToFirstSelected: () => void;
+    /**
+     * Select specified item by index
+     */
+    selectItem: (index: number) => void;
+    /**
+     * Hightlight specified item by index
+     */
+    highlightIndex: (index: number) => void;
+    /**
+     * Highlight the previous item relative to the currently highlighted one
+     */
+    hightlightPrevItem: () => void;
+    /**
+     * Highlight the next item relative to the currently highlighted one
+     */
+    hightlightNextItem: () => void;
+    /**
+     * Highlight the first item in list
+     */
+    hightlightFirstItem: () => void;
+    /**
+     * Highlight the last item in list
+     */
+    hightlightLastItem: () => void;
+    /**
+     * Select hightlighted item
+     */
+    selectHightlightedItem: () => void;
+    /**
+     * Force re-render popper element
+     */
+    updatePopper: () => void;
+    /**
+     * Force set focus to list
+     */
+    focus: () => void;
+};
+export type VirtualizedListType<T> = VirtualizedList<T>;
+export type OuterListType = HTMLDivElement;
+export type Value<T, Multiple> = Multiple extends undefined | undefined ? T : readonly T[];
+export type GetOptionSelected<T> = (payload: {
+    readonly item: T;
+    readonly value: T;
+}) => boolean;
+export type RenderItem<T> = (payload: {
+    readonly item: T;
+    readonly index: number;
+}) => React.ReactNode;
+export type OnSelectItem<T, Multiple extends boolean | undefined = undefined> = (value: Value<T, Multiple>) => void;
+export type OnRequestClose = (event?: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | KeyboardEvent | MouseEvent) => void;
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: MenuProps<T, Multiple> & {
+    ref?: React.Ref<MenuRef<T>> | undefined;
+}) => JSX.Element;
+export default _default;