@via-profit/ui-kit 0.1.0-rc.72 → 0.1.0-rc.73

package/Autocomplete/AutocompleteContainer.d.ts

@@ -31,11 +31,13 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      */
     readonly isLoading?: boolean;
     /**
-     * Should the autocomplete element be cleared when blur and if no element is selected
+     * Should the autocomplete element be cleared when blur and if no element is selected\
+     * **Default:** `true`
      */
     readonly clearIfNotSelected?: boolean;
     /**
-     * Show clear button if clearable is true
+     * Show clear button if clearable is true\
+     * **Default:** `true`
      */
     readonly clearable?: boolean;
     /**

package/Autocomplete/AutocompleteContainer.js

@@ -168,13 +168,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     }, [filteredItems]);
     react_1.default.useEffect(() => {
         if (currentOpen !== isOpen || currentLoading !== isLoading) {
-            // console.debug('Use effect 1', { currentOpen: isOpen, currentLoading: isLoading });
             dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading }));
         }
     }, [isOpen, isLoading, dispatch, currentOpen, currentLoading]);
     react_1.default.useEffect(() => {
         if (JSON.stringify(items) !== JSON.stringify(itemsRef.current)) {
-            // console.debug('Use effect 2', { filteredItems: applyFilterForItems(inputValue, items) });
             itemsRef.current = items;
             dispatch((0, context_1.actionSetPartial)({ filteredItems: applyFilterForItems(inputValue, items) }));
         }
@@ -191,15 +189,34 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }
                 parentElem = parentElem.parentNode;
             }
+            // Click outside
             if (needToClose) {
-                onRequestClose(event);
+                if (clearIfNotSelected) {
+                    dispatch((0, context_1.actionSetPartial)({
+                        inputValue: currentValue === null
+                            ? ''
+                            : selectedItemToString(currentValue),
+                    }));
+                }
+                if (isOpen) {
+                    onRequestClose(event);
+                }
             }
         };
         window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
         return () => {
             window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
         };
-    }, [onRequestClose, anchorElement]);
+    }, [
+        onRequestClose,
+        anchorElement,
+        isOpen,
+        clearIfNotSelected,
+        dispatch,
+        value,
+        selectedItemToString,
+        currentValue,
+    ]);
     return (react_1.default.createElement(react_1.default.Fragment, 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: clearable ? (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))) : undefined }, nativeInputProps, { onKeyDown: event => {
                 inputKeydownEvent(event);
@@ -284,18 +301,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 if (typeof onChange === 'function') {
                     onChange(item);
                 }
-            }, closeOnSelect: multiple ? false : true, onRequestClose: evt => {
-                if (clearIfNotSelected) {
-                    dispatch((0, context_1.actionSetPartial)({
-                        inputValue: 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))), [
+            }, onRequestClose: onRequestClose, closeOnSelect: multiple ? false : true }, ({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps))), [
             anchorPos,
             multiple,
             filteredItems,
@@ -304,10 +310,6 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             anchorElement,
             getOptionSelected,
             onChange,
-            clearIfNotSelected,
-            dispatch,
-            value,
-            selectedItemToString,
             onRequestClose,
             children,
             inputValue,

package/Menu/MenuContainer.js

@@ -61,10 +61,8 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         }
         return [...idx];
     }, [getOptionSelected, items, multiple, value]);
-    // const [currentAnchorPos, setCurrentAnchorPos] = React.useState(anchorPos);
-    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 isOpenRef = react_1.default.useRef(isOpen);
     const menuListRef = react_1.default.useRef(null);
     const menuPopperRef = react_1.default.useRef(null);
     const { dispatch, state: { selectedIndexes, markedIndex, hoveredIndex }, } = (0, context_1.default)();
@@ -291,14 +289,17 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         return () => {
             window.document.removeEventListener('resize', windowResizeEvent);
         };
-    }, [menuIsOpen, onRequestClose, anchorElement, closeOutsideClick]);
+    }, [isOpen, onRequestClose, anchorElement, closeOutsideClick]);
     /**
      * Toggle menu open
      */
     react_1.default.useEffect(() => {
         if (isOpenRef.current !== isOpen) {
             isOpenRef.current = Boolean(isOpen);
-            setMenuOpen(Boolean(isOpen));
+            // setMenuOpen(Boolean(isOpen));
+            if (!isOpen) {
+                onRequestClose();
+            }
             if (isOpen) {
                 scrollToFirstSelected();
                 if (autofocus) {
@@ -314,7 +315,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
                 dispatch((0, context_1.actionSetmenuState)({ markedIndex: -1, hoveredIndex: -1 }));
             }
         }
-    }, [getSelectedIndexes, scrollToFirstSelected, isOpen, autofocus, dispatch]);
+    }, [getSelectedIndexes, scrollToFirstSelected, isOpen, autofocus, dispatch, onRequestClose]);
     /**
      * Mark selected items by values
      */

package/Menu/MenuItem.js

@@ -20,6 +20,8 @@ const react_2 = require("@emotion/react");
 const InnerContainer = styled_1.default.div `
   cursor: pointer;
   user-select: none;
+  display: flex;
+  align-items: center;
   padding: 0.4em 0.8em;
   transition: all 240ms ease-out;
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;

package/package.json

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