@via-profit/ui-kit 0.1.0-rc.57 → 0.1.0-rc.59

package/Autocomplete/AutocompleteContainer.js

@@ -44,6 +44,7 @@ const Button_1 = __importDefault(require("../Button"));
 const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
 const context_1 = __importStar(require("./context"));
 const IconClear_1 = __importDefault(require("./IconClear"));
+const ClickOutside_1 = require("../ClickOutside");
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = react_1.default.useRef(null);
@@ -155,6 +156,27 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     react_1.default.useEffect(() => {
         dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading, filteredItems: items }));
     }, [isOpen, isLoading, items, dispatch]);
+    react_1.default.useEffect(() => {
+        const mouseDownEvent = (event) => {
+            var _a;
+            let parentElem = event.target;
+            let needToClose = true;
+            while (parentElem && 'parentNode' in parentElem) {
+                if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
+                    needToClose = false;
+                    break;
+                }
+                parentElem = parentElem.parentNode;
+            }
+            if (needToClose) {
+                onRequestClose(event);
+            }
+        };
+        window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
+        return () => {
+            window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
+        };
+    }, [onRequestClose, anchorElement]);
     return (react_1.default.createElement("div", null,
         react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)) }, nativeInputProps, { onKeyDown: event => {
                 inputKeydownEvent(event);
@@ -175,15 +197,6 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }
             }, value: inputValue, onBlur: event => {
                 isFocusedRef.current = false;
-                if (clearIfNotSelected) {
-                    dispatch((0, context_1.actionSetPartial)({
-                        inputValue: multiple
-                            ? ''
-                            : value !== null
-                                ? selectedItemToString(value)
-                                : '',
-                    }));
-                }
                 if (typeof nativeInputProps.onBlur === 'function') {
                     nativeInputProps.onBlur(event);
                 }
@@ -230,36 +243,45 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             anchorElement,
             dispatch,
             inputRef,
-            clearIfNotSelected,
-            multiple,
             nativeInputProps,
-            value,
-            selectedItemToString,
             onRequestOpen,
             onInputChange,
             filterItems,
             items,
         ]),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, closeOutsideClick: true, getOptionSelected: getOptionSelected, onSelectItem: item => {
+        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: item => {
                 if (typeof onChange === 'function') {
                     onChange(item);
                 }
             }, closeOnSelect: multiple ? false : true, onRequestClose: evt => {
+                if (clearIfNotSelected) {
+                    dispatch((0, context_1.actionSetPartial)({
+                        inputValue: multiple
+                            ? ''
+                            : value !== null
+                                ? selectedItemToString(value)
+                                : '',
+                    }));
+                }
                 if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
                     onRequestClose(evt);
                 }
             } }, ({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps))), [
-            anchorElement,
-            currentOpen,
-            currentValue,
-            filteredItems,
-            inputValue,
-            multiple,
             anchorPos,
-            children,
-            onRequestClose,
-            onChange,
+            multiple,
+            filteredItems,
+            currentValue,
+            currentOpen,
+            anchorElement,
             getOptionSelected,
+            onChange,
+            clearIfNotSelected,
+            dispatch,
+            value,
+            selectedItemToString,
+            onRequestClose,
+            children,
+            inputValue,
         ])));
 });
 Autocomplete.displayName = 'Autocomplete';

package/ClickOutside/index.d.ts

@@ -17,6 +17,7 @@ export interface ClickOutsideProps {
     readonly mouseEvent?: OutsideMouseEventName | false;
 }
 type OutsideMouseEventName = 'onClick' | 'onMouseDown' | 'onMouseUp';
+export declare const mouseEventMap: Record<OutsideMouseEventName, 'click' | 'mousedown' | 'mouseup'>;
 export type OnOutsideClick = (event?: React.MouseEvent<HTMLElement> | MouseEvent) => void;
 declare const ClickOutside: React.FC<ClickOutsideProps>;
 export default ClickOutside;

package/ClickOutside/index.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.mouseEventMap = void 0;
 const react_1 = __importDefault(require("react"));
-const mouseEventMap = {
+exports.mouseEventMap = {
     onClick: 'click',
     onMouseDown: 'mousedown',
     onMouseUp: 'mouseup',
@@ -28,11 +29,11 @@ const ClickOutside = props => {
             }
         };
         if (mouseEvent) {
-            window.document.addEventListener(mouseEventMap[mouseEvent], mouseDownEvent);
+            window.document.addEventListener(exports.mouseEventMap[mouseEvent], mouseDownEvent);
         }
         return () => {
             if (mouseEvent) {
-                window.document.removeEventListener(mouseEventMap[mouseEvent], mouseDownEvent);
+                window.document.removeEventListener(exports.mouseEventMap[mouseEvent], mouseDownEvent);
             }
         };
     }, [onOutsideClick, mouseEvent]);

package/Menu/MenuContainer.d.ts

@@ -185,6 +185,10 @@ export type MenuRef = {
      * Select highlighted item in list
      */
     selectHightlightedItem: () => void;
+    /**
+     * Returns the list HTML container
+     */
+    getListElement: () => HTMLDivElement | null;
 };
 export type Value<T, Multiple> = Multiple extends undefined | undefined ? T | null : readonly T[];
 export type GetOptionSelected<T> = (payload: {

package/Menu/MenuContainer.js

@@ -188,6 +188,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         scrollToFirstSelected: () => scrollToFirstSelected(),
         selectHightlightedItem: () => selectHightlightedItem(),
         selectItem: (idx) => selectItem(idx),
+        getListElement: () => menuListRef.current,
     }), [
         scrollToIndex,
         highlightIndex,

package/Surface/SurfaceFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SurfaceFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Surface/SurfaceFooter.js

@@ -0,0 +1,31 @@
+"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 StyledFooter = styled_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+`;
+const SurfaceFooter = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledFooter, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SurfaceFooter);

package/Surface/index.d.ts

@@ -3,12 +3,17 @@ import { SurfaceContainerProps } from './SurfaceContainer';
 import { SurfaceHeaderProps } from './SurfaceHeader';
 import { SurfaceSubheaderProps } from './SurfaceSubheader';
 import { SurfaceContentProps } from './SurfaceContent';
+import { SurfaceFooterProps } from './SurfaceFooter';
 export type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode | React.ReactNode[];
     /**
      * Header content
      */
     readonly header?: JSX.Element | string;
+    /**
+     * Footer content
+     */
+    readonly footer?: JSX.Element | string;
     /**
      * Subheader content
      */
@@ -39,6 +44,10 @@ export interface SurfaceOverrides {
      * Surface content component
      */
     readonly Content?: React.ForwardRefExoticComponent<SurfaceContentProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Surface footer component
+     */
+    readonly Footer?: React.ForwardRefExoticComponent<SurfaceFooterProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode | React.ReactNode[];
@@ -46,6 +55,10 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * Header content
      */
     readonly header?: string | JSX.Element | undefined;
+    /**
+     * Footer content
+     */
+    readonly footer?: string | JSX.Element | undefined;
     /**
      * Subheader content
      */

package/Surface/index.js

@@ -42,20 +42,24 @@ const SurfaceContainer_1 = __importDefault(require("./SurfaceContainer"));
 const SurfaceHeader_1 = __importDefault(require("./SurfaceHeader"));
 const SurfaceSubheader_1 = __importDefault(require("./SurfaceSubheader"));
 const SurfaceContent_1 = __importDefault(require("./SurfaceContent"));
+const SurfaceFooter_1 = __importDefault(require("./SurfaceFooter"));
 const Surface = (props, ref) => {
-    const { children, header, subheader, inline, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "inline", "overrides"]);
+    const { children, header, subheader, footer, inline, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "overrides"]);
+    const hasFooter = typeof footer !== 'undefined' && footer !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const hasSubheader = typeof subheader !== 'undefined' && subheader !== null;
     const overridesMap = React.useMemo(() => (Object.assign({ Container: SurfaceContainer_1.default,
         Header: SurfaceHeader_1.default,
         Subheader: SurfaceSubheader_1.default,
-        Content: SurfaceContent_1.default }, overrides)), [overrides]);
+        Content: SurfaceContent_1.default,
+        Footer: SurfaceFooter_1.default }, overrides)), [overrides]);
     if (!hasHeader && hasSubheader) {
         console.warn(`[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header`);
     }
     return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, ref: ref }),
         hasHeader && React.createElement(overridesMap.Header, null, header),
         hasSubheader && React.createElement(overridesMap.Subheader, null, subheader),
-        React.createElement(overridesMap.Content, null, children)));
+        React.createElement(overridesMap.Content, null, children),
+        hasFooter && React.createElement(overridesMap.Footer, null, footer)));
 };
 exports.default = React.forwardRef(Surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.57",
+  "version": "0.1.0-rc.59",
   "description": "UI Kit",
   "repository": {
     "type": "git",