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

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/package.json

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