kiban-design-system 1.1.9-hotfix.0 → 1.1.11-hotfix.0

package/dist/index.js

@@ -30541,6 +30541,7 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
     const [isFocusActive, setIsFocusActive] = useState(false);
     const [showPopover, setShowPopover] = useState(false);
     const handleOnBlur = () => {
+        setShowPopover(false);
         setIsFocusActive(false);
         if (onBlur)
             onBlur();
@@ -30551,6 +30552,7 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
         if (onFocus)
             onFocus();
     };
+    // eslint-disable-next-line max-len
     const handleOnChange = (event) => {
         const isValid = /^[0-9]+$/i.test(event.target.value) || event.target.value === '';
         if (isValid && onChange) {
@@ -30573,7 +30575,20 @@ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange
     }));
     const optionListMarkup = items.length > 0 ? (jsx(OptionList, { items: itemsOptions, selected: [''], onChange: handleOnSelectItem }, void 0)) : null;
     const emptyItemsMarkup = items.length === 0 ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__EmptyItems` }, { children: labelEmpty }), void 0)) : null;
-    const popoverMarkup = useMemo(() => (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: showPopover, isFullWidth: true, onClose: () => setShowPopover(false), isFixed: true }, { children: jsxs(Popover$1.Pane, { children: [optionListMarkup, emptyItemsMarkup] }, void 0) }), void 0)), [items, value, showPopover, isFocusActive]);
+    const popoverMarkup = useMemo(() => (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: showPopover, isFullWidth: true, onClose: () => setShowPopover(false), isFixed: true }, { children: jsxs(Popover$1.Pane, { children: [optionListMarkup, emptyItemsMarkup] }, void 0) }), items.length)), [
+        items,
+        value,
+        showPopover,
+        emptyItemsMarkup,
+        optionListMarkup,
+        isFocusActive,
+    ]);
+    useEffect(() => {
+        if (showPopover) {
+            setShowPopover(false);
+            requestAnimationFrame(() => setShowPopover(true));
+        }
+    }, [items]);
     return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Wrapper` }, { children: [labelMarkup, popoverMarkup] }), void 0));
 };